name: heritage-bakehouse-design
version: alpha
description: >
  A warm, editorial recipe-zine for a fictional artisan bakehouse. The surface is
  a speckled cream paper (`#F3EADA`) printed with two-frequency radial dot grain;
  the voltage is a jam red (`#C81E37`) backed by an ember orange (`#E2611B`).
  Type is a three-face print story: Marcellus titling, Spectral serif body with
  italics, and Caveat handwriting for marginalia. The signature moves are
  chapter-numbered sections, hand-drawn SVG rules and gingham dividers, a
  cursor-following recipe preview card, a scroll-linked seasonal color inversion
  (dawn to night), a horizontally pinned essay strip, and sticky-stacked starter
  panels. Geometry is mostly flat and squared — no rounded cards — with pill
  buttons as the only round shapes.
colors:
  # Brand / voltage
  jam: '#C81E37'        # primary accent — italic em, rules, brand mark, btn fill, active underlines
  ember: '#E2611B'      # secondary warm accent — hovers, frame border, glows, dropcaps, gradients
  # Surface
  cream: '#F3EADA'      # page background (body), light panels, button text on jam
  paper: '#FBF4E6'      # raised card / story-card / sp2 panel fill
  white-card: '#FFFDF7' # specimen plate (spec-plate) near-white fill
  night: '#231410'      # darkest brown — winter inversion bg, sp3 gradient tail, jar fill
  # Text
  ink: '#3A241A'        # primary text / headings
  ink-soft: '#7A5A45'   # muted labels, meta, body-lead, secondary nav links
  highlight: '#ffd9a3'  # warm cream-gold accent on dark sp3 panel (eyebrow, em, focus ring)
  # Hairlines (all on ink/ink-soft at low alpha)
  hairline-soft: 'rgba(122, 90, 69, 0.18)'   # reclist row dividers
  hairline-dashed: 'rgba(122, 90, 69, 0.4)'  # dashed footers, footer top border
  ink-hairline: 'rgba(58, 36, 26, 0.16)'     # spec-plate border
  # Gradient / texture
  hero-bg: 'linear-gradient(160deg, #F3EADA 0%, #efd8b6 45%, #E2611B 120%)'  # hero base wash
  sp3-bg: 'linear-gradient(160deg, #E2611B 0%, #231410 130%)'               # closing panel
  grain-dot: 'rgba(58, 36, 26, 0.05)'  # paper-grain radial dots over body
typography:
  display:
    fontFamily: "'Marcellus', serif"
    fontSize: clamp(40px, 6.2vw, 80px)   # hero h1; chapter & section titles scale down
    fontWeight: 400
    lineHeight: 0.96
  section-title:
    fontFamily: "'Marcellus', serif"
    fontSize: clamp(34px, 4.4vw, 56px)
    fontWeight: 400
    lineHeight: 1.02
  body:
    fontFamily: "'Spectral', Georgia, serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.65
  body-sm:
    fontFamily: "'Spectral', serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.7
  label:
    fontFamily: "'Spectral', serif"
    fontSize: 12px
    fontWeight: 400
    letterSpacing: 2.64px   # 0.22em
    textTransform: uppercase
  pgnum:
    fontFamily: "'Spectral', serif"
    fontSize: 15px
    fontWeight: 400
    fontStyle: italic
  script:
    fontFamily: "'Caveat', cursive"
    fontSize: 26px
    fontWeight: 500
rounded:                  # near-flat system; pills are the only curve
  none: 0
  full: 999px
spacing:                  # base unit 4px; common steps used in the markup
  xs: 4px
  sm: 8px
  md: 14px
  lg: 22px
  xl: 40px
  xxl: 54px
