Design tokens¶

Surfaces¶

• --surface-1: body background
• --surface-2: banded strips, dimmer panels
• --surface-3: cards, chips, code blocks
• --surface-4: hover, brightest

Text colors¶

• --text: headings, important content
• --text-muted: body text, supporting information
• --text-faint: metadata, labels
• --text-disabled: disabled states

Accent colors¶

• --accent: brand accent (buttons, highlights, indicators)
• --accent-link: link accent (anchors)
• --accent-mute: subtle accent backgrounds

Borders¶

--rule-soft      Hairline dividers, subtle separation
--rule           Standard borders (cards, inputs, tables)
--rule-strong    Emphasized borders, hover states

Shadows¶

--shadow-sm      Subtle depth for cards at rest
--shadow-md      Hover states, elevated elements
--shadow-lg      Modals, floating elements
--shadow-inset   Pressed states

Radii¶

Brand gradient¶

--uni-gradient-conic: conic-gradient(
  from 0deg at 50% 50%,
  var(--uni-magenta), var(--uni-orange), var(--uni-yellow),
  var(--uni-purple), var(--uni-blue), var(--uni-cyan),
  var(--uni-magenta)
);

--uni-gradient-linear: linear-gradient(
  90deg,
  var(--uni-magenta), var(--uni-orange), var(--uni-yellow),
  var(--uni-purple), var(--uni-blue), var(--uni-cyan)
);

Spacing¶

A consistent 8-rung scale. Use the token, never a raw px/rem value.