Design tokens

Tokens are the single source of truth for Scorton UI. Prefer semantic names over raw hex in application code.

Files

Path	Contents
css/tokens.css	Runtime CSS custom properties
tokens/colors.json	Color + theme JSON
tokens/typography.json	Families + scale
tokens/effects.json	Shadows, gradients, motion, layout

Categories

1. Color — brand accent, navy surfaces, text, status
2. Typography — display / UI / body stacks
3. Shape — radius 0.5rem / 1rem
4. Effects — yellow glow, dividers, hero wave
5. Motion — durations and reduced-motion policy

Naming

--color-*     semantic color
--font-*      type roles
--text-*      type scale steps
--gradient-*  brand gradients
--shadow-*    elevation / glow
--radius*     corner radii

Example

.panel {
  background: var(--color-bg-card);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}