Dark Academia

---
name: dark-academia
description: Apply the Dark Academia visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Dark Academia, mentions scholarly gothic, library aesthetic, academia aesthetic, or describes parchment and espresso palette, classical serif typography, drop caps and ornamental rules — 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
---

# Dark Academia Design System

Scholarly gothic moodiness: parchment and espresso, oxblood and brass, classic Garamond-lineage serifs with italic flourishes, drop caps and engraving-style ornament. The atmosphere of a candle-lit university library rendered as a website.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values are representative interpretations of the aesthetic, not an official spec. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Dark Academia.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (scholarly gothic, library aesthetic, academia aesthetic, classical scholarly), or describes its traits: parchment and espresso palette; classical serif typography; drop caps and ornamental rules; engraving-style illustration; oxblood and brass accents; columnar book-like layout.

## Design tokens

### Color palette

- Aged parchment page background: `#e8dcc4` (--color-bg)
- Card and panel background, lighter parchment: `#f0e7d3` (--color-surface)
- Espresso — primary text, like iron-gall ink: `#2b2118` (--color-text)
- Secondary text, faded ink brown: `#5a4a3a` (--color-text-muted)
- Oxblood — drop caps, links, and emphasis: `#6b2737` (--color-accent)
- Deep forest green — secondary panels and quiet emphasis: `#33413a` (--color-forest)
- Brass — ornamental rules, icons, and gilded details: `#b08d57` (--color-brass)
- Faded ink rules and frame lines on parchment: `#c9bda0` (--color-border)

### Typography

- Display / headings: Cormorant (fallback: Garamond, Georgia, serif)
- Body: EB Garamond (fallback: Garamond, Georgia, serif)
- Mono / data: Special Elite (fallback: Courier New, monospace)
- Type scale: 1.25 ratio, base 18px — computed steps: 18px / 23px / 28px / 35px / 44px / 55px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 600, line-height 1.2, letter-spacing 0.01em
- Body: line-height 1.65, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 64, 96 — Classic book margins: a measured, columnar rhythm with wide outer gutters and comfortable leading, like a well-set page.
- Border radius: none 0px, sm 2px — Corners stay essentially square; softness comes from parchment tone and ornament, never rounding.
- Border treatment: 1px solid #c9bda0 — Thin rules everywhere; important frames use double rules (1px, 3px gap, 1px) in espresso or brass, like engraved plates.

### Shadows

- subtle: `0 1px 4px rgba(43, 33, 24, 0.15)` — Barely-there lift for cards and images
- vignette: `inset 0 0 60px rgba(43, 33, 24, 0.12)` — Inner vignette on hero and photo frames for candle-lit depth

### Layout

- Max content width: 1080px
- Single centered column for reading, ~68ch measure, like a book page
- Framed sections with double-rule borders and engraved corner motifs
- Small caps and italic subheads; footnote-style asides in the margins
- Sepia or duotone treatment on all photography

### Effects

- Aged-paper grain and faint foxing texture on the background
- Engraving-style illustrations and woodcut motifs
- Sepia photo filter with inner vignette
- Typewriter (Special Elite) accents for catalog numbers and marginalia

### Motion

- Easing: cubic-bezier(0.4, 0, 0.2, 1); durations 200ms / 350ms / 700ms
- Slow, dignified crossfades — content appears like a page turning
- Ornamental rules draw in from the center outward on scroll
- Hover deepens ink: links shift from oxblood to espresso with an underline

## CSS variables (drop-in)

```css
:root {
  --color-bg: #e8dcc4;
  --color-surface: #f0e7d3;
  --color-text: #2b2118;
  --color-text-muted: #5a4a3a;
  --color-accent: #6b2737;
  --color-forest: #33413a;
  --color-brass: #b08d57;
  --color-border: #c9bda0;
  --radius-none: 0px;
  --radius-sm: 2px;
  --shadow-subtle: 0 1px 4px rgba(43, 33, 24, 0.15);
  --shadow-vignette: inset 0 0 60px rgba(43, 33, 24, 0.12);
  --border-default: 1px solid #c9bda0;
  --font-display: Cormorant, Garamond, Georgia, serif;
  --font-body: "EB Garamond", Garamond, Georgia, serif;
  --font-mono: "Special Elite", "Courier New", monospace;
  --text-base: 18px;
  --leading-heading: 1.2;
  --leading-body: 1.65;
  --tracking-heading: 0.01em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 200ms;
  --duration-base: 350ms;
  --duration-slow: 700ms;
}
```

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

## Component recipes

- **Nav:** Parchment bar with a 1px espresso bottom rule; wordmark in Cormorant small caps, links in EB Garamond with wide tracking; active page marked by a brass dot
- **Hero:** Centered Cormorant headline with an oxblood drop-cap variant, italic subline, double-rule frame with corner ornaments, sepia photograph beneath
- **Card:** Lighter parchment surface, 2px radius, 1px rule border, subtle shadow, serif title with a thin brass rule beneath, 24–32px padding
- **Button (primary):** Oxblood fill, parchment text, 2px radius, no shadow; darkens toward espresso on hover
- **Button (secondary):** Transparent with 1px espresso border and espresso text; fills parchment-dark on hover
- **Form fields:** Parchment surface, 1px espresso underline only (no box), serif input text; focus thickens the underline to 2px oxblood

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

An illuminated-manuscript drop cap opening each major section — a large Cormorant initial in oxblood — paired with thin double-rule ornamental dividers and small engraved motifs (quills, laurel, columns). Spend boldness here; keep everything else quiet.

## Do

- Open major sections with a drop cap and close them with an ornamental rule
- Set long-form text in a single book-like column with a proper measure
- Treat photography in sepia or espresso duotone so it sits in the world
- Use brass sparingly, as gilding — small icons, rules, and numerals

## Don't

- No bright saturated color anywhere; the palette is ink, parchment, wine, and brass
- No rounded corners, glossy gradients, or floating drop shadows
- Don't fake age with heavy grunge textures — the look is preserved, not decayed
- Avoid sans-serifs except tiny utility labels; the serif carries the identity

## Accessibility notes

- Espresso text on parchment passes comfortably (~10:1); oxblood on parchment is ~7.8:1 and safe for links
- Brass #b08d57 on parchment fails for small text (~2.4:1) — restrict it to decorative rules, large numerals, and icons with adjacent labels
- Italic and small-caps passages should stay short; extended italic body text reduces readability for dyslexic readers

## Reference sites

- The Marginalian: https://www.themarginalian.org
- Literary Hub: https://lithub.com
- University of Oxford: https://www.ox.ac.uk

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

Install this skill

unzip dark-academia.zip -d ~/.claude/skills/

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

Settings → Capabilities → Skills → Upload skill → dark-academia.zip