Rosé Pine

---
name: rose-pine
description: Apply the Rosé Pine visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Rosé Pine, mentions rose pine, rosé pine main, soho vibes theme, or describes plum-tinted near-black base, muted boutique accents, rose and gold warmth — 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
---

# Rosé Pine Design System

All natural pine, faux fur and a bit of soho vibes: a plum-black base with soft lavender-white text and a boutique accent wardrobe — rose, gold, iris, foam, deep pine. The classiest of the terminal themes, muted and romantic where others are neon or icy.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values come from the officially published token set. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Rosé Pine.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (rose pine, rosé pine main, soho vibes theme, faux fur palette), or describes its traits: plum-tinted near-black base; muted boutique accents; rose and gold warmth; soft lavender text; classy low-saturation romance.

## Design tokens

### Color palette

- Page background — Rosé Pine main base: `#191724` (--color-bg)
- Cards and panels — main surface: `#1f1d2e` (--color-surface)
- Popovers, inputs, third layer — main overlay: `#26233a` (--color-overlay)
- Primary text — main text: `#e0def4` (--color-text)
- Secondary text — subtle: `#908caa` (--color-text-muted)
- Faint text, disabled states — muted: `#6e6a86` (--color-muted)
- Links and primary interactive accent — iris: `#c4a7e7` (--color-accent)
- Errors, destructive actions, romance accents — love: `#eb6f92` (--color-love)
- Warnings, highlights, warm emphasis — gold: `#f6c177` (--color-gold)
- Soft feature accent and decorative tints — rose: `#ebbcba` (--color-rose)
- Deep teal for fills, headers, alt actions — pine: `#31748f` (--color-pine)
- Info accents and cool highlights — foam: `#9ccfd8` (--color-foam)

### Typography

- Display / headings: Space Mono (fallback: Courier New, monospace)
- Body: DM Sans (fallback: -apple-system, Segoe UI, sans-serif)
- Mono / data: Space Mono (fallback: Courier New, monospace)
- 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 700, line-height 1.2, letter-spacing -0.01em
- Body: line-height 1.7, letter-spacing 0.005em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 72, 96 — Boutique spaciousness — generous padding and calm vertical rhythm; Rosé Pine should feel like a candlelit reading nook, never a busy control panel.
- Border radius: sm 6px, md 12px, full 999px — Soft rounding throughout; pills welcome for tags — the theme's character is gentle.
- Border treatment: 1px solid #26233a — Overlay-toned hairlines; the published highlight tones (low/med/high) serve as hover and selection washes.

### Shadows

- none: `none` — Default — depth comes from the base/surface/overlay triad
- veil: `0 6px 28px rgba(25, 23, 36, 0.6)` — Modals and floating menus, tinted with base

### Layout

- Max content width: 1100px
- Layer with the published base → surface → overlay triad; borders stay whisper-quiet
- Iris handles links, love/gold/foam carry status, rose and pine are the decorative wardrobe
- Editorial-leaning composition: a narrower measure and larger type suit its reading-room mood

### Effects

- Code blocks on surface #1f1d2e with verbatim Rosé Pine syntax accents and muted #6e6a86 comments
- Decorative rose/iris gradient hairlines (1px) under section headings, used sparingly

### Motion

- Easing: cubic-bezier(0.3, 0, 0.2, 1); durations 140ms / 240ms / 400ms
- Slower and softer than typical UI — fades and gentle 4px rises, nothing snaps
- Hover states wash backgrounds with overlay rather than changing accent colors

## CSS variables (drop-in)

```css
:root {
  --color-bg: #191724;
  --color-surface: #1f1d2e;
  --color-overlay: #26233a;
  --color-text: #e0def4;
  --color-text-muted: #908caa;
  --color-muted: #6e6a86;
  --color-accent: #c4a7e7;
  --color-love: #eb6f92;
  --color-gold: #f6c177;
  --color-rose: #ebbcba;
  --color-pine: #31748f;
  --color-foam: #9ccfd8;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-full: 999px;
  --shadow-veil: 0 6px 28px rgba(25, 23, 36, 0.6);
  --border-default: 1px solid #26233a;
  --font-display: "Space Mono", "Courier New", monospace;
  --font-body: "DM Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", "Courier New", monospace;
  --text-base: 16px;
  --leading-heading: 1.2;
  --leading-body: 1.7;
  --tracking-heading: -0.01em;
  --tracking-body: 0.005em;
  --ease: cubic-bezier(0.3, 0, 0.2, 1);
  --duration-fast: 140ms;
  --duration-base: 240ms;
  --duration-slow: 400ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Quiet bar on base with no border, just spacing; links in subtle #908caa, active link in text with a small rose dot marker; wordmark in Space Mono.
- **Hero:** Space Mono headline in #e0def4 with one word in rose #ebbcba and a gold underline stroke; standfirst in subtle; a single iris-colored CTA — boutique restraint, not a feature grid.
- **Card:** Surface panel, 12px radius, 1px overlay border, 24-32px padding; eyebrow tag in gold, title text, body subtle; hover washes the card with overlay #26233a.
- **Button (primary):** Iris #c4a7e7 fill with base #191724 text, 8px radius, 500 weight; hover softens toward rose #ebbcba.
- **Button (secondary):** Transparent with 1px muted #6e6a86 border and text-colored label; hover fills overlay and brightens border to subtle.
- **Form fields:** Overlay #26233a input, no border at rest, 8px radius; focus adds a 1px iris border and faint iris glow; placeholder in muted #6e6a86 with a visible label in subtle.

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 rose-and-gold wardrobe on plum: dusty rose #ebbcba and warm gold #f6c177 set against #191724 with iris #c4a7e7 links — elegant, softly warm, and instantly distinguishable from every blue-cast dark theme. Spend boldness here; keep everything else quiet.

## Do

- Keep saturation low everywhere — Rosé Pine's accents are dusty and muted by design
- Use iris for interaction and spend rose/gold as decoration, like jewelry against the plum base
- Layer strictly with base/surface/overlay; the triad is published and recognizable
- Mention Moon (softer dark, base #232136) and Dawn (light, warm paper) to users wanting variants

## Don't

- Don't brighten accents to neon — a vivid pink or teal instantly turns it into a different theme
- Don't use pine #31748f as small text on base; it is a fill and large-element color
- Don't crowd the layout with dense panels; the aesthetic depends on breathing room

## Accessibility notes

- Text #e0def4 on base #191724 is strong (~13:1); subtle #908caa passes AA (~5.4:1) for secondary text
- Muted #6e6a86 on base is ~3.4:1 — below AA for body text; keep it to disabled states, large text, and decorative comments
- Pine #31748f on base is ~2.6:1 — never use as small text; reserve for fills with text-colored labels on top
- Iris, rose, gold, foam and love all pass AA as text on base; accent-filled buttons need base-colored (dark) text
- For light mode use the published Dawn variant rather than inverting main values

## Reference sites

- Rosé Pine palette: https://rosepinetheme.com/palette/
- Rosé Pine palette repository: https://github.com/rose-pine/palette

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

Install this skill

unzip rose-pine.zip -d ~/.claude/skills/

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

Settings → Capabilities → Skills → Upload skill → rose-pine.zip