name: earth-ash-design
version: alpha
description: >
  Earth & Ash is the site of a fictional wood-fired pottery studio, Hollowware &
  Co. It runs on a warm cream paper surface (#F2E8D2) interrupted by char-black
  (#1E1B16) and celadon-green (#B3C7B5) full-bleed sections, with a single
  iron-red voltage (#A0412E) reserved for emphasis, prices, and the maker's mark.
  The type story is editorial: an enormous optical-size Fraunces display face
  (with SOFT/WONK variable axes) for headlines, italic Fraunces for captions, and
  Inter for body. Signature moves are a clamp(80px..280px) "Earth & Ash" hero
  over a pinned, zooming photo, an SVG firing-curve chart, a seven-cell heat strip
  that ramps cream→iron→char, rotating circular type, a galleon maker's-mark
  stamp, and an overall multiply grain texture. Geometry is mostly soft: pill
  buttons and chips, 16–28px rounded cards, against sharp-edged full-bleed images.
colors:
  # Brand / Voltage
  iron: '#A0412E'      # the single accent — emphasis italics, prices, buttons, chips, stamp, chart
  # Surface
  cream: '#F2E8D2'     # primary page surface; card fills on dark/celadon sections; light text on dark
  char: '#1E1B16'      # char-black hero, commissions, and footer surfaces; default body text on cream
  celadon: '#B3C7B5'   # full-bleed green surface for Kiln Log and Workshops sections
  # Text / Muted
  sage: '#8A9886'      # muted/eyebrow text, captions, hairline borders, table headers
  # Card / placeholder tints (image backgrounds while loading)
  card-warm: '#e6dcc3' # warm placeholder fill behind piece images
  card-cool: '#d5d8c7' # cool placeholder fill behind piece images
  # Heat-strip ramp (seven-day anagama firing, Mon→Sun)
  heat-1: '#EFE3C5'    # Mon ~600°
  heat-2: '#E6CC95'    # Tue ~1180°
  heat-3: '#D4A45A'    # Wed ~1640°
  heat-4: '#BC7838'    # Thu ~2050°
  heat-5: '#A0412E'    # Fri ~2280° (= iron)
  heat-6: '#7A2A18'    # Sat ~2410°
  heat-7: '#3A1810'    # Sun cool-down
  # Hairlines (over-cream and over-char)
  hairline-dark: 'rgba(30,27,22,0.12)'    # rules/borders on cream
  hairline-light: 'rgba(242,232,210,0.3)' # rules/inputs/borders on char
typography:
  display:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(80px, 17vw, 280px)
    fontWeight: 400
    lineHeight: 0.82
    letterSpacing: -0.04em
    # font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1
  section-heading:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(56px, 9vw, 160px)
    fontWeight: 400
    lineHeight: 0.85
    # opsz 144, SOFT 60–80, WONK 1
  card-title:
    fontFamily: "'Fraunces', serif"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1
  spec:
    fontFamily: "'Fraunces', serif"
    fontSize: 18px
    fontWeight: 400
    fontStyle: italic
    # opsz 14, SOFT 100 — used for all captions, prose, specs
  eyebrow:
    fontFamily: "'Inter', sans-serif"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.3em
    textTransform: uppercase
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 18px
    fontWeight: 400
    letterSpacing: -0.01em
  mono:
    fontFamily: "ui-monospace, monospace"
    fontSize: 12px
    fontWeight: 400
    # font-mono — temperatures in the heat strip and trial table
rounded:
  sm: 6px       # heat-strip day cells (rounded-md)
  md: 16px      # workshop cards (rounded-2xl)
  lg: 24px      # celadon-trial kiln card (rounded-[24px])
  xl: 28px      # featured kiln entry card (rounded-[28px])
  full: 9999px  # buttons, chips, color swatches, the rotating stamp ring
spacing:        # base unit 4px; section rhythm in 4px multiples
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  '2xl': 64px
  section: 112px # py-28 — vertical padding on major sections
components:
  nav:
    textColor: '{colors.cream}'
    typography: '{typography.eyebrow}'
    padding: '24px 32px'
    # fixed, mix-blend-difference so it inverts over any surface
  button-primary:
    backgroundColor: '{colors.iron}'
    textColor: '{colors.cream}'
    typography: '{typography.eyebrow}'
    rounded: '{rounded.full}'
    padding: '16px 28px'
  chip:
    backgroundColor: '{colors.iron}'
    textColor: '{colors.cream}'
    typography: '{typography.spec}'
    rounded: '{rounded.full}'
    padding: '4px 12px'
    # also appears with char fill ('{colors.char}') for the "2 seats left" variant
  piece-card:
    backgroundColor: '{colors.card-warm}'
    textColor: '{colors.char}'
    typography: '{typography.card-title}'
    rounded: '0'
    # sharp-edged full-bleed image + galleon stamp; title/price below
  workshop-card:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.char}'
    typography: '{typography.card-title}'
    rounded: '{rounded.md}'
    padding: '28px'
    # hover: magnetic translate + boxShadow 0 20px 60px rgba(160,65,46,0.35)
  kiln-card:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.char}'
    typography: '{typography.spec}'
    rounded: '{rounded.xl}'
    padding: '48px'
    # box-shadow: 0 1px 0 rgba(30,27,22,0.06)
  kiln-input:
    backgroundColor: 'transparent'
    textColor: '{colors.cream}'
    typography: '{typography.body}'
    padding: '14px 0'
    # border-bottom 1px {colors.hairline-light}; focus border-bottom {colors.iron}
motion:
  hero-pin: 'GSAP ScrollTrigger pin; image scale 1→1.25 + text yPercent -25 & opacity→0.3, scrub'
  piece-reveal: 'GSAP from autoAlpha 0, y 60, duration 0.9, power3.out at top 85%'
  stamp-rotate: 'GSAP rotation 360 over 28s linear infinite (galleon); ring text 32s'
  heat-fill: 'GSAP day cells scaleY 0→1 from bottom, stagger 0.08, power2.out'
  workshop-color-shift: 'Motion scroll-linked backgroundColor #B3C7B5→#F2E8D2 across section'
  magnetic-hover: 'Motion spring translate 0.12× cursor offset, stiffness 180 damping 18'
  button-success: 'Motion morph to width 60 + radius 999, then draw check stroke 0.5s'
  footer-glow: 'pointer-tracked radial iron glow, mix-blend screen'
icons:
  library: Tabler icons-webfont (ti); game-icons galleon SVG for the maker's mark; inline SVG for logo/charts
  style: outline (Tabler); solid silhouette (galleon stamp)
  sizes: { sm: 16px, md: 20px, stamp: 88px }
  color: '{colors.sage}'   # Tabler ti icons render in sage inside workshop meta rows

Earth & Ash

earth-ash-design · alpha

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

Overview

Earth & Ash is the storefront and studio journal of a fictional wood-fired pottery maker, Hollowware & Co. of Mendocino, California. The whole page is warm-paper editorial: a cream surface (#F2E8D2) that the eye reads as raw clay, punctuated by full-bleed char-black (#1E1B16) and celadon-green (#B3C7B5) sections so the scroll feels like moving between rooms. Across all of it runs an SVG feTurbulence grain set to mix-blend-mode:multiply at low opacity — every surface looks slightly fired and dusty. A single iron-red voltage (#A0412E) carries all the heat: emphasis italics inside headlines, every price, the pill buttons and chips, the firing-curve chart, and the galleon maker's-mark stamp. The type is the star: Fraunces at optical size 144 with the SOFT and WONK variable axes pushed up, scaled to clamp(80px, 17vw, 280px) for the "Earth & Ash" hero, with italic emphasis words colored iron; captions and prose use italic Fraunces at small optical size (the .spec class); Inter handles body and uppercase 0.3em-tracked eyebrows. Signature moves: a pinned hero whose photo zooms while the headline parallaxes and fades, a masonry-staggered pieces grid where each card escapes its baseline, an SVG firing-curve area chart, a seven-cell heat strip ramping cream→amber→iron→char to chart a seven-day anagama firing, a rotating circular textPath ring around a looping video stamp, and a galleon SVG stamped on every piece and ghosted 900px-wide in the footer.

Colors

Brand / voltage. iron #A0412E is the only accent and is used sparingly but everywhere it matters: the emphasized word inside each headline (Earth <em>&</em> Ash, The <em>Pieces</em>, the <em>kiln</em>), all prices and big stat numbers (2348°, 18 h), pill buttons, the "4 seats left" chips, the firing-curve stroke/fill, input focus underline, and the galleon stamp tint.

Surfaces. cream #F2E8D2 is the default page background and the fill of cards that sit on dark/celadon sections; it also serves as the light text color on char and celadon surfaces. char #1E1B16 is the full-bleed dark surface for the hero, the Commissions section, and the footer, and is the default body text color on cream. celadon #B3C7B5 is the green full-bleed surface for the Kiln Log and (initially) the Workshops section.

Text / muted. sage #8A9886 is the workhorse muted tone — eyebrow labels, .spec captions, table headers, Tabler icon color, and many hairline borders.

Card tints. Piece images sit on warm #e6dcc3 or cool #d5d8c7 placeholder fills so the masonry reads as paper even before images load.

Heat ramp. The seven-day firing strip uses a dedicated seven-step ramp: #EFE3C5 → #E6CC95 → #D4A45A → #BC7838 → #A0412E → #7A2A18 → #3A1810, i.e. cream through amber to iron and down to char as the kiln peaks and cools.

Hairlines. Two rgba families: rgba(30,27,22,0.12) for rules on cream and rgba(242,232,210,0.3) for rules/inputs/borders on char.

Typography

Two imported families: Fraunces (Google Fonts, full variable axes incl. opsz, SOFT, WONK, wght) and Inter (Google Fonts, weights 300–600). Fraunces is the display and prose voice; Inter is body and UI. There is no dedicated mono webfont — font-mono falls back to the system mono stack for temperatures. If substituting open-source faces, keep an optical-size serif with soft terminals for Fraunces and a neutral grotesque for Inter.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(80px,17vw,280px)	400	0.82	-0.04em	Hero "Earth & Ash"
section-heading	clamp(56px,9vw,160px)	400	0.85	tight	Section H2s (Pieces, Kiln Log)
card-title	30–48px (text-3xl/5xl)	400	1	normal	Piece names, card/kiln titles
spec	14–20px	400 (italic)	snug–relaxed	normal	Captions, prose, specs, stats labels
eyebrow	11px	400	normal	0.3em	Uppercase labels above sections
body	18px	400	normal	-0.01em	Inter body / form inputs
mono	12px	400	normal	normal	Heat-strip temps, trial Fe%

Headlines set font-variation-settings per element, typically 'opsz' 144, 'SOFT' 60–100, 'WONK' 1, 'wght' 300–400 — the high SOFT/WONK is the soft, slightly wonky character of the display type.

Layout

Base unit is 4px; major sections use py-28 (112px) vertical rhythm and px-6 md:px-12 gutters. Content max-widths vary by section: max-w-6xl for editorial text blocks, max-w-[1400px]/max-w-[1600px] for the wide grids. The page is a vertical sequence of full-bleed sections that alternate surface color. The hero is h-screen with a pinned zooming photo, centered display headline, a circular rotating-type video stamp bottom-right, and a location tag bottom-left. The Pieces section is a 12-column grid where each article is given a different md:mt-*/-mt-* offset to fake a staggered masonry that "escapes" the baseline; one featured piece spans 8 columns with an overlaid caption. The Kiln Log mixes treatments: a featured data card with an SVG firing curve and 3-stat row, a seven-column heat strip, a prose-only entry in negative space, and a two-column celadon-trial table. Commissions is a split 5/7 layout — sticky text left, macro image + numbered form right. Whitespace is generous and editorial.

Elevation & Depth

Mostly flat — depth comes from surface color changes and the grain overlay rather than shadows. The featured kiln card carries the faintest shadow (0 1px 0 rgba(30,27,22,0.06)). Real elevation appears only on hover: workshop cards animate to box-shadow: 0 20px 60px rgba(160,65,46,0.35) (an iron-tinted lift). The footer paints a radial-gradient warm glow at top and a pointer-tracked iron radial glow (mix-blend-mode:screen). Borders/hairlines (sage or rgba) do the structural separation work instead of shadows.

Shapes

A deliberate split: sharp full-bleed images and piece cards (radius 0) versus soft UI. Buttons, chips, color swatches, and the stamp ring are fully round (rounded-full/9999px). Cards are softly rounded at distinct radii — workshop cards rounded-2xl (16px), the celadon-trial kiln card rounded-[24px], the featured kiln entry rounded-[28px], and heat-strip day cells rounded-md (6px). The contrast of square photography against pill controls is intentional.

Components

• Top nav — fixed, mix-blend-difference so it inverts against whatever scrolls under it; inline-SVG mark + "Hollowware & Co." in Fraunces, uppercase 0.22em links in cream.
• Primary button — iron fill, cream text, rounded-full, px-7 py-4, uppercase 0.25em label ("Send the request"); morphs to a circle + check on click.
• Chip — small pill, italic .spec, iron or char fill, cream text ("4 seats left", "Wait-list").
• Piece card — sharp image on warm/cool tint, galleon stamp top-right, Fraunces title + iron-toned price below; staggered vertical offset per card.
• Workshop card — cream fill, rounded-2xl, 28px padding, image + chip, Fraunces title, sage .spec meta with Tabler calendar/clock icons, price + iron "Reserve →"; magnetic hover + iron shadow lift.
• Kiln entry card — cream fill, rounded-[24/28px], hairline-divided columns; hosts the SVG firing curve, stat triplet, and the celadon trial table.
• Heat strip — seven aspect-[3/4] cells, rounded-md, filled by the heat ramp with day label + mono temperature; fills in left-to-right on scroll.
• Kiln input — transparent, bottom-border-only (hairline-light), cream text, 18px Inter; focus turns the underline iron.

Motion

Heavy, scroll-driven, using GSAP + ScrollTrigger and Motion (motion@12). The hero pins and the photo scales 1→1.25 while the headline parallaxes up 25% and fades to 0.3. Pieces and headings reveal with autoAlpha 0, y 60/30, power3.out at ~85% viewport. The galleon stamp rotates 360° over 28s and the circular ring text over 32s, both infinite linear. Heat-strip cells scale up from the bottom with a 0.08s stagger when the row enters. The Workshops section background scroll-animates #B3C7B5 → #F2E8D2. Workshop/hover-magnet elements follow the cursor with a spring (0.12× offset, stiffness 180 / damping 18) and cards gain the iron shadow on enter. The submit button morphs to a 60px circle then draws a check stroke. The footer has a pointer-tracked screen-blend glow.

Iconography

Three icon sources. Tabler icons-webfont (<i class="ti ti-calendar">, ti-clock) for workshop meta, outline style, rendered in sage. A game-icons galleon.svg is the maker's mark — stamped 88–110px top-right on every piece (tinted iron or cream via CSS filter) and ghosted ~900px at 8% opacity in the footer. Inline SVG for the logo mark, the rotating circular textPath ring, the firing-curve chart, and the submit check. Decorative stamps dominate; UI icons are limited to the workshop cards.

Do's and Don'ts

• Do keep iron-red as the only accent — reserve it for emphasis words, prices, the stamp, buttons/chips, and the chart.
• Do set Fraunces with high opsz/SOFT/WONK for headlines and use the italic .spec style for all captions and prose.
• Do keep the grain multiply overlay on every section and alternate cream / char / celadon surfaces to pace the scroll.
• Do keep photos and piece cards sharp-cornered while UI controls stay pill.
• Don't introduce a second accent hue or flatten the heat ramp into a single color.
• Don't add drop shadows for structure — use surface color and hairlines; shadows appear only on hover (iron-tinted).
• Don't set body copy in Fraunces or headlines in Inter — keep the two voices distinct.

Known Gaps

• Fraunces variable-axis settings (opsz/SOFT/WONK/wght) are per-element inline and not captured as discrete tokens; the typography tokens list the most common combination in comments.
• font-mono has no imported face; the mono token approximates with the system monospace stack.
• The grain texture is an inline SVG feTurbulence data-URI (baseFrequency 0.9, opacity .18, multiply) — described qualitatively, not tokenized.
• Spacing scale is inferred from the Tailwind classes actually used; not every step is exercised in the markup.