---
name: bebechic-figma
description: Set up a BEBECHIC design system in Figma and hand off to developers — map tokens.css to Figma variables and styles, name components consistently, wire the mint/teal/cream palette, and keep Figma in sync with the CDN. Use when the deliverable is a Figma file, a design-tokens setup, or a design-to-dev handoff for the BEBECHIC brand.
user-invocable: true
---

# BEBECHIC in Figma

Canonical tokens: `https://cdn.bebechic.vn/docs/tokens.css`. Figma is downstream of that file — when the two disagree, `tokens.css` wins. This skill maps the CSS tokens onto Figma's variable + style model and defines handoff conventions.

## 1. Variable collections

Create two variable collections so semantic roles can be re-pointed without touching every layer.

**Collection `primitives`** (raw values, from `tokens.css`):

| Variable | Value |
|---|---|
| `mint/100` | `#E7FEF7` |
| `mint/200` | `#B6E2D3` |
| `mint/300` | `#8FD8C3` |
| `mint/500` | `#74AF9E` |
| `mint/700` | `#176676` |
| `cream` | `#FFFCF5` |
| `blush/200` | `#FFD8DB` |
| `blush/400` | `#F5A6B3` |
| `blush/600` | `#D4527A` |
| `ink` | `#1A3A40` |
| `ink-soft` | `#3D5A60` |
| `mute` | `#7A8E92` |

**Collection `semantic`** (aliases → primitives, mirrors the `--` roles):

| Variable | → alias |
|---|---|
| `bg/page` | `cream` |
| `bg/surface` | `#FFFFFF` |
| `bg/soft` | `mint/100` |
| `brand` | `mint/300` |
| `brand/deep` | `mint/700` |
| `fg/1` | `ink` |
| `fg/2` | `ink-soft` |
| `fg/3` | `mute` |
| `accent/pink` | `blush/400` |
| `border/brand` | `mint/300` |

Bind every layer fill to a `semantic` variable, never to a raw hex.

## 2. Number variables — radii & spacing

Radii (`radius/`): `xs 6 · sm 10 · md 16 · lg 24 · xl 32 · 2xl 48 · pill 999`. Default surface radius = `radius/lg` (24).
Spacing (`space/`): `1 4 · 2 8 · 3 12 · 4 16 · 5 20 · 6 24 · 8 32 · 10 40 · 12 48 · 16 64 · 20 80`.

## 3. Text styles

Font families: **BEBECHIC** (display), **Ganh** (slide/long-form), **Be Vietnam Pro** (body/UI), **Quicksand** (mixed-case headlines). Install the custom faces locally from `https://cdn.bebechic.vn/fonts/` before creating styles.

| Style | Font | Size / line-height |
|---|---|---|
| `display/hero` | BEBECHIC (UPPERCASE, +4% tracking) | 72 / 1.05 |
| `heading/h1` | Quicksand 700 | 56 / 1.15 |
| `heading/h2` | Quicksand 700 | 40 / 1.15 |
| `heading/h3` | Quicksand 600 | 32 / 1.2 |
| `body/lg` | Be Vietnam Pro 400 | 20 / 1.55 |
| `body/base` | Be Vietnam Pro 400 | 16 / 1.55 |
| `label` | Be Vietnam Pro 600 | 14 / 1.3 |

Reserve `display/hero` for the single largest heading of a file/screen. Do not apply it to repeated chrome.

## 4. Effect styles (shadows) — deep-teal-tinted, never black

| Style | Value |
|---|---|
| `shadow/xs` | `0 1 2` rgba(23,102,118,0.06) |
| `shadow/sm` | `0 2 6` rgba(23,102,118,0.07) |
| `shadow/md` | `0 8 20` rgba(23,102,118,0.08) |
| `shadow/lg` | `0 18 40` rgba(23,102,118,0.10) |

For the "line treatment" variant use an inside/outside stroke of 1.5px `brand/deep`, not a drop shadow.

## 5. Component naming

`Category/Component/Variant` — e.g. `Button/Primary/Default`, `Button/Primary/Pressed`, `Card/Product/Line`, `Badge/Sale`, `Nav/Bottom/Active`. Use Figma component properties for state (Default / Hover / Pressed / Disabled) rather than separate names. Match the recreated components in the UI kit at `https://cdn.bebechic.vn/ui-kits/ecommerce-app/` (`components.jsx`).

## 6. Dev handoff

- Ship developers the token names, not raw hex — they map 1:1 to the CSS custom properties in `tokens.css` (`brand/deep` → `--brand-deep`, `radius/lg` → `--r-lg`).
- Point them at `https://cdn.bebechic.vn/docs/tokens.css` and `https://cdn.bebechic.vn/docs/context.md` so code and design share one source.
- Fonts are loaded via `@font-face` from `https://cdn.bebechic.vn/fonts/` — devs don't self-host.
- Flag any place a design used a raw value not in the token set; either add a token or fix the design before handoff.

## Output QA checklist

- [ ] Every fill/text/effect bound to a `semantic` variable — no raw hex, no one-off local colors
- [ ] Colors, type, radius, spacing, shadow all mapped to variables/styles matching `tokens.css`
- [ ] `display/hero` (BEBECHIC) used at most once per file; buttons/chrome in the body text style
- [ ] Components named `Category/Component/Variant`; states via component properties
- [ ] Cream-dominant, mint/teal identity, blush minor — palette matches the dominance lock
- [ ] Handoff doc lists token names (not hex) and links `/docs/tokens.css` + `/docs/context.md`