nightshift — Design System

Overview

nightshift is a Claude Code plugin that turns one terminal into a full AI software-delivery team — PM, architect, tech lead, engineers, QA — driven from the issue tracker. Tagline: "Your AI software team that ships while you sleep."

The design is nocturnal, calm, technical, no-hype. Audience is senior devs who live in the terminal and smell marketing instantly. Every artifact must feel credible, fast, technical — a premium dev-tool, never a generic SaaS splash. Lead with proof (terminal output, numbers), never adjectives.

The brand name is always lowercase — nightshift. Never "Nightshift" or "NightShift".

When to Use

• Building nightshift UI (production React, or static HTML mocks/slides/prototypes)
• Writing nightshift copy (landing page, docs, README, social)
• Producing brand assets (OG cards, banners, logo lockups)
• Any artifact that must match the brand

Two output modes (ask which if unclear):

1. Throwaway visual (slide, mock, prototype) → copy assets out, emit static HTML files the user can open.
2. Production code → read the token CSS + component sources, design as a brand expert.

If invoked with no guidance, ask what they want to build, ask a few sharp questions, then act as the expert designer.

Build workflow — follow every time

1. Load the relevant reference(s) below before writing any UI. Don't design from memory of this summary — the detail files carry exact values. Token values are authoritative in tokens/*.css, mirrored machine-readable in _ds_manifest.json — query the manifest for an exact hex, never guess one.
2. Use DS components (references/components.md) where they exist; hand-build only the rest, following references/patterns.md recipes. Never invent a value that has a token.
3. Start static mocks from templates/page-starter.html (inherits all tokens + signature motifs); diff against ui_kits/marketing + ui_kits/docs as the golden full-page references.
4. Gate before done: run npm run validate (token-drift + WCAG-AA contrast + oxlint), then walk references/adherence-checklist.md for the human-only checks. Every box passes or is deliberately N/A.

Reference files (read on demand)

The raw source of truth still lives in tokens/, components/, guidelines/, ui_kits/, assets/ — read those for deepest fidelity.

Content voice — match in every artifact

• Technical peer, not marketer. Confident, dry, specific. Lead with mechanism and proof.
• Person: "you" for the reader; "it"/"the agents" for the product. First person rare, only collective ("we").
• Casing: brand nightshift always lowercase. Agent/command names lowercase mono: product-manager, /auto, qa-engineer. Headings sentence case, never Title Case.
• Numbers as proof: "11 specialized agents," "10 slash commands," "install in 60 seconds." Concrete counts beat adjectives.
• Structure: thesis → mechanism → proof. Claim it, explain how, then show terminal output.
• Mono for anything you'd type: commands, agent names, file paths, branch names, Conventional Commit lines → JetBrains Mono. That's the "terminal texture."
• Signature phrases: "ships while you sleep," "a team, not a megaprompt," "generic agents, per-repo config," "the lifecycle is the product," "spec before plan, plan before code, review before merge, tests as the gate."
• Emoji: sparingly. The 🌙 moon is the one brand glyph. In product UI prefer the SVG moon mark + mono // eyebrows over emoji. Never sprinkle emoji through body copy.
• Don't: over-claim ("replaces your team"), use empty intensifiers ("powerful/revolutionary"), or Title-Case the brand.

Design tokens (quick reference)

