Design system · v1.0.0

The substrate under every surface.

Delta-brief editorial. Paper, orange, hairlines, one voice. This page is the living style guide — every value below is imported from design/tokens.json and rendered live.

01Color

Warm paper, orange signal.

--paper

#F4F1EA

Site background · warm cream

--paper-2

#EFEBE2

Elevated surface · one step darker than paper

--ink

#14120F

Body foreground · warm near-black

--ink-2

#403C36

Secondary text · long copy

--ink-3

#7A7365

Tertiary text · captions, mono

--muted

#9A9284

Muted text · disabled, hint

--rule

#C9C1B4

Hairline border · 1px dividers

--rule-2

#DAD2C4

Softer hairline · sub-dividers

--accent

#A36630

Deep gold · reserved secondary accent

--accent-2

#F6A03F

Bright Nebbos orange · primary accent

--gold

#A36630

Alias for accent · used in numerals

--gold-2

#FDDA88

Light gold · dark-mode primary

02Type

Three families. Deliberate weight contrast.

Display · Newsreader 500

Aa · Build your brain

H2 · Newsreader 500

One agent per department.

Body · Host Grotesk 400

Nebbos reads the signal your work already emits — decisions, handoffs, deadlines — and shows you what breaks next.

Mono · JetBrains Mono 500 · eyebrows and numerals

+ 01 · Section eyebrow

03Signature devices · PlusMark

One glyph, five voices, everywhere.

04Motion

Duration, easing, spring.

--dur-instant

75ms

Instant micro-feedback

--dur-fast

120ms

Hover state transitions

--dur-default

180ms

Default component transitions

--dur-slow

275ms

ScrollReveal, section entry

--dur-page

400ms

View Transitions, page morph

--ease-out

cubic-bezier(0.22, 1, 0.36, 1)

Ease-out · component enter

--ease-in

cubic-bezier(0.55, 0.055, 0.675, 0.19)

Ease-in · component exit

--ease-settle

cubic-bezier(0.19, 1, 0.22, 1)

Settle · section enter, generous decel

Spring physics via motion@13 for graph node force-jitter and hover feedback. CSS transitions everywhere else. Reduced-motion honored on every surface.

05Primitives

Buttons, cards, hairlines.

Primary Ghost

Cut-corner card

Single top-right cut.

Radius asymmetry is the signature. Hairline-lift on hover — no drop-shadow.

Source of truth · design/tokens.json

This page renders live from the token registry. Change a value there and it changes here — and everywhere else on the site — on the next deploy.

Warm paper, orange signal.

--paper

#F4F1EA

Site background · warm cream

--paper-2

#EFEBE2

Elevated surface · one step darker than paper

--ink

#14120F

Body foreground · warm near-black

--ink-2

#403C36

Secondary text · long copy

--ink-3

#7A7365

Tertiary text · captions, mono

--muted

#9A9284

Muted text · disabled, hint

--rule

#C9C1B4

Hairline border · 1px dividers

--rule-2

#DAD2C4

Softer hairline · sub-dividers

--accent

#A36630

Deep gold · reserved secondary accent

--accent-2

#F6A03F

Bright Nebbos orange · primary accent

--gold

#A36630

Alias for accent · used in numerals

--gold-2

#FDDA88

Light gold · dark-mode primary

Three families. Deliberate weight contrast.

Display · Newsreader 500

Aa · Build your brain

H2 · Newsreader 500

One agent per department.

Body · Host Grotesk 400

Nebbos reads the signal your work already emits — decisions, handoffs, deadlines — and shows you what breaks next.

Mono · JetBrains Mono 500 · eyebrows and numerals

+ 01 · Section eyebrow

Duration, easing, spring.

--dur-instant

75ms

Instant micro-feedback

--dur-fast

120ms

Hover state transitions

--dur-default

180ms

Default component transitions

--dur-slow

275ms

ScrollReveal, section entry

--dur-page

400ms

View Transitions, page morph

--ease-out

cubic-bezier(0.22, 1, 0.36, 1)

Ease-out · component enter

--ease-in

cubic-bezier(0.55, 0.055, 0.675, 0.19)

Ease-in · component exit

--ease-settle

cubic-bezier(0.19, 1, 0.22, 1)

Settle · section enter, generous decel

Spring physics via motion@13 for graph node force-jitter and hover feedback. CSS transitions everywhere else. Reduced-motion honored on every surface.