name: vegdrawer-design
version: alpha
description: >
  A warm, hand-made recipe-blog layout styled like a scrapbook of taped-down
  photographs and scribbled marginalia. The surface is a cream paper (`#FFF8EE`);
  the voltage is a trio of harvest hues — sage green `#8FAE80`, amber `#E8A33D`,
  and a tomato-red `#D9532B` — that color the tabs, badges, and accents. The
  signature moves are torn-edge photo masks, rotated "taped" polaroid cards with
  soft paper shadows, a handwritten Caveat layer over a Recoleta display serif,
  and playful organic flourishes (wobbling hand-drawn arrows, blob step numbers,
  brush-stroke strikethroughs). Geometry is intentionally imperfect: irregular
  asymmetric border-radii, slight rotations, and lined-paper backgrounds.
colors:
  # Brand / Voltage
  sage: '#8FAE80'        # primary brand green — logo, tabs, badges, footer, sticky bar
  amber: '#E8A33D'       # secondary accent — stars, second tab, arrows, qty underlines
  tomato: '#D9532B'      # hot accent — H1, handwriting, active states, third tab
  # Surface
  cream: '#FFF8EE'       # page background, light-on-color text
  white: '#FFFFFF'       # photo mounts and card panels
  # Text
  ink: '#3a3127'         # primary body/heading text
  ink-soft: '#5a4f40'    # secondary body text, captions
  ink-faint: '#8a7a5c'   # faint handwritten captions
  # Hairlines
  hair: '#d9c9a8'        # dashed dividers, lined-paper rules, section rules
  hair-warm: '#e3d6bb'   # serving-toggle container border
  # Decorative
  glow-amber: 'radial-gradient(circle, #E8A33D 0%, transparent 70%)'   # soft amber halo behind hero photo (opacity 0.25)
  glow-sage: 'radial-gradient(ellipse 60% 50% at 40% 45%, #8FAE80 0%, transparent 65%)' # sage bloom behind headline (opacity 0.22)
typography:
  display:
    fontFamily: "'Recoleta', 'Georgia', serif"
    fontSize: clamp(56px, 9vw, 110px)   # hero H1; section heads use 36–48px
    fontWeight: 400
    lineHeight: 0.92
  body:
    fontFamily: "'Source Serif 4', Georgia, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.625
  hand:
    fontFamily: "'Caveat', cursive"
    fontSize: 24px                       # ubiquitous marginalia; notes use 30px
    fontWeight: 400
  eyebrow:
    fontFamily: "'Source Serif 4', Georgia, serif"
    fontSize: 12px
    fontWeight: 400
    letterSpacing: 1.5px
    textTransform: uppercase
rounded:                                 # mostly irregular/organic, not a clean scale
  sm: 4px        # prep badge corner (mixed with 22/6/20)
  md: 8px        # serving buttons (rounded-md)
  lg: 12px       # serving toggle container (rounded-lg)
  tab: 14px      # tab top corners (14px 14px 0 0)
  xl: 16px       # sticky cook-mode bar (rounded-2xl is 16px)
  full: 9999px   # check circles, wake toggle, decorative halos
spacing:                                 # base unit 4px (Tailwind scale)
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 32px
  '2xl': 48px
components:
  tabButton:
    backgroundColor: '{colors.sage}'     # sage / amber / tomato per tab
    textColor: '{colors.cream}'
    typography: '{typography.display}'
    rounded: '{rounded.tab}'             # 14px 14px 0 0
    padding: 'px-7 pt-3 pb-6'
  cardPanel:
    backgroundColor: '{colors.white}'
    textColor: '{colors.ink}'
    rounded: '0'                         # square panel with 4px colored top border
    padding: 'p-8 md:p-12'
    elevation: 'paper-shadow'
  prepBadge:
    backgroundColor: '{colors.sage}'
    textColor: '{colors.cream}'
    typography: '{typography.display}'
    rounded: '4px 22px 6px 20px'         # deliberately irregular
    padding: 'pl-5 pr-7 py-4'
    elevation: 'paper-shadow'
  servingToggle:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.ink-soft}'
    rounded: '{rounded.lg}'
    border: '1px solid {colors.hair-warm}'
  servingButtonActive:
    backgroundColor: '{colors.tomato}'
    textColor: '{colors.cream}'
    rounded: '{rounded.md}'
  pairingCard:
    backgroundColor: '{colors.white}'
    textColor: '{colors.ink}'
    rounded: '0'                         # taped polaroid, rotated -2 to 1.5deg
    padding: 'p-3'
    elevation: 'paper-shadow'
  stickyCookBar:
    backgroundColor: '{colors.sage}'
    textColor: '{colors.cream}'
    rounded: '{rounded.xl}'
    padding: 'px-6 py-4'
    elevation: 'paper-shadow'
