Тепла пастельна палітра з єдиним бургунді-акцентом. Жодних синіх, жодних generic. Olive grows як friendly «approval».
Berry — primary CTA. Olive — secondary signal (approval, tags). Blush/pink — soft fills. Усі мають 10-step scale 50-900.
Усе тепло-беж. Жодних cool grays. Cream = page BG, paper = cards, line = dividers.
Кожен стан = пара BG + TEXT + LINE. BG-тон легкий, не «глибокий», щоб не конфліктував з cream сторінкою.
BG #EAEEDA · Text #586642 · Line #B5C490
BG #FFF3D9 · Text #8A5B00 · Line #F0CC72
BG #FBE6E6 · Text #8B1A12 · Line #F2B6B2
BG #F4EBF7 · Text #7A5C8D · Line #C7B5D9
| Кейс | Token | Не юзати |
|---|---|---|
| Page background | --cream | --paper (для cards) |
| Cards / surfaces | --paper | --cream-50 у dark mode |
| Primary CTA | --berry-500 | не для тексту малого розміру |
| Approval / success | --olive-500 / --success | не для error |
| Borders / dividers | --line | не --berry-50 — занадто рожево |
| Body text | --ink | --muted тільки secondary |
| Hover states | scale-600 від base | не shadow-shift |
Перевірено WCAG 2.2. AA = ≥ 4.5 для тексту 14-18px, ≥ 3 для UI ≥ 18px.
| Поєднання | Ratio | Розмір тексту | Verdict |
|---|---|---|---|
| ink / cream | 14.2 : 1 | будь-який | AAA ✓ |
| muted / cream | 4.6 : 1 | ≥ 14px | AA ✓ |
| berry-500 / cream | 5.8 : 1 | ≥ 14px text | AA ✓ |
| berry-500 / paper | 6.0 : 1 | будь-який | AA ✓ |
| olive-700 / cream | 6.4 : 1 | будь-який | AA ✓ |
| paper / berry-500 | 6.0 : 1 | btn label | AA ✓ |
| warning-text / warning-bg | 7.1 : 1 | ≥ 14px | AAA ✓ |
| berry-200 / cream | 1.7 : 1 | декоративні | не для тексту ✕ |
/* tokens.css */ :root { --berry-500: #B93352; --olive-500: #6B7A4E; --cream: #F9F5F0; --paper: #FFFFFF; --ink: #2A2420; --muted: #7A6E68; } /* usage */ .cta { background: var(--berry-500); color: var(--paper); } .tag { background: var(--olive-50); color: var(--olive-700); }