Primitives
The foundations — type, colour, surfaces, radius and elevation. Flip Catalyst / SafeWay (bottom-right) and light / dark (account menu) to watch the semantic tokens adapt; the SafeWay brand yellow is documented below.
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. Interactive accents are monochrome: INK keyboard-focus rings + a subtle GREY hover/active tint. Blue is decorative only (imagery + info).
Typography
Inter under Catalyst, General Sans under SafeWay (with a subtle negative tracking). Quiet hierarchy from size + weight, not loudness.
Text colours
Shown on a fixed light tile so the values read in either theme.
Surfaces & borders
Brand & accent
Black (ink) is the primary AND the keyboard-focus ring; hover/active states use a subtle grey overlay (zinc-950/5). Blue is decorative only — imagery, info chips, badges — never a focus ring, fill, or primary button.
SafeWay brand yellow
The logo yellow and its depth ramp — the highlight of the tactile FOLDER FAMILY (the Home journey stack, the course workbook, the license card, the billing plan card). Always paired with brand-ink (the logo's near-black) so text stays legible on any yellow surface. It is NOT a global accent: interactive accents stay monochrome (ink focus rings, grey hover), and the yellow is never a button fill or focus ring.
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 sit harmoniously against the warm-grey neutrals.
Neutral scale
Radius
Flip to SafeWay: surfaces tighten to ~3px and controls (rounded-control) become full pills.
Elevation
Flip to SafeWay: inline shadows flatten to nothing (hairline borders carry separation); only floating layers keep a soft lift.