Composer. Bauhaus confetti on concrete.

Brand blue — decorative color blocks, icon fills, secondary borders, and the blue-tinted shadow that gives elevation its on-brand cast

Green wash for highlight backgrounds, decorative bands, and soft emphasis behind content

Vivid pink — decorative strokes, confetti blocks, and gradient underline washes

Pink action color for filled buttons, selected navigation states, and focused conversion moments.

Yellow accent — confetti blocks, gradient underlines, and warm decorative surfaces

Orange accent — decorative fills, strokes, and secondary button surfaces

Deep green — heading text color, card backgrounds, and muted button surfaces that need an earthy chromatic weight

Warm orange — button backgrounds and body accent fills, slightly softer than Ember Orange

Purple accent — rare chromatic punctuation for buttons and decorative fills

Dark blue border — used for emphasis borders that need more weight than Signal Blue

Lighter blue border — paired with Deep Iris in decorative border compositions

Red action color for filled buttons, selected navigation states, and focused conversion moments. Use as a supporting accent, not as a status color

Dark text/footer — near-black with a green undertone, used for footer backgrounds and deep heading text

Primary text and filled CTA — all body and heading text, plus filled button backgrounds

Dark surface — footer background and inverted dark blocks, near-black with a slight teal undertone

Dark card surface and stroke — deep neutral for inverted cards and decorative strokes

Muted text and icon fill — secondary text color, icon fills, and decorative strokes

Tertiary border and shadow — mid-gray for low-emphasis borders and shadow accents

Icon border — medium gray for icon outlines that recede behind content

Secondary border — slightly darker than Concrete for borders that need more weight

Border and shadow base — mid-gray borders and shadow midtones

Background wash — light gray fill for inactive states and subtle surface differentiation

Hairline border — the dominant neutral border color, appearing on virtually every element

Subtle background — off-white fill for sections that need separation from Paper without a visible border

Card and nav surface — opaque white for cards, navigation bar, and button text