name: quarto-design
version: alpha
description: >
  Quarto is a letterpress literary-quarterly homepage rendered as a printed
  forme: a warm cream paper field (`#F2EDDC`), near-black ink hairlines and type
  (`#15120D`), and a single Bordeaux voltage (`#58111A`) for accents, drop caps
  and seals. The signature moves are a hard 12-column ruled grid stitched with
  1px ink borders, an oversized Libre Caslon masthead, hand-set drop caps,
  multi-column body text with column rules, a deckle-edge SVG mask, a fractal
  paper-grain noise overlay, and a wax-seal pricing badge. Type is an editorial
  trio — Libre Caslon Text display, Spectral body serif, JetBrains Mono for
  metadata — and the geometry is almost entirely sharp-cornered, print-grid
  rectangles, broken only by full-round seals and badges.
colors:
  # Surface
  cream: '#F2EDDC'        # var(--cream); page paper field, light cards, button text on ink
  cream-grad: '#ECE5CE'   # foot of the print+digital panel gradient (#F2EDDC -> #ECE5CE)
  # Ink / Text
  ink: '#15120D'          # var(--ink); body + heading text, all hairline borders, dark sections
  # Brand / Voltage
  hue: '#58111A'          # var(--hue); Bordeaux accent — drop caps, italic accents, seal, links hover
  wax-hi: '#7a1f29'       # wax-seal radial highlight
  wax-lo: '#3a0a10'       # wax-seal radial shadow edge
  # Hairlines / Tints (opacity over ink or cream)
  ink-70: 'rgba(21,18,13,0.70)'   # text-ink/70 muted meta
  ink-60: 'rgba(21,18,13,0.60)'   # text-ink/60 fainter meta
  ink-25: 'rgba(21,18,13,0.25)'   # column-rule hairline
  cream-20: 'rgba(242,237,220,0.20)'  # border-cream/20 hairlines on ink sections
  cream-85: 'rgba(242,237,220,0.85)'  # body text on ink sections
  # Archive spine swatches (one-off decorative fills)
  spine-forest: '#2C3E2D'
  spine-ochre: '#7A4A1E'
  spine-navy: '#1B2A4A'
  spine-gold: '#D4B468'
typography:
  display:
    fontFamily: "'Libre Caslon Text', serif"
    fontSize: clamp(72px, 13vw, 200px)   # masthead H1; section heads 36-68px
    fontWeight: 700
    lineHeight: 0.82
  display-italic:
    fontFamily: "'Libre Caslon Text', serif"
    fontSize: 26px
    fontWeight: 400
    lineHeight: 1.25
  body:
    fontFamily: "'Spectral', serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.7
  dropcap:
    fontFamily: "'Libre Caslon Text', serif"
    fontSize: 83px       # 5.2rem default; scales to 9rem/6rem inline
    fontWeight: 700
    lineHeight: 0.85
    color: hue
  mono:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 10px       # meta runs 9-12px
    fontWeight: 400
    letterSpacing: 3px   # tracking-[0.3em] is the dominant meta tracking
    textTransform: uppercase
rounded:                  # almost everything is square; rounds reserved for seals/badges
  none: 0px
  full: 9999px
spacing:                  # base unit 4px (Tailwind scale); ruled cells on 6/8px steps
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 28px                # toc-cell padding 1.75rem
  2xl: 40px
  3xl: 64px
