# BEBECHIC — Design System

> **Status:** Drafted from the official brand guideline (rút gọn / short form). Mascots and palette are pulled directly from the PDF. The custom BEBECHIC display font was not delivered — temporarily substituted with **Quicksand**. See *Caveats* at the bottom.

---

## 1. Brand at a glance

| | |
|---|---|
| **Name** | BEBECHIC |
| **Mission** | Không đơn thuần bán sản phẩm — BEBECHIC mang đến một trải nghiệm toàn diện: thiết kế nữ tính, đáng yêu nhưng không sến súa; tính ứng dụng cao; sự chỉn chu trong dịch vụ. |
| **Audience** | Gen Z + Gen Y, 18–30 tuổi. 80% nữ / 20% nam. |
| **Personality** | Chic · Cute · Modern · Playful · Friendly · Soft |
| **Mascot chính** | Cá sấu Bebechic (the crocodile) |
| **Mascot phụ** | Cô gái Bebechic (the girl) |

Three-word brief: **chic, cute, modern.** Never *sến súa* (overly sentimental / kitschy).

## 2. Sources

| Source | Type | Path |
|---|---|---|
| Brand Guideline (rút gọn) | PDF, 1 long page | `uploads/Bebechic_Brand Guideline (ban rut gon).pdf` |
| Mounted "Claude Design" folder | (empty when checked) | `Claude Design/` — see *Caveats* |

All mascots, colors, type families, and visual rules come from the PDF.

---

## 3. Content Fundamentals

Copy is **friendly, soft, playful** and speaks to a young Vietnamese audience. The brand voice mixes Vietnamese (primary) with light, modern English mode-words.

### Voice
- **Warm and personal**, like a stylish older sister. Calls the customer *bạn* / *bạn ơi* / *bé* (never *quý khách*).
- **Light, breezy, never serious.** Sentences are short. Emojis used sparingly — at most one per sentence, and only soft ones (🌿 🤍 ✨ 🐊 🌸). Never heavy/loud emoji walls.
- **Compliments + suggestions, never pressure.** "Hợp với bạn lắm đó!" beats "Mua ngay!"
- **Mascot first-person is allowed.** The croc/girl can speak: "Bé Bechic mê set này quá!" — but never overused.

### Casing & punctuation
- Headings: **Sentence case** with first-letter caps. Title Case used only on the wordmark and on labels under 3 words.
- The brand name is always rendered **BEBECHIC** in display contexts, **Bebechic** in body copy.
- Ellipses, soft tildes (~), and trailing emojis are okay in product / marketing copy. **Never** in transactional copy (order updates, errors).

### Examples

| Context | ✅ On-brand | ❌ Off-brand |
|---|---|---|
| Hero | *"Chiếc váy nhỏ, tâm trạng to."* | *"BST mới nhất — Khám phá ngay!!!"* |
| CTA | *Thêm vào giỏ* · *Khám phá thêm* · *Lưu lại để sau* | *MUA NGAY KẺO HẾT* |
| Empty state | *"Giỏ còn trống — đi dạo quanh shop nhé bạn ơi 🌿"* | *"Bạn chưa có sản phẩm nào trong giỏ hàng."* |
| Error | *"Hình như có gì đó chưa ổn. Thử lại sau xíu nha."* | *"Lỗi hệ thống. Mã: 500"* |
| Promo | *"Tuần này shop giảm nhẹ — tiện thì rinh nha~"* | *"FLASH SALE 70% — DUY NHẤT HÔM NAY!"* |

### Emoji policy
- ✅ Soft, nature, sparkles, hearts: 🌿 🌸 🤍 ✨ 🦒 🐊 ☁️ 🍃 🫧
- ❌ Loud, financial, fire: 🔥 💰 🚨 ❗ ‼️
- Never substitute emoji for an icon in UI chrome.

---

## 4. Visual Foundations

The visual language is **pastel mint, warm cream, deep teal accent**, with **24px+ rounded everything**, **doodle/hand-drawn illustration**, and **soft single-color shadows**.

### Color
- **Primary brand mint** `#8FD8C3` carries identity. Used for big surfaces, key buttons, illustration fill.
- **Deep teal** `#176676` is the only *strong* color and is reserved for headings, primary text on light, line treatments around shapes, and the mascot outlines.
- **Cream** `#FFFCF5` is the default page background (never pure white for marketing surfaces). Pure white is only used inside cards and forms.
- **Pastel mint scale** (`#E7FEF7 → #B6E2D3 → #8FD8C3 → #74AF9E → #176676`) gives a 5-step depth ladder used for layering.
- **Blush pink** + **soft yellow** appear in the mascots and are pulled into accents (badges, sale tags, hover blooms). Use sparingly.
- **Avoid** neon, high-contrast, over-saturated, dark backgrounds. The brand lives in light, airy palettes.

