Design Tokens
Colors
Every color token has independently tuned light and dark values. Dark mode is not an inversion — it is a separate palette.
Page background
Alternating sections
Primary text
Secondary text
Tertiary text
Quiet borders (decorative only)
Functional borders
Card surfaces
Links, one interactive
Accent hover
Code background
Dataviz
6 categorical marks (--color-viz-1 through --color-viz-6), bridge-derived from the upstream dataset's dataviz.categorical block and golden-gated like the rest of the default palette. Each clears 3:1 against --color-bg — Carbon's mark-on-background line, not text's 4.5:1 — and pairs with a non-color redundancy (shape here) rather than standing alone. See REMARQUE.md "Dataviz Tokens".
Series 1
Series 2
Series 3
Series 4
Series 5
Series 6
Palette Deck
The colors above are the default palette. remarque-tokens/deck switches at runtime between palettes generated by remarque-theme --scope — generation and contrast validation are the theme provider's job, this module only switches, persists, and restores. Try one:
Contrast Ratios
Computed WCAG 2.x compliance for key color pairings. Text pairings meet AA or better; --color-border is decorative-only (functional boundaries use --color-border-bold, which meets the 3:1 non-text minimum).
Spacing Scale
Deliberately generous. The upper values provide the breathing room that distinguishes editorial layouts from dashboard UIs.
Content Widths
The three content widths are the most critical layout tokens. Prose is always constrained to the reading width.
Borders, Radius & Motion
Border Radius
--radius-sm
0.25rem
--radius-md
0.5rem (max)
--radius-none
0