# THÍCH CAY Design System v3.3

Vietnamese sauce brand. Street-food loud, not fine-dining.
Full reference: https://cdn.thichcay.vn/docs/README.md

---

## NEVER

- ❌ `#FFFFFF` or `white` as background → use `#FBF5E7` (`--brand-surface`)
- ❌ `#000000` for text → use `#2B241E` (`--neutral-800`)
- ❌ `border-radius: 0` → always ≥ 6px
- ❌ `box-shadow` with black → use `rgba(180,26,26,…)` red-tinted only
- ❌ 1px borders → always 2px solid
- ❌ Emoji 🔥🌶️ → none, ever
- ❌ DVN Luckiest Guy in mixed case → UPPERCASE only
- ❌ Solid Coral (`#FF766A`) as hero or page bg → gradient-first
- ❌ Vietnamese without diacritics

## Core tokens

```css
--brand-primary:      #B41A1A   /* CTA, headline, ribbon — min 30% visual weight */
--brand-surface:      #FBF5E7   /* Page background (level 0) */
--surface-elevated:   #FFFCF1   /* All cards/panels — always pair with --shadow-md */
--neutral-800:        #2B241E   /* Default body + heading text */
--brand-accent:       #FF766A   /* Icons, chips, badges ≤ 48px only */
--gradient-signature: linear-gradient(135deg, #B41A1A 0%, #FF766A 100%)
```

## Fonts

| Token | Family | Role | Casing |
|---|---|---|---|
| `--font-display` | DVN Luckiest Guy | Hero, ribbon, pill | **UPPERCASE only** |
| `--font-heading` | Be Vietnam Pro | H1–H6 | Mixed case |
| `--font-body` | Plus Jakarta Sans | UI, button, label | Mixed case |
| `--font-mono` | Be Vietnam Pro + `tabular-nums` | SKU, price, code | Mixed |
| `--font-logo` | Gagalin | Wordmark **only** — do not load for UI | — |

## Card invariants

Every card/panel/sheet:

1. `background: #FFFCF1` (`--surface-elevated`) — never `#FFFFFF`
2. `border: 2px solid #EDE3CC` (`--neutral-200`) — never 1px
3. `border-radius: 14px` (`--radius-lg`) minimum
4. `box-shadow: --shadow-md` — red-tinted `rgba(180,26,26,…)`
5. `padding: ≥ 16px`, multiple of 4px
6. Body text `#2B241E` · heading `#1A1612` · muted `#5C5142`
7. Heading font: Be Vietnam Pro (`--font-heading`)
8. Buttons inside: `border-radius: 9999px` (pill)
9. CTA primary: `--gradient-signature` fill + `--shadow-cta`

## Voice

- Vietnamese first, full diacritics always
- ALL CAPS for hero headlines and benefit pills
- 2–4 words per line, stack into 2-line pills
- No emoji. No exclamation marks. No Western gourmet language.
- Sensory verbs: thơm, béo, cay, đậm đà, sánh đặc

## Load

```html
<link rel="stylesheet" href="https://cdn.thichcay.vn/docs/tokens.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
```