### Type
- Display / wordmark: **BEBECHIC (custom TTF)** — delivered. **STRICT RULE: the BEBECHIC face is reserved for the SINGLE largest heading of any deliverable** (e.g. cover title of a deck, document cover wordmark). Never for sub-heads, repeated chrome, body, or labels. Always rendered in UPPERCASE (apply `.bbc-display` or set `text-transform: uppercase`).
- Slides / long-form content: **Ganh (custom OTF)** — delivered. The official slide and printed-collateral face. Loaded in 200 + 400 weights, regular + italic. Use `--font-slide`. All slide chrome, body, headings (except the deck title) live in Ganh.
- For Vietnamese-language headlines that need mixed case outside of slides, use **`--font-display-soft`** (Quicksand) — h1–h5 default to this.
- Body (UI / web): **Be Vietnam Pro** at 400 / 500 / 600 / 700. Designed for Vietnamese diacritics — keep it.
- Type color defaults to **deep teal** on cream/mint surfaces; **ink-soft** for secondary; **mute** for captions.
- Line-height is generous (1.5–1.6) — the layout should breathe.

### Backgrounds
- Default: solid cream or mint-100 wash.
- Hero / feature: **doodle illustrations** scattered as background motifs — clouds, sparkles, tiny flowers, the croc/girl mascots peeking from corners.
- **No photographic full-bleeds** as primary background. Product photos sit *inside* cards/rounded frames against a calm surface.
- **No gradients** beyond very soft mint-to-cream wash. Never bluish-purple gradients. Never neon glow.
- Repeating polka or tiny-doodle patterns are okay at very low contrast as a section break.

### Borders & line treatment
- **Line treatment is signature.** Cards, buttons, illustration outlines, badges — many things get a 1.5–2px deep-teal stroke. This pairs with the heavy radius.
- Stroke is *never* dark/heavy black; always deep teal `#176676` or a tone of it.

### Corner radii — *bo mạnh 24px*
- Default rounding is **24px** (`--r-lg`). Smaller chips use 16px, larger surfaces and the iconic capsule buttons go 32–48px or full pill.
- Avoid sharp 90° corners except inside dense data tables.

### Shadows — *bóng nhẹ nhàng*
- Soft, low-opacity, deep-teal-tinted (not black). 4-tier scale: `xs / sm / md / lg`.
- Never a hard drop shadow or a colored neon glow. No inner shadows.
- Card hover: nudge shadow one step up + lift 2px.

### Hover / press / focus
- **Hover** — color deepens slightly (`brand → brand-deep` over 220ms); for cards, shadow grows one step + 2px lift.
- **Press** — shrink to `scale(0.98)` + 1px Y nudge. Snappy 140ms.
- **Focus** — 3px mint-200 outer ring + 1.5px deep-teal border. Never the browser default.

### Motion
- Default ease: `cubic-bezier(.22,.61,.36,1)` (soft ease-out). Bounce ease is reserved for mascot/illustration entries.
- Durations: 140ms (micro), 220ms (default), 380ms (page / modal).
- Transitions: fade + small Y translate (4–8px). No long slides or 3D flips.
- Mascots can occasionally tilt-wag, blink, or float — never spin or do 3D.

### Transparency & blur
- Light backdrop blur (12–20px) allowed on bottom sheets / floating cart sticky bar. Tint with mint-100 at ~70% opacity.
- Glassmorphism beyond that is **off-brand**.

### Layout
- Generous whitespace. Card grids prefer 2-up or 3-up — never dense 5+ column grids.
- Sticky elements: top nav, bottom cart bar (mobile). Always sit on blurred cream.
- Long content gets section dividers as **doodle squiggle SVGs**, not hard rules.

### Imagery
- Product photography: warm, light, low-saturation, often on cream cyclorama. Editorial — model-on-cream is the house style.
- Illustration: **hand-drawn doodle** (mascots, side decorations, empty states). Always with the brand line treatment.
- ❌ Don't use: stock photography, 3D renders, glossy/metallic finishes, heavy filters, dark-mode imagery.

### Cards
- Rounded 24px, white surface, soft mint shadow, optional 1.5px deep-teal stroke for the "line treatment" variant.
- Hover: lift + shadow upgrade. Press: shrink to 0.98.

---

## 4b. Slide & long-form standards

Slides and multi-page printed deliverables (decks, brand books, internal reports) follow a stricter template than UI surfaces. Templates live in `slides/` and are wired with the rules below.

### Required chrome (every slide)
- **Header**
  - Top-left: BEBECHIC logo (white version on tiffany covers/dividers, mint version on cream/overview)
  - Top-right: document title / topic — e.g. *"Brand Guideline · 2026"*
- **Footer**
  - Left: main topic name (e.g. *"Brand Guideline"*)
  - Center: publication year + brand handle — e.g. *"@2026 · @Bebechic"*
  - Right: owner — e.g. *"@Marketing team leader"*
  - Far right: page number

### Background priority
1. **Cream `#FFFBF5`** — default content slides
2. **Tiffany `#8FD8C3`** — cover & section divider slides
3. **Mint nhạt `#E7FEF7`** — overview / agenda / section-list slides

Tokens: `--slide-bg-content`, `--slide-bg-cover`, `--slide-bg-overview`.

