# Tante Toos — Design System

Herbruikbare design-taal afgeleid van de live website (`tantetoos-website-new`,
`src/app/globals.css`). Eén bron voor kleuren, typografie, logo en componenten —
te hergebruiken voor mail, print, socials en nieuwe pagina's.

## Bron van waarheid
`tokens.css` bevat álle tokens 1-op-1 uit de site (CSS-variabelen + utility-classes).
Link 'm mee (`<link rel="stylesheet" href="tokens.css">`) of kopieer de `:root`-blok.

## Kaarten
| Kaart | Groep | Inhoud |
|---|---|---|
| `colors.html` | Foundations | brand · surfaces (cream/stone) · status |
| `typography.html` | Foundations | Big Shoulders display · Geist sans/mono · schaal |
| `logo.html` | Brand | wordmark orange/light + clear space |
| `buttons.html` | Components | pill-buttons primary/dark/teal/secondary |
| `highlights.html` | Components | blok-accent `.hl` (orange/teal/acid/outline) |
| `status-badges.html` | Components | live open/soon/closed met LED-dot |
| `cards.html` | Components | locatie-cards |
| `email-signature.html` | Applications | **e-mailhandtekening** (preview + uitleg) |

## E-mailhandtekening
- Preview + placeholders: `email-signature.html`
- Kale, plakbare tabel: `signature.html`
- Vervang `{{NAAM}}` `{{FUNCTIE}}` `{{TELEFOON}}` `{{TEL_E164}}` `{{EMAIL}}`
- Table-based + inline styles, web-safe fonts, brand-oranje accent, absolute logo-URL
  (`https://www.tantetoos.nl/brand/logo-orange.png`) → werkt in Gmail/Outlook/Apple Mail.

## Merk-kern
- **Kleur:** oranje `#f15a24` (primair) + teal `#1f7a6e`, acid-mustard `#f2c94c`, op warm cream `#fbf6ee`.
- **Type:** condensed heavy poster-koppen (Big Shoulders, uppercase, tight leading) + Geist body + mono eyebrows.
- **Toon:** speels, direct, straat/festival — geen corporate. Skewed highlight-blokken, pill-buttons, korrel-textuur.