Design tokens¶

Surfaces¶

• --surface-1: body background
• --surface-2: cards, inputs, code blocks
• --surface-3: hover, brightest
• --surface-inset: header bars, tracks

Text colors¶

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

Accent colors¶

• --accent: brand accent (buttons, highlights, indicators)
• --accent-link: links, focus rings
• --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¶