name: grow-together-design
version: alpha
description: >
  A seed-catalogue zine for a fictional NYC community-garden cooperative ("Common
  Roots"). Printed-paper aesthetic on a stippled cream surface (`#F2EED4`), every
  surface outlined in heavy dark-soil ink (`#3A2818`) with hard 3px offset
  drop-shadows — no soft elevation anywhere. A four-color seed-packet palette
  (tomato red `#C42820`, leaf green `#2A6A2A`, sun gold `#D4B030`, soil brown)
  drives the whole system. The type story is heavy slab-serif display (Roboto
  Slab Black) over Inter body and IBM Plex Mono for tags, stamps and data. The
  signature moves are the "seed packet" card (double-ruled border + scalloped
  top edge), faux-print textures (paper grain, grid paper, footpath hatching,
  conic-gradient harvest donut), wax-stamp badges and slightly rotated cards.
colors:
  # Brand / packet voltages
  tomato: '#C42820'    # primary CTA fill, red accents, packet N° tags
  leaf: '#2A6A2A'      # green panels (hero center, harvest section), accents
  sun: '#D4B030'       # gold accents, ticker chip, highlight word
  soil: '#3A2818'      # ink — borders, text, shadows, footer surface
  # Surface
  cream: '#F2EED4'     # page surface + most card fills
  cream-2: '#ece8c8'   # slightly darker cream for the "Find a Plot" section
  leaf-tint: '#6a9a3a' # secondary green (donut slice, allium swatch)
  # Text
  text: '#3A2818'      # default body + heading ink
  text-on-dark: '#F2EED4'      # cream text on leaf/soil surfaces
  text-on-dark-muted: '#F2EED4cc' # ~80% cream for sub-copy on dark
  # Hairlines
  border: '#3A2818'    # all borders/rules are 1–2px soil
  # Gradient / texture
  paper-grain: 'rgba(58,40,24,0.08)'  # radial-dot page texture
  grid-line: 'rgba(58,40,24,0.12)'    # graph-paper map background
typography:
  display:
    fontFamily: "'Roboto Slab', serif"
    fontSize: clamp(48px, 6.2vw, 84px)
    fontWeight: 900
    lineHeight: 0.85
    letterSpacing: -0.03em
  heading:
    fontFamily: "'Roboto Slab', serif"
    fontSize: 48px
    fontWeight: 900
    lineHeight: 0.95
  card-title:
    fontFamily: "'Roboto Slab', serif"
    fontWeight: 900
    fontSize: 18px
    lineHeight: 1
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
  mono-tag:
    fontFamily: "'IBM Plex Mono', monospace"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 0.15em
    textTransform: uppercase
  nav:
    fontFamily: "'IBM Plex Mono', monospace"
    fontSize: 12px
    fontWeight: 400
    letterSpacing: 0.1em
    textTransform: uppercase
rounded:
  none: 0px        # the default — cards, panels, swatches are square
  pill: 999px      # cartouche label, compass dial only
spacing:            # base unit 4px; common steps below
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  xxl: 64px         # section py-16
components:
  packet:
    backgroundColor: '{colors.cream}'
    border: '2px solid {colors.soil}'
    boxShadow: '3px 3px 0 {colors.soil}, inset 0 0 0 4px {colors.cream}, inset 0 0 0 5px {colors.soil}'
    rounded: '{rounded.none}'
    padding: '14px'
    notes: 'Seed-packet card: double-ruled inset border + 3px hard offset shadow; topped by a scalloped strip.'
  btn-tomato:
    backgroundColor: '{colors.tomato}'
    textColor: '{colors.cream}'
    border: '2px solid {colors.soil}'
    boxShadow: '3px 3px 0 {colors.soil}'
    typography: '{typography.card-title}'
    rounded: '{rounded.none}'
    letterSpacing: '0.05em'
    notes: 'Hover nudges translate(1px,1px) and shrinks shadow to 2px (press effect).'
  cartouche:
    backgroundColor: '{colors.cream}'
    textColor: '{colors.soil}'
    border: '2px solid {colors.soil}'
    rounded: '{rounded.pill}'
    padding: '2px 14px'
    typography: '{typography.card-title}'
    fontSize: '11px'
    letterSpacing: '0.15em'
    notes: 'Pill eyebrow label, e.g. "— DIRECTIONS FOR SOWING —".'
  stamp:
    backgroundColor: 'rgba(212,176,48,0.25)'
    textColor: '{colors.soil}'
    border: '2px solid {colors.soil}'
    rounded: '{rounded.none}'
    padding: '2px 8px'
    typography: '{typography.mono-tag}'
    transform: 'rotate(-2deg)'
    notes: 'Wax/ink stamp badge, tilted; gold-tinted fill.'
  dashed-coupon:
    backgroundColor: '{colors.cream}'
    border: '2px dashed {colors.soil}'
    rounded: '{rounded.none}'
    notes: 'Clip-out coupon container for the workshop schedule and donate progress.'
  bed-cell:
    border: '2px solid {colors.soil}'
    typography: '{typography.mono-tag}'
    fontSize: '10px'
    rounded: '{rounded.none}'
    notes: 'Garden-map plot cell; fill is one of soil/leaf/sun/tomato to encode status.'
  ticker:
    backgroundColor: '{colors.leaf}'
    textColor: '{colors.cream}'
    border: '2px solid {colors.soil}'
    rounded: '{rounded.none}'
    notes: 'Gold "★ THIS SEASON" chip then mono running stats.'
motion:
  packet-reveal: 'GSAP ScrollTrigger — packets fade+rise (autoAlpha 0, y:24), 0.5s power3.out, stagger 0.06'
  heading-reveal: 'GSAP ScrollTrigger — each section h2 fades+rises (y:30), 0.7s power3.out'
  btn-press: 'CSS hover transition: translate(1px,1px) + shadow 3px->2px'
  card-tilt: 'Static rotate(-1.5deg)/rotate(1.5deg) on alternating packets'
icons:
  library: game-icons (lorc "sprout") via jsDelivr SVG
  style: solid silhouette SVG recolored with CSS filter
  sizes: { sm: 28px, md: 32px }
  color: '{colors.soil} (logo) / {colors.sun}-ish (recolored on dark)'
  notes: 'Plus unicode glyphs used as icons — ★, ✂, ✓, ↑, →.'

Grow Together — Common Roots

grow-together-design · alpha

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

Overview

Grow Together is the spring catalogue of a fictional NYC community-garden cooperative, built to read like a printed seed-packet zine rather than a website. The surface is a warm cream (#F2EED4) overlaid with a stippled paper-grain texture (two radial-dot gradients in rgba(58,40,24,…)), and every element is drawn in heavy dark-soil ink (#3A2818) — 1–2px borders, dashed coupons, dotted rules, and crisp 3px offset drop-shadows that replace any soft elevation. Four "packet" voltages do all the coloring: tomato red #C42820 (primary CTAs and red accents), leaf green #2A6A2A (the hero center block and harvest section), sun gold #D4B030 (highlights and the ticker chip), and soil brown for ink and the footer. The type story is loud and editorial: Roboto Slab in 900 weight for the display headline (clamp(48px,6.2vw,84px), line-height 0.85), Inter for body copy, and IBM Plex Mono in uppercase wide tracking for tags, stamps, nav and all data. Geometry is almost entirely square (radius 0), reserving the pill only for the cartouche eyebrow and the compass dial. The signature move is the seed- packet card — a double-ruled inset border with a radial-gradient scalloped top edge — repeated as the hero "packet wall," the step cards, and the donate tiers, several nudged a degree or two off-axis for hand-pasted charm. Faux-print details abound: graph-paper map background, diagonal-hatch footpath, a conic-gradient harvest "donut," and wax-stamp week badges.

Colors

Brand / packet voltages. Four colors carry the system. tomato #C42820 is the primary action color — every CTA button, the logo period, red N° tags, and progress-bar fill. leaf #2A6A2A fills full-bleed panels (the hero center 2×2 block and the entire Harvest Share section) and tags green crops. sun #D4B030 is the gold accent used for the ticker chip, highlight words, footer section labels, and "new bed" map cells. soil #3A2818 is the ink color of the whole design: all borders, default text, every hard shadow, and the footer background. A secondary green leaf-tint #6a9a3a appears in the donut and the alliums swatch.

Surface. The page surface is cream #F2EED4, also the default fill of packets, coupons and chips. The "Find a Plot" section steps down to cream-2 #ece8c8. The page and .paper-bg carry a stippled grain made of two radial-dot gradients (rgba(58,40,24,0.08) and 0.05).

Text. Default text is text #3A2818. On the leaf/soil dark surfaces text flips to text-on-dark #F2EED4, with sub-copy at ~80% via the literal hex #F2EED4cc (text-on-dark-muted).

Hairlines. There are no light hairlines — every border and rule is soil ink, 1px (map cells, swatches) or 2px (cards, sections, buttons). Dotted/dashed variants render the "coupon" and timeline rows.

Gradient / texture. Beyond the page grain, grid-line rgba(58,40,24,0.12) draws the graph-paper map background; the harvest donut is a conic-gradient of the four voltages plus leaf-tint; scalloped packet tops are radial-gradient strips colored per packet.

Typography

Three Google Fonts, imported in one @import: Roboto Slab (400/700/900), Inter (400/500/600), and IBM Plex Mono (400/500/700). Roboto Slab Black is the display and card-title face; Inter is the body face; IBM Plex Mono is the "label" face for tags, stamps, nav, data tables and the running ticker. All three are open-source, so no substitution is needed. Mono text is consistently uppercase with wide tracking (0.1–0.3em).

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(48–84px)	900	0.85	-0.03em	Hero "GROW TOGETHER" headline
heading	48–60px	900	0.95	—	Section h2 titles
card-title	18–20px	900	1	—	Packet/card names, button labels
body	15px	400	1.5	—	Paragraph copy (Inter)
mono-tag	10px	400	normal	0.15em	N° tags, stamps, map labels, data (uppercase)
nav	12px	400	normal	0.1em+	Top nav, eyebrow labels (uppercase)

Layout

Base unit is 4px (Tailwind scale); common steps are 4 / 8 / 12 / 16 / 24px with section vertical padding at py-16 (64px). Every section is wrapped in a max-w-[1400px] centered container with px-6, and divided from the next by a full-width 2px soil bottom border. The hero is a 6-column × 4-row CSS grid of seed packets ("packet wall") with a col-span-2 row-span-2 leaf-green center block holding the headline; below it a leaf "ticker" bar. Other sections use asymmetric grids: the plot finder is [1fr_2fr] (copy + graph-paper map of 60px-row cells), the workshop schedule is a [120px_1fr_1fr_1fr] coupon table, the harvest share is [1fr_1fr] with a conic donut beside a 2-col stat grid, and the donate tiers are a 3-col packet row (middle tier lifted translateY(-12px) with a red shadow). Whitespace is generous between sections but cards pack tightly in their grids, reinforcing the catalogue density.

Elevation & Depth

Depth is entirely hard/printed, never soft. The packet card uses a layered flat shadow 3px 3px 0 #3A2818 plus an inset double-rule (inset 0 0 0 4px cream, inset 0 0 0 5px soil). Buttons carry 3px 3px 0 soil that collapses to 2px 2px 0 on hover with a 1px translate (a tactile "press"). The hero center block uses a larger 6px 6px 0 soil; the highlighted donate tier uses 6px 6px 0 #C42820. The donut is ringed by stacked solid box-shadow borders. There are no blurs, glows, or backdrop-filter — depth reads as ink on paper.

Shapes

Overwhelmingly square (radius 0): packets, panels, swatches, map cells, buttons, coupons and the progress bar are all sharp-cornered, which is core to the print/zine identity. The only rounded elements are the cartouche pill eyebrow (border-radius: 999px) and the circular compass dial / harvest donut (border-radius: 50%). Several packets are intentionally rotated ±1.5° (and the stamp −2°) for a hand-assembled feel.

Components

• Packet — cream fill, 2px soil border, 3px 3px 0 shadow + double inset rule, 14px inner padding, scalloped radial-gradient top strip (color varies per packet: soil default, or tomato/leaf/sun). The universal card.
• btn-tomato — tomato fill, cream text, 2px soil border, 3px 3px 0 shadow, Roboto Slab bold, 0.05em tracking; hover presses in. Labels like "CLAIM A PLOT →", "DONATE", "RESERVE", "SEND $25 →".
• Cartouche — cream pill, 2px soil border, slab-bold 11px, 0.15em tracking; eyebrow labels framed with em-dashes, e.g. "— DIRECTIONS FOR SOWING —".
• Stamp — gold-tinted rgba(212,176,48,0.25) fill, 2px soil border, mono 10px uppercase, rotated −2°; week badges ("Wk 1", "Wk 5–20").
• Dashed-coupon — cream fill, 2px dashed soil border; wraps the workshop schedule and the donate progress block, with ✂ scissor rules.
• Bed-cell — 2px soil border, mono 10px; fill encodes status (leaf=open, soil=occupied, sun=new, tomato=communal) in the garden map grid.
• Ticker — leaf bar with a gold "★ THIS SEASON" chip and mono running stats ("47 GARDENS · 312 PLOTS · 1,840 GROWERS …").
• Donate tier card — a packet variant; middle tier lifted with a red offset shadow and tomato scallop to mark "STEWARD'S CHOICE".
• Progress bar — square cream track with 2px soil border, tomato fill at a % width, centered slab label using mix-blend-mode: difference.

Motion

Two GSAP ScrollTrigger animations: all .packet cards fade up (autoAlpha 0 → 1, y:24) at 0.5s power3.out with a 0.06s stagger when their group scrolls into view; every section h2 fades up (y:30) at 0.7s power3.out. The only CSS interaction is the button press (transform: translate(1px,1px) + shadow 3px→2px on hover). Card tilts (±1.5°) and stamp rotation (−2°) are static, not animated. The hero ticker text is authored as a long line but is not actually scrolling (no marquee keyframe).

Iconography

Icons come from the game-icons set (lorc "sprout") loaded as transparent SVGs from jsDelivr, recolored with CSS filter — soil for the logo, a warm gold/cream variant on the dark hero block (mirrored via scaleX(-1)). Sizes are 28px (w-7) and 32px (w-8). Beyond that, meaning is carried by Unicode glyphs used as icons: ★ (season/feature), ✂ (coupon clip), ✓ (tier checklist), ↑/→/← (compass and CTA arrows). No outline icon library or <svg> UI set is used.

Do's and Don'ts

• Do keep every surface outlined in 2px soil ink with a hard 3px 3px 0 offset shadow — that flat print depth is the whole identity.
• Do restrict color to the four packet voltages on the cream paper surface, and use the scalloped packet card as the default container.
• Do set headings in Roboto Slab Black and all tags/data in uppercase IBM Plex Mono with wide tracking.
• Do keep corners square; reserve the pill only for the cartouche eyebrow.
• Don't introduce soft/blurred shadows, glassmorphism, glows, or gradients beyond the textured print effects.
• Don't round card corners, add a fifth accent color, or set body copy in the slab face.
• Don't drop the paper-grain texture or the soil-ink borders — without them the cream surface looks flat and un-printed.

Known Gaps

• Spacing tokens are inferred from the Tailwind scale actually used; no custom spacing variables exist in the source.
• The #F2EED4cc / #F2EED4aa values are literal 8-digit hex alphas used inline for muted cream text; recorded as text-on-dark-muted.
• heading size is listed as 48–60px (text-5xl md:text-6xl); the exact value depends on breakpoint.
• The ticker reads as a scrolling marquee but has no animation defined in the source; it is static.