# Design Language for freedom.study

## Aesthetics and Tone

freedom.study is the private library of a 19th-century polymath who studied everything — languages dead and living, cartography, astronomy, natural history, philosophy — and whose estate was turned into a salon for serious amateurs. The aesthetic is **light-academia rendered as a grand bento cabinet of curiosities**: cream paper, warm ink, aged brass card-holders, and the particular golden haze of an afternoon spent in a room full of books that smell of cedar and dust.

The tone is **opulent-grand** — not aspirational luxury (no marble, no watches, no wealth signals), but the grandeur of *accumulated knowledge*. The site says: we have collected every discipline here, arranged it with care, and you are invited to study freely. The mood is late-Victorian university reading room crossed with a Japanese cabinet of lacquered specimen drawers. Every section of the bento grid is a different subject in the same great library.

The color atmosphere is warm-antiqued: parchment grounds, sepia and amber gradients, ink-brown text, with accents of verdigris (the brass-gone-green of old instruments) and a single, restrained gold. No electric colors. No white #ffffff. No black #000000. The gradient vocabulary is heat-of-afternoon — warm amber fading to cooled parchment, the way a reading lamp pools light across an open atlas.

## Layout Motifs and Structure

The page is structured as a **bento-box grid of subject tiles**, referencing both Japanese lacquered compartment boxes and Victorian specimen cabinets. Each tile is a discipline or a study area. The grid is not perfectly regular — some tiles span two columns, some are tall, some are wide — following the logic that knowledge doesn't fit uniform boxes, but the cabinet-maker arranged them to fit together without gaps.

**Grid system:**
- Outer frame: `max-width: 1200px`, centered, with a `12px` border in aged-brass `#C0944A` that frames the entire composition like a specimen case
- Bento container: CSS Grid, `grid-template-columns: repeat(12, 1fr)`, `gap: 10px`
- Tiles span variably: hero tile spans cols 1–8, 4 rows; sidebar tiles span cols 9–12; a row of equal thirds below; a wide cinematic band spanning all 12 columns; two asymmetric halves (7+5) at the bottom
- Each tile has `border-radius: 2px` — almost rectangular, slightly softened, like cabinet-drawer corners
- Each tile has a `1px` solid border in `#C0944A` at 40% opacity — the brass dividers between compartments
- The grid itself has a subtle `background-image` of fine grid lines (SVG inline pattern, `#B8A07A` at 8% opacity, 24px squares) that shows through the gaps between tiles — the lined paper beneath the cabinet

**Spatial logic:**
- Tiles use `padding: 32px 28px` on desktop, `20px 16px` on mobile
- Content within tiles is top-left aligned (like a label on a specimen drawer)
- The hero tile (`The Study of Freedom`) contains the domain name set large, a single quotation from a polymath (rotating or static), and a subtle paper-texture background unique to that tile
- Each subject tile has: a tile number in small-caps brass (`01`, `02`…), a subject name in display type, and 2–4 lines of body text that read as a catalogue entry
- Mobile: single column, tiles stack vertically, grid lines remain as subtle horizontal rules

## Typography and Palette

**Typography — sans-grotesk system:**

All fonts are verified Google Fonts.

