Solarized

---
name: solarized
description: Apply the Solarized visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Solarized, mentions solarized light, solarized dark, ethan schoonover palette, or describes warm cream paper background, deep teal-black dark mode, eight shared accent hues — 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
---

# Solarized Design System

The canonical dual light/dark palette: eight CIELAB-balanced monotones from deep teal-black to warm paper-cream, plus eight fixed accent hues shared by both modes. Scholarly, low-glare, and scientific — a color system designed like an optical instrument.

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 Solarized.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (solarized light, solarized dark, ethan schoonover palette, base16 precursor, selenized ancestor), or describes its traits: warm cream paper background; deep teal-black dark mode; eight shared accent hues; CIELAB-calibrated low contrast; symmetric light/dark inversion.

## Design tokens

### Color palette

- Page background — base3, warm paper cream: `#fdf6e3` (--color-bg)
- Cards, code wells, highlights — base2: `#eee8d5` (--color-surface)
- Hairline borders and rules — base1: `#93a1a1` (--color-border)
- Body text — base00, the spec's light-mode body tone: `#657b83` (--color-text)
- Headings and emphasized content — base01: `#586e75` (--color-text-strong)
- Comments and secondary content — base1: `#93a1a1` (--color-text-muted)
- Links and primary actions — Solarized blue: `#268bd2` (--color-accent)
- Secondary accent — Solarized cyan: `#2aa198` (--color-accent-2)
- Warnings and highlights — Solarized yellow: `#b58900` (--color-yellow)
- Attention and secondary emphasis — Solarized orange: `#cb4b16` (--color-orange)
- Errors and destructive actions — Solarized red: `#dc322f` (--color-red)
- Decorative accent and data series — Solarized magenta: `#d33682` (--color-magenta)

### Dark mode overrides

When building dark mode, override these roles (all other tokens stay the same):

- Dark page background — base03, deep teal-black: `#002b36` (--color-bg)
- Dark cards and highlights — base02: `#073642` (--color-surface)
- Dark borders — base01: `#586e75` (--color-border)
- Dark-mode body text — base0: `#839496` (--color-text)
- Dark-mode headings and emphasis — base1: `#93a1a1` (--color-text-strong)
- Dark-mode comments and secondary — base01: `#586e75` (--color-text-muted)

### Typography

- Display / headings: Source Code Pro (fallback: Menlo, Consolas, monospace)
- Body: Source Sans 3 (fallback: Helvetica, Arial, sans-serif)
- Mono / data: Source Code Pro (fallback: Menlo, Consolas, monospace)
- Type scale: 1.25 ratio, base 17px — computed steps: 17px / 21px / 27px / 33px / 42px / 52px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 600, line-height 1.3, letter-spacing 0
- Body: line-height 1.7, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 72, 96 — Bookish and unhurried — Solarized was built for long reading sessions, so favor a single measured column, wide margins, and generous line spacing over dense UI.
- Border radius: sm 3px, md 6px — Barely-there rounding; the aesthetic is typographic and instrument-like, not friendly-rounded.
- Border treatment: 1px solid #93a1a1 — base1 hairlines in light mode, base01 in dark; borders are rare — background steps (base3/base2) usually suffice.

### Shadows

- none: `none` — Default — Solarized is flat by design; depth comes from base2/base02 background highlights
- paper: `0 1px 3px rgba(0, 43, 54, 0.12)` — Optional whisper of lift on modals, tinted with base03

### Layout

- Max content width: 960px
- Single reading column around 70ch with wide cream margins, like a typeset page
- Both modes ship together: light is the default exposure, dark the sanctioned inversion via darkRoles
- Accents are used sparingly — a page should be 95% monotone with hue reserved for links, states, and syntax

### Effects

- Code blocks on base2 (light) or base02 (dark) with the eight accent hues as verbatim syntax colors
- A theme toggle that swaps monotones while accents stay fixed is itself an on-brand showpiece

### Motion

