Light Academia

---
name: light-academia
description: Apply the Light 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" Light Academia, mentions bright academia, soft scholarly, cream academia, or describes cream, oat, and warm tan palette, sepia-brown ink text, classical serif typography — 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
---

# Light Academia Design System

The bright counterpart to dark academia: cream, oat, and tan neutrals under soft daylight, sepia-brown ink, classical Garamond-lineage serifs, botanical sketches, and handwritten marginalia. The same love of books and old libraries, but optimistic — a reading room with the curtains open.

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 Light Academia.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (bright academia, soft scholarly, cream academia, sunlit library aesthetic), or describes its traits: cream, oat, and warm tan palette; sepia-brown ink text; classical serif typography; soft diffused daylight and gentle shadows; botanical sketches and handwritten notes; linen and paper textures.

## Design tokens

### Color palette

- Sunlit cream paper: `#f4eede` (--color-bg)
- Brighter card stock and panels: `#faf6ec` (--color-surface)
- Warm sepia ink for body text: `#43382a` (--color-text)
- Faded ink for captions and marginalia: `#6f6047` (--color-text-muted)
- Antique brass-brown for links and actions: `#7a5f33` (--color-accent)
- Botanical sage green for decorative sketches and tags: `#8a9276` (--color-sage)
- Deeper leaf green for secondary decoration: `#5b6b4f` (--color-laurel)
- Oat-milk band for alternate sections: `#e6dcc3` (--color-oat)
- Soft parchment hairlines and rules: `#d9cfb8` (--color-border)

### Typography

- Display / headings: EB Garamond (fallback: Garamond, Georgia, serif)
- Body: Crimson Pro (fallback: Georgia, serif)
- 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 500, line-height 1.25, letter-spacing 0.01em
- Body: line-height 1.7, letter-spacing 0.005em

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 20, 32, 48, 72, 104 — Airy and book-like: single measured text column, wide margins reserved for sketches and notes, unhurried vertical rhythm.
- Border radius: none 0px, sm 4px — Book-corner crispness; only imagery and buttons soften to 4px.
- Border treatment: 1px solid #d9cfb8 — Hairline parchment rules; chapter-style sections open with a short centered rule or a small botanical ornament instead of heavy dividers.

### Shadows

- daylight: `0 16px 40px rgba(67, 56, 42, 0.1)` — Soft diffuse elevation, like shade under window light
- page-edge: `0 2px 6px rgba(67, 56, 42, 0.08)` — Barely-there lift on cards and images
- deckle-inset: `inset 0 0 0 1px rgba(217, 207, 184, 0.8)` — Paper-edge keyline inside surfaces

### Layout

- Max content width: 1080px
- Manuscript layout: a 65-75ch text column with generous asymmetric margins
- Marginalia column for sketches, footnotes, and handwritten asides
- Chapter-style section openers with centered small-caps kicker and short rule
- Images treated as tipped-in plates with captions beneath

### Effects

- Faint paper or linen grain at 2-3% opacity
- Soft warm light gradient from the top, like morning through a window
- Botanical line-sketch ornaments in sage at section corners
- Optional handwritten annotation accents (small, sparing)

### Motion

- Easing: cubic-bezier(0.25, 0.1, 0.25, 1); durations 200ms / 400ms / 800ms
- Quiet fades and small rises, like turning a page
- Links darken and gain an ink underline on hover; nothing bounces
- Images ease in with a slight settling motion, never sliding far

## CSS variables (drop-in)

```css
:root {
  --color-bg: #f4eede;
  --color-surface: #faf6ec;
  --color-text: #43382a;
  --color-text-muted: #6f6047;
  --color-accent: #7a5f33;
  --color-sage: #8a9276;
  --color-laurel: #5b6b4f;
  --color-oat: #e6dcc3;
  --color-border: #d9cfb8;
  --radius-none: 0px;
  --radius-sm: 4px;
  --shadow-daylight: 0 16px 40px rgba(67, 56, 42, 0.1);
  --shadow-page-edge: 0 2px 6px rgba(67, 56, 42, 0.08);
  --shadow-deckle-inset: inset 0 0 0 1px rgba(217, 207, 184, 0.8);
  --border-default: 1px solid #d9cfb8;
  --font-display: "EB Garamond", Garamond, Georgia, serif;
  --font-body: "Crimson Pro", Georgia, serif;
  --text-base: 18px;
  --leading-heading: 1.25;
  --leading-body: 1.7;
  --tracking-heading: 0.01em;
  --tracking-body: 0.005em;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 800ms;
}
```

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

## Component recipes

- **Nav:** Cream bar with a small-caps serif wordmark, widely spaced serif links, hairline rule beneath; active link carries a short ink underline.
- **Hero:** Chapter opener: small-caps kicker, large EB Garamond headline in sepia, a line of Crimson Pro lede, sage botanical sketch in the margin, daylight gradient above.
- **Card:** Card-stock surface with parchment hairline and deckle-inset keyline, plate-style image, serif title, page-edge shadow.
- **Button (primary):** Antique-brass fill with cream text, 4px radius, subtle daylight shadow; hover deepens the brass like pressed ink.
- **Button (secondary):** Transparent with 1px brass border and sepia text; hover adds an oat wash.
- **Form fields:** Cream input with parchment border and serif text; focus swaps the border to brass with a soft warm ring (0 0 0 3px rgba(122,95,51,0.15)).

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 sun-washed page: cream ground, sepia serif headline with a hand-drawn botanical sketch in the margin, and a soft daylight shadow as if cast through a tall library window. Spend boldness here; keep everything else quiet.

## Do

- Keep everything warm — creams, oats, sepias — and let daylight softness carry the mood
- Set real long-form text; this style exists to make reading feel like a pleasure
- Use botanical and handwritten touches sparingly, as marginalia rather than decoration
- Borrow book conventions: chapters, plates, footnotes, small caps

## Don't

- Don't darken into dark academia — no espresso grounds, oxblood, or candlelit gloom; cross-reference that style if you want the nocturnal register
- Don't use cold grays or pure white; every neutral is warmed
- Don't add heavy borders, big shadows, or bouncy motion
- Don't slip into cottagecore's rustic florals — light academia is scholarly, urban, and typographic

## Accessibility notes

- Sepia ink, faded-ink muted text, and the brass accent all pass 4.5:1 on the cream background.
- sage and laurel greens are decorative-only against cream — reserve them for sketches, tags on darker fills, and ornaments, never body text.
- Serif body text is set at 18px with 1.7 line-height to keep old-style faces comfortably legible.

## Reference sites

- Light Academia — Aesthetics Wiki: https://aesthetics.fandom.com/wiki/Light_Academia
- Dark academia (parent aesthetic) — Wikipedia: https://en.wikipedia.org/wiki/Dark_academia
- Academia aesthetics overview — Aesthetics Wiki: https://aesthetics.fandom.com/wiki/Academia

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

Install this skill

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

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

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