---
name: bebechic-design
description: Hub skill for the BEBECHIC brand design system — a Vietnamese fashion / lifestyle brand for Gen Z + Gen Y (18–30, ~80% female). Use to generate on-brand interfaces, mocks, decks, and marketing visuals, and as the entry point that routes to the specialized bebechic-canva / bebechic-figma / bebechic-ecommerce / bebechic-imagegen skills.
user-invocable: true
---

# BEBECHIC — Design System (hub)

All brand assets are served from the CDN at `https://cdn.bebechic.vn`. This skill is self-contained: every reference below is an absolute URL, so it works whether it was fetched cold from the CDN or installed as a Claude Code plugin.

**Start by reading:**
- Compact rules (paste into a system prompt): https://cdn.bebechic.vn/docs/context.md
- Full reference (content + visual + slide + iconography rules): https://cdn.bebechic.vn/docs/README.md
- CSS tokens + `@font-face`: https://cdn.bebechic.vn/docs/tokens.css

## Brand essence

chic · cute · modern · pastel · doodle illustration. Never *sến súa* (overly sentimental / kitschy). Audience: Gen Z + Gen Y, 18–30, ~80% nữ. Mascots: Cá sấu Bebechic (croc) + Cô gái Bebechic (girl).

## Non-negotiables (see context.md for the full NEVER list)

- Page background cream `#FFFCF5` — pure white only inside cards/forms
- Primary mint `#8FD8C3`; deep teal `#176676` for headings, strokes, mascot outlines, primary text on light
- `border-radius` default **24px**; soft **deep-teal-tinted** shadows `rgba(23,102,118,…)` — never black, never neon
- Line treatment: 1.5–2px deep-teal stroke — never heavy black
- **Color dominance lock**: cream-dominant (55–70%), mint+teal identity (15–30%), blush/pink a minor accent only (≤8%). Never pink-dominant, never kawaii/chibi/anime styling. "Bebe/chic" ≠ pink-cute. Full ratio table in [context.md](https://cdn.bebechic.vn/docs/context.md).
- Fonts: **BEBECHIC** (display — the SINGLE largest heading only, always UPPERCASE), **Ganh** (slides / long-form), **Be Vietnam Pro** (body/UI, incl. buttons), **Quicksand** (mixed-case VN headlines)
- Voice: warm, soft, playful — *bạn ơi*, never *quý khách*. Vietnamese first, full diacritics. Soft emoji in marketing copy only, never in UI chrome.

## Assets (always absolute URLs)

- Fonts: `https://cdn.bebechic.vn/fonts/` — `BEBECHIC_Black_Final.ttf`, `Ganh-Regular.otf`, `Ganh-RegularItalic.otf`, `Ganh-Thin.otf`, `Ganh-ThinItalic.otf`
- Mascots: `https://cdn.bebechic.vn/images/mascots/` — croc + girl, front/side/back. **Use the real files — never generate or redraw a mascot.**
- Logos: `https://cdn.bebechic.vn/images/logos/` — wordmark, brandmark, secondary "Bebe", white variants
- Slide templates: `https://cdn.bebechic.vn/docs/slides/` (canonical deck at `/docs/slides/index.html`)
- Preview cards: `https://cdn.bebechic.vn/docs/preview/` — one token/component per file
- Mobile UI kit: `https://cdn.bebechic.vn/ui-kits/ecommerce-app/`
- Brand guideline PDF: `https://cdn.bebechic.vn/media/Bebechic_Brand_Guideline.pdf`

## Route to a specialized skill

Pick the skill that matches the deliverable, then fetch it from `https://cdn.bebechic.vn/skills/<name>/SKILL.md`:

| Deliverable | Skill |
|---|---|
| Canva design (social posts, banners, marketing graphics) | **bebechic-canva** |
| Figma file / design tokens / dev handoff | **bebechic-figma** |
| E-commerce copy & listing assets (PDP, product names, promos) | **bebechic-ecommerce** |
| AI image generation prompts (photography, illustration) | **bebechic-imagegen** |
| Web/app UI, slides, generic HTML artifacts | stay here (this hub) |

The full machine-readable skill index is at `https://cdn.bebechic.vn/skills/index.json`.

## Working method

- **Visual artifacts** (slides, mocks, prototypes): create static HTML that links `https://cdn.bebechic.vn/docs/tokens.css` and uses its CSS variables — never redefine the palette inline. Pull mascots/logos by absolute URL.
- **Production code**: read the full reference (README.md) sections — Content Fundamentals, Visual Foundations, Iconography — and design as a brand expert.
- **Icons**: Phosphor duotone (`https://unpkg.com/@phosphor-icons/web`), never emoji-as-icon, never Unicode symbols.

If invoked with no other guidance, ask what surface (mobile / web / marketing / slides / Canva / Figma), ask a couple of scope questions, then act as an expert BEBECHIC designer.

## Output QA checklist (before delivering anything)

- [ ] Reads as BEBECHIC (chic·modern·soft) — **not** generic pink-kawaii fashion
- [ ] Cream dominant; mint + teal present as identity; pink only a minor accent (≤8%)
- [ ] Radii ≥ 16px (24px default); shadows soft & deep-teal-tinted, never black
- [ ] BEBECHIC display face used at most once (largest heading), UPPERCASE; chrome/buttons in body face
- [ ] Mascots/logos are official files from the CDN — none generated or redrawn
- [ ] Vietnamese has full diacritics; no emoji in UI chrome
- [ ] No hallucinated product claims / prices / promos (user-provided or clearly marked placeholder)
- [ ] Routed to the right specialized skill if the task needed one