name: kitchengarden-design
version: alpha
description: >
  An almanac-styled seasonal gardening journal printed on warm parchment
  (`#F0EAD6`) and set entirely in serif type. Ink-green (`#4F6F52`) carries the
  body and headings, terracotta (`#B5613A`) is the editorial accent for rules,
  captions, and harvest bars, and a single cornflower blue (`#6495ED`) marks the
  current month. The signature moves are oval double-framed engravings, hairline
  and double-rule dividers, a sticky twelvemonth calendar with a scroll-drawn
  vine, and per-bed sow/harvest grid charts. Geometry is print-page: 1200-wide
  ledgers, sharp rectangular dashed crop labels, and perfect-circle photo frames.
colors:
  # Brand / Accent
  ink-green: '#4F6F52'   # primary text, headings, vine stroke, rules, sow bars
  terra: '#B5613A'       # accent: captions, eyebrows, frames, harvest bars, current month
  corn: '#6495ED'        # cornflower blue; the single "current month" dot marker
  # Surface
  parchment: '#F0EAD6'   # page background; also fills dashed crop-label cards
  # Hairlines / Borders
  rule-green: 'rgba(79,111,82,0.4)'   # inner cell dividers, spine, vine baseline
  rule-terra: 'rgba(181,97,58,0.3)'   # bed separators, almanac row hairlines
  dash-gray: '#7a7a72'                # dashed border on crop-label cards
typography:
  display:
    fontFamily: "'Playfair Display', serif"
    fontSize: clamp(48px, 8vw, 120px)
    fontWeight: 900
    lineHeight: 0.9
  heading:
    fontFamily: "'Playfair Display', serif"
    fontSize: 36px
    fontWeight: 700
  body:
    fontFamily: "'Lora', serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.625
  latin:
    fontFamily: "'Crimson Pro', serif"
    fontSize: 16px
    fontWeight: 400
    fontStyle: italic
  eyebrow:
    fontFamily: "'Lora', serif"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 0.32em
    textTransform: uppercase
rounded:
  none: 0px       # crop-label cards, calendar cells, bar charts
  full: 9999px    # oval frames, month dot
spacing:          # base unit 4px; Tailwind scale
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 28px
  '2xl': 64px
components:
  cropLabel:
    backgroundColor: '{colors.parchment}'
    textColor: '{colors.ink-green}'
    typography: '{typography.body}'
    border: '2px dashed {colors.dash-gray}'
    rounded: '{rounded.none}'
    padding: '12px 16px'   # px-4 py-3
  ovalFrame:
    border: '2px solid {colors.terra}'
    rounded: '{rounded.full}'
    padding: '10px'
    # ::after inset 4px, 1px solid rgba(79,111,82,0.45); img has 1px terra border
  stickyCalendar:
    backgroundColor: '{colors.parchment}'
    textColor: '{colors.ink-green}'
    border: '2px solid {colors.ink-green}'  # border-y-2, top:0 z-40
    typography: '{typography.heading}'
  eyebrow:
    textColor: '{colors.terra}'
    typography: '{typography.eyebrow}'
  doubleRule:
    border: '3px double {colors.ink-green}'  # footer top rule, section dividers
  barChart:
    sowColor: '{colors.ink-green}'
    harvestColor: '{colors.terra}'
    border: '1px solid {colors.rule-green}'
    rounded: '{rounded.none}'
  star:
    backgroundColor: '{colors.ink-green}'   # 5-point clip-path star, list bullets
    # footer variant uses {colors.terra}
motion:
  vineDraw: 'clip-path inset() driven by --scroll var; vine paints left-to-right with page scroll progress'
  reveal: 'opacity 1.1s ease on .reveal beds; IntersectionObserver adds .is-inview at threshold 0.15'
  progress: 'sticky-calendar "% sown" counter updates from Lenis scroll progress'
  smoothScroll: 'Lenis (autoRaf) smooth scrolling drives --scroll and the percent readout'
icons:
  library: inline SVG + CSS clip-path shapes
  style: hand-drawn / engraving aesthetic
  stroke: 1.5px–2.5px (vine path)
  sizes: { dot: 6px, star: 12px, starList: 16px }
  color: '{colors.ink-green}'

The Kitchen Garden Journal

