# Design Language for freedom.study ## Aesthetics and Tone freedom.study is conceived as **a Sunday-supplement magazine for a syllabus that does not exist yet** -- a print-rooted, exuberantly corporate-looking publication that takes "freedom" as its rolling editorial beat the way *National Geographic* took the natural world or *Domus* took the post-war apartment. It refuses the academic-paper aesthetic that the `.study` TLD is statistically expected to deliver (compare cbdc.study's drafting-table monograph, or the dozen other scholarly serif sites in the corpus). Instead it dresses scholarship in the warm gloss of a 1972 Sunday color magazine: **terracotta saturation, rounded-display headlines that feel hand-troweled, and botanical illustration printed at full-bleed in four-color separations that almost line up but charmingly don't**. The tonal register is **energetic-but-considered** -- the bounce of an enthusiastic guest editor who has assembled an unlikely roster of contributors (a constitutional lawyer, a botanist, a children's-book illustrator, an escape-room designer) and given them all the same prompt. Where most "study" sites perform gravitas through restraint, freedom.study performs **curiosity through abundance**: pull-quotes set in conversation with each other across the gutter, rounded sans headlines that swing and snap like a marching-band drum cadence, marginalia in a contrasting handwriting that argues with the body copy. The reference shelf is specific: **Holiday magazine (1946-1977)** for its full-bleed portfolio confidence; **Avant Garde magazine (1968-1971)** for the way Herb Lubalin's playful-rounded display type became its own architectural element; the **Whole Earth Catalog** for marginalia that talks back to the spread; **mid-century Penguin paperback covers** for the disciplined warm palette; and the **botanical color plates of Anne Pratt and Pierre-Joseph Redouté**, reproduced not as decoration but as evidence -- the way a magazine spread on liberty might illustrate "the commons" with a pressed-fern engraving printed three colors deep. The mood word is **rangy**. Generous. The opposite of cramped. The site should feel as though the editor was paid by the inch of white margin and is enjoying the assignment. ## Layout Motifs and Structure The controlling structure is the **magazine spread** -- an underused layout in the corpus (6%) -- treated literally as a sequence of two-page editorial spreads bound at a central gutter. Each viewport-width section IS a spread: left page, gutter shadow, right page. The cursor sometimes peeks across the gutter; type sometimes leaps across it; pull-quotes always straddle it. We commit to the metaphor without irony. **The Spread Grid.** Twelve columns at desktop, but they are NOT uniform. The grid follows a **modular magazine baseline**: columns 1-5 form the left page, columns 8-12 form the right page, columns 6-7 are the **gutter** (a narrow strip rendered as a soft inner shadow `inset 12px 0 24px -12px rgba(74, 32, 19, 0.18)` that simulates the curve of a bound spine). Vertical rhythm locks to a **24px baseline grid** and headlines, captions, folios all snap to it the way a print compositor would have demanded. **Spread Types.** Eight repeating spread archetypes, sequenced like a magazine running order: 1. **The Cover** -- full-bleed botanical illustration, oversized rounded-display masthead, three "in this issue" cover lines stacked at the lower-left in the manner of a 1970s newsstand. 2. **The Contents Spread** -- hand-numbered article entries `001 / 002 / 003`, each with a thumb-sized botanical glyph and a one-line dek. 3. **The Editor's Letter** -- a single drop-cap paragraph occupying the right page, with a signature in handwritten script and a small portrait illustration on the left page. 4. **The Photo Essay Spread** -- a botanical color plate runs full-bleed across both pages with caption type set in a single column tucked into the lower gutter, justified hard against the spine. 5. **The Q&A** -- two-column interview format, questions in heavy rounded display, answers in the body face, indented with a small terracotta dingbat instead of a quotation mark. 6. **The Sidebar Cluster** -- a magazine-style "callouts page": three or four boxed asides (rounded corners, terracotta hairline rule) about a single topic, arranged in a slightly-broken grid that suggests a pasted-up board. 7. **The Gatefold** -- a horizontally-scrolling spread that the reader can drag to "open" past the right edge, revealing a 200%-wide diagram or timeline. Only one gatefold per site, and it is announced. 8. **The Colophon** -- credits, a list of botanical species depicted, and a small "printed and bound" line set in the manner of a magazine masthead. **Marginalia as First-Class Content.** The outermost columns (column 0 and column 13, just outside the spread) carry **handwritten marginalia** -- arrows pointing into the body copy, scribbled "see p.4" cross-references, occasional doodles. These are not decorative; they are part of the editorial argument. They are positioned with `position: sticky` so that as the reader scrolls a long article, the marginalia comments travel with the relevant paragraph. **No hero, no nav bar, no footer CTA.** The cover spread does the work of a hero. Navigation is the **table of contents spread**, reachable by a single small "contents" tab that lives in the gutter and pulses gently when scrolled past. The site ends, like a magazine, with the colophon -- not with "subscribe to our newsletter." ## Typography and Palette **Typography** -- all Google Fonts, verified available: - **Display / Headlines:** **"Fraunces"** at very high `opsz` and `SOFT` axes -- specifically `font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 700`. Fraunces is the closest contemporary Google Font to the **Cooper Black / Windsor / Lubalin Graph** family that defined warm rounded magazine display in the 1960s-70s; pushed to its softest optical-size setting it acquires the troweled, slightly-bulging silhouette the spec calls for. Used at `clamp(3rem, 9vw, 7.5rem)` for cover lines and section openers, with tight `tracking: -0.015em` to encourage the letterforms to nestle. - **Secondary Display / Pull-Quotes:** **"Sniglet"** at weight 800 -- a genuinely playful-rounded sans (1% in the corpus, deeply underused) that brings a softer, almost children's-book personality to pull-quotes set at `clamp(1.6rem, 3.4vw, 2.4rem)`. Sniglet is what the body face uses when it wants to interrupt itself. - **Body / Reading:** **"Bitter"** -- a slab serif with rounded terminals and a generous x-height that reads beautifully at magazine-article column widths. Set at `1.0625rem / 1.55` line-height in the standard reading column, with `text-wrap: pretty` and hanging punctuation. - **Marginalia / Editor's Voice:** **"Caveat"** -- a fluid handwritten Google Font used exclusively for the marginal commentary, captions on botanical plates, and the editor's signature. Always rotated by a small random `--rot: -2deg | -1deg | 1.5deg` per element to avoid the mechanical-handwritten look. - **Folios / Captions / Department Tags:** **"Commissioner"** at small caps, weight 500, `letter-spacing: 0.14em` -- the only "neutral" face on the page, used like the typographic equivalent of a magazine's running-head rule: page numbers, department labels (`DISPATCHES`, `FIELD NOTES`, `ARGUMENT`), and date lines. **Palette** -- a disciplined terracotta-warm system, the exact opposite of the desaturated "warm" gradient that 39% of the corpus has settled into. Every color is named after a 1970s magazine printing-ink trade name to keep the team honest: - `--ink-terracotta: #B8482E` -- the dominant accent. Headlines, dingbats, hairline rules. Imagine a Pantone Warm Red 21 reprinted on slightly absorbent paper. - `--ink-clay: #D67D5C` -- the secondary terracotta, lighter, used for tints, marginal arrows, and the underline on hovered links. - `--ink-saffron: #E5A04D` -- a turmeric-saffron yellow used as the second color in three-color separations; it is the page's energy spike. - `--ink-fern: #4F6B3E` -- the only green, an oak-leaf olive used for the botanical plate stems and for the "verified" check on linked sources. Restrained. Never bright. - `--paper-cream: #F5EBD8` -- the page itself. Not white. A warm uncoated-stock cream that simulates a Sunday-supplement paper at 60lb basis weight. - `--paper-buff: #ECDFC5` -- the spread's "facing page" tint, used very subtly to mark the right page apart from the left page in the same spread. - `--ink-deep: #4A2013` -- the darkest tone, used for body copy. Never pure black; always this oxblood-brown that prints true on cream. - `--registration-cyan: #6BA8B5` -- a single sparingly-used blue, exactly the color of an off-register cyan plate showing a hairline outside the warm-color stack. Used for the gatefold cue and for one small "registration mark" device per spread. **Color Pairings (production rules):** - Body copy is **always** `--ink-deep` on `--paper-cream`. Never reversed. Long-form readability is sacred. - Headlines and pull-quotes default to `--ink-terracotta` on cream; section openers may invert to cream on a `--ink-terracotta` panel. - The botanical plates print in three-color: `--ink-fern` for line, `--ink-saffron` for fill, `--ink-clay` for shading. Each element is offset by `0.5px` from the others to suggest mis-registration. ## Imagery and Motifs **Botanical illustration is the entire visual identity.** No stock photography, no 3D renders, no icon sets. The site's imagery vocabulary is exactly two things, and they earn their place by being exquisite. 1. **Three-Color Botanical Plates.** Hand-drawn (in the asset pipeline: SVG, but rendered in the visual idiom of) Pierre-Joseph Redouté's *Les Roses* and Anne Pratt's *Wild Flowers*: a single specimen -- usually flowering plant, occasionally seed pod or root system -- rendered as a three-layer SVG. The line layer in `--ink-fern` 1.4px stroke, the fill layer in `--ink-saffron` 60% opacity, the shadow layer in `--ink-clay` 40% opacity, each layer offset by `translate(0.4px, 0.4px)` from the layer above to simulate **misregistered four-color magazine printing**. Each plate is labeled with a hand-lettered Latin binomial in `--font-caveat` and a small numbered key (`1. Sepal 2. Stamen 3. Bract`) in the manner of a 19th-century field guide. The species selected for freedom.study are deliberate: **Liriodendron tulipifera** (American tulip tree -- "the liberty tree" of Boston, 1765), **Quercus robur** (the English oak of constitutional metaphor), **Helianthus annuus** (sunflower -- the universal motif of dissident movements), **Fraxinus excelsior** (ash -- Yggdrasil, the world tree of the commons), and **Solidago canadensis** (goldenrod -- common right-of-passage on roadsides). Each becomes a chapter mark. 2. **Retro-Pattern Backgrounds.** The sidebar boxes and the inside-cover spreads carry **1970s magazine-supplement decorative patterns**: a half-drop repeat of stylized tulips at 8% opacity in `--ink-clay`; a six-fold geometric "starflake" reminiscent of *Avant Garde*'s decorative borders; a wavy "argyle hatch" that appears once on the colophon page. Each pattern is a CSS-painted SVG `background-image` so it tiles cleanly and respects the underlying baseline grid. Pattern usage is rationed: **never more than one pattern per spread**, and the cover and editor's letter spreads are pattern-free. **The Registration Mark Device.** In the lower-outer corner of every spread sits a tiny **printer's registration mark** -- the standard four-cross-and-circle target used by 1970s offset printers to align color plates. It is `12px × 12px`, slightly off-register itself (the cyan circle is 1px out of true), and it serves as the section anchor for the contents-tab navigation. Click a registration mark, fly back to the table-of-contents spread. **Decorative Dingbats.** The terracotta dingbat replacing standard quotation marks is a hand-drawn **printer's florette** -- a small four-petal flower from the Caslon ornament book, rendered in `--ink-terracotta` at the cap-height of the surrounding text. Folios use a smaller version of the same flower as a separator: `4 ❀ APRIL`. ## Prompts for Implementation **Build it as a magazine, not a website.** The implementation brief is: produce a single long-scroll document that performs as **one bound issue** of a magazine that does not exist. Reading it should feel like turning pages, and the site's only non-content interactions should be the things a print magazine would have wanted to do but couldn't: **the gatefold drags open**, the **registration marks fly to contents**, the **marginalia stick to their paragraph as you scroll**, the **pull-quotes spring into place when revealed**. Resist every reflex toward the "modern web." This site should make a designer who has been laid off from Condé Nast feel suddenly, dangerously employed. **Do not include:** a sticky navigation bar, a hero-with-CTA, a pricing table, a feature grid, a testimonials carousel, a stat counter, a newsletter modal, a cookie banner that pretends to be charming, a "trusted by" logo wall, an FAQ accordion, a contact form, a chat bubble, or any element whose purpose is conversion. None of these belong in a magazine. None belong here. **Do include:** a cover spread with masthead, three cover lines, and an issue date (`No. 1 / Vol. I`); a contents spread with hand-numbered articles; an editor's letter with drop cap and signature; at least three feature spreads (each with full-bleed botanical plate, headline, dek, pull-quote, body copy in two columns, marginalia); one gatefold spread; a sidebar-cluster spread; a Q&A spread; and a colophon. That is the running order. **Animation Direction (the elastic pattern, used purposefully):** - **Page-turn entrance:** as each new spread scrolls into view, it animates in with a soft elastic `cubic-bezier(0.34, 1.56, 0.64, 1)` curve -- a 0.6s rise from `translateY(40px) rotate(-0.4deg)` to rest, mimicking a page settling after a turn. Use `IntersectionObserver`, never scroll-position math. - **Pull-quote spring:** pull-quotes spring in with a stronger overshoot (peak scale 1.04, settle to 1.0) and a faint counter-rotation. Sniglet's roundness rewards the bounce. - **Marginalia jitter on hover:** the handwritten margin notes wobble by 1.2 degrees each direction on hover (`@keyframes wobble; animation-timing-function: cubic-bezier(.5,1.6,.4,1)`), suggesting the editor is fidgeting with their pen. - **Gatefold drag:** the gatefold spread is a horizontal `overflow-x: auto` strip 200% wide; on touch/drag/scroll-right it reveals additional content. Snap-points at 0% and 100% with `scroll-snap-type: x mandatory`. A small "→ pull to open" hint with an elastic arrow lives at the right edge. - **Botanical plate parallax:** within each photo-essay spread, the three color layers of the botanical plate parallax against each other at very different rates (`-12px`, `0px`, `+8px` per 100vh of scroll), exaggerating the misregistration effect. The plate appears to "breathe" as you scroll past. - **Cursor-as-pen:** custom cursor on the marginalia layer is a small terracotta dot with a cross-hair tail, like a fountain pen tip; on the body-copy layer it is the default I-beam. The cursor swap is the only "interactive" affordance the magazine wants you to notice. - **No carousel, no modal, no toast, no skeleton loader, no progress bar.** Reduce-motion respects: all elastic curves collapse to `linear` 0.2s, parallax disabled. **Typography animation:** the cover masthead uses a one-time variable-font animation on load -- Fraunces' `SOFT` axis ramps from 0 to 100 over 1.4s while `opsz` settles from 8 to 144. The letters appear to *bloom* into their soft display state. Subsequent display headlines do not animate; they are simply set there. **Storytelling structure (suggested running order):** 1. **Cover** -- "FREEDOM, A FIELD GUIDE -- No. 1 / Vol. I / The Liberty Tree Issue" 2. **Contents** -- 8 articles, hand-numbered, each with a botanical glyph 3. **Editor's Letter** -- on why a magazine, why now, why botany 4. **Feature 1: "The Liberty Tree"** -- the Boston elm/tulip-tree of 1765, with full-bleed Liriodendron plate 5. **Q&A: "Three Botanists on the Commons"** 6. **Sidebar Cluster: "Five Plants That Have Stood for Liberty"** 7. **Gatefold: "A Two-Hundred-Year Timeline of the Word 'Free'"** 8. **Feature 2: "The Sunflower Movement"** -- Helianthus plate, Taipei 2014 etc. 9. **Photo Essay: "Roadside"** -- Solidago plate, on the commons of public verge 10. **Colophon** -- credits, species index, "printed in cream" Each section is one spread. Each spread is one screen-height-or-so. Reading the site end-to-end should take 8-12 minutes -- the precise length of a Sunday-afternoon magazine read. **JavaScript footprint:** target under 6KB minified. No framework. The interactions are: `IntersectionObserver` for spread reveal, a horizontal-scroll handler for the gatefold, a `prefers-reduced-motion` check, and the registration-mark click-to-contents. That is all the script the magazine needs. ## Uniqueness Notes **Differentiators from the rest of the corpus:** 1. **The magazine-spread metaphor, taken literally.** Only 6% of the corpus uses magazine-spread layout, and none of them commit to the bound-volume conceit -- the gutter shadow, the left-page/right-page distinction, the marginalia layer, the gatefold, the colophon. freedom.study treats the browser as a stitched magazine, not a stack of cards or a scroll of stat blocks. 2. **Botanical illustration as the only imagery.** Botanical-illustration is at 1% in the imagery analysis -- a near-empty seat. Photography (38%) and minimal (18%) dominate. By committing entirely to three-color SVG botanical plates with intentional mis-registration, freedom.study reads visually unlike any other site in the corpus, including the few "nature" sites which lean toward photographic forest scenes. 3. **Terracotta-warm against playful-rounded -- a pairing that does not exist in the corpus.** Warm palettes (39%) almost universally pair with serif-classic or humanist type. Playful-rounded type (1%) almost universally pairs with candy-bright or pastel palettes. The combination of a saturated 1970s terracotta ink set with Fraunces-at-soft-axis and Sniglet creates a tonal register -- earnest, warm, slightly sunburnt, faintly comic -- that is genuinely unoccupied territory. 4. **Energetic tone (only 2% of corpus) on a `.study` domain.** The TLD's gravitational pull is toward scholarly-intellectual and mysterious-moody -- a casual review of `.study` sites in the corpus confirms this. freedom.study breaks rank: an energetic, exuberant register on a domain whose neighbors are all wearing tweed. 5. **Retro-patterns motif.** Used exactly nowhere else in a sustained way. The 1970s decorative borders, the half-drop tulip repeat, the printer's-florette dingbats -- a coherent ornamental language descended from Lubalin and Push Pin Studios that no other site in the corpus is mining. 6. **The marginalia-as-content layer.** Most sites confine "secondary" content to footnotes, tooltips, or hover states. freedom.study makes the handwritten margin gloss a primary editorial register, set in Caveat, sticky-positioned, occasionally arguing with the body copy. It is the closest a website can get to a Talmudic page. 7. **No conversion mechanic, anywhere.** No CTA, no pricing, no stat grid, no "trusted by," no testimonial slider, no FAQ accordion, no newsletter trap. The site ends with a colophon. This is the **AVOID** list from the brief, executed. **Chosen seed:** `aesthetic: corporate, layout: magazine-spread, typography: playful-rounded, palette: terracotta-warm, patterns: elastic, imagery: botanical-illustration, motifs: retro-patterns, tone: energetic` -- a deliberately contradictory cocktail that resolves into a single coherent artifact: **a corporate-grade magazine that takes botanical liberty seriously while looking like it might also pop**. The "corporate" axis (37% of corpus) is here interpreted not as the dominant SaaS-gradient cliché but as **editorial corporate** -- the disciplined production values of a 1972 magazine masthead -- which is a reading of "corporate" the corpus has not yet attempted. **Avoided patterns from frequency analysis:** - Skipped: photography (38%), card-grid (38%), centered (36%), gradient-palette (39%), scroll-triggered generic (37%), mono typography (37%), mysterious-moody tone (21%) -- the seven most overused dimensions. - Embraced: magazine-spread (6%), botanical-illustration (1%), terracotta-warm (1%), playful-rounded (1%), elastic (10%), retro-patterns, energetic (2%) -- a stack of low-frequency selections that, taken together, place this site in an unoccupied region of the corpus's design space.