motion:
  reveal: 'on load — opacity 0→1, translateY 28→0, 900ms ease out(3), staggered 180ms (anime.js)'
  tabSwap: 'panel fade — opacity 0→1, translateY 20→0, 500ms ease out(3)'
  wobble: 'hand-drawn arrow rotates -3deg↔4deg, 2.8s ease-in-out infinite'
  brushStrike: 'SVG brush path draws across step text, strokeDashoffset len→0, 500ms ease out(2); text dims to 0.55'
  tabLift: 'active tab translate-y -1 (4px) on click'
icons:
  library: 'Tabler icons-webfont (ti) + game-icons (lorc) SVGs for decorative blobs'
  style: outline
  sizes: { sm: 20px, md: 24px, lg: 30px }
  color: '{colors.sage}'

The Vegetable Drawer

vegdrawer-design · alpha

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

Overview

The Vegetable Drawer is a recipe blog dressed as a hand-assembled scrapbook. The page sits on warm cream paper (#FFF8EE with #3a3127 ink) and is built from white photo mounts (bg-white p-3) that are torn at one edge, rotated a few degrees, and dropped onto the page with a soft brown paper-shadow. Three harvest "voltages" carry the energy — sage #8FAE80, amber #E8A33D, and tomato #D9532B — assigned consistently to the Ingredients/Method/Notes tabs and echoed in stars, arrows, badges, and the sticky cook bar. Three type voices stack: a chunky Recoleta display serif for headlines (a giant clamp(56px,9vw,110px) H1 in tomato), Source Serif 4 for readable body, and Caveat handwriting for the margin notes that thread through everything. The geometry is charmingly off-grid: tabs with 14px 14px 0 0 tops, a prep badge with mismatched 4px 22px 6px 20px corners, lined-paper note backgrounds, faint radial color halos, and decorative leaf/carrot/spatter glyphs scattered at low opacity.

Colors

Brand / Voltage. sage #8FAE80 is the primary — it's the logo wordmark, the first tab, the prep badge, the footer, the sticky cook bar, and most decorative leaf icons. amber #E8A33D is the secondary accent: rating stars, the Method tab, the pairing-card arrows, and the underlines beneath ingredient quantities. tomato #D9532B is the hottest accent, reserved for the H1 headline, the active serving button, the Notes tab, and all the urgent handwriting.

Surface. cream #FFF8EE is the page background and also the light text color laid on colored fills. white #FFFFFF mounts every photo and forms the recipe card panels.

Text. ink #3a3127 is the default heading/body color. ink-soft #5a4f40 handles secondary paragraphs and captions; ink-faint #8a7a5c is the faintest photo caption.

Hairlines. hair #d9c9a8 draws the dashed section dividers, the lined-paper rules in the Notes panel, and the thin section rule; hair-warm #e3d6bb borders the serving-multiplier toggle.

Decorative gradients. Two soft radial blooms sit behind the hero — an amber halo (radial-gradient(circle,#E8A33D…) at 0.25 opacity) under the photo and a sage ellipse (at 0.22) behind the headline.

Typography

Three faces, all loaded from CDNs. Recoleta (display serif, fonts.cdnfonts.com) with Georgia fallback — warm, rounded, chunky. Source Serif 4 (Google Fonts, optical-size axis 8–60, weights 400–700) for body. Caveat (Google Fonts, 400–700) for handwriting. If Recoleta is unavailable, the closest open-source substitute is a soft slab/serif like Fraunces or Bitter.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(56–110px); 36–48px heads	400	0.92	tight	H1, section heads, tab labels, badge numbers
body	18px	400	1.625	—	recipe steps, intro paragraph
hand	24px (30px in notes)	400	—	—	margin notes, captions, quantities, ratings
eyebrow	12px	400	—	1.5px	uppercase labels ("prep + roast", "current step")

Layout

Base unit is 4px (Tailwind). The page is a single scrolling column with three max-widths: a 1280px header/pairings band, a narrower 1080px recipe-card section, and an 1100px sticky bar. The hero is a two-column lg:grid-cols-2: a torn-edge polaroid on the left (rotated -4deg) and the headline block on the right with the radial sage bloom behind it. Below, a tabbed card stack — three colored tab buttons overlapping the top edge of a white panel (-mb-3, z-20). The "Pairs well with" section is a 3-column grid of rotated polaroid cards, each with a colored shadow-shelf peeking below. A sticky cook-mode bar floats at bottom-4. Whitespace is generous (pb-24/pb-32 between bands) and the mood is relaxed, not dense.

Elevation & Depth

Depth comes almost entirely from one custom shadow: .paper-shadow = 0 18px 40px -18px rgba(80,60,30,0.35) plus a 0 2px 0 rgba(255,255,255,0.6) inset top highlight — a warm, lifted-paper effect on every card, badge, and the sticky bar. Rotation (-4deg to +1.5deg) and torn SVG masks add physicality. Pairing cards add a colored "shelf" (bg-[color]/40 strip, -bottom-2) for a stacked-paper look. No glass/blur; depth is paper, shadow, and tilt.

Shapes

Radii are intentionally irregular rather than a tidy scale. Tabs use 14px 14px 0 0; the prep badge uses asymmetric 4px 22px 6px 20px; serving buttons are 8px (rounded-md) inside a 12px (rounded-lg) toggle; the sticky bar is 16px (rounded-2xl). Truly round elements — check circles, the wake toggle, decorative halos — use 9999px. Photo mounts and card panels are square (0), their character coming from rotation and torn edges, not corners.

Components

• Tab button — colored fill (sage/amber/tomato), cream text, Recoleta, top corners 14px 14px 0 0, px-7 pt-3 pb-6, overlaps panel by -mb-3; active tab lifts -translate-y-1. Labels: "Ingredients", "Method", "Notes".
• Recipe card panel — white, paper-shadow, p-8 md:p-12, square with a border-t-4 in the matching tab color.
• Prep badge — sage fill, cream text, irregular 4px 22px 6px 20px radius, clock icon + "30 min" / "prep + roast".
• Serving toggle — cream container, rounded-lg, hair-warm border, three pill-ish buttons (1x/2x/3x); active button = tomato fill, cream text.
• Method step — game-icons blob as a sage number badge (1–4), tappable to draw a tomato brush-strikethrough and a checked tomato circle.
• Pairing card — white polaroid, p-3, paper-shadow, rotated, colored shadow-shelf below; photo + Recoleta title + amber arrow + Caveat subline.
• Sticky cook bar — sage fill, cream text, rounded-2xl, paper-shadow; chef-hat icon, current/next step, and a custom wake-lock toggle.

Motion

Powered by anime.js v4 (esm.sh). On load, .reveal elements fade and rise (opacity 0→1, translateY 28→0, 900ms out(3), staggered 180ms). Tab switches fade the new panel in (500ms out(3)) and lift the clicked tab 4px. The hand-drawn arrow .wobble rotates between -3deg and 4deg on a 2.8s loop. Tapping a method step animates an SVG brush stroke across the text (strokeDashoffset len→0, 500ms out(2)) and dims it to 0.55 opacity. The serving scaler and wake toggle change state instantly (no transition on the brush; .tab-btn explicitly sets transition: none).

Iconography

Tabler icons-webfont (ti classes) supply UI glyphs — clock, stars, carrot, leaf, arrow-right, chef-hat, check — outline style, sized roughly text-xl to text-3xl (20–30px) and colored per voltage (sage leaves, amber/tomato carrots and stars). Decorative organic blobs and the splatter accent come from game-icons (lorc) SVGs loaded from jsDelivr: acid-blob as method-step number badges (tinted sage) and spatter as a faint sepia background flourish. Decorative glyphs sit at low opacity (0.07–0.25) and slight rotations.

Do's and Don'ts

• Do keep the three voltages mapped consistently (sage=Ingredients/brand, amber=Method/accents, tomato=Notes/hot).
• Do lean on rotation, torn edges, and paper-shadow for depth; let corners stay irregular or square.
• Do layer Caveat handwriting as marginalia over the serif body — it's the personality.
• Don't introduce flat material shadows, uniform clean radii, or a sans-serif body; it breaks the hand-made paper voice.
• Don't desaturate the harvest palette or add a fourth competing hue.
• Don't straighten the polaroids or square the torn photo edges.

Known Gaps

• Display sizes for section heads (36–48px) are read from Tailwind text-4xl/ text-5xl classes; the H1 is the explicit clamp(56px,9vw,110px).
• Body font-size: 18px is inferred from text-lg; base paragraph uses text-lg leading-relaxed.
• The brush-strikethrough path, torn-edge mask, and radial halos are procedurally generated SVG/gradients; their exact geometry is described qualitatively, not as fixed tokens.
• Spacing scale is the standard Tailwind 4px scale; only the values actually used (p-3, py-4, px-7, gap-8/12, pb-24/32) are representative.