components:
  btn-jam:
    backgroundColor: '{colors.jam}'
    textColor: '{colors.cream}'
    typography: '{typography.label}'
    rounded: '{rounded.full}'
    padding: '14px 26px'
    hover: 'background ember, translateY(-2px)'
    # label e.g. "Open the Recipe Box"
  starter-cta:
    backgroundColor: '{colors.jam}'
    textColor: '{colors.cream}'
    typography: '{typography.label}'
    rounded: '{rounded.full}'
    padding: '18px 40px'
    hover: 'background #fff, color jam, translateY(-3px); emits flour-puff particles'
    # label "Add a Starter"
  tab:
    backgroundColor: 'transparent'
    textColor: '{colors.ink-soft}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '8px 14px'
    activeUnderline: '2px {colors.jam} (scaleX reveal); active text {colors.ink}'
  hero-frame:
    backgroundColor: 'rgba(251, 244, 230, 0.12)'
    border: '1px solid rgba(226, 97, 27, 0.55)'
    rounded: '{rounded.none}'
    padding: '54px 48px 46px'
    elevation: '0 30px 80px -40px rgba(35,20,16,0.6); backdrop-filter blur(1.5px); 2px ember->jam bottom glow'
  recitem:
    backgroundColor: 'transparent'
    textColor: '{colors.ink}'
    typography: '{typography.section-title}'
    rounded: '{rounded.none}'
    padding: '22px 4px'
    border: 'bottom 1px {colors.hairline-soft}'
    hover: 'title -> ember, translateX(10px)'
  splate-card:
    backgroundColor: '{colors.paper}'
    textColor: '{colors.ink}'
    rounded: '{rounded.none}'
    padding: '46px'
    elevation: '0 30px 60px -34px rgba(35,20,16,0.5); ember washi-tape pseudo on top edge'
  spec-plate:
    backgroundColor: '{colors.white-card}'
    border: '1px solid {colors.ink-hairline}'
    rounded: '{rounded.none}'
    padding: '20px 20px 0'
    elevation: '0 34px 64px -34px rgba(35,20,16,0.55); rotated -1.8deg; dashed ember tape corners'
  preview:
    backgroundColor: '{colors.ember}'
    border: '1px solid {colors.jam}'
    rounded: '{rounded.none}'
    size: '280px x 360px, cursor-following'
    elevation: '0 24px 50px -24px rgba(35,20,16,0.7)'
motion:
  frameIn: 'hero frame clip-path inset reveal, 1.1s cubic-bezier(.2,.8,.2,1)'
  word-rise: 'hero h1 per-word translateY(42px)->0, 0.8s, 70ms stagger'
  linereveal: 'heading clip-path inset(0 100% 0 0)->0, 1s cubic-bezier(.2,.8,.2,1) on intersect'
  recitem-in: 'rows translateY(26px)+fade, 0.7s, 60ms stagger'
  floaty: 'scroll cue bob, 3.4s ease-in-out infinite'
  emberPulse: 'jar glow opacity/scale pulse, 4.5s ease-in-out infinite'
  bub: 'starter-jar bubbles rise -150px, 4s linear infinite'
  season-invert: 'scroll-linked bg/text/accent rgb-lerp dawn->noon->dusk->night over 400vh + sun arc'
  stories-pin: 'horizontal translateX 0->-300vw over 400vh pinned strip; center card scale 0.97->1'
  starter-stack: 'sticky panels scale 1->0.96 as next slides over (300vh)'
  hero-parallax: 'scroll-linked video scale 1->up & opacity 1->0.35; frame glow ember->jam'
  foot-rule-draw: 'SVG stroke-dashoffset 1200->0, 1.6s ease on intersect'
icons:
  library: inline SVG (hand-drawn paths) + Unicode marks (№, —, ~)
  style: hand-drawn single-stroke, organic
  stroke: 1.6px
  sizes: { rule: 8px-tall, scrollcue: 24x36 }
  color: '{colors.jam}'

Heritage Bakehouse

heritage-bakehouse-design · alpha

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

Overview

