Coquette Balletcore

---
name: coquette-balletcore
description: Apply the Coquette Balletcore visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Coquette Balletcore, mentions coquette aesthetic, balletcore, ribbon aesthetic, or describes ballet pink layering, ribbon and bow motifs, delicate serif italics — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Coquette Balletcore Design System

Soft romantic girlhood: ballet pinks layered like tulle, ribbon and bow motifs as dividers and ornaments, delicate serif italics for emphasis, satin textures, and a palette that never raises its voice above a blush.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values follow the widely documented recipe for this style. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Coquette Balletcore.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (coquette aesthetic, balletcore, ribbon aesthetic, ballet pink, soft romantic girlhood, bow-core), or describes its traits: ballet pink layering; ribbon and bow motifs; delicate serif italics; satin and tulle textures; lace-edge details; handwritten love-note accents.

## Design tokens

### Color palette

- Ballet-pink ground: `#fbeef2` (--color-bg)
- Cards and content panels, like satin against tulle: `#ffffff` (--color-surface)
- Deep mauve-plum body text: `#43333c` (--color-text)
- Captions and secondary text: `#715a65` (--color-text-muted)
- Rosewood — links, buttons, italic emphasis: `#a03e62` (--color-accent)
- Ribbon pink for bows, dividers, and decorative strokes: `#e8a4b8` (--color-ribbon)
- Deeper blush for bands, tags, and hover tints: `#f4d3dd` (--color-satin)
- Soft rose hairlines: `#eccdd7` (--color-border)

### Typography

- Display / headings: Cormorant (fallback: Garamond, Georgia, serif) (ideal: Didot, premium — use Cormorant as the free substitute)
- Body: Karla (fallback: Helvetica Neue, Arial, sans-serif)
- Type scale: 1.25 ratio, base 16px — computed steps: 16px / 20px / 25px / 31px / 39px / 49px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 400, line-height 1.2, letter-spacing 0.01em
- Body: line-height 1.65, letter-spacing 0.01em

### Spacing, radius, border

- Spacing scale (px): 8, 16, 24, 32, 48, 72, 104 — Airy and dainty: small delicate elements in generous pink space; nothing heavy, nothing crowded, like items arranged on a vanity.
- Border radius: md 12px, lg 24px, pill 999px, scallop 24px 24px 24px 24px — Everything softened; pills for tags and buttons, scalloped or lace-edged cards where the craft budget allows.
- Border treatment: 1px solid #eccdd7 — Fine rose hairlines; important panels may take a double-line border like stationery.

### Shadows

- powder: `0 2px 10px rgba(160, 62, 98, 0.10)` — Default card softness
- lifted: `0 10px 30px rgba(160, 62, 98, 0.14)` — Modals and hover lift

### Layout

- Max content width: 1140px
- Centered symmetrical compositions — the poise is balletic, not editorial-asymmetric
- Bow dividers between sections instead of rules
- Product imagery on white satin panels floating over the pink ground
- Italic serif pull-lines woven between sections like notes passed in class

### Effects

- SVG ribbon-and-bow line art as dividers, bullets, and corner ornaments
- Lace or scallop edge masks on hero panels
- Subtle satin sheen gradient (2-3%) on pink bands
- Handwritten-style annotations for asides (used sparingly)

### Motion

- Easing: cubic-bezier(0.33, 1, 0.68, 1); durations 180ms / 320ms / 560ms
- Gentle fades and 4-6px rises; movement like fabric settling
- Bows may draw themselves in on first view (SVG stroke animation)
- Hover tints surfaces toward satin pink rather than scaling elements

## CSS variables (drop-in)

```css
:root {
  --color-bg: #fbeef2;
  --color-surface: #ffffff;
  --color-text: #43333c;
  --color-text-muted: #715a65;
  --color-accent: #a03e62;
  --color-ribbon: #e8a4b8;
  --color-satin: #f4d3dd;
  --color-border: #eccdd7;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --radius-scallop: 24px 24px 24px 24px;
  --shadow-powder: 0 2px 10px rgba(160, 62, 98, 0.10);
  --shadow-lifted: 0 10px 30px rgba(160, 62, 98, 0.14);
  --border-default: 1px solid #eccdd7;
  --font-display: Cormorant, Garamond, Georgia, serif;
  --font-body: Karla, "Helvetica Neue", Arial, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.2;
  --leading-body: 1.65;
  --tracking-heading: 0.01em;
  --tracking-body: 0.01em;
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 560ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500&family=Karla:wght@400;600&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Airy centered nav: wordmark in Cormorant, small letterspaced Karla links, a tiny bow marking the active page
- **Hero:** Cormorant headline with one italic rosewood word, short Karla subline, ribbon ornament beneath, product or portrait in a lace-edged panel
- **Card:** White satin panel, 24px radius, powder shadow, rose hairline; title in Cormorant, a small bow bullet before the meta line
- **Button (primary):** Rosewood pill, white text, small letterspaced label; hover deepens toward plum
- **Button (secondary):** White pill with rose hairline border and rosewood text; hover fills with satin pink
- **Form fields:** White fill, rose hairline, 12px radius; focus ring in ribbon pink with a rosewood border

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The bow: a thin looping ribbon rendered as SVG line-art, used as a section divider, list bullet, and corner ornament — paired with Cormorant italic emphasis words in rosewood on ballet pink. Spend boldness here; keep everything else quiet.

## Do

- Use the bow motif consistently — divider, bullet, ornament — so it reads as identity, not decoration
- Keep emphasis in Cormorant italic rosewood; it does the romantic work
- Layer the pinks (ground, satin, ribbon) for depth instead of adding new hues
- Keep compositions symmetrical and poised

## Don't

- Don't use hot pink or neon — coquette blushes, it never glows
- Don't set body copy in italic serif; delicacy is for emphasis, Karla carries paragraphs
- Don't add heavy borders, dark shadows, or bold black anywhere
- Don't crowd the vanity: every ornament needs breathing room to stay dainty

## Accessibility notes

- The rosewood accent (#a03e62) passes on ballet pink for text; the lighter ribbon and satin pinks are decorative only and must never carry text or meaning
- Fine hairlines and delicate serifs need adequate sizes — keep Cormorant at 20px+ and interactive targets at 44px
- Muted mauve (#715a65) is near the contrast floor on pink — verify at final sizes and darken if used below 16px

## Reference sites

- Glossier: https://www.glossier.com
- Repetto: https://repetto.com
- Sandy Liang: https://sandyliang.info

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip coquette-balletcore.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/coquette-balletcore.json

Settings → Capabilities → Skills → Upload skill → coquette-balletcore.zip