# Color & Button Tokens — for review

Source: Figma *Website 2.0* → Color Guidelines. I transcribed the **Hex** field on
each swatch (and the text-color label in each chip's corner). I ignored the
RGB / CMYK / Pantone fields — several are stale placeholder values in the Figma,
so trusting them would be wrong. Anywhere the Hex itself looks like a leftover, it's
flagged ⚠️.

"Text on it" = the color to put text in when this color is the background (dark
`#1B1B1B` or white `#FFFFFF`), taken from each chip.

---

## Primary

### Royal Blue  · main = **Blue 400**
| Step | Hex | Text on it |
|---|---|---|
| Blue 100 | `#E2EEFF` | dark |
| Blue 200 | `#9DC6FF` | dark |
| Blue 300 | `#4592FF` | dark |
| **Blue 400 (main)** | `#00409B` | white |
| Blue 500 | `#00204D` | white |

### Pastel Yellow · main = **Yellow 100**
| Step | Hex | Text on it |
|---|---|---|
| **Yellow 100 (main)** | `#FFF5D9` | dark |
| Yellow 200 | `#FFECB9` | dark |
| Yellow 300 | `#FFD768` | dark |
| Yellow 400 | `#B08200` | white |
| Yellow 500 | `#4C3800` | white |

## Secondary

### Emerald Green · main = **Green 300**
| Step | Hex | Text on it |
|---|---|---|
| Green 100 | `#D8F0E0` | dark |
| Green 200 | `#8FD5A6` | dark |
| **Green 300 (main)** | `#41AA64` | dark |
| Green 400 | `#22723C` | white |
| Green 500 | `#044F1D` | white |

## Neutral
| Step | Hex | Text on it |
|---|---|---|
| Neutral 000 | `#FFFFFF` | dark |
| Neutral 50 | `#E5E7EB` | dark |
| Neutral 100 | `#A3ACB7` | dark |
| Neutral 200 | `#6C747F` | dark |
| Neutral 300 | `#485260` | white |
| Neutral 400 | `#283445` | white |
| Neutral 500 | `#011633` | white |

Neutral 000 confirmed as `#FFFFFF` (pure white). ✓

## Red
| Step | Hex | Text on it |
|---|---|---|
| Red 100 | `#FEC4C1` | dark |
| Red 200 | `#E8706A` | dark |
| Red 300 | `#B3261E` | white |

Red values corrected from your latest message. ✓

## Tertiary — "use for app only and skills"
Note the Figma label: these are intended for **app/skills**, not general activity
theming. Flagging so we're intentional about whether grade themes draw from here.

| Family (skill) | 100 | 200 | 300 |
|---|---|---|---|
| Mauve — Communication | `#FCEFFF` | `#F6C7FF` | `#914284` |
| Purple — Friendship | `#F0E5FF` | `#BF9EF0` | `#5D3A90` |
| Olive — Self-Regulation | `#C6EDD3` | `#8FD5A6` | `#044F1D` |
| Sky — Emotional Recognition | `#DBF4FF` | `#63BAE2` | `#005277` |
| Mint — Academic Readiness | `#E1F1ED` | `#66CFB3` | `#1B6F59` |
| Lemon — Problem Solving | `#F1EECD` | `#E4DA6C` | `#736C22` |
| Peach — Vocational | `#FFE3DC` | `#FF9176` | `#8C3F2C` |

Purple (Friendship) corrected from your latest screenshot. ✓

The darkest step in each family (300, and 400/500 in Primary/Secondary) uses white text;
lighter steps use `#1B1B1B`.

---

## Grade-level palettes (new — creating tokens)
These had no tokens yet; I'm naming them below. Values exactly as you provided.

### Lower Elementary
| Token | Hex |
|---|---|
| `grade-lower/main` | `#F2EDB1` |
| `grade-lower/accent-1` | `#A4C5FF` |
| `grade-lower/accent-2` | `#F96B94` |
| `grade-lower/accent-3` | `#A0BA5D` |

### Upper Elementary
| Token | Hex |
|---|---|
| `grade-upper/main` | `#BDDBFF` |
| `grade-upper/accent-1` | `#4592FF` |
| `grade-upper/accent-2` | `#8D8AFF` |
| `grade-upper/accent-3` | `#FFB889` |

### Middle & High
| Token | Hex |
|---|---|
| `grade-mh/main` | `#F5F2ED` |
| `grade-mh/accent-1` | `#00409B` |
| `grade-mh/accent-2` | `#A675CB` |
| `grade-mh/accent-3` | `#E1EEFF` |

**A few of these already exist in the core palette** (nice — the system stays consistent):
`grade-upper/accent-1 #4592FF` = **Blue 300**, `grade-mh/accent-1 #00409B` = **Blue 400**.
Also `grade-mh/accent-3 #E1EEFF` is one hex off from **Blue 100 (`#E2EEFF`)** — flag if that
should just be Blue 100.

### Grade differentiation — decision (prototypes, for now)
Keep it minimal: the **Top bar** (where the activity title sits) takes the grade's **Main**
color, with the **title text dark `#011633`**. Everything else — page background, cards
(white), buttons — stays on the base styling for now. That's enough differentiation for review.

| Slot | Lower | Upper | M&H |
|---|---|---|---|
| Top bar background | `#F2EDB1` | `#BDDBFF` | `#F5F2ED` |
| Top bar title text | `#011633` | `#011633` | `#011633` |

The Accent 1–3 tokens are captured above and **reserved for later** (buttons, decorative,
mascots) — not applied yet. When they are: Lower Elem Accent 2 `#F96B94` sits close to the
error red `#E8706A`, so keep them visually distinct.

---

## Shadows (from Figma variables)
- **Shadow / 500:** `0 10px 32px -4px #18274B1A, 0 6px 14px -6px #18274B1F`
- **Chip shadow:** `0 12px 42px -4px #18274B1F, 0 8px 18px -6px #18274B1F`

## Spacing / radius / type
Already captured from your uploaded token files (`spacing.md`, `lines-borders.md`,
`typography.js`) and wired into `global.css`. Figma also confirms `Space/L = 16px` and
`Space/4XL = 48px`, which match that scale.

---

## Buttons

Source: Figma *Untitled* → button set. Values from the Figma variables.

**Shared across all buttons**
- Shape: **pill / fully rounded** (`Radius/Pill` = 1000 → use `9999px`).
- Text: **Lexend Regular**. Two sizes — **M** = 18px / 24px line-height (default), **S** = 16px / 20px.
- Label ↔ icon gap: ~8px (`Margin/S`). Optional trailing chevron icon; icon color follows the text color (dark `#011633` or white `#FFFFFF`).
- Border widths available: `1px` (XS), `1.5px` (S), `2px` (M), `4px` (L).
- Padding tokens present: `S` 8px · `L` 16px · `2XL` 24px. Typical pill = ~24px horizontal / ~8–12px vertical — I'll confirm the exact mapping from the component when I build the CSS.

### Filled — Blue (primary), white text
| State | Background | Text/icon |
|---|---|---|
| Default | `#00409B` | `#FFFFFF` |
| Hover | `#00204D` | `#FFFFFF` |
| Focus | `#00409B` | `#FFFFFF` |
| Click | `#00204D` | `#FFFFFF` |

### Filled — Yellow, dark text
| State | Background | Text/icon |
|---|---|---|
| Default | `#FFECB9` | `#011633` |
| Hover | `#FFD768` | `#011633` |
| Focus | `#FFECB9` | `#011633` |
| Click | `#FFD768` | `#011633` |

### Outline — Primary (on light backgrounds)
Transparent fill; border + text `#011633`. Fill appears on hover/click.
| State | Fill | Border / text |
|---|---|---|
| Default | transparent | `#011633` |
| Hover | `#E5E7EB` | `#011633` |
| Focus | `#E5E7EB` | `#011633` |
| Click | `#A3ACB7` | `#011633` |

### Outline — Secondary / Inverse (on dark backgrounds)
Transparent fill; border + text white. Semi-transparent fill on hover/click.
| State | Fill | Border / text |
|---|---|---|
| Default | transparent | `#FFFFFF` |
| Hover | `#E5E7EB` @ ~18% (`#E5E7EB2E`) | `#FFFFFF` |
| Click | `#A3ACB7` @ ~50% (`#A3ACB780`) | `#FFFFFF` |

### Text links
- **Link / Primary:** text `#011633` (dark), no fill or border.
- **Link / Secondary / Inverse:** text `#FFFFFF` (for dark backgrounds).

*Supporting border tokens (for reference): Border/Primary `#6C747F`, Border/Secondary `#283445`, Border/Tertiary `#011633`. Neutral surfaces: White `#FFFFFF`, Primary `#E5E7EB`, Secondary `#A3ACB7`.*

## Still open
- **Accent roles (later)** — which accent = buttons vs. decorative, once we move beyond
  the top-bar-only theming.
- **Button padding** — I'll confirm the exact vertical/horizontal padding from the
  component when building the CSS (tokens are S 8 / L 16 / 2XL 24).