McBling

---
name: mcbling
description: Apply the McBling visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" McBling, mentions bling era, 2000s glam, paris hilton era, or describes hot pink on pale pink, rhinestone and glitter textures, metallic silver chrome accents — 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
---

# McBling Design System

The maximalist glam of 2003–2008 tabloid culture: hot pink and baby pink, rhinestones and glitter, metallic silver, leopard print, script fonts, and ostentatious logo-mania. Juicy Couture tracksuits, bedazzled flip phones, and MySpace-era sparkle, coined as 'McBling' by CARI's Froyo Tam.

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 McBling.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (bling era, 2000s glam, paris hilton era, rhinestone y2k, urbling), or describes its traits: hot pink on pale pink; rhinestone and glitter textures; metallic silver chrome accents; flowing script display type; leopard print and hearts; sparkle cursors and star bursts.

## Design tokens

### Color palette

- Pale baby-pink page background: `#fdeef6` (--color-bg)
- Card fill, glossy white: `#ffffff` (--color-surface)
- Primary text, deep berry: `#43112e` (--color-text)
- Secondary text, muted plum: `#6d3a55` (--color-text-muted)
- Hot pink — the signature color (large/bold use; see accessibility notes): `#ff2d95` (--color-accent)
- Deepened pink for small text links and focus states: `#c40e6e` (--color-accent-deep)
- Metallic silver for chrome strips and hardware details: `#c9ced6` (--color-silver)
- Bling gold for jewelry-tier highlights: `#d4af37` (--color-gold)
- Leopard-print base tan for pattern fills: `#b98a4a` (--color-leopard)
- Soft pink borders and dividers: `#f3b8d8` (--color-border)

### Typography

- Display / headings: Yellowtail (fallback: Brush Script MT, cursive) (ideal: Scriptina, premium — use Yellowtail as the free substitute)
- Body: Poppins (fallback: Verdana, Arial, sans-serif)
- Type scale: 1.3 ratio, base 16px — computed steps: 16px / 21px / 27px / 35px / 46px / 59px (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.6, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 64 — Busy and decorated — elements cluster like charms on a bracelet, with stickers, badges, and sparkles filling gaps that minimalism would leave empty.
- Border radius: md 14px, lg 22px, pill 999px, heart 999px — Soft and bubbly throughout; pills, hearts, and rounded tags. Nothing sharp.
- Border treatment: 2px solid #f3b8d8 — Borders are decorative — dotted rhinestone borders (dashed 2px #ff2d95) and silver chrome edges are on-style.

### Shadows

- glam: `0 6px 16px rgba(255, 45, 149, 0.25)` — Pink-tinted lift for cards and buttons
- sparkle-glow: `0 0 12px rgba(255, 255, 255, 0.9), 0 0 20px rgba(255, 45, 149, 0.5)` — Glint behind sparkle icons and bedazzled elements
- chrome-inset: `inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(0,0,0,0.15)` — Metallic edge on silver strips and hardware details

### Layout

- Max content width: 1080px
- Centered compositions with symmetrical decoration, like a monogrammed accessory
- Sticker layering: badges, hearts, and sparkles overlapping card corners
- Leopard or glitter texture bands separating sections
- Script headline + sans body pairing everywhere

### Effects

- Rhinestone dot texture: radial-gradient white-to-pink dots repeated over accent fills
- Four-point star sparkles (✦) scattered on headings and hover states
- Glitter noise texture at low opacity over pink bands
- Chrome strip: linear-gradient(180deg, #f5f7fa, #c9ced6 50%, #9aa2ad) dividers
- Leopard-print pattern fills for hero bands and tags

### Motion

- Easing: cubic-bezier(0.34, 1.56, 0.64, 1); durations 150ms / 280ms / 500ms
- Bouncy overshoot on hover — elements pop like charms
- Sparkle glints animate in on page load and on button hover
- Cursor-trail sparkles are period-correct but strictly opt-in; always honor prefers-reduced-motion

## CSS variables (drop-in)

```css
:root {
  --color-bg: #fdeef6;
  --color-surface: #ffffff;
  --color-text: #43112e;
  --color-text-muted: #6d3a55;
  --color-accent: #ff2d95;
  --color-accent-deep: #c40e6e;
  --color-silver: #c9ced6;
  --color-gold: #d4af37;
  --color-leopard: #b98a4a;
  --color-border: #f3b8d8;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --radius-heart: 999px;
  --shadow-glam: 0 6px 16px rgba(255, 45, 149, 0.25);
  --shadow-sparkle-glow: 0 0 12px rgba(255, 255, 255, 0.9), 0 0 20px rgba(255, 45, 149, 0.5);
  --shadow-chrome-inset: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -1px 0 rgba(0,0,0,0.15);
  --border-default: 2px solid #f3b8d8;
  --font-display: Yellowtail, "Brush Script MT", cursive;
  --font-body: Poppins, Verdana, Arial, sans-serif;
  --text-base: 16px;
  --leading-heading: 1.2;
  --leading-body: 1.6;
  --tracking-heading: 0.01em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 280ms;
  --duration-slow: 500ms;
}
```

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

## Component recipes

- **Nav:** White bar with pink bottom border, script logo, pill links; active link gets a rhinestone-dotted pill fill
- **Hero:** Script headline in hot pink with sparkle glints, leopard or glitter band behind, glossy white card stack, pill CTA with glam shadow
- **Card:** White rounded card with 2px pink border, glam shadow, and a sticker badge (heart, star, or crown) overlapping one corner
- **Button (primary):** Hot pink pill with white bold Poppins label, glam shadow, sparkle glint on hover — large sizes so the white-on-pink stays readable
- **Button (secondary):** White pill with 2px pink border and accent-deep label
- **Form fields:** White field with 2px pink border, 14px radius; focus adds a pink glow ring and a tiny sparkle at the field's corner

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

A word set in flowing script, 'bedazzled' with rhinestone dots and a four-point sparkle glint, sitting on hot pink against leopard print or a silver chrome strip. Spend boldness here; keep everything else quiet.

## Do

- Decorate — badges, sparkles, charms, and borders are the content's jewelry
- Pair one script display face with a clean rounded sans; never two scripts
- Use metallic silver and gold as seasoning against the pinks
- Commit to maximalism; a half-hearted version reads as generic feminine branding

## Don't

- No muted 'millennial pink' tastefulness — the pink must be hot
- Never set body copy or long labels in the script face
- No minimalist white space worship; emptiness is off-brand
- Don't drop the sparkle/rhinestone textures — without them it's just a pink theme

## Accessibility notes

- Hot pink #ff2d95 measures roughly 3.1:1 on the pale pink background — it fails 4.5:1 and is honestly reserved for large display text and fills; small links and interactive text use accent-deep (#c40e6e), and white-on-hot-pink is limited to large bold labels
- Script faces (Yellowtail/Scriptina) are decorative only — headings must also exist as real text, and anything functional is set in Poppins
- Sparkle animations and cursor trails must be disabled under prefers-reduced-motion; glitter textures stay below 15% opacity behind text

## Reference sites

- Aesthetics Wiki — McBling: https://aesthetics.fandom.com/wiki/McBling
- CARI — McBling: https://cari.institute/aesthetics/mcbling
- Mc-Bling.com fan archive: https://mc-bling.com

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

Install this skill

unzip mcbling.zip -d ~/.claude/skills/

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

Settings → Capabilities → Skills → Upload skill → mcbling.zip