components:
  masthead-bar:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.ink}'
    typography: '{typography.mono}'
    border: '1px solid {colors.ink}'
    rounded: '{rounded.none}'
    padding: '12px 24px'   # px-6 py-3 ruled 12-col strip
  toc-cell:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.ink}'
    rounded: '{rounded.none}'
    padding: '28px'        # 1.75rem; sits on 1px ink gap grid (toc-grid bg ink)
  pull-quote:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.ink}'
    typography: '{typography.display-italic}'
    border: '2px solid {colors.ink}'  # border-y-2; 3px hue left bar
    rounded: '{rounded.none}'
    padding: '24px 32px'
  button-outline:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    typography: '{typography.mono}'
    border: '1px solid {colors.ink}'
    rounded: '{rounded.none}'
    padding: '16px 32px'   # hover: bg ink / text cream
  button-solid:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.cream}'
    typography: '{typography.mono}'
    rounded: '{rounded.none}'
    padding: '16px 32px'   # hover: bg hue
  wax-seal:
    backgroundColor: '{colors.hue}'   # radial #7a1f29 -> #58111A -> #3a0a10
    textColor: '{colors.cream}'
    typography: '{typography.display-italic}'
    rounded: '{rounded.full}'
    padding: '110px square; inset dashed cream ring'
  archive-spine:
    backgroundColor: '{colors.hue}'   # current issue; others use one-off swatch fills
    textColor: '{colors.cream}'
    typography: '{typography.display}'
    rounded: '{rounded.none}'
    padding: '16px'        # 54-80px wide x 420px tall, vertical writing-mode
  mail-badge:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.ink}'
    border: '2px solid {colors.ink}'
    rounded: '{rounded.full}'
    padding: '64px circle; 8px cream ring shadow'
motion:
  lenis-smooth: 'Lenis smooth scroll, autoRaf, anchor-aware'
  masthead-parallax: 'GSAP .lift yPercent -25, ease none, scrub through header'
  toc-line-reveal: 'line-clip span yPercent 110 -> 0, dur 0.8s, power3.out, 0.05s stagger'
  press-image-wipe: 'clipPath inset(0 100% 0 0) -> inset(0 0 0 0), dur 1.0s, power2.inOut'
  press-pin: 'left column sticky top-0 h-screen while right column scrolls (scrollytelling)'
  hover: 'hover-hue link color -> hue; buttons swap ink/cream or ink/hue on hover'
icons:
  library: game-icons (lorc / delapouite SVGs via jsdelivr) + Tabler webfont (ti)
  style: outline/engraved illustrative SVGs; ti-mail for the divider badge
  sizes: { sm: 28px, md: 32px }
  color: '{colors.ink}'   # quill-ink recolored to hue via CSS filter; "⬥/↘" glyph accents in hue

Quarto — The Folio & Press

quarto-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles, Tailwind arbitrary values, and the <style> block. Fictional/sample product (a letterpress literary quarterly); described factually.

Overview

