# BEBECHIC Design System

Vietnamese fashion / lifestyle brand for Gen Z + Gen Y (18–30, ~80% nữ).
Three-word brief: **chic · cute · modern.** Never *sến súa* (kitschy / over-sentimental).
Full reference: https://cdn.bebechic.vn/docs/README.md

---

## NEVER

- ❌ Pure `#FFFFFF` as page background → use cream `#FFFCF5` (`--bg-page`). White only inside cards/forms.
- ❌ `#000000` for text → use deep teal ink `#1a3a40` (`--fg-1`), or `--brand-deep` `#176676`
- ❌ `border-radius` < 16px on surfaces → brand default is **24px** (`--r-lg`)
- ❌ Black or neon `box-shadow` → soft deep-teal-tinted `rgba(23,102,118,…)` only
- ❌ Heavy black strokes → line treatment is 1.5–2px deep teal `#176676`
- ❌ BEBECHIC display font anywhere but the SINGLE largest heading — and never in mixed case
- ❌ Neon / high-contrast / dark backgrounds / bluish-purple gradients
- ❌ **Pink/blush as a dominant color**, or **kawaii / chibi / anime** styling → BEBECHIC reads as *chic·modern*, not cutesy. "Bebe/chic" ≠ pink. Cream + mint + teal carry identity; pink is a minor accent only.
- ❌ Emoji in UI chrome (nav, buttons, tabs); loud emoji 🔥💰🚨 anywhere
- ❌ Vietnamese without full diacritics

## Color dominance lock

BEBECHIC's recognizable palette is **cream-dominant with mint/teal identity**. Keep roughly:

| Color group | Share of a visual |
|---|---|
| Cream / off-white / light neutral | 55–70% |
| Mint + deep teal | 15–30% |
| Soft neutral (beige/gray) | 10–20% |
| Blush / pink | **0–8% (minor accent only)** |

Never let pink, peach, or brown become the dominant cast. Never default to a kawaii-pink boutique look or chibi mascot styling unless the user *explicitly* asks for a one-off campaign variant.

## Core tokens

```css
--brand:        #8FD8C3   /* primary mint — big surfaces, key buttons, fills */
--brand-deep:   #176676   /* deep teal — headings, strokes, mascot outlines, primary text on light */
--brand-soft:   #B6E2D3   /* secondary mint */
--brand-wash:   #E7FEF7   /* near-white mint wash */
--bg-page:      #FFFCF5   /* cream page background */
--accent-pink:  #f5a6b3   /* blush accent — badges, sale tags (sparingly) */
--accent-rose:  #d4527a   /* rosy accent */
```

## Fonts

| Token | Family | Role | Casing |
|---|---|---|---|
| `--font-display` | BEBECHIC | ONE largest heading per deliverable (deck/cover title) | **UPPERCASE only** |
| `--font-display-soft` | Quicksand | Mixed-case VN headlines, h1–h5 default | Mixed |
| `--font-slide` | Ganh | Slides & long-form / printed collateral | Mixed |
| `--font-body` | Be Vietnam Pro | UI / web body, buttons, labels | Mixed |

## Surface invariants

Every card / panel / sheet:

1. `background: #ffffff` on a cream page (`--bg-page` outside)
2. `border-radius: 24px` (`--r-lg`) — chips 16px, capsule buttons pill
3. `box-shadow: var(--sh-md)` — soft, deep-teal-tinted, never black
4. Optional "line treatment": `1.5px` deep-teal stroke (`--sh-line`)
5. Heading text `--brand-deep`; body `--fg-2`; captions `--fg-3`
6. Hover: shadow +1 step + 2px lift · Press: `scale(0.98)`
7. Focus: 3px mint-200 ring + 1.5px deep-teal border — never browser default

## Voice

- Vietnamese first, full diacritics. Warm, soft, playful — like a stylish older sister.
- Calls the customer *bạn* / *bạn ơi* / *bé* — never *quý khách*.
- Compliments + suggestions, never pressure. "Hợp với bạn lắm đó!" not "MUA NGAY!"
- Short sentences. Soft emoji (🌿 🌸 🤍 ✨ 🐊) at most one per sentence, marketing copy only.
- Never soft tildes / trailing emoji in transactional copy (order updates, errors).

## Load

```html
<link rel="stylesheet" href="https://cdn.bebechic.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&family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Icons: Phosphor duotone -->
<script src="https://unpkg.com/@phosphor-icons/web"></script>
```