Heritage Bakehouse is an editorial recipe-zine made of paper, not pixels. The body sits on a warm cream (--cream #F3EADA) printed with a two-frequency radial dot grain (rgba(58,36,26,0.05) at 4px and 0.035 at 9px) so the page reads as speckled stock. Everything is organized like a printed book: chapter eyebrows ("Chapter I."), page numbers ("Pg. 14", "№ 01"), Roman-numeral editions, and hand-drawn SVG rules and gingham dividers between sections. The voltage is a jam red (--jam #C81E37) used for italics, brand mark, pill buttons, and active underlines; an ember orange (--ember #E2611B) is the warm partner for hovers, the hero frame border, dropcaps, and glows. Type is a three-face print story: Marcellus for titling, Spectral serif (with frequent jam italics) for body, and Caveat handwriting for marginal asides. The signature moves are scroll-engineered: a cursor-following recipe preview card on the Shelf, a 400vh seasonal color inversion that lerps dawn-to-night while a sun dot arcs overhead, a horizontally pinned essay strip, and sticky-stacked starter panels that scale as the next slides over. Geometry is deliberately flat — squared cards, hairline and dashed borders, rotated "washi-tape" pseudo-elements — with pill buttons (999px) the only round shape.

Colors

Brand / voltage. --jam #C81E37 is the primary accent: italic em text, the hand-drawn rules, the brand "Heritage" mark, the .btn-jam and #starter-cta fills, active tab underlines, page numbers, and the cursor-preview border. --ember #E2611B is the secondary warm accent: button and recipe-title hovers, the .hero-frame border (rgba(226,97,27,0.55)), the dropcap on essays, jar glows, washi-tape pseudo-elements, and the warm end of gradients.

Surface. --cream #F3EADA is the page body and the light starter panel (#sp1); it also serves as text color on jam/ember fills. --paper #FBF4E6 is the raised card fill (.splate-card, #sp2). #FFFDF7 is the even brighter specimen plate. --night #231410 is the darkest brown — the Winter season inversion, the tail of the #sp3 gradient, and the starter-jar background.

Text. --ink #3A241A is the primary text and heading color. --ink-soft #7A5A45 is muted: labels, meta, the season lead, secondary nav. #ffd9a3 is a cream-gold used only on the dark closing panel (#sp3) for its eyebrow, italic, focus ring, and page number.

Hairlines. Borders are warm low-alpha browns: rgba(122,90,69,0.18) for reclist row dividers, rgba(122,90,69,0.3) for the tabs underline, rgba(122,90,69,0.4) for dashed footers and the footer top rule, and rgba(58,36,26,0.16) for the spec-plate border.

Gradient / texture. The hero base is linear-gradient(160deg, cream 0%, #efd8b6 45%, ember 120%). The closing panel is linear-gradient(160deg, ember 0%, night 130%). The dot grain over the body is the texture signature.

Typography

Three Google Fonts, loaded via one @import stylesheet link: Marcellus (display/titling, single weight 400), Spectral (body serif; weights 300–600 plus italics 400/500), and Caveat (handwriting, 500/600). Body falls back to Georgia, serif. Italic Spectral is used liberally and is automatically jam-red (em { color: var(--jam) }). Drop caps on essay text use Marcellus in ember.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(40px,6.2vw,80px)	400	0.96	—	Hero h1; chapter/section titles, season h3 (to 128px)
section-title	clamp(34px,4.4vw,56px)	400	1.02	—	.chap-title; recipe titles to clamp(26,3.6vw,50)
body	17px	400	1.65	—	Hero body, intros
body-sm	15px	400	1.7	—	Essay body, footer-adjacent copy
label	12px	400	—	0.22em	Uppercase labels, nav, tabs, meta, bylines
pgnum	15px	400 italic	—	—	Page numbers, eyebrows, foot tag (jam)
script	26px	500	—	—	Caveat marginalia: "begin here", "scroll", "freshly pulled"

Layout

Base unit 4px; the markup leans on 8/14/22/40/54px steps. Content lives in a .wrap of max-width 1180px with 40px horizontal padding (22px on mobile). The page is a vertical sequence of book chapters separated by 14px-tall gingham dividers (linear-gradient cross-hatch in rgba(200,30,55,0.16)): full-viewport hero with an absolutely-positioned brand and nav and a glassy hero-frame offset 7vw from the left, then Chapter I Shelf (tab list + a JS-rendered recipe row list), Chapter II Seasons (a 400vh sticky stage), Chapter III Stories (a 400vh horizontally pinned 4-plate strip), Chapter IV Starters (a 300vh sticky-stacked 3-panel stack), and a flex footer. Card interiors use two-column grids (0.85fr 1fr, 0.82fr 1fr). Whitespace is generous and editorial; sections run 80–110px of vertical padding.

Elevation & Depth

Depth is mostly hairlines, dashes, and rotated paper, not heavy shadows. The real box-shadows are all soft, large-blur, downward, and tinted with night brown: hero frame 0 30px 80px -40px rgba(35,20,16,0.6), story card 0 30px 60px -34px rgba(35,20,16,0.5), spec plate 0 34px 64px -34px rgba(35,20,16,0.55), cursor preview 0 24px 50px -24px rgba(35,20,16,0.7). Glass appears once: the hero frame uses backdrop-filter: blur(1.5px) over a 12%-cream fill, plus a 2px animated ember-to-jam bottom glow. Glows are warm radial gradients (jar ember pulse). Paper realism comes from rotate(-1.8deg) plates and dashed/solid washi-tape pseudo-elements.

Shapes

Near-flat. Cards, panels, the cursor preview, and the hero frame all have border-radius: 0 — squared like printed plates. The only curves are the pill buttons (.btn-jam, #starter-cta at border-radius: 999px) and small round dots (jar bubbles, flour particles, the SVG sun dot). The squared geometry plus hand-drawn wavy rules is the core shape contrast.

Components

• btn-jam — jam fill, cream uppercase label (12.5px / 0.2em), pill 999px, 14px 26px; hover ember + lift 2px. Label e.g. "Open the Recipe Box".
• starter-cta — jam fill, cream label (13px / 0.25em), pill, 18px 40px; hover inverts to white-on-jam + lift 3px and bursts 22 flour-puff particles.
• tab — transparent, ink-soft uppercase label, square; active is ink with a jam underline that scaleX reveals; hover ember. Six tabs (Breads…Gatherings).
• hero-frame — 12%-cream glass, ember hairline border, square, 54/48/46 padding, big soft shadow, animated ember→jam bottom bar, clip-path reveal.
• recitem — transparent row, Marcellus title with an italic jam № number and uppercase ink-soft meta, 22px 4px, soft bottom hairline; hover shifts the title to ember and translateX(10px).
• splate-card — paper fill, square, 46px, soft shadow, ember washi-tape pseudo on the top edge; 2-col portrait + essay with a drop cap and dashed foot.
• spec-plate — #FFFDF7 near-white, ink hairline border, rotated -1.8deg, dashed ember tape corners; holds a dark glowing starter jar with rising bubbles.
• preview — fixed cursor-following card, 280×360, ember fill, jam border, square, deep shadow; shows a recipe image or a centered title/meta fallback.

Motion

Heavily scroll-driven through a single rAF loop. Hero: per-word title rise (70ms stagger), clip-path frame reveal (frameIn 1.1s), and scroll-linked video scale-up + dim with an ember→jam frame glow. Headings line-reveal via clip-path on intersect. Recipe rows stagger in (60ms). Seasons: a 400vh scroll lerps background/text/accent across four seasonStops (dawn→noon→dusk→ night) while a sun dot arcs cy = 520 - sin(p·π)·440. Stories: 400vh horizontal translateX(0→-300vw) with the centered card scaling to 1. Starters: 300vh sticky stack where each panel scales 1→0.96. Ambient loops: scroll-cue floaty, jar emberPulse, bubble bub, and a footer rule that draws via stroke-dashoffset. CTA click spawns animated flour particles. On mobile (≤768px) all pin/scroll effects are disabled and sections become static stacks.

Iconography

No icon font. Iconography is inline hand-drawn SVG: the wavy section/brand rules (jam stroke, 1.6px, stroke-linecap: round), the scroll-cue down-arrow (24×36), the sun dot, and the footer signature rule. Typographic marks carry the rest — №, em-dashes, ~, Roman numerals (i, ii, iii, iv; MMXXV), all in Spectral/Marcellus. Icon color is jam; strokes are intentionally imperfect to read as drawn by hand.

Do's and Don'ts

• Do keep the paper feeling: cream surface, dot grain, hand-drawn rules, gingham dividers, washi-tape and rotated-plate details.
• Do treat jam as the print-ink accent (italics, marks, buttons, underlines) and ember as its warmer hover/glow partner.
• Do keep cards and panels square; reserve 999px pills for buttons only.
• Do lean on the three faces by role: Marcellus titles, Spectral body + jam italics, Caveat for marginalia.
• Don't introduce drop shadows that aren't soft, large-blur, and night-tinted.
• Don't round card corners or add cool/neutral grays — the palette is all warm.
• Don't strip the book apparatus (chapter eyebrows, page numbers, editions); it's the brand voice.
• Don't rely on the scroll choreography for content access — it must remain readable as the static mobile stack.

Known Gaps

• The seasonal inversion colors are interpolated at runtime between four seasonStops (#F7E6DF / #FBF3DF / #CAA06F / #231410 backgrounds), so most intermediate hues are computed, not literal tokens; the four stops are exact.
• The hero/footer textures and frame glow are derived (gradients, animated custom properties); only their endpoint values are recorded.
• Spacing tokens are inferred from a 4px base and the recurring values in the markup, not from a declared scale.
• Many media assets are external (CDN/Unsplash/Pexels) with onerror fallbacks; colors here come from CSS, not the imagery.