Foundations · Tokens

The vocabulary. Make it yours.

Every Lumen component is built from twenty-two tokens. Lumen ships without an accent — but this is your system now. Pick a color, set a radius, and take the CSS with you.

Controls

accent

radius6px

base size16px

Preview

New

Field notes, monthly.

All twenty-two

The complete set.

Color (8)

--color-bg#FAFAF7

--color-surface#FFFFFF

--color-text#1A1814

--color-text-muted#5F5C55

--color-text-faint#A8A49C

--color-border#1A1814

--color-border-soft#E5E1D6

--color-accent#1A1814

Type (6)

--font-sansInter Variable

--font-monoJetBrains Mono

--font-displayInter Variable

--text-weight-regular420

--text-weight-bold540

--text-size-base16px

Space (5)

--space-xs4px

--space-sm8px

--space-md16px

--space-lg32px

--space-xl64px

Radius (3)

--radius-sm2px

--radius-md6px

--radius-lg12px

:root {
  /* color */
  --color-bg: #FAFAF7;
  --color-surface: #FFFFFF;
  --color-text: #1A1814;
  --color-text-muted: #5F5C55;
  --color-text-faint: #A8A49C;
  --color-border: #1A1814;
  --color-border-soft: #E5E1D6;
  --color-accent: #1A1814;

  /* type */
  --font-sans: 'Inter Variable', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono Variable', ui-monospace, monospace;
  --font-display: 'Inter Variable', system-ui, sans-serif;
  --text-weight-regular: 420;
  --text-weight-bold: 540;
  --text-size-base: 16px;

  /* space */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;

  /* radius */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 12px;
}