Foundations

Colors

One brand, four supporting hues. Source of truth lives in packages/ui/tokens.css — every value below is rendered live from those tokens.

Brand palette

  • Solar

    #F5E642

    --color-solar

  • Amber

    #FFD166

    --color-amber

  • Lavender

    #C9B8FF

    --color-lavender

  • Midnight

    #1A1A2E

    --color-midnight

  • Cream

    #FFFBF2

    --color-cream

  • App background

    #F0EDE8

    --color-app-bg

Brand tints and shades

Each brand colour exposes a soft (lighter, tinted backgrounds) and a strong (darker, hover and active states) sibling.

Solar

Primary brand colour. Use for CTAs and key accents.

  • Soft

    #FCF6A8

    --color-solar-soft

  • Base

    #F5E642

    --color-solar

  • Strong

    #E0D52E

    --color-solar-strong

Amber

Brand secondary. Hover state for solar CTAs and warm accents.

  • Soft

    #FFEAB5

    --color-amber-soft

  • Base

    #FFD166

    --color-amber

  • Strong

    #F0B94D

    --color-amber-strong

Lavender

Diagnostics, AI signals, info messages.

  • Soft

    #F0EEFF

    --color-lavender-soft

  • Base

    #C9B8FF

    --color-lavender

  • Strong

    #A88FFF

    --color-lavender-strong

Midnight

Inverse surfaces, primary text, dark mode foundation.

  • Soft

    #2A2A45

    --color-midnight-soft

  • Base

    #1A1A2E

    --color-midnight

  • Strong

    #0F0F1F

    --color-midnight-strong

Neutral ramp

The workhorse scale for borders, dividers, muted text, and surfaces. Built so the legacy aliases (--color-rule, --color-muted, etc.) slot naturally into one of the ramp steps.

  1. 50

    #FAF8F3

  2. 100

    #F0EDE8

  3. 200

    #E2DCCF

  4. 300

    #C9C1B0

  5. 400

    #BBBBBB

  6. 500

    #888888

  7. 600

    #6B6B7E

  8. 700

    #555555

  9. 800

    #3A3A4A

  10. 900

    #1A1A2E

State colours

Three steps per state: soft for tinted backgrounds, base for inline text and icons on light surfaces, strong for emphasis and solid CTAs.

Success

Confirmations, completed states, positive feedback.

  • Soft

    #E8F5EE

    --color-success-soft

  • Base

    #22A06B

    --color-success

  • Strong

    #1A7A52

    --color-success-strong

Warning

Caution, attention-needed, soft errors.

  • Soft

    #FFF1D6

    --color-warning-soft

  • Base

    #F0A030

    --color-warning

  • Strong

    #C77518

    --color-warning-strong

Error

Validation failures, destructive actions, blocking issues.

  • Soft

    #FCE4E0

    --color-error-soft

  • Base

    #B3261E

    --color-error

  • Strong

    #8B1A14

    --color-error-strong

Info

Neutral notifications, diagnostics, AI hints (lavender alias).

  • Soft

    #F0EEFF

    --color-info-soft

  • Base

    #C9B8FF

    --color-info

  • Strong

    #6B4FCC

    --color-info-strong

Contrast pairs

Key text-and-background combinations used across Sidelay surfaces. Ratios computed against WCAG 2.1 (AA = 4.5, AAA = 7, AA Large = 3).

  • The quick brown fox jumps

    Default body text on surface

    text-primary on cream

    16.52:1AAA

  • The quick brown fox jumps

    Default body text on app background

    text-primary on app-bg

    14.61:1AAA

  • The quick brown fox jumps

    Text on inverse / dark surface

    text-on-inverse on midnight

    16.52:1AAA

  • The quick brown fox jumps

    Primary CTA label on solar

    action-primary-fg on solar

    13.22:1AAA

  • The quick brown fox jumps

    Muted body text on surface

    text-muted on cream

    5.05:1AA

  • The quick brown fox jumps

    Secondary body text on surface

    text-secondary on cream

    7.22:1AAA

Form fields

Fields are an elevated white surface bounded by a taupe border — not transparent — so an empty field reads as a surface above the cream canvas. Focus is a 1px lavender ring. Doctrine and rationale in ADR-0024; tokens in packages/ui/tokens.css.

  • Field surface

    #FFFFFF

    --bg-field

  • Field border

    #9A917E

    --border-field

Illustrative — the canonical interactive components (Input, Textarea, Select) ship in Phase 5 with the packages/ui extraction.