Colors

Color tokens, role mapping and Red / Sun / Cream composition guidance for warm but operational 12PM product surfaces.

Foundation

Design tokens

Backward-compatible aliases plus the new ref / sys / comp model.

tokens.css

InkText / icon layer--12pm-sys-color-brand-ink

12PM RedLogo / identity--12pm-sys-color-brand-red

Action RedCTA / focus / selected--12pm-sys-color-action-primary

SunMeal cue / dot accent--12pm-sys-color-brand-sun

CreamCanvas family--12pm-sys-color-brand-cream

Action Red hoverPressed / hover shade--12pm-sys-color-action-primary-hover

Warm mutedGeneric quiet surface--12pm-sys-color-surface-muted

Red softSelected / brand grouping--12pm-sys-color-surface-brand-soft

DangerFunctional state--12pm-sys-color-danger

Red / Sun / Cream system

Composition guidance for keeping 12PM warm, accessible and operational without turning product surfaces into decorative red screens.

Guidance

CreamCanvas12PMRedSunAccent

Base%Cream and surfaces

Use Cream, white and quiet borders for most screen area so operational views stay calm, readable and lunch-adjacent.

--12pm-sys-color-canvas / surface

Action%Action red and selection

Use Action Red for the single strongest action, focus and selected borders. Keep Brand Red for identity so app screens stay recognizable without sacrificing CTA contrast.

--12pm-sys-color-action-primary / border-selected

Accent%Sun accent

Use Sun for the logo dot, small meal cues and warm highlights. Pair it with Ink for any text-bearing surface.

--12pm-sys-color-brand-sun

Ink is the text layer and status colors are functional exceptions; they protect readability, accessibility and operational meaning rather than competing with 12PM Red or Sun. Order screens can lean warmer; partner and admin screens stay more neutral-heavy when density increases. Brand Red `#E94B35` and Action Red `#C83220` are split after Owner Figma review so recognition and CTA contrast can each do their job.