Catppuccin Mocha

---
name: catppuccin-mocha
description: Apply the Catppuccin Mocha visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Catppuccin Mocha, mentions catppuccin, mocha theme, pastel dark theme, or describes soothing pastel accent rainbow, soft indigo-tinted dark base, mauve as the hero accent — 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
---

# Catppuccin Mocha Design System

The soothing pastel editor theme brought to the web: a soft indigo-black base, milky lavender-white text, and a full rainbow of low-saturation candy accents led by mauve. Cozy, rounded, and unmistakably pastel — dark mode without the gloom.

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 Catppuccin Mocha.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (catppuccin, mocha theme, pastel dark theme, soothing pastel theme), or describes its traits: soothing pastel accent rainbow; soft indigo-tinted dark base; mauve as the hero accent; rounded cozy surfaces; gentle low-saturation contrast.

## Design tokens

### Color palette

- Page background — Catppuccin Mocha base: `#1e1e2e` (--color-bg)
- Recessed background for sidebars and wells — Mocha mantle: `#181825` (--color-bg-dim)
- Cards, code blocks, inputs — Mocha surface0: `#313244` (--color-surface)
- Hairline borders and dividers — Mocha surface1: `#45475a` (--color-border)
- Primary text — Mocha text: `#cdd6f4` (--color-text)
- Secondary text and captions — Mocha subtext0: `#a6adc8` (--color-text-muted)
- Primary accent for links, buttons, focus — Mocha mauve: `#cba6f7` (--color-accent)
- Secondary accent for info and alt actions — Mocha blue: `#89b4fa` (--color-accent-2)
- Success states, diff additions — Mocha green: `#a6e3a1` (--color-green)
- Errors and destructive actions — Mocha red: `#f38ba8` (--color-red)
- Warnings and highlights — Mocha yellow: `#f9e2af` (--color-yellow)
- Numbers, badges, warm emphasis — Mocha peach: `#fab387` (--color-peach)

### Typography

- Display / headings: JetBrains Mono (fallback: SFMono-Regular, Menlo, monospace)
- Body: Inter (fallback: -apple-system, Segoe UI, sans-serif)
- Mono / data: JetBrains Mono (fallback: SFMono-Regular, Menlo, monospace)
- 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 700, line-height 1.2, letter-spacing -0.01em
- Body: line-height 1.65, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48, 64 — Cozy but airy: cards get generous 24px padding, and the pastel accents need breathing room on the dark base so they read as candy, not noise.
- Border radius: sm 6px, md 12px, lg 16px, full 999px — Catppuccin is soft by nature — round everything. Sharp corners feel off-palette.
- Border treatment: 1px solid #45475a — Hairline surface1 borders separate layers; step up to surface2 #585b70 on hover.

### Shadows

- none: `none` — Default — layering is done with mantle/base/surface0 background steps, not shadows
- soft: `0 4px 24px rgba(17, 17, 27, 0.5)` — Modals and popovers only, using crust #11111b as the shadow color

### Layout

- Max content width: 1200px
- Layer depth with the base → mantle → crust background triad rather than elevation shadows
- Docs-style two-column layout: mantle sidebar, base content, surface0 code blocks
- Accent colors are assigned semantic jobs (mauve = interactive, green = success, red = danger) and never swapped

### Effects

- Code blocks styled as mini editor panes: surface0 background, rounded 12px, verbatim Mocha syntax colors
- Subtle 2px lavender #b4befe focus rings on interactive elements

### Motion

- Easing: cubic-bezier(0.25, 0.1, 0.25, 1); durations 120ms / 200ms / 350ms
- Gentle and cozy: fades and small translates, nothing snappy or aggressive
- Hover states shift background one surface step (base → surface0 → surface1)

## CSS variables (drop-in)

```css
:root {
  --color-bg: #1e1e2e;
  --color-bg-dim: #181825;
  --color-surface: #313244;
  --color-border: #45475a;
  --color-text: #cdd6f4;
  --color-text-muted: #a6adc8;
  --color-accent: #cba6f7;
  --color-accent-2: #89b4fa;
  --color-green: #a6e3a1;
  --color-red: #f38ba8;
  --color-yellow: #f9e2af;
  --color-peach: #fab387;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --shadow-soft: 0 4px 24px rgba(17, 17, 27, 0.5);
  --border-default: 1px solid #45475a;
  --font-display: "JetBrains Mono", SFMono-Regular, Menlo, monospace;
  --font-body: Inter, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", SFMono-Regular, Menlo, monospace;
  --text-base: 16px;
  --leading-heading: 1.2;
  --leading-body: 1.65;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 350ms;
}
```

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

## Component recipes

- **Nav:** Sticky top bar on mantle #181825 with a 1px surface1 bottom border; logo and links in text color, active link in mauve with a 2px mauve underline.
- **Hero:** Centered hero on base with a JetBrains Mono heading where one or two words are wrapped in mauve; below it, a decorative code block on surface0 showing the palette as syntax-highlighted tokens.
- **Card:** surface0 background, 12px radius, 1px surface1 border, 24px padding; title in text, meta in subtext0, an accent-colored icon chip top-left.
- **Button (primary):** Mauve #cba6f7 background with crust #11111b text (dark-on-pastel), 8px radius, 600 weight; hover shifts to lavender #b4befe.
- **Button (secondary):** Transparent with 1px surface2 border and text-colored label; hover fills surface0 and brightens border to overlay0 #6c7086.
- **Form fields:** surface0 input on base page, 1px surface1 border, 8px radius; focus swaps border to mauve with a soft mauve outer glow; placeholder in overlay0 #6c7086.

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 pastel accent rainbow itself: mauve links, peach numbers, green strings, red errors — every semantic color drawn verbatim from the Mocha palette against the indigo #1e1e2e base, like a syntax-highlighted code block expanded into a whole site. Spend boldness here; keep everything else quiet.

## Do

- Pull every color verbatim from the published Mocha palette — the exact pastels are the brand
- Give each accent a fixed semantic job across the whole site
- Use dark text (crust) on pastel-filled buttons and badges — the pastels are light colors
- Style code blocks lovingly; they are the aesthetic's home turf

## Don't

- Don't saturate or darken the accents to 'fix' them — off-palette colors break the soothing register instantly
- Don't use pure black or pure white anywhere; Mocha's range runs crust #11111b to text #cdd6f4
- Don't mix flavors arbitrarily — pick Mocha (or Latte for light mode) and stay inside it

## Accessibility notes

- Text #cdd6f4 on base #1e1e2e passes AA comfortably (~11:1); subtext0 #a6adc8 also passes (~6.9:1)
- Pastel accents used as text (yellow, peach, green) pass on base but fail on lighter surfaces — check pairings when text sits on surface1/surface2
- Pastel button fills need dark text (crust/base), never white — white on mauve fails AA
- For a light mode, use the published Latte flavor rather than inverting Mocha values

## Reference sites

- Catppuccin palette: https://catppuccin.com/palette
- Catppuccin GitHub organization: https://github.com/catppuccin/catppuccin

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

Install this skill

unzip catppuccin-mocha.zip -d ~/.claude/skills/

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

Settings → Capabilities → Skills → Upload skill → catppuccin-mocha.zip