### Page spacing
- Equal margins all 4 sides (96px on a 1920×1080 canvas). Content never touches the edge.
- Generous whitespace between blocks — never cram content edge-to-edge.

### Type rules
- **Ganh** is the only face for slide body, sub-headings, and chrome. Use thin (200) for large italic numerals and quote marks, regular (400) for everything else.
- **BEBECHIC font** is reserved for ONE element in the entire deck: the title on the cover slide. Never again. Never on dividers, never on content slides.
- **Be Vietnam Pro** is *not* used in slides — Ganh handles Vietnamese diacritics natively.

### Graphic elements
- ✅ **Allowed**: 6-petal flower brandmark, dot grid, thin hairlines (1px @ 25% opacity), subtle rounded corners, simple line icons, mascot illustrations
- ❌ **Banned**: 3D effects, heavy/dark shadows, harsh gradients, busy backgrounds, clipart, oversized emoji, drop shadows on type

---

## 5. Iconography

The brand guideline calls for **hand-drawn / doodle illustrations** with a *playful, friendly, soft* feel.

- **Primary icon set:** [**Phosphor Icons**](https://phosphoricons.com/) at **`duotone`** weight, loaded from CDN. Duotone matches the brand's line-treatment + soft fill vocabulary far better than a stroke-only set.
  > ⚠️ **Substitution** — the brand guideline implies bespoke doodle icons. Until those are delivered, Phosphor duotone is the closest CDN-available match (rounded ends, hand-feel, soft secondary fill). See *Caveats*.
- **Illustration sources:** all mascot illustrations (croc + girl, front/side/back) are saved under `assets/`. Use them at 1× scale for spot illustration, never stretched or recolored.
- **No emoji as UI icons.** Emoji can appear in marketing/product *copy* (see Content rules) but never in chrome (nav, buttons, tabs).
- **No Unicode symbols** for stars, arrows, chevrons — use Phosphor.
- **Logo treatment** — the BEBECHIC wordmark logo provided in the PDF could not be extracted as a clean vector (it's set in the custom display font). Currently rendered live with the substitute font. Replace with an exported SVG once available.

Loading Phosphor:
```html
<script src="https://unpkg.com/@phosphor-icons/web"></script>
<i class="ph-duotone ph-shopping-bag"></i>
```

---

## 6. Index — files in this design system

This document is served from the BEBECHIC CDN. Public URLs below assume `https://cdn.bebechic.vn`.

```
/docs/
  context.md               ← compact system prompt (<600 tokens) — start here for LLMs
  README.md                ← you are here — full reference
  tokens.css               ← all tokens (color, type, spacing, radii, shadow, motion) + @font-face
  handbook.html            ← full self-contained brand presentation (single file)
  preview/                 ← design-system cards, one concept per file
    *.html
  slides/                  ← BEBECHIC slide-deck templates
    index.html             ← cover · overview · divider · content · quote · image
    design-system-full.html← full worked example deck
    slides.css             ← shared slide chrome + layouts
    deck-stage.js          ← deck shell (scaling, keyboard nav, print)

/fonts/                    ← delivered brand fonts (referenced absolutely by tokens.css)
  BEBECHIC_Black_Final.ttf ← display face — cover titles only, always UPPERCASE
  Ganh-Regular.otf         ← slide / long-form face
  Ganh-RegularItalic.otf · Ganh-Thin.otf · Ganh-ThinItalic.otf

/images/
  mascots/                 ← Cá sấu Bebechic (croc) + Cô gái Bebechic (girl), front/side/back
  logos/                   ← wordmark, brandmark, secondary "Bebe", white variants

/media/                    ← Bebechic_Brand_Guideline.pdf (original delivered guideline)

/ui-kits/
  ecommerce-app/           ← Mobile commerce app UI kit (primary surface)
```

The Agent Skill entry point (`SKILL.md`) lives at the repo root, not on the CDN.

---

## 7. Caveats — please help us close the gaps

The following items were inferred or substituted. Please confirm or send the source files so we can finalize:

1. ~~**Custom BEBECHIC display font** — not delivered.~~ ✅ **Delivered.** Wired in via `/fonts/BEBECHIC_Black_Final.ttf`. Quicksand kept as a soft secondary for body-adjacent display (`--font-display-soft`).
2. **Wordmark logo** — only the PDF rendering is available; no clean SVG. Please export and send.
3. **Doodle icon set** — the guideline calls for hand-drawn icons but none were delivered. Currently using **Phosphor duotone** as a temporary stand-in. If you have a custom set (even partial), send it and we'll swap.
4. **Product context** — the brief describes the brand but not the surface it sells on. We've assumed a Vietnamese e-commerce **mobile app** for the UI kit (`/ui-kits/ecommerce-app/`). A desktop / web storefront kit is not yet built — let us know if it's needed, or if the real surface is different (marketplace, social, physical retail companion, etc.).
5. **Iconography reference samples** — none in the PDF beyond the word "doodle." If you have any hand-drawn icon examples or Instagram posts to reference, that would let us refine fastest.