Design System / 01

Colors

A warm monochrome palette. Ink and paper do nearly all the work; one red exists for errors, and everything between is a grayscale ramp tinted toward the paper.

Brand

Ink

--c-black · #040404

Text, buttons, dark sections, hairlines at reduced opacity

Paper

--c-white · #fdfcfb

Page background, text on dark sections

Grey

--c-grey · #cacaca

Disabled states, tertiary marks

Surfaces & semantic

Secondary / Muted

--secondary, --muted · #f4f2ef

Quiet fills behind form fields and grouped content

Accent

--accent · #ece9e4

Hover fills for neutral controls

Muted foreground

--muted-foreground · #5d5d5d

Secondary text, placeholders

Destructive

--destructive · #b42318

Errors and irreversible actions only — the single chromatic token

Hairlines

--border · ink at 14%

Structural rules: section dividers, cards, the info bar.

--input · ink at 18%

Form field borders — slightly darker so controls read as interactive.

Grayscale ramp

#d7d3cd

#9d988f

#6e6a64

#403d39

#191817

Warm greys stepping from paper to ink. Used for data visualization and anywhere an intermediate tone is unavoidable.

Interaction

Lorem Ipsum

dim-1 · 60%

Links and buttons acknowledge

Lorem Ipsum

dim-2 · 30%

Siblings step back

Lorem Ipsum

dim-3 · 15%

Rows blur out under the cursor

  • Interaction always dims, never highlights — presence reduces down the ladder, and the same language marks active states.
  • Text selection inverts: paper on ink (and ink on paper in dark theme) via the variable pair.
  • The whole palette flips with data-theme="dark" on the root — the Switch in the nav — because every component speaks in the ink/paper variables rather than literal values.

Rules

  • Photography is the only source of saturated color.
  • Dark sections invert the pair: ink background, paper text — via the .dark-section utility, never ad-hoc colors.
  • Opacity modifiers of ink (14%, 15%, 20%, 60%, 70%) replace additional grey tokens wherever possible.