# Sunflower AI — brand colours

The source of truth lives in `design-system/colors_and_type.css`. This is the
collaborator-facing summary: paste a hex into Figma, Keynote, or Google Slides
and you are on-brand.

A note on the amber scale: it is **defined in OKLCH** in the design system (not
hex), so the petals and gradient stay vivid through interpolation rather than
going muddy. The hex column below is the exact sRGB conversion of each OKLCH
value — use it anywhere a tool only accepts hex, but if your tool supports
`oklch()` (modern CSS, recent Figma), prefer the OKLCH source for fidelity.

`sunflower-colors.png` in this folder is the same information as a one-page
visual reference.

## The one rule

**Amber is the brand. Yellow and orange are gradient companions, never solid
fills.** The signature warm gradient (orange → amber → yellow) is the hero;
amber-500 is the brand hue you can use as a solid colour or text on white.
Sky-blue is the accent (secondary actions, info). Stone is the warm-grey
neutral ramp for text, backgrounds, and borders.

## Signature warm gradient

The hero gradient. Interpolated **in OKLCH** with an explicit amber mid-stop,
so the centre lands on the brand hue instead of drifting muddy.

```
linear-gradient(45deg in oklch, #F97316 0%, #FE9A00 50%, #EAB308 100%)
                                orange-500   amber-500    yellow-500
```

Use it for: primary CTAs (white text on top), the brand lockup background
variant, "most popular" badges, and gradient-clipped large Fredoka headings.

## Primary — amber  (OKLCH-defined)

| Token | OKLCH | Hex (sRGB) | Use |
|---|---|---|---|
| amber-50  | `oklch(0.987 0.022 95.277)` | `#FFFBEB` | tint background |
| amber-100 | `oklch(0.962 0.059 95.617)` | `#FEF3C6` | hover / selection tint |
| amber-200 | `oklch(0.924 0.12 95.746)`  | `#FEE685` | borders on tints |
| amber-300 | `oklch(0.879 0.169 91.605)` | `#FFD230` | — |
| amber-400 | `oklch(0.828 0.189 84.429)` | `#FFB900` | gradient companion (non-white bg) |
| **amber-500** | `oklch(0.769 0.188 70.08)` | **`#FE9A00`** | **PRIMARY brand — solid / text on white** |
| amber-600 | `oklch(0.666 0.179 70.08)`  | `#D77B00` | gradient hover tier |
| amber-700 | `oklch(0.555 0.163 70.08)`  | `#AD5C00` | deepest amber — text on amber-50 |
| amber-800 | `oklch(0.473 0.137 70.08)`  | `#8A4900` | — |
| amber-900 | `oklch(0.414 0.112 70.08)`  | `#713D00` | — |

## Yellow — gradient companion only

Never a solid fill, text colour, or button background — only a stop in a
gradient paired with amber.

| Token | Hex | Note |
|---|---|---|
| yellow-300 | `#FDE047` | lighter sunshine stop |
| yellow-400 | `#FACC15` | gradient stop |
| yellow-500 | `#EAB308` | "deep yellow" — gradient end on white |

## Accent — sky

Secondary actions, info states, the muted card-inside-card hue.

| Token | Hex | Use |
|---|---|---|
| sky-100 | `#E0F2FE` | tinted accent backgrounds, chips |
| sky-500 | `#0EA5E9` | solid secondary CTA |
| sky-700 | `#0369A1` | accent text on light surfaces |

## Neutrals — stone (warm greys)

| Token | Hex | Use |
|---|---|---|
| stone-50  | `#FAFAF9` | wordmark on dark, lightest bg |
| stone-100 | `#F5F5F4` | muted background |
| stone-200 | `#E7E5E4` | borders |
| stone-300 | `#D6D3D1` | borders |
| stone-400 | `#A8A29E` | muted text on dark |
| stone-500 | `#78716C` | tertiary text |
| stone-700 | `#44403C` | **wordmark on light, non-gradient titles** |
| stone-900 | `#1C1917` | primary text, dark backdrops |
| stone-950 | `#0C0A09` | deepest |

## Backgrounds

| Role | Value |
|---|---|
| page background | `#FFFFFF` |
| alt background | stone-50 `#FAFAF9` |
| muted background | stone-100 `#F5F5F4` |

## Semantic (non-brand)

Orange is **warning-only** (`#F97316` / orange-700 `#C2410C`) outside the
gradient. Success uses emerald `#10B981`; error uses red `#EF4444`.
