name: folio-design
version: alpha
description: >
  Folio is an editorial brand-studio cover set on warm cream paper (#F2EDE3)
  with a fine multiply paper-grain overlay, typeset entirely in serifs —
  Fraunces for display (italic small-caps eyebrows, heavy 900 italic pull
  quotes) and Source Serif 4 for body and italic captions. The voltage is a
  single brick-red accent (#C8421C) that appears as em-dash rules, slashes, quote
  marks, leaders, and hover underlines. The signature moves are magazine
  conventions made literal: a split hero with a full-bleed video plate, a sticky
  scroll-scrubbed manifesto with clip-path line reveals, a numbered Contents
  table with dotted leaders, and offset "plate" frames carrying a 2deg tilt and
  soft drop shadow. Geometry is sharp — zero radius everywhere except the
  scrolled nav, which morphs into a blurred glass pill.
colors:
  # Surface
  bg-primary: '#F2EDE3'    # page cream — html/body and every section background
  bg-warm: '#EDE5D4'       # warmer cream — plate image placeholders, manifesto tint target
  bg-secondary: '#1B1814'  # near-black warm brown (declared; nav glass tints toward it)
  surface: '#FDFAF2'       # off-white plate mounts (manifesto/contents/work frames)
  # Text
  text-primary: '#11151A'  # near-black ink — headings, body, wordmark
  text-muted: '#6F6557'    # warm taupe — eyebrows, captions, blurbs, meta
  text-inverse: '#F2EDE3'  # cream — type over the dark hero video, nav
  # Brand / Accent
  accent-1: '#C8421C'      # brick red — rules, slashes, quote marks, leaders, hovers
  accent-2: '#314A3D'      # deep pine green (declared in :root; reserved, not used in markup)
  # Hairlines
  rule: '#11151A'          # full-ink hairline — footer rule
  hairline-ink: 'rgba(17,21,26,0.12)'   # contents row dividers
  hairline-ink-strong: 'rgba(17,21,26,0.15)'  # footer strip top border
  leader-dot: 'rgba(17,21,26,0.3)'      # dotted leaders in contents table
  # Glass / overlay
  nav-glass: 'rgba(17,21,26,0.32)'      # scrolled nav fill (backdrop-blur)
  nav-border: 'rgba(242,237,227,0.14)'  # scrolled nav hairline
  hero-vignette: 'rgba(17,21,26,0.55)'  # bottom of hero gradient over video
  grain-ink: 'rgba(17,21,26,0.025)'     # paper-grain dot (ink)
  grain-accent: 'rgba(200,66,28,0.015)' # paper-grain dot (red)
typography:
  display:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(2.8rem, 5.6vw, 6.2rem)
    fontWeight: 700
    lineHeight: 0.98
    letterSpacing: -0.025em
  quote:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(2.2rem, 4.6vw, 5rem)
    fontWeight: 900
    lineHeight: 1.05
    letterSpacing: -0.025em
    fontStyle: italic
  section-title:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(2.2rem, 5vw, 4.2rem)
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.02em
    fontStyle: italic
  spread-name:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(2rem, 3.4vw, 3rem)
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.02em
  eyebrow:
    fontFamily: "'Fraunces', serif"
    fontSize: 0.85rem
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.12em
    fontStyle: italic
    textTransform: small-caps
  body:
    fontFamily: "'Source Serif 4', Georgia, serif"
    fontSize: 1.05rem
    fontWeight: 400
    lineHeight: 1.6
  sub-italic:
    fontFamily: "'Source Serif 4', serif"
    fontSize: clamp(1.05rem, 1.4vw, 1.35rem)
    fontWeight: 400
    lineHeight: 1.5
    fontStyle: italic
  wordmark:
    fontFamily: "'Fraunces', serif"
    fontSize: 22vw
    fontWeight: 700
    lineHeight: 0.82
    letterSpacing: -0.02em
rounded:                      # near-zero geometry; pill only on scrolled nav
  none: 0
  pill: 999px
spacing:                      # base unit 8px; section gutters/padding in larger steps
  xs: 8px
  sm: 14px
  md: 24px
  lg: 32px
  xl: 48px
  section-x: 56px
  section-y: 160px
components:
  nav-default:
    typography: '{typography.eyebrow}'
    textColor: '{colors.text-inverse}'
    backgroundColor: transparent
    rounded: '{rounded.none}'
    padding: '32px 56px'
  nav-scrolled:
    backgroundColor: '{colors.nav-glass}'
    borderColor: '{colors.nav-border}'
    rounded: '{rounded.pill}'
    padding: '14px 28px'
    # backdrop-filter blur(22px) saturate(1.35); box-shadow 0 14px 44px rgba(17,21,26,0.22)
  hero-cta:
    typography: '{typography.sub-italic}'
    textColor: '{colors.text-inverse}'
    border: '1px solid {colors.text-inverse}'  # bottom border only
    hoverColor: '{colors.accent-1}'
    padding: '0 0 6px'
  plate:
    backgroundColor: '{colors.surface}'
    rounded: '{rounded.none}'
    padding: '18px–24px'
    # box-shadow 0 22px 60px -28px rgba(17,21,26,0.35), 0 4px 14px rgba(17,21,26,0.05)
  contents-row:
    typography: '{typography.spread-name}'
    textColor: '{colors.text-primary}'
    borderBottom: '1px solid {colors.hairline-ink}'
    # dotted leader rgba(17,21,26,0.3); pageno in accent-1
  eyebrow:
    typography: '{typography.eyebrow}'
    textColor: '{colors.text-muted}'
    # trailing em-dash rule '——' rendered in accent-1
motion:
  hero-words: 'words fade up (opacity 0→1, translateY 14px→0) staggered 40ms via --i, .9s ease'
  hero-em: 'italic "proud" rises and de-rotates (translateY 20px + rotate -2deg → 0) at .55s, 1s ease'
  manifesto-lines: 'scroll-scrubbed clip-path inset reveal per line, staggered start 0.10 each'
  manifesto-plate: 'scroll-scrubbed clip-path reveal + rotation 2deg→0; bg warms toward rgb(235,224,208)'
  contents-reveal: 'IntersectionObserver: title skewY(3deg)→0; rows fade up with dotted leader scaleX(0→1)'
  work-title: 'blur(16px)→0 + fade on enter'
  spreads: 'enter translateX ±60px→0 + clip-path reveal; subtle scale by distance to viewport center'
  footer-wordmark: 'translateY 80px→0, blur(20px)→0, letter-spacing 0.04em→-0.02em over 1.4s, delay .6s'
  nav-morph: 'all geometry transitions .45s cubic-bezier(.25,.1,.25,1) into a glass pill past 40px scroll'
  ease: 'cubic-bezier(.25,.1,.25,1) primary; cubic-bezier(.16,.84,.44,1) page'
icons:
  library: none
  style: typographic ornaments — em-dash rules '——', slash '/', quote marks, dotted leaders, arrow '—→'
  color: '{colors.accent-1}'

Folio

folio-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Folio is a print magazine rendered as a website — the cover and front matter of "Vol.III" for a brand studio. The surface is warm cream paper (--bg-primary #F2EDE3) carried across every section, dusted with a fixed multiply paper-grain overlay built from two radial-gradient dot patterns (ink rgba(17,21,26,0.025) and red rgba(200,66,28,0.015)). Everything is serif: Fraunces does the editorial display work — heavy 700/900 headlines, italic 500 section titles, and italic small-caps eyebrows — while Source Serif 4 handles body copy and the italic captions. The single voltage is a brick red, --accent-1 #C8421C, used sparingly but everywhere as connective tissue: the —— em-dash rule trailing each eyebrow, the logo slash, manifesto quote marks, the dotted leaders' page numbers, and every hover underline. Ink is a near-black warm #11151A; muted copy is a warm taupe #6F6557. The signature moves are all magazine conventions: a split-spread hero with a full-bleed background video under cream type, a sticky scroll-scrubbed manifesto whose lines clip-reveal as you scroll, a numbered Contents table with dotted leaders, offset surface #FDFAF2 "plate" frames that sit at a 2deg tilt with a soft drop shadow, and a colossal 22vw Folio/ wordmark that blurs and tightens into place in the colophon. Geometry is sharp — border-radius: 0 everywhere — except the scrolled nav, which morphs into a 999px blurred-glass pill.

Colors

Surface. The page is cream --bg-primary #F2EDE3, set on html, body, and the background of every section (hero, manifesto, contents, work, footer). A warmer cream --bg-warm #EDE5D4 backs plate image placeholders and is the warm target the manifesto background tints toward on scroll (rgb(235,224,208)). Plate mounts use an off-white --surface #FDFAF2. A near-black warm brown --bg-secondary #1B1814 is declared and is the base the scrolled-nav glass tints toward, though the nav fill itself is rgba(17,21,26,0.32).

Text. Body and headings are ink --text-primary #11151A; secondary copy (eyebrows, captions, blurbs, attributions, meta years) is warm taupe --text-muted #6F6557. Over the dark hero video, type flips to cream --text-inverse #F2EDE3 (often at reduced alpha, e.g. rgba(242,237,227,0.88) for the hero sub).

Brand / Accent. A single brick red --accent-1 #C8421C is the entire accent system — em-dash rules, the logo and wordmark slash, manifesto quote marks, contents page numbers and leaders, spread markers/meta, and all hover underlines. A deep pine green --accent-2 #314A3D is declared in :root but never referenced in the markup (reserved).

Hairlines. The footer rule is full ink --rule #11151A. Contents rows divide on rgba(17,21,26,0.12); the footer strip tops on rgba(17,21,26,0.15); dotted leaders are rgba(17,21,26,0.3).

Glass / overlay. The scrolled nav is rgba(17,21,26,0.32) with a rgba(242,237,227,0.14) hairline. The hero is darkened by a vertical gradient reaching rgba(17,21,26,0.55) at the base so cream type stays legible on video.

Typography

Two Google Fonts, both serif, loaded via one css2 request: Fraunces (optical sizes 9–144, weights 400/500/700/900, roman + italic) and Source Serif 4 (optical 8–60, weights 400/500, roman + italic). Fraunces is the editorial display face — italic small-caps for eyebrows, heavy roman for headlines and spread names, italic 500 for section titles, italic 900 for the manifesto quote. Source Serif 4 (fallback Georgia, serif) is the body and italic-caption face. font-feature-settings: 'ss01','kern','liga' is on globally; small-caps come from font-variant: small-caps.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(2.8rem, 5.6vw, 6.2rem)	700	0.98	-0.025em	Hero headline
quote	clamp(2.2rem, 4.6vw, 5rem)	900 italic	1.05	-0.025em	Manifesto pull quote
section-title	clamp(2.2rem, 5vw, 4.2rem)	500 italic	1.05	-0.02em	Contents / Work titles
spread-name	clamp(2rem, 3.4vw, 3rem)	700	1	-0.02em	Work project names
eyebrow	0.85rem	500 italic	1.5	0.12em	Small-caps eyebrows
body	1.05rem	400	1.6	0	Footer copy, blurbs
sub-italic	clamp(1.05rem, 1.4vw, 1.35rem)	400 italic	1.5	0	Hero sub, taglines
wordmark	22vw	700	0.82	-0.02em (animated from 0.04em)	Footer Folio/

Layout

Base unit 8px; section horizontal padding is 56px and vertical rhythm runs in large steps (140–160px top/bottom). The page is a single scrolling spread of full-width sections. The hero is a 1.15fr / 1fr grid: a left column with bottom-anchored eyebrow, headline, sub, and CTA over a right-side full-bleed object-fit: cover video. The manifesto lives in a 250vh tall wrapper with a sticky 100vh stage and a 7fr / 1fr / 5fr inner grid (text, gap, plate). Contents centers a 820px column with a centered vignette and a numbered list whose rows are a auto auto 1fr auto grid (number, name, dotted leader, page number) with a full-width blurb. Work uses a 1600px inner with alternating two-column spreads (80px gap) that flip plate/caption order by :nth-child. The footer is a centered 1100px colophon: a sweeping rule, a 3-column grid, then a massive 22vw wordmark that bleeds off the bottom. Whitespace is generous and deliberately editorial — wide margins, hanging captions, oversized type.

Elevation & Depth

Mostly flat ink-on-paper. Depth comes from three sources: (1) the fixed multiply paper-grain overlay on the body and inside each plate's ::after; (2) the "plate" drop shadows — 0 22px 60px -28px rgba(17,21,26,0.35), 0 4px 14px rgba(17,21,26,0.05) on work plates, 0 22px 60px -25px …, 0 4px 12px … on the manifesto plate, 0 16px 40px -20px rgba(17,21,26,0.3) on the contents vignette; and (3) the scrolled glass nav — backdrop-filter: blur(22px) saturate(1.35) with 0 14px 44px rgba(17,21,26,0.22) and an inset top highlight. Plates also carry a 2deg physical tilt that reads as a stacked-photograph depth cue.

Shapes

Resolutely sharp: border-radius: 0 on plates, frames, and the default nav — this is print, not UI. The only curve in the system is the scrolled nav, which morphs to a 999px pill (and small-radius pieces vanish at that scale). Rules and leaders are 1–2px lines; the em-dash —— ornament substitutes for a divider.

Components

• Nav (default) — fixed, transparent, cream italic Fraunces, no radius, 32px 56px padding; logo Folio/ with red slash; center links with red hover-underline; right shows the VOL.III / SUMMER 2025 issue stamp and a bottom-bordered "Begin a brief →" mini CTA.
• Nav (scrolled) — past 40px it detaches to top:18px; left/right:24px, becomes a rgba(17,21,26,0.32) glass 999px pill with blur, hairline border, and a drop shadow; padding tightens to 14px 28px.
• Eyebrow — Fraunces italic small-caps, 0.12em tracking, taupe, with a trailing brick-red —— em-dash rule.
• Hero CTA — Fraunces italic 1.25rem, cream, bottom-bordered; on hover turns red and the gap widens (12px→18px). Label: "Begin a brief —→".
• Plate — surface #FDFAF2 mount, 18–24px inset padding, sharp corners, soft drop shadow, inner grain overlay, optional 2deg tilt; image fills the inset via ::before, with a "Render pending / PLATE N" no-asset fallback label.
• Contents row — number (taupe small-caps) · name (Fraunces 700) · 2px dotted leader · page number (red small-caps), over a rgba(17,21,26,0.12) divider, with an italic Source Serif blurb beneath.
• Spread — alternating image-plate + caption (marker · name · italic tagline · red small-caps meta with year), order flipped by :nth-child.
• Footer colophon — full-ink rule, 3-column grid (Contact / Channels / Colophon) with a contact-big email, then the giant blurring wordmark and a small-caps footer strip.

Motion

Authored and live (a reduce flag exists in JS but is hard-set false). Hero words fade up staggered 40ms via a --i custom property; the italic "proud" rises and de-rotates from -2deg. The manifesto is fully scroll-scrubbed by requestAnimationFrame: each quote line reveals via clip-path: inset() on a staggered 0.10 progress window, the plate clip-reveals and rotates 2deg→0, and the stage background warms from #F2EDE3 toward rgb(235,224,208). IntersectionObserver reveals the contents title (skewY(3deg)→0), rows (fade up + leader scaleX), the work title (blur(16px)→0), spreads (translateX ±60px→0 + clip reveal), and the footer (rule sweep, columns, and a 22vw wordmark that rises, unblurs, and tightens its tracking over 1.4s). Work plates also scale subtly with distance to viewport center. A 2.5s fallback force-reveals everything for static screenshots. Primary easing is cubic-bezier(.25,.1,.25,1); nav morph runs .45s.

Iconography

No icon library. The system is purely typographic: brick-red em-dash rules ——, the logo/wordmark slash /, oversized quote marks ", dotted leaders, small-caps roman-numeral plate numbers (PLATE I–VI), and arrow glyphs (→, —→) on CTAs. All ornament accents render in --accent-1 #C8421C.

Do's and Don'ts

• Do keep every surface on cream #F2EDE3 and let the paper-grain overlay ride on top.
• Do reserve #C8421C for connective ornament — rules, slashes, quote marks, leaders, hovers — never as a fill.
• Do stay all-serif: Fraunces for display/eyebrows, Source Serif 4 for body.
• Do keep corners sharp; the only pill is the scrolled nav.
• Don't introduce sans-serif, drop shadows on type, or rounded cards.
• Don't flatten the magazine devices (eyebrow em-dash, dotted leaders, plate tilt, scroll-scrubbed reveals) — they are the identity.
• Don't use the reserved pine #314A3D as if it were a second accent; the HTML never paints with it.

Known Gaps

• --accent-2 #314A3D is declared in :root but unused in the markup; recorded as reserved.
• The manifesto background-warm target (rgb(235,224,208)) and all scroll-scrub values (clip windows, rotation, scale) are read from the JS interpolation, not a static style.
• Spacing scale is inferred from observed values (8px base; section gutters 56px, rhythm 140–160px); the HTML defines no explicit spacing tokens.
• Sizes are authored in rem/vw/clamp; reported as written, not resolved to px.