- **Primary Display / Tile Titles:** [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk), weights 300, 500, 700. Space Grotesk is a proportional grotesque with geometric roots but warm, slightly irregular terminals that feel hand-set rather than mechanical — appropriate for a library that values craft over cold efficiency. Use at `clamp(2rem, 4vw, 4.5rem)` for the domain wordmark, `clamp(1.2rem, 2.5vw, 2rem)` for tile titles.
- **Secondary Body / Catalogue Text:** [DM Sans](https://fonts.google.com/specimen/DM+Sans), weights 300, 400. DM Sans is optically optimized for reading at small sizes and has a quiet authority that suits catalogue copy. Set at `16px / 1.65` line-height for body, `13px / 1.5` for metadata and tile numbers.
- **Accent / Quotations and Labels:** [Instrument Serif](https://fonts.google.com/specimen/Instrument+Serif), weight 400 italic. A high-contrast contemporary revival that reads as scholarly and refined. Used exclusively for pullquotes, subject labels, and the rotating polymath quotation in the hero tile.

**Palette — warm antiqued gradient:**

| Token | Hex | Role |
|-------|-----|------|
| `--parchment` | `#F5EDD8` | Page background, light tile fills |
| `--parchment-deep` | `#EDD9B2` | Alternate tile fill, aged paper second tone |
| `--amber-warm` | `#C8943A` | Gradient warm anchor, link accents |
| `--brass` | `#C0944A` | Border color, tile numbers, dividers |
| `--sepia-ink` | `#4A3728` | Primary body text |
| `--ink-brown` | `#2C1F14` | Display headings, maximum contrast |
| `--verdigris` | `#5B8C7A` | Hover accent, secondary links, rare detail color |
| `--gold-leaf` | `#B8860B` | Hero tile gradient anchor, ornamental highlights |
| `--cream-white` | `#FAF6ED` | Light tiles, card interiors |
| `--grid-line` | `#B8A07A` | SVG grid pattern, tile borders at low opacity |

**Gradient system:**
- **Page background:** `linear-gradient(160deg, #FAF6ED 0%, #F5EDD8 45%, #EDD9B2 100%)` — parchment warming toward amber toward the bottom-right
- **Hero tile:** `radial-gradient(ellipse at 30% 40%, #C8943A22 0%, transparent 65%), linear-gradient(135deg, #F5EDD8 0%, #EDD9B2 100%)` — warm lamp-pool gradient
- **Cinematic band tile:** `linear-gradient(90deg, #2C1F14 0%, #4A3728 50%, #C0944A33 100%)` — dark ink to amber, for the "grand statement" row
- **Hover gradient shift:** tiles animate `background` from `--parchment` to `--parchment-deep` on hover, combined with scale transform

Note: this palette is explicitly NOT the corpus-dominant blue/purple gradient or the SaaS teal-to-purple. It draws entirely from warm amber-sepia-parchment — the rarest end of the `gradient` vocabulary.

## Imagery and Motifs

**Paper-aged imagery system:**

All imagery is treated to look like aged paper, foxed documents, or faded copperplate. No clean stock photography. No modern UI screenshots.

- **Hero tile background texture:** A subtle inline SVG noise texture (Perlin-like, randomized points) that simulates the grain of 150-year-old vellum. Layered at 12% opacity over the hero gradient.
- **Tile accent illustrations:** Each subject tile contains one small SVG icon drawn as a copperplate engraving fragment — an astrolabe gear, an open book spine, an inkwell and quill, a rolled map, a leaf from a botanical plate, a compass rose. All in `--sepia-ink` at `0.6` opacity, positioned at bottom-right of the tile as a watermark-style motif. Size: `80px × 80px`.
- **Grid-lines motif:** The entire composition rests on a fine grid of `24px × 24px` squares in `#B8A07A` at 8% opacity, implemented as an SVG `<pattern>` in a `<defs>` block and applied as `background-image: url("data:image/svg+xml,...")` on the bento container. This is the *lined paper* beneath the cabinet. On hover of individual tiles, the grid lines within that tile intensify to 20% opacity — a subtle focusing effect.
- **Brass corner ornaments:** Each tile's top-left corner has a `12px × 12px` inline SVG corner ornament (two perpendicular lines forming an L-bracket in `--brass`), referencing the brass corners of a picture frame or map case.
- **Page frame border:** The outermost container has a `2px` solid border in `--brass` with `box-shadow: inset 0 0 0 6px #F5EDD8, inset 0 0 0 8px #C0944A33` — a double-rule frame like the border of a Victorian engraving plate.
- **Paper foxing overlay:** A full-page pseudo-element (`::before` on `body`) uses an SVG turbulence filter to create faint reddish-brown foxing spots at 4% opacity — the age marks of real paper. This is the quietest layer in the stack.

## Prompts for Implementation

**The story to tell.** A student arrives at a vast private library housed in a building that is itself a cabinet of curiosities. The building is organized into study alcoves — each alcove is a discipline, each discipline has its own brass nameplate, lined paper walls, and a small copperplate illustration of the subject's instrument or symbol. The student is not overwhelmed; the arrangement is generous and legible. This is a place for free study. The page does not sell anything. It does not have a pricing table. It does not have testimonials. It is a library catalogue — a structured invitation to study freely.

**Implementation specifics:**

1. **The bento grid is the navigation.** Each tile is a clickable subject area. Hovering a tile lifts it with `transform: scale(1.025)` and `box-shadow: 0 8px 32px #4A372820` — the `scale-hover` pattern. The transition is `300ms cubic-bezier(0.25, 0.46, 0.45, 0.94)`. NO jarring pop. The scale is restrained — 1.025, not 1.05 or 1.1 — because a library alcove does not lurch at you.

2. **Grid line intensification on hover.** When a tile is hovered, use a CSS custom property `--grid-opacity: 0.20` (vs default `0.08`) to make the lined paper grid sharper within that tile. This is achieved by setting a data attribute and targeting with CSS, or by a scoped CSS variable on the hovered element.

3. **The domain wordmark.** `freedom.study` is set in Space Grotesk 300 weight (light) at `clamp(3.5rem, 8vw, 7rem)`, letter-spacing `-0.03em`, in `--ink-brown`. The period is set in `--brass` with `color: var(--brass)` applied via a `<span>`. Below the wordmark: `Instrument Serif` italic, `1.1rem`, `--sepia-ink`: *"The mind that opens to a new idea never returns to its original size."*

4. **Tile number system.** Each tile has a `<span class="tile-num">` in Space Grotesk 500, `11px`, `--brass`, `letter-spacing: 0.15em`, positioned `top: 20px; left: 24px`. Tile numbers are `01` through `12` (or however many tiles exist).

5. **Copperplate icon placement.** Each tile's SVG icon is `position: absolute; bottom: 16px; right: 16px; opacity: 0.18`. On hover, opacity transitions to `0.35`. The icons should feel like they are part of the paper itself — not decorative overlays.

6. **The cinematic band.** One full-width tile (12-column span) uses the dark `--ink-brown → --amber-warm` gradient and contains a large quotation in Instrument Serif italic at `clamp(1.4rem, 3vw, 2.8rem)`, set flush-left in `--parchment`, max-width 800px. No other content. This is the "reading room inscription above the door."

7. **Mobile.** Grid collapses to single column. Tiles stack vertically. The outer brass frame becomes a `6px` left border only (not all four sides). Grid lines remain but scaled to `16px` squares. Typography scales down via `clamp()`.

8. **No animations beyond hover.** No scroll-triggered reveals. No entrance animations. No JavaScript frameworks. The page loads fully rendered. The only motion is the `scale-hover` on tiles and the `opacity` shift on the copperplate icons and grid lines.

9. **Paper background.** Body background is the three-stop parchment gradient. No full-bleed photography. No video. The texture is entirely CSS + SVG.

10. **Color discipline.** Only the nine palette tokens listed above are used. No color outside the token set. Verdigris (`#5B8C7A`) appears only as link hover, active tile indicator, and the verdigris dot on the compass-rose icon — maximum three uses per page.

## Uniqueness Notes

1. **Bento-box as specimen cabinet, not dashboard.** The corpus uses bento-box (7%) almost exclusively as a SaaS feature grid or analytics dashboard. freedom.study inverts this: the grid is a Victorian cabinet of curiosities, each compartment a subject alcove. The tiles are not feature bullets; they are study areas. The cabinet metaphor is structural, not decorative.

2. **Scale-hover at 0% corpus frequency, deliberately restrained.** `scale-hover` has never appeared in any corpus design. freedom.study uses it, but calibrates it to `scale(1.025)` — barely perceptible movement, like a drawer sliding open one centimeter. This is antithetical to the "big pop" hover effects common in modern portfolios and reinforces the library's gravity.

3. **Gradient palette entirely in warm amber-sepia range.** The corpus uses `gradient` at 87% but virtually all instances are blue-purple SaaS gradients or teal-to-purple brand gradients. This design uses gradient exclusively in the warm amber-parchment-sepia register — a color language drawn from aged paper and lamp light, not tech branding. The gradient is indistinguishable from natural material aging.

4. **Paper-aged imagery without photography.** The corpus uses photography at 92% for the `imagery` category. freedom.study achieves `paper-aged` entirely through CSS and SVG: grain textures, foxing overlays, copperplate icon illustrations, and turbulence filters — no photographs. This makes the aged quality feel inherent to the design language, not applied as a filter to existing images.

5. **Grid-lines as functional metaphor.** The `grid-lines` motif (3% corpus) here is not a geometric decoration but a literal device — lined paper beneath the cabinet, the medium on which knowledge is written. The grid intensifies on hover as a focusing mechanism, creating the sensation that studying a tile more closely reveals the paper it is written on.

6. **Seed:** aesthetic: light-academia, layout: bento-box, typography: sans-grotesk, palette: gradient, patterns: scale-hover, imagery: paper-aged, motifs: grid-lines, tone: opulent-grand
<!-- DESIGN STAMP
  timestamp: 2026-05-07T17:30:52
  domain: freedom.study
  seed: aesthetic: light-academia, layout: bento-box, typography: sans-grotesk, palette: gradient, patterns: scale-hover, imagery: paper-aged, motifs: grid-lines, tone: opulent-grand
  content_hash: a76a77c16205
-->