- Easing: ease-in-out; durations 100ms / 180ms / 300ms
- Nearly still: color cross-fades only, no movement for its own sake
- The light/dark flip animates as one smooth 300ms cross-fade — the signature interaction

## CSS variables (drop-in)

```css
:root {
  --color-bg: #fdf6e3;
  --color-surface: #eee8d5;
  --color-border: #93a1a1;
  --color-text: #657b83;
  --color-text-strong: #586e75;
  --color-text-muted: #93a1a1;
  --color-accent: #268bd2;
  --color-accent-2: #2aa198;
  --color-yellow: #b58900;
  --color-orange: #cb4b16;
  --color-red: #dc322f;
  --color-magenta: #d33682;
  --radius-sm: 3px;
  --radius-md: 6px;
  --shadow-paper: 0 1px 3px rgba(0, 43, 54, 0.12);
  --border-default: 1px solid #93a1a1;
  --font-display: "Source Code Pro", Menlo, Consolas, monospace;
  --font-body: "Source Sans 3", Helvetica, Arial, sans-serif;
  --font-mono: "Source Code Pro", Menlo, Consolas, monospace;
  --text-base: 17px;
  --leading-heading: 1.3;
  --leading-body: 1.7;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: ease-in-out;
  --duration-fast: 100ms;
  --duration-base: 180ms;
  --duration-slow: 300ms;
}
```

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

## Component recipes

- **Nav:** Quiet bar on base3 with a 1px base1 rule; links in base00, active in blue #268bd2; a sun/moon toggle for the inversion sits prominently at right.
- **Hero:** A typeset opening: Source Code Pro heading in base01, body-size standfirst in base00, one blue link — closer to a journal article's title block than a marketing hero.
- **Card:** base2 panel, 6px radius, no border, 24px padding; title base01, body base00, meta base1; in dark mode the same card sits on base02.
- **Button (primary):** Blue #268bd2 fill with base3 #fdf6e3 text, 3px radius, 600 weight; hover deepens toward cyan #2aa198.
- **Button (secondary):** Transparent with 1px base1 border and base00 text; hover fills base2; identical geometry in dark mode with base01/base02.
- **Form fields:** base3 input with 1px base1 border, 3px radius; focus border blue with no glow; placeholder base1; labels always visible in base01.

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 precise light/dark inversion: flipping between warm cream #fdf6e3 and deep teal #002b36 while every accent hue stays fixed — the palette reads as one instrument with two exposures, not two themes. Spend boldness here; keep everything else quiet.

## Do

- Keep the sixteen published values exact — the palette's CIELAB relationships are the entire point
- Ship both modes; Solarized is defined as a dual system and single-mode use undersells it
- Follow the spec's text pairings: base00 on base3 in light, base0 on base03 in dark
- Reserve accent hues for meaning (links, states, syntax) against a mostly monotone page

## Don't

- Don't 'fix' the famous low contrast by darkening monotones — that produces Selenized, not Solarized
- Don't mix monotones across modes (base1 text on base3 fails badly); use adjacent spec pairings
- Don't flood areas with accent color — Solarized accents are annotations, never fills for large regions

## Accessibility notes

- Solarized's signature is deliberately reduced contrast: body text base00 #657b83 on base3 #fdf6e3 measures ~4.1:1, just below WCAG AA for small text — use base01 #586e75 (≈5:1) for body copy where AA compliance is required
- text-muted base1 #93a1a1 on base3 is ~2.5:1 — decorative/large-text only, never for information users must read
- Accent blue #268bd2 on base3 is ~3.4:1 — passes AA only for large text; underline links so color is not the sole cue
- The dark pairing (base0 #839496 on base03 #002b36, ~6.2:1) actually exceeds the light mode's contrast and passes AA
- Users with astigmatism often prefer the light exposure; offering both modes is the accessible default

## Reference sites

- Solarized by Ethan Schoonover: https://ethanschoonover.com/solarized/
- Solarized GitHub repository: https://github.com/altercation/solarized

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

Install this skill

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

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

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