One brand, two themes. Same type pairing, same spacing, same voice, same token names —
only the palette and the amount of chrome change. A product picks a theme and commits to it;
it is a product decision, not a viewer preference.
// Mission · Daylight — the same card, both themes
// Mission
Operator-facing
Consoles, dashboards, diagram and map views, admin, always-on displays, low-light rooms. Scanlines and corner brackets on.
Landing and marketing pages · onboarding · sign-in for people who aren’t staff · forms and data entry · docs · anything shown in a bright room
// Rules
// Stranger test
If a stranger sees it first, it’s Daylight. A cold visitor should not be met with a black screen and a bare input — sign-in is the end of a landing page, not a substitute for one.
// Switch at the auth boundary
A product may ship both: Daylight for its public surface, Mission for the app behind the login. Switch once, at sign-in — never per-page.
// One-way opt-in
A Daylight product may offer Mission as an opt-in dark mode. A Mission product must not silently flip to Daylight.
// Chrome is theme-conditional
Scanlines, corner brackets and the atmosphere grid are Mission-only. Daylight carries the brand through mono labels, the // prefix, the mint and the spacing — not through darkness.
// Applying a theme
<htmldata-theme="daylight">/* mission is the default when the attribute is absent */:root, [data-theme="mission"] { --bg-base: #0a0c10; /* … */ }
[data-theme="daylight"] { --bg-base: #f6f8f7; /* … */ }
02
Color
Both themes expose the same variable names, so components are written once. Reference the
variable, never the literal hex.
// Backgrounds
Token
Mission
Daylight
Use
--bg-base
#0a0c10
#f6f8f7
page background
--bg-surface
#0d1117
#ffffff
cards · panels
--bg-surface-hover
#0f1520
#eef3f0
interactive hover
--bg-inset
#0a1410
#e8f5ee
badges · recessed areas
// Borders
Token
Mission
Daylight
Use
--border
#1a2a20
#dde5e0
card borders · dividers
--border-hover
#2a4a38
#9dc4b0
card hover border
--border-subtle
#1a3020
#e6ede9
badge borders · faint rules
--border-grid
#111820
#e9efeb
background structure
// Text
Token
Mission
Daylight
Use
--text-heading
#e8f4ff
#0b1a14
page & card titles
--text-body
#c8d8e8
#26332d
primary body text
--text-muted
#84a89a
#43564c
descriptions
--text-subtle
#7d9b8c
#4a5d54
subtitles · mono metadata
--text-label
#6e8f80
#52655b
section labels · placeholders
--text-dim
#61856d
#61746b
footer chrome — decorative only
// Accents
Token
Mission
Daylight
Use
--accent
#3af0a0
#3af0a0
brand fill — button/badge background
--accent-hover
#6ff7be
#22dc8c
--accent under hover — keeps --accent-on text
--accent-ink
#3af0a0
#0b7a4e
accent as text · icon · border
--accent-on
#08150f
#08150f
text on top of --accent
--accent-2-ink
#2a7adf
#1f5fbf
secondary accent
--danger-ink
#ff4a24
#c02a10
error · destructive
--warning-ink
#f5b83d
#8a5a00
warning · caution
// Derivatives
Token
Mission
Daylight
Use
--accent-wash
#3af0a014
#0b7a4e12
selected / active wash — @ 8%
--accent-line
#3af0a050
#0b7a4e45
accent border — @ 31%
--accent-bracket
#3af0a040
#0b7a4e30
corner brackets — @ 25%
// Contrast — both ramps hit the same rungs (ratio vs. --bg-base)
Token
Mission
Daylight
Verdict
--text-heading
17.5 : 1
16.8 : 1
AAA
--text-body
13.5 : 1
12.4 : 1
AAA
--text-muted
7.5 : 1
7.4 : 1
AAA
--text-subtle
6.5 : 1
6.6 : 1
AA+
--text-label
5.5 : 1
5.8 : 1
AA
--text-dim
4.6 : 1
4.7 : 1
AA — lowest rung, still legible
--accent-ink
13.2 : 1
5.0 : 1
AA
// Two traps
// --accent is a fill, not an ink
Mint #3af0a0 is 1.4:1 on white. In Daylight use it as a button or badge background with --accent-on text. For accent text, icons and 1px borders use --accent-ink, which darkens to #0b7a4e.
// every rung clears AA, --text-dim included
Almost everything on the bottom three rungs is 12px Share Tech Mono, whose hairline stems go grey on a 1× display. Contrast is what buys them back, so nothing sits under 4.5:1. --text-dim is still the lowest rung — footer chrome and the backlink, never a form placeholder. Use --text-label for that.
The state recipe applied to --danger-ink. Outline at rest, fills on hover.
// Sizes
btn-lg for hero CTAs, btn-sm for nav and table rows.
// Disabled
No new colors — drops to the low-emphasis ramp: --text-label on --border-subtle.
// Form fields
We’ll email you a sign-in link. No password to remember.
Not a valid address.
Locked to your organisation.
// Field rules
// 16px inputs, always
Anything smaller triggers zoom-on-focus in mobile Safari. Field text is Rajdhani 16px / 500 even though the label above it is 12px mono.
// Placeholders use --text-label
Never --text-dim. A placeholder people can’t read is worse than no placeholder.
// Labels carry the // prefix
A field label is system commentary, same as a section label. // Email, not Email.
// Help text is a sentence
Chrome is terse; anything a stranger reads is plain English. Help and error copy are written for humans, not operators.
06
Patterns
Page-level compositions. A user-facing product needs a landing page before it needs a login
box — these are the two shapes that gap keeps showing up in.
A centered input on an empty field gives a first-time visitor nothing to decide with. Say what the product does before asking for an address.
// Split — user-facing default
50/50 above 900px, stacked below. Left: the pitch — eyebrow, product name, one-line lede, three mono checkpoints on --bg-inset. Right: the form card.
// Centered — operator sign-in
A single 400px card. Only appropriate when everyone signing in already knows what the product is — staff tools, not products strangers land on.
// Name the mechanism
“We’ll email you a link — no password.” Never let the button be the only text on screen.
// Empty state
// No huddles yet
Create one and share the link — people mark their times without signing up.
Eyebrow → one-line explanation in --text-muted → one btn-secondary.
Centered, max-width 420px, 96px vertical padding. Never a bare “No results.”
07
Effects & Interaction
Scanlines Mission only
Fixed overlay on every Mission page — --chrome-scanline lines, 4px rhythm. The token is transparent in Daylight, so the same rule goes inert. Shown exaggerated.
Corner Brackets Mission only
32px L-borders at viewport corners — --accent-bracket, 16px inset. Hidden in Daylight via --chrome-bracket-display.
Hover Gradient
2px --gradient bar at card top — opacity 0 → 1 on hover. Mint → blue in Mission, deep green → blue in Daylight.
// Interaction States
Focus Ring
:focus-visible — 1px --accent-ink outline, 3px offset. Keyboard only, never on click.
Selection
Select this text — mint highlight with dark type in both themes. Every copy action carries the brand.
::selection — background --accent, color --accent-on. Mint is a fill, so it holds in Daylight unchanged.
Load Reveal
Sections rise 8px and fade in, 90ms stagger — the page boots like an instrument panel.
0.6s ease · respects prefers-reduced-motion.
08
Voice & Tone
// Prefix
Slash-slash marks system commentary — framing, not content. // RV Power Systems
Case Rules
UPPERCASE for eyebrows, labels, page titles, stat labels. Normal case for titles, body, tooltips.
Separators
Em dash joins — middle dot separates. SYSTEM A · SYSTEM B
Copy Style
Terse fragments for chrome — plain sentences for anything a stranger reads. Ledes, help and error copy are written for humans, not operators. No exclamation marks. No emoji.