Import the single entry point: styles.css (@import manifest of tokens/*.css). Use semantic aliases in components, not raw scale values. Exact hex values are not listed here on purpose — they live once in tokens/colors.css (mirrored in _ds_manifest.json); read them there so this summary can't drift. npm run check:tokens fails the build if any doc hex stops matching the CSS.

Color — dark-mode-first (semantic aliases — use these, not raw scale)

Exact values + raw scale (--night-*, --terra-*, --moon-*, --indigo-*) → references/tokens.md or tokens/colors.css.

Type — Inter + JetBrains Mono

• --font-sans Inter — display, headings, body. --font-mono JetBrains Mono — code, labels, UI chrome, eyebrows.
• Display: --fw-extra (800), tracking --tracking-tight (-0.02em).
• Signature eyebrow: mono, uppercase, terracotta, --tracking-eyebrow (0.16em) — e.g. // HOW IT WORKS.
• Scale: --text-2xs11 · xs12 · sm13 · base15 · md17 · lg20 · xl25 · 2xl32 · 3xl42 · 4xl56 · 5xl72 · 6xl92 (px).
• Leading: tight1.06 snug1.22 normal1.5 relaxed1.65.

Spacing / radius / elevation / motion

• Spacing: 4px base — --space-1..32 (4,8,12,16,20,24,32,40,48,64,80,96,128).
• Radius: SHARP — all --radius-* are 0 (site override at the token layer); only true circles use --radius-round: 50% (star dots, gate rings, traffic lights, status dots). Retired scale: 4/6/10/14/20/28/999.
• Elevation: deep soft shadows --elev-1..4. On dark, always pair shadow with a 1px hairline — shadow alone won't read.
• Glow (the "light in the dark"): --glow-accent (terracotta, primary buttons + active pipeline stages), --glow-cool (indigo focus), --glow-focus (3px indigo ring — always visible, never removed).
• Motion: --ease-out cubic-bezier(.22,1,.36,1) at --dur-fast120 / --dur-base200 / --dur-slow360ms. Restrained, quick.
• Layout: --container-max1200 · --container-prose720 · --nav-height64.

Components

React, namespace window.NightshiftDesignSystem_983007. Each component has a .d.ts + .prompt.md (read for full API); each group a *.card.html specimen.

Button example — variants primary (filled terracotta + glow) · secondary (raised + hairline) · ghost (text, fills on hover) · danger (red outline); sizes sm|md|lg; props mono (command labels), loading, disabled, iconLeft/iconRight, fullWidth:

<Button variant="primary" size="md">Install plugin</Button>
<Button variant="ghost" mono>/auto</Button>

Signature moves (do these to read as nightshift)

• Mono // uppercase eyebrows in terracotta above section headings.
• The terminal window surface (traffic-light dots, --surface-terminal) with streaming /auto pipeline output — lines reveal one at a time, then loop. The one "alive" motion.
• Faint starfield (tiny low-opacity radial dots) + soft moon glow (single blurred terracotta/indigo radial) behind heroes. No photography, no loud gradients.
• Glow on primary buttons and active pipeline stages.
• Hairline border on every card — --surface-card fill, sharp corners (radius 0), deep soft shadow, hairline does the separating. Featured cards get accent ring + glow.
• Hover lifts (translateY(-1px) buttons, -2px cards) + warms border to accent.
• Unicode flow glyphs from the terminal: → ↓ ✓ ✗ ● ▌ ⌘ //. Real UI icons → Lucide (1.5px stroke, CDN) — a documented substitution; source ships no icon set.
• Brand mark: crescent-moon assets/logomark.svg (terracotta crescent, soft glow, two stars), 28px in nav.

Common mistakes

• Title-casing the brand → always nightshift.
• Marketing adjectives ("powerful", "revolutionary") → show the /auto run instead.
• Shadow with no hairline on dark → invisible card edge. Always add the 1px border.
• Removing focus ring → keep --glow-focus always visible.
• Emoji in body UI → use the SVG moon mark + mono // eyebrows.
• Light-mode assumptions → this system is dark-first.

File index

• references/ — agent-facing digest: tokens.md, components.md, voice-and-content.md, patterns.md, adherence-checklist.md.
• templates/page-starter.html — copy-paste static page wired to the tokens + signature motifs.
• _ds_manifest.json — authoritative machine index: every token (with definedIn), component, asset. Query for exact values instead of guessing.
• package.json + scripts/check-tokens.mjs + scripts/check-contrast.mjs — the npm run validate gate: token-drift, WCAG-AA contrast, oxlint (_adherence.oxlintrc.json).
• styles.css → tokens/ — colors.css, typography.css, spacing.css (radius/elevation/motion), fonts.css, base.css.
• components/{core,terminal,site,data}/ — .jsx + .d.ts + .prompt.md + group *.card.html.
• guidelines/*.card.html — color/type/spacing specimen cards.
• ui_kits/marketing/ and ui_kits/docs/ — full-page references (hero, agent grid, install, docs sidebar).
• assets/ — logomark.svg, logo.svg (dark bg), logo-light.svg (light bg — "night" in ink, "shift" in terracotta), favicon.svg, og-card.html, readme-banner.html, logo-card.html.
• README.md — full brand brief and product context. Source of truth: whimzyLive/nightshift-ai.

Caveats: fonts via Google Fonts (self-host for production); Lucide + logomark are documented original substitutions.