Primitives

The foundations — type, colour, surfaces, radius and elevation. These are stock Catalyst tokens for now; as we set SafeWay theme tokens, this page reflects them.

Semantic tokens

The brand-aware layer components consume. Flip Catalyst/SafeWay (bottom-right) and light/dark (account menu) and watch these adapt — neutrals follow the brand ramp automatically. The one discrete accent is blue, reserved for focus rings and active highlights — never a fill.

Surfaces
Canvas
bg-canvas
Surface
bg-surface
Surface subtle
bg-surface-subtle
Text & line
Aa
Ink
text-ink
Aa
Ink muted
text-ink-muted
Aa
Ink subtle
text-ink-subtle
Line
border-line/10
Action
Aa · primary
Primary
bg-primary
Aa
Accent
blue-500 · focus / highlight

Typography

Inter under Catalyst, General Sans under SafeWay (with a subtle negative tracking). Quiet hierarchy from size + weight, not loudness.

Display · 36 / SemiboldThe quick brown fox jumps over the lazy dog
Title · 24 / SemiboldThe quick brown fox jumps over the lazy dog
Heading · 20 / MediumThe quick brown fox jumps over the lazy dog
Subheading · 16 / MediumThe quick brown fox jumps over the lazy dog
Body · 16 / RegularThe quick brown fox jumps over the lazy dog
Small · 14 / RegularThe quick brown fox jumps over the lazy dog
Caption · 12 / RegularThe quick brown fox jumps over the lazy dog
Micro-label · 12 / Medium / UppercaseThe quick brown fox jumps over the lazy dog

Text colours

Shown on a fixed light tile so the values read in either theme.

Aa
Ink
zinc-950
Aa
Secondary
zinc-700
Aa
Muted
zinc-500
Aa
Faint
zinc-400

Surfaces & borders

Canvas
zinc-50
Surface
white
Subtle
zinc-100
Border
zinc-950/10

Brand & accent

Black (ink) is the primary. The one discrete accent is blue — focus rings and active highlights only, never a fill or a primary button.

Primary (Ink)
zinc-950
Accent (Blue)
blue-500 · discrete

Status & feedback

Semantic colours for success, warning, error and info — solid plus subtle tints. Under SafeWay they're retuned to a warm, clean register: saturated but warm-leaning, so they read as siblings of the accent blue and sit harmoniously against the warm-grey neutrals.

Success
green-600
Warning
amber-500
Error
red-600
Info
blue-600
Success · subtle
green-50
Warning · subtle
amber-50
Error · subtle
red-50
Info · subtle
blue-50

Neutral scale

50
100
200
300
400
500
600
700
800
900
950

Radius

Flip to SafeWay: surfaces tighten to ~3px and controls (rounded-control) become full pills.

sm
md
lg
xl
control
full

Elevation

Flip to SafeWay: inline shadows flatten to nothing (hairline borders carry separation); only floating layers keep a soft lift.

shadow-xs
shadow-sm
shadow-md
shadow-lg
Theme