kitchengarden-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 Kitchen Garden Journal is a seasonal almanac rendered as a printed page. The entire surface is warm parchment (#F0EAD6) and every word is set in serif: Playfair Display for display and headings, Lora for body copy, and an italic Crimson Pro for Latin botanical names and captions. The voice color is ink-green (#4F6F52) — it carries headings, body text, the spine rules, and the scroll-drawn vine — with terracotta (#B5613A) as the editorial accent for eyebrows, hairlines, oval frames, and harvest bars. A single cornflower blue (#6495ED) appears exactly once, as the dot marking the current month on the twelvemonth calendar. The signature moves are unmistakably almanac: an oval double-framed engraving for every crop and the masthead, dashed rectangular crop labels, double-rule and hairline dividers, a sticky twelvemonth calendar bar whose vine paints itself left-to-right as you scroll, and per-bed sow/harvest grid charts built in JS from data-sow/data-harvest attributes. Geometry is print: 1200-wide ledgers, sharp-cornered cards, and perfect circles for photos.

Colors

Brand / Accent. ink-green #4F6F52 is the primary ink — all headings and body text (.ink-green), the calendar/section spine rules, the vine stroke, and sow bars. terra #B5613A (.terra) is the accent: tracked eyebrow labels, captions, the oval frame border, almanac/bed hairlines, harvest bars, and the selection highlight (selection:bg-[#B5613A]). corn #6495ED (.corn) is used only for the small dot under the current month ("Jun").

Surface. parchment #F0EAD6 (.parchment) is the page background and also fills the dashed crop-label cards and the sticky calendar bar; it also serves as the selection text color.

Hairlines / Borders. Dividers come in translucent variants of the two inks: rgba(79,111,82,0.4) (border-[#4F6F52]/40) for inner cell dividers and the center spine, rgba(181,97,58,0.3) for almanac rows and bed separators, and a neutral #7a7a72 for the dashed crop-label borders.

Typography

Three Google Fonts, all serif, imported together: Playfair Display (400/700/900 + italic) for display and headings, Lora (400/500/600 + italic) for body, and Crimson Pro (italic 400/500/600) used exclusively as italic for Latin names and captions (.font-latin). No mono or sans face appears.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp 48→120px	900	0.9	—	Masthead H1 (text-[120px])
heading	36–60px	700	normal	—	Section/bed H2/H3, calendar months
body	15px	400	1.625	—	Lora prose, crop names
latin	16–18px	400 italic	normal	—	Crimson Pro Latin names, captions
eyebrow	10–11px	400	normal	0.32em	Uppercase .tracked labels

Layout

Base unit 4px (Tailwind scale). The page is a single centered ledger column: masthead max-w-6xl (1152px), planting beds max-w-6xl, the June checklist max-w-2xl, and the footer max-w-3xl. The masthead is a centered title flanked by vertical and horizontal rules, above a three-column bordered ledger (Almanac table / oval portrait / pull-quote). A sticky (top-0 z-40) twelvemonth calendar spans the page with a 12-column month grid, tick marks, and the SVG vine. The five planting beds alternate left/right in a two-column grid around a center spine, each pairing prose + dashed crop labels + a sow/harvest chart against an oval engraving. Whitespace is generous and editorial; the rhythm is set by hairline and double-rule dividers rather than boxes.

Elevation & Depth

Flat by design — there are no box-shadows or glass anywhere. Depth is created entirely with borders and rules: 2px solid borders (border-y-2), translucent hairlines, 3px double rules (.double-rule), dashed 2px borders on crop cards, and the oval double-frame (outer 2px terra ring + a 1px inset green ring via ::after + a 1px terra border on the image itself). The look is ink on paper.

Shapes

Two extremes, nothing in between. Photo frames and the current-month dot are perfect circles (border-radius:50% / rounded-full). Everything else is sharp-cornered (radius 0): crop-label cards, the calendar bar, and the sow/harvest grid charts. A custom 5-point star (clip-path: polygon(...)) is used as the checklist bullet and footer ornament.

Components

• Crop label — parchment fill, 2px dashed #7a7a72 border, square corners, px-4 py-3; bold Lora name + italic Crimson Pro Latin name ("Tomato — Solanum lycopersicum").
• Oval frame — border-radius:50%, 2px terra outer ring, 10px padding, a 1px inset green ::after ring, and a 1px terra-bordered cover image inside.
• Sticky calendar — parchment bar, border-y-2 ink-green, top-0 z-40; a 12-col Playfair month row (current month terra + bold with corn dot), tick marks, an SVG baseline vine (0.25 opacity) and the bold vine that draws on scroll.
• Sow/Harvest chart — JS-built 12-cell grids bordered rgba(79,111,82,0.3); green "Sow" cells, terra "Harvest" cells, with a J–F–M…D month axis below.
• Eyebrow — uppercase tracked (0.32em) terra label between hairline rules.
• Double rule — 3px double ink-green, used in section dividers and footer.
• Star bullet — clip-path 5-point star, ink-green (16px) for checklist items, terra (12px) as the footer centerpiece.

Motion

Three scroll-linked behaviors, all driven by Lenis smooth scrolling (autoRaf). (1) The calendar vine paints left-to-right: .vine-draw clips with inset(0 calc(100% - var(--scroll) * 100%) 0 0) and --scroll is set from Lenis progress. (2) The same progress drives the "% sown" counter in the calendar bar. (3) .reveal beds fade in (opacity 1.1s ease) when an IntersectionObserver (threshold 0.15) adds .is-inview. There are no hover or keyframe animations.

Iconography

No icon font. Visual marks are CSS clip-path shapes (the 5-point .star5) and a single hand-drawn SVG vine path (stroke 1.5–2.5px, ink-green). The current-month indicator is a 6px corn-blue dot. The aesthetic is botanical-engraving; imagery is photographic (Unsplash/Pexels) inside oval frames, treated as plate engravings.

Do's and Don'ts

• Do keep everything serif and on parchment — Playfair for display, Lora for body, italic Crimson Pro for Latin names and captions.
• Do divide with rules: hairlines, border-y-2, and 3px double rules; let borders, not shadows, create structure.
• Do reserve corn blue (#6495ED) for the single current-month marker only.
• Do keep photos in oval double-frames; keep cards/charts sharp-cornered.
• Don't add box-shadows, gradients, glass, or rounded rectangles.
• Don't introduce a sans-serif or mono face.
• Don't brighten the palette — it must read as ink (green/terra) on aged paper.

Known Gaps

• display size is expressed as clamp(48px, 8vw, 120px) approximating the responsive text-5xl → text-7xl → text-[120px] Tailwind ladder; intermediate steps are the Tailwind defaults.
• The .reveal final state is in the static CSS (opacity:1); the fade depends on a .is-inview/initial-opacity rule that the IntersectionObserver toggles — the pre-reveal opacity value is implied by the JS, not the inline CSS.
• Spacing scale lists the values actually used (Tailwind utilities); no custom spacing variables are defined in the markup.