name: rootreverence-design
version: alpha
description: >
  A warm, editorial plant-forward kitchen site set on a plaster-beige surface
  (#E7E1D6) with deep miso-brown ink (#3A3A36). The voltage is persimmon
  (#D2723E) for kickers, links and dots, with matcha green (#9CAE84) as a
  secondary editorial accent that lives mostly on the dark sections. Cormorant
  serif (with italics) carries oversized display headlines; Work Sans handles
  body at light weights; Space Mono drives all the small uppercase labels,
  captions and ledger data. Signature moves: a circular bowl image floating over
  a split-screen hero, a masonry "ingredient ledger" on a miso-dark panel, a
  vertical-text ethos sidebar, and an animated SVG axis line. Geometry is mostly
  flat and square-edged — the only roundness is the full-circle imagery and tiny
  persimmon dots.
colors:
  # Surface
  plaster: '#E7E1D6'      # page background; text color on dark sections
  miso: '#3A3A36'         # primary ink; also dark-section background (ledger, footer)
  # Brand / Voltage
  persimmon: '#D2723E'    # primary accent: kickers, menu-link underline, step numbers, dots
  matcha: '#9CAE84'       # secondary accent: italic headline word, ledger captions, footer label, footer-link hover
  # Neutral
  stoneware: '#B6AEA0'    # muted gray-taupe: metadata, hairlines, axis stroke, footer body
  # Common opacity variants (Tailwind alpha on the above)
  ink-75: 'rgba(58,58,54,0.75)'   # miso/75 — hero sub copy
  ink-80: 'rgba(58,58,54,0.80)'   # miso/80 — menu list items
  ink-85: 'rgba(58,58,54,0.85)'   # miso/85 — ethos secondary paragraphs
typography:
  display:
    fontFamily: "'Cormorant', serif"
    fontSize: clamp(10.5rem via md, 18vw on mobile)
    fontWeight: 500
    lineHeight: 0.86
    letterSpacing: -0.01em
  displayItalic:
    fontFamily: "'Cormorant', serif"
    fontSize: 10.5rem
    fontWeight: 400
    lineHeight: 0.86
    fontStyle: italic
  heading:
    fontFamily: "'Cormorant', serif"
    fontSize: 4.5rem
    fontWeight: 500
    lineHeight: 1
  ethos:
    fontFamily: "'Cormorant', serif"
    fontSize: 2.6rem
    fontWeight: 400
    lineHeight: 1.25
  body:
    fontFamily: "'Work Sans', sans-serif"
    fontSize: 15px
    fontWeight: 300
    lineHeight: 1.625
  label:
    fontFamily: "'Space Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.25em
    textTransform: uppercase
  kicker:
    fontFamily: "'Space Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.4em
    textTransform: uppercase
rounded:
  none: 0px        # default: all panels, images, hairlines are square
  full: 9999px     # bowl/avatar imagery and the small dots only
spacing:                # base unit 4px; section rhythm in large multiples
  xs: 8px
  sm: 16px
  md: 24px
  lg: 40px
  xl: 56px
  section-x: 56px      # px-14 horizontal section padding (desktop)
  section-y: 160px     # py-40 vertical section padding (desktop)
components:
  nav-link:
    textColor: '{colors.stoneware}'
    typography: '{typography.label}'
    motion: 'color .35s ease → {colors.matcha} on hover'
  menu-link:
    textColor: '{colors.ink-80}'
    typography: '{typography.body}'
    rounded: '{rounded.none}'
    motion: 'persimmon underline grows 0%→100% width over .4s ease on hover'
  ledger-card:
    backgroundColor: '{colors.miso}'
    textColor: '{colors.matcha}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    note: 'figure = full-bleed square image + mono caption with tabular-nums data'
  step-column:
    textColor: '{colors.persimmon}'
    typography: '{typography.label}'
    note: 'numbered step header (01–04) over a list of menu-links'
  dot:
    backgroundColor: '{colors.persimmon}'
    rounded: '{rounded.full}'
    size: '12px (h-3 w-3)'
  bowl-image:
    rounded: '{rounded.full}'
    elevation: 'drop-shadow(0 40px 45px rgba(58,58,54,0.35))'
motion:
  hero-kicker: 'GSAP from y:20, opacity:0, 0.9s, delay 0.2s, power2.out'
  hero-title: 'GSAP from y:60, opacity:0, 1.1s, stagger 0.12, delay 0.3s, power3.out'
  hero-sub: 'GSAP from y:20, opacity:0, 0.9s, delay 0.7s, power2.out'
  ledger-reveal: 'ScrollTrigger.batch, autoAlpha 0→1 + y:40→0, 0.7s, stagger 0.1, power2.out, batchMax 3'
  axis-draw: 'anime.js SVG line draw 0→1, 1400ms, inOut(3) easing, on intersection'
  bowl-parallax: 'Locomotive Scroll data-scroll-speed 2.2'
  menu-underline: 'background-size 0%→100% 1px, .4s ease'
icons:
  library: none
  style: 'no icon set; uses a single → arrow glyph and SVG line + dot motifs'
  color: '{colors.persimmon}'

Root & Reverence

rootreverence-design · alpha

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

Overview

Root & Reverence is a warm, slow, editorial site for a plant-forward kitchen. The entire page sits on a plaster-beige surface (--plaster #E7E1D6) inked in deep miso-brown (--miso #3A3A36), with two dark inverted panels — the Ingredient Ledger and the footer — that flip miso to background and plaster to text. The single loudest voltage is persimmon (--persimmon #D2723E), used sparingly for kickers, the animated underline on every menu link, step numbers, and the small dots on the order axis. A second accent, matcha green (--matcha #9CAE84), appears almost exclusively on the dark sections: the italic word "Ledger," the ledger captions, the footer tagline, and as the hover color for footer links. The type story is a three-face system: Cormorant serif (with a prominent italic) sets enormous display headlines at near-1 line-height; Work Sans carries light 300-weight body copy; and Space Mono sets every small uppercase label, caption, and the tabular ledger data. The signature visual moves are a circular bowl image floating over a split-screen hero, a balanced masonry ledger of square food photos, a vertical-text "Our Ethos" sidebar, and a thin SVG axis line that draws itself in on scroll. Geometry is overwhelmingly flat and square — the only round forms are the full-circle imagery and the tiny persimmon dots.

Colors

Surface. plaster #E7E1D6 is the page background and doubles as the text color on the two dark sections. miso #3A3A36 is the primary text ink and also the background of the Ledger section and the footer.

Brand / voltage. persimmon #D2723E is the primary accent: the hero kicker, the growing underline on .menu-link, the step numbers (01–04), the "Reserve a bowl" emphasis, and the four order-axis dots. matcha #9CAE84 is the secondary accent and lives mostly on dark backgrounds — the italic "Ledger" word, all ledger figcaptions, the footer "Plant-Forward Kitchen" label, and the .footer-link hover color.

Neutral. stoneware #B6AEA0 is the quiet gray-taupe used for metadata (the "Est. 2019" line), the axis stroke, hairlines, and footer body text. It also appears at reduced opacity for hairline rules (/30, /50, /60).

Opacity variants. Body and secondary copy use Tailwind alpha on miso — miso/75 for the hero sub, miso/80 for menu lists, miso/85 for ethos secondary paragraphs — and on plaster (plaster/90) for ledger labels.

Typography

Three Google Fonts faces, imported together: Cormorant (400/500/600 + 400 italic), Work Sans (300/400/500), and Space Mono (400/700). Cormorant is the display/serif voice; Work Sans the body; Space Mono the label/data voice. All three are open-source from Google Fonts, so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	10.5rem (md) / 18vw	500	0.86	tight	"Root" hero word
displayItalic	10.5rem	400 italic	0.86	tight	"& Reverence" hero word
heading	4.5–7rem	500	1	—	section H2 (Ledger, Build a Bowl)
ethos	2.1–2.6rem	400	1.25–1.4	—	ethos pull-quotes
body	15px	300	1.625	—	hero sub, menu items
label	11px	400	—	0.25em	section labels, captions, footer
kicker	11px	400	—	0.4em	hero kicker (persimmon)

Mono labels are always uppercase. Hero metadata and the order steps push tracking to 0.3em–0.4em; the vertical ethos label reaches 0.5em.

Layout

Base unit is 4px; section rhythm uses large multiples (px-14 = 56px horizontal, py-40 = 160px vertical on desktop). The page is a single full-width column of stacked full-bleed sections, no central max-width wrapper. The hero is a split composition: a 42%-wide image pinned to the right edge, headline text constrained to the left 52%, and a circular bowl image absolutely centered at ~49%/47% bridging the two halves. The Ledger is a balanced 2/3-column CSS columns masonry with staggered top margins. The Ethos section is a [20%_1fr] grid with a sticky vertical-text sidebar. The Order section is a 4-column grid under an animated horizontal axis. Whitespace is generous and unhurried, reinforcing the "slow" brand.

Elevation & Depth

Almost entirely flat. There is exactly one shadow: the bowl image's drop-shadow(0 40px 45px rgba(58,58,54,0.35)) (.bowl-shadow), a soft brown floor shadow that makes the circle hover. Depth otherwise comes from the dark/light section contrast, thin hairlines (bg-stoneware/30–60, the vertical ethos tick, footer rules), and the parallax offset of the bowl. No glass, no glow, no card shadows.

Shapes

Square by default — every panel, photo, figure, and hairline has zero radius. Roundness is reserved for two things: full circles (rounded-full) on the hero bowl, the small grayscale ethos avatars, and the 12px persimmon order dots. The contrast between hard editorial rectangles and a few perfect circles is the shape signature.

Components

• nav-link — header nav items (Ledger / Ethos / Order); Space Mono 11px uppercase 0.25em, miso/70, transitions to matcha on hover via .footer-link.
• menu-link — order-list and footer text links; Work Sans body; a persimmon underline drawn via background-size growing 0%→100% width over .4s ease.
• ledger-card — <figure> with a full-bleed square photo plus a Space Mono caption: a plaster/90 uppercase index label ("001 / Heirloom Grain") over matcha tabular-nums data rows (FIBER / PROTEIN / ORIGIN). On miso background.
• step-column — numbered order step: persimmon "01 — Select Base" mono header above a space-y-3 list of menu-links in miso/80.
• dot — 12px (h-3 w-3) persimmon full circle marking each axis endpoint.
• bowl-image — full-circle hero photo with the single drop-shadow and Locomotive parallax (data-scroll-speed="2.2").

Motion

Powered by GSAP + ScrollTrigger, Locomotive Scroll, and anime.js. On load the hero animates in three staged tweens: kicker (y:20, 0.9s, delay 0.2), the two title spans (y:60, 1.1s, stagger 0.12, delay 0.3, power3.out), then the sub (delay 0.7). The Ledger photos reveal in batches of 3 via ScrollTrigger.batch (autoAlpha 0→1, y:40→0, 0.7s, stagger 0.1). The order axis SVG line draws itself from 0→1 over 1400ms with inOut(3) easing on first intersection (anime.js svg.createDrawable). The bowl floats with Locomotive parallax, and menu underlines animate on hover. Footer/nav links cross-fade color over .35s ease.

Iconography

No icon library. The interface is glyph- and shape-driven: a single "→" arrow on "Reserve a bowl," small persimmon dots, a drawn SVG axis line, and thin hairline rules. Where an icon role would normally appear, the design uses typography or a circle instead. Accent for these marks is persimmon.

Do's and Don'ts

• Do keep the surface plaster and the ink miso; flip them (miso bg / plaster text) only for full inverted sections like the Ledger and footer.
• Do reserve persimmon for accents — kickers, underlines, step numbers, dots — and keep matcha on the dark sections.
• Do set every small label in Space Mono, uppercase, with wide tracking (0.25em+), and use tabular-nums for any data.
• Do keep panels and photos square; use circles only for the bowl, avatars, and dots.
• Don't add card shadows, glows, or glass — the one allowed shadow is the bowl's brown drop-shadow.
• Don't use a heavy body weight; Work Sans body stays at 300.
• Don't crowd the layout; the generous, unhurried spacing is the brand.

Known Gaps

• Display sizes are responsive: 18vw on mobile and 10.5rem at md; the clamp() notation in the typography token approximates this split.
• letterSpacing on the display tokens is recorded as Tailwind's tracking-tight (~-0.01em), not an explicit px value in the HTML.
• Opacity-variant colors (ink-75/80/85, plaster/90, stoneware hairlines) are Tailwind alpha modifiers on the base tokens, surfaced here for completeness.
• The spacing scale is inferred from the Tailwind utilities actually used (gap/padding/margin); it is a 4px-based reading, not an explicit token set in the source.