Quarto dresses a homepage as a printed forme. The page is a warm cream paper field (#F2EDDC) carrying near-black ink (#15120D) type and a relentless lattice of 1px ink hairlines that ruled it into a 12-column broadsheet. A single Bordeaux voltage (#58111A, named --hue) does all the accent work: drop caps, italic phrase highlights, the wax seal, link hovers, and the "↘ Open ↘" glyphs. The type story is an editorial trio — Libre Caslon Text for display (an oversized masthead at clamp(72px,13vw,200px) set in leading-[0.82]), Spectral for multi-column body copy at 17px/1.7, and JetBrains Mono for the uppercase, wide-tracked metadata bars that label every section as § I … § V. The signature moves are pure print craft: hand-set drop caps that float into the text, a columns-2 lead story with a 1px column rule, an SVG deckle-edge mask, a fractal feTurbulence noise overlay multiplied over the whole page for paper grain, a horizontally scrolling bookshelf of colored issue spines (vertical writing-mode), and a radial-gradient wax seal stamped over the recommended pricing tier. Geometry is almost entirely sharp — print-grid rectangles — with roundness reserved for the wax seal and the circular mail badge. GSAP + ScrollTrigger over Lenis add a masthead parallax lift, a staggered line-mask reveal in the contents, and a clip-path wipe on the press images.

Colors

Surface. The whole document sits on cream #F2EDDC (var(--cream), class .bg-cream), the paper. The print+digital pricing panel deepens it slightly with a vertical gradient to #ECE5CE. Dark sections (From the Press, footer, the final TOC colophon cell) invert to ink #15120D (.bg-ink) with cream text.

Ink / text. ink #15120D (var(--ink)) is simultaneously the body/heading color and the color of every hairline border in the grid. Muted variants are opacity tints of ink: ink/70 and ink/60 for metadata, ink/25 for the body column rule, ink/40 for the dashed "view all" placeholder.

Brand / voltage. hue #58111A (var(--hue)) is the lone accent — a deep Bordeaux. It colors drop caps, the italic The in the masthead and a House Remembers, the pull-quote left bar (3px), the wax seal, the solid button's hover state, and decorative glyphs. On ink sections it appears as the ⬥ and ↘ marks.

Wax seal. A radial gradient #7a1f29 → #58111A → #3a0a10 with an inset dashed cream/40 ring and an inner+drop shadow.

Hairlines & tints. On cream, borders are solid ink; on ink sections they become border-cream/20. Body text on ink uses cream/85.

Archive spines. A decorative one-off palette of jewel/earth tones — forest #2C3E2D, ochre #7A4A1E, navy #1B2A4A, gold #D4B468, plum #5A1B2E, teal #1F3A3D, moss #3A4A2C, rust #6A2A1F, walnut #3D2B1F — plus hue for the current issue and ink for the decennial.

Typography

The display face is Libre Caslon Text (serif, with liga/dlig ligatures), loaded from Google Fonts — a high-contrast Caslon standing in for the "Caslon Ionic" named in the colophon. Body is Spectral (serif), used for both the lead-story columns and the long-form prose, often italicized for quotes. Meta is JetBrains Mono, always uppercase with wide tracking, substituting for the "Söhne Mono" named in the colophon.

Token	Size	Weight	Line-height	Tracking	Usage
display (masthead)	clamp(72→200px)	700	0.82	tight	"The Folio & Press" hero
display (section H2)	68px	400–700	0.95	—	lead-story headline
display (H3)	44–56px	400–700	0.95–1.0	—	press steps, footer head
display (TOC)	20–44px	400–700	0.95–1.1	—	contents entries, spines
display-italic	14–26px	400	1.25	—	pull quote, "Recommended", Fin.
dropcap	5.2rem (→6/9rem)	700	0.85	—	floated initial, color hue
body	14–17px	400	1.55–1.7	—	columns, intros, list items
mono	9–12px	400–500	—	0.15–0.4em	section bars, meta, prices, buttons

Layout

Base unit is the 4px Tailwind scale; ruled cells pad on 1.75rem (28px) and px-6 py-3 (24/12px). The page is a single full-bleed column with no rounded container — it reads top to bottom as issue sections, each opened by a 12-column mono "running-head" bar (§ I … § V) divided by 1px ink hairlines. The masthead is a centered 3-row ruled block. The Contents is a true grid: toc-grid with gap:1px over an ink background so the 1px gaps render as ink hairlines between cream cells, laid out grid-cols-6 grid-rows-4 with the lead story spanning col-span-3 row-span-2. The lead story uses columns-2 with a column-rule and max-w-6xl. "From the Press" is a two-up scrollytelling layout: a sticky top-0 h-screen image column beside three min-h-screen text panels. The Archive is a horizontal-scroll bookshelf of 420px-tall spines on an ink "shelf". Subscribe is a 2-column split with a center mail badge bridging the divider. Whitespace is generous within cells but the overall feel is dense, ruled, and typographic — a printed page, not an app.

Elevation & Depth

The system is overwhelmingly flat and border-driven: depth comes from 1px/3px ink hairlines and the ruled grid, not shadows. The few real shadows are object shadows on the press Polaroids (shadow-2xl with an 8px cream border and a slight rotate), the wax seal (inset -6px -8px 12px rgba(0,0,0,.4) plus 0 6px 14px rgba(0,0,0,.25)), the mail badge's 0 0 0 8px var(--cream) ring, and the shelf's shadow-inner. A fractal-noise SVG layer (.noise::after, opacity .35, mix-blend-mode: multiply) sits at z-50 over everything to give the cream a printed paper grain. The footer runs a muted looping video at opacity .15 behind the colophon.

Shapes

Sharp by default — print-grid rectangles with border-radius: 0 everywhere. The only curves are full-round: the wax seal (110px, border-radius:999px), the mail badge (rounded-full, 64px), and the small archive ⬥ marks. The deckle SVG mask gives section edges a torn-paper wobble where applied. There are no soft/medium radii in the system at all.

Components

• Section running-head bar — 12-col strip, cream fill, 1px ink dividers, mono 10px/0.3em uppercase, three cells (§ N, centered subtitle, right meta). On ink sections it flips to border-cream/20.
• TOC cell (toc-cell) — cream fill on a 1px-ink gap grid, 1.75rem padding, mono number + read-time, display headline; the colophon cell inverts to bg-ink text-cream.
• Drop cap (dropcap) — floated Libre Caslon initial in hue, 5.2rem default, enlarged to 6rem/9rem for feature cells.
• Pull quote — border-y-2 ink, cream fill, 3px hue left bar, display italic 26px, mono attribution in hue.
• Outline button — "Subscribe digital →", 1px ink border, square, mono 11px/0.3em, px-8 py-4, hover fills ink with cream text.
• Solid button — "Subscribe print & digital →", ink fill, cream text, hover fills hue.
• Wax seal (wax) — 110px radial-gradient Bordeaux disc, inset dashed cream ring, "Sealed / F&P / 1953" in display italic + tiny uppercase.
• Archive spine — 54–80px × 420px colored card, vertical writing-mode display title, mono № and ⬥; current issue in hue.
• Mail badge — 64px cream circle, 2px ink border, 8px cream ring shadow, Tabler ti-mail, straddling the subscribe divider.

Motion

Smooth scrolling via Lenis (autoRaf, anchor-aware), wired to drive ScrollTrigger.update(). GSAP ScrollTrigger effects: the masthead .lift parallaxes yPercent:-25 scrubbed across the header; the contents cascade in via a line-mask reveal (line-clip > span from yPercent:110, 0.8s, power3.out, 0.05s stagger); the press images wipe in with a clipPath inset(0 100% 0 0) → inset(0 0 0 0) over 1.0s power2.inOut. The press section pins its image column (sticky top-0 h-screen) for scrollytelling. Hovers are instant color swaps (hover-hue links to hue; buttons swap fills).

Iconography

Two sources. Illustrative engraved SVGs from game-icons (lorc & delapouite — quill-ink, scroll-quill, fountain-pen, quill, papyrus) loaded from jsdelivr at 28–32px, used as editorial section marks; quill-ink is recolored to Bordeaux via a CSS filter. The only UI icon is Tabler webfont ti ti-mail in the subscribe divider badge. Typographic glyphs (⬥, ↘, §, №, ·) carry most of the small-mark duty, often in hue.

Do's and Don'ts

• Do keep the 12-column ruled grid with 1px ink hairlines as the spine of every section; open each section with a mono § running-head bar.
• Do reserve hue #58111A for accents only — drop caps, italic highlights, seals, hovers, glyphs — never as a large fill outside spines/seal.
• Do keep corners square; let only the seal and mail badge be round.
• Do set body in Spectral columns with a column rule, and lead with a Libre Caslon drop cap.
• Don't introduce soft/medium radii, drop shadows on flat UI, or gradients beyond the wax seal and the subscribe-panel cream gradient.
• Don't drop the paper-grain noise overlay or the deckle edge — they carry the letterpress conceit.
• Don't mix in a third primary typeface; keep the Caslon / Spectral / Mono trio and the uppercase wide-tracking mono meta.

Known Gaps

• The colophon names bespoke faces (Caslon Ionic, Mercury Text, Söhne Mono); the HTML actually loads open substitutes — Libre Caslon Text, Spectral, JetBrains Mono — which are the real tokens here.
• dropcap token size shown as 83px (5.2rem default); inline overrides push it to 6rem/9rem per cell.
• Spacing tokens are inferred from the Tailwind classes/rem paddings actually used (px-6, py-3, 1.75rem, gap-1px), not a declared scale.
• Archive spine fills are decorative one-offs; only a representative subset is tokenized.
• Motion values are read from the GSAP calls; perceived easing/scrub feel is approximate.