name: weeknight-design
version: alpha
description: >
  An editorial meal-kit landing page built like a printed broadsheet: a warm
  cream paper surface (#F5F1E9) ruled into a Swiss grid with hairline ink borders
  (#3A3F44), a tomato-red action voltage (#D24B36), and a forest-green editorial
  accent (#2F5D45). The type story pairs a high-contrast Bodoni Moda display
  serif against an uppercase, wide-tracked Archivo sans for labels and body. The
  signature moves are the bordered grid magazine layout, a scattered flip-card
  photo collage with parallax, and a GSAP clip-path mask-wipe on the hero image.
  Geometry is strictly sharp — zero border radius throughout.
colors:
  # Surface
  paper: '#F5F1E9'        # page background, light card faces, reversed text on dark
  kraft: '#D9C2A0'        # flip-card backs (ingredients), tinted plan column (at /30 opacity)
  green-field: '#2F5D45'  # hero image backdrop fill behind photo
  # Brand / Voltage
  tomato: '#D24B36'       # primary CTA fill, step numbers, hover links, divider line
  ink: '#3A3F44'          # all hairline borders, body/heading text, dark pill fills
  # Text
  on-ink: '#F5F1E9'       # paper-cream text on ink/tomato fills (CTAs, pills)
  forest: '#2F5D45'       # editorial accent text — eyebrows, kickers, italic word, meta
  ink-muted: 'rgba(58,63,68,0.70)'  # footer copyright (#3A3F44 at 70%)
typography:
  display:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: clamp(2.6rem, 5.2vw, 5rem)
    fontWeight: 900
    lineHeight: 0.95
  display-section:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: clamp(2rem, 4vw, 3.5rem)
    fontWeight: 700
    lineHeight: 1
  card-title:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.25
  price:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: 36px
    fontWeight: 700
  eyebrow:
    fontFamily: "'Archivo', sans-serif"
    fontSize: 11px
    fontWeight: 700
    letterSpacing: 2.75px
    textTransform: uppercase
  nav:
    fontFamily: "'Archivo', sans-serif"
    fontSize: 13px
    fontWeight: 600
    letterSpacing: 2.34px
    textTransform: uppercase
  body:
    fontFamily: "'Archivo', sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.625
rounded:                  # no radius anywhere — sharp magazine edges
  none: 0px
spacing:                  # base unit 4px (Tailwind scale)
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px                # px-8 — the dominant gutter
  '2xl': 48px             # py-12 section padding
components:
  header:
    backgroundColor: '{colors.paper}'
    textColor: '{colors.ink}'
    border: '1px solid {colors.ink} (bottom only), sticky top'
    height: '64px'
    padding: '0 32px'
  nav-cta:
    backgroundColor: 'transparent → {colors.tomato} on hover'
    textColor: '{colors.tomato} → {colors.on-ink} on hover'
    typography: '{typography.eyebrow}'
    border: '1px solid {colors.tomato}'
    rounded: '{rounded.none}'
    padding: '10px 20px'
  hero-cta:
    backgroundColor: '{colors.tomato} → {colors.ink} on hover'
    textColor: '{colors.on-ink}'
    typography: '{typography.nav}'
    rounded: '{rounded.none}'
    padding: '28px 32px'
  flip-card:
    backgroundColor: '{colors.paper} (front) / {colors.kraft} (back)'
    textColor: '{colors.ink}'
    typography: '{typography.card-title}'
    border: '1px solid {colors.ink}'
    rounded: '{rounded.none}'
  cook-pill:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.on-ink}'
    typography: '{typography.eyebrow}'
    rounded: '{rounded.none}'
    padding: '4px 10px'
  plan-cell:
    backgroundColor: 'transparent / {colors.kraft} at 30% for the popular column'
    textColor: '{colors.ink}'
    typography: '{typography.body}'
    border: '1px solid {colors.ink}'
    rounded: '{rounded.none}'
    padding: '20px 32px'
  select-button:
    backgroundColor: 'transparent (outline) / {colors.tomato} (popular) → {colors.ink} on hover'
    textColor: '{colors.ink} → {colors.on-ink} on hover'
    typography: '{typography.eyebrow}'
    border: '1px solid {colors.ink}'
    rounded: '{rounded.none}'
    padding: '12px 16px'
motion:
  hero-mask-wipe: 'GSAP clipPath inset(0 100% 0 0) → inset(0 0 0 0), 1.0s power2.inOut, 0.15s delay'
  card-parallax: 'GSAP ScrollTrigger scrub, y offset ±22–34px per card, desktop only'
  flip-card: 'transform rotateY(180deg) on hover, 0.6s cubic-bezier(0.4,0,0.2,1), preserve-3d'
  cta-arrow: 'arrow translate-x 4px on group hover'
icons:
  library: none (text glyph)
  style: 'unicode → arrow used as the only icon glyph'
  color: '{colors.on-ink}'

The Weeknight Box

weeknight-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 Weeknight Box is an editorial meal-kit landing page that reads like a printed food broadsheet. The entire page sits on a warm cream paper surface (#F5F1E9) and is ruled into a strict Swiss grid by 1px ink hairlines (#3A3F44) — every section, cell, and card is outlined rather than shadowed, giving the page the feel of a magazine layout sheet. A tomato-red voltage (#D24B36) carries every action: the CTA fills, the step numbers (01/02/03), the centered divider on the plans table, and the link hovers. A forest-green editorial accent (#2F5D45) handles eyebrows, kickers, meta lines, and a single italic display word. The type story is a deliberate contrast pairing: high-contrast Bodoni Moda at weight 900 for the big display headlines (the hero runs clamp(2.6rem, 5.2vw, 5rem) at line-height 0.95), set against Archivo used uppercase with wide tracking (0.18–0.3em) for nav, eyebrows, pills, and body copy. The signature moves are the bordered-grid broadsheet structure, a scattered five-card photo collage that flips on hover to reveal a kraft-paper ingredient list, parallax on those cards via GSAP ScrollTrigger, and a clip-path mask-wipe that reveals the hero photograph on load. Geometry is uncompromisingly sharp — there is no border radius anywhere.

Colors

Surface. The page background is paper cream #F5F1E9 (paper), set on body and reused as the light face of flip cards and as reversed text on dark fills. A kraft tan #D9C2A0 (kraft) backs the ingredient side of each flip card and, at 30% opacity, tints the "popular" plan column. The hero image sits over a forest fill #2F5D45 (green-field).

Brand / Voltage. Tomato red #D24B36 (tomato) is the single action color: hero "Choose a plan" CTA, the nav button outline, "Select 2-Person", the step numbers, the vertical divider line on the plans grid, and all hover:text link states. Ink #3A3F44 (ink) is the structural color — every hairline border, the default heading and body text, the dark cook-time pills, and the reversed mobile label cells.

Text. Body and headings are ink. On tomato or ink fills text reverses to paper cream on-ink (#F5F1E9). Forest green forest (#2F5D45) is the editorial accent for eyebrows, kickers ("Pre-portioned · Pre-planned"), card meta ("Serves 2 · 540 kcal"), the /wk price suffix, and the italic hero word "busy". The footer copyright uses ink at 70% (ink-muted).

Typography

Two families, both loaded from Google Fonts in one @import: Bodoni Moda (serif, an optical-size high-contrast Didone) for all display and pricing, and Archivo (grotesque sans) for everything functional — nav, eyebrows, body, pills, table cells. Tabular numerals (font-variant-numeric: tabular-nums, .tnum) are applied to prices, cook times, issue number, and step numbers.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(2.6rem, 5.2vw, 5rem)	900	0.95	tight	Hero H1
display-section	clamp(2rem, 4vw, 3.5rem)	700	1	tight	Section H2 (Inside the Box, Choose Your Box)
card-title	20px	400	1.25	—	Flip-card recipe titles
price	36px	700	—	—	Plan prices ($49/$79/$129)
eyebrow	11px	700	—	0.25em	Kickers, pills, plan labels (uppercase)
nav	13px	600	—	0.18em	Header & footer nav, CTAs (uppercase)
body	15px	400	1.625	—	Paragraphs, table cells

The "Method" headline scales larger via clamp(3rem, 6vw, 5.5rem) at weight 900, line-height 0.92. Open-source substitutes are unnecessary — both faces are free Google Fonts.

Layout

Base unit is 4px (Tailwind scale); px-8 (32px) is the dominant horizontal gutter and vertical rhythm runs on py-7/py-10/py-12/py-16. The whole page is capped at max-w-[1440px] centered, and every section is a bordered block joined by shared 1px ink hairlines — a true magazine grid sheet. The hero is a 2-column split: a left text column subdivided into a metadata strip (Issue No. 14 — Autumn), the headline, and a footer row pairing a body paragraph with a tomato CTA cell; the right column is a full-bleed photo over forest green. "Inside the Box" is a relative-positioned photo collage — five cards absolutely placed and rotated (−4° to +5°) across a 1000px-tall canvas on desktop, stacking to a centered single column on mobile/tablet. "The Method" is a [380px_1fr] grid with a sticky left intro column and three bordered, full-width image articles on the right. "Choose Your Box" is a 4-column comparison table with a tomato vertical divider down the center and the popular column tinted kraft. Whitespace is generous inside cells but the grid is dense and gridded — nothing floats.

Elevation & Depth

There are no box-shadows. All structure comes from 1px ink hairlines (border-[#3A3F44]) and a single 4px footer top border (border-t-4). Depth in the collage is purely positional — absolute placement, rotation, and stacked z-index (1→5) — plus the 3D transform-style: preserve-3d / perspective: 1200px flip. The hero gains depth from its forest backdrop showing during the mask-wipe. Flat, printed, ruled — not layered.

Shapes

Strictly rectangular. There is zero border radius anywhere in the document — no rounded-* classes, no border-radius rules. Cards, pills, buttons, and image frames all have hard 90° corners, reinforcing the printed-broadsheet character. The only non-orthogonal geometry is the slight rotation on the collage cards (−4° to +5°).

Components

• Header — sticky, paper-cream fill, 64px tall, 1px ink bottom border. Bodoni wordmark left; uppercase Archivo nav center; tomato-outlined "Start Cooking" button right that inverts to tomato fill / cream text on hover.
• Hero CTA cell — tomato fill, cream text, uppercase Archivo, 28px/32px padding, "Choose a plan →"; hovers to ink fill, arrow nudges right 4px.
• Flip card — 1px ink border, paper-cream front (photo + title + green meta), rotates 180° on hover to a kraft-tan back listing ingredients under an uppercase "Ingredients" rule. Sharp corners.
• Cook-time pill — ink fill, cream text, uppercase Archivo 11px, "28 MIN", pinned bottom-right of each card photo. No radius.
• Step block (Method) — Bodoni tomato number (01, 48px) beside a 30px Bodoni heading, followed by a full-width 380px-tall bordered photo and an Archivo paragraph.
• Plan table cell — bordered grid cell; popular ("2-Person") column tinted kraft at 30% and labeled in tomato; prices in Bodoni with green /wk suffix.
• Select button — outline ink (Solo, Family) or tomato fill (2-Person); uppercase Archivo 12px; hovers to ink fill, cream text. Sharp corners.
• Footer — 4px ink top border, wordmark + uppercase nav + 70%-ink copyright.

Motion

GSAP 3 + ScrollTrigger drive three effects. On load the hero image reveals via a clip-path mask-wipe (inset(0 100% 0 0) → inset(0 0 0 0), 1.0s power2.inOut, 0.15s delay). The five collage cards parallax on scroll (ScrollTrigger scrub, per-card y offset ±22–34px) — desktop only; below 1024px they are statically stacked. Flip cards rotate rotateY(180deg) on hover over 0.6s cubic-bezier(0.4,0,0.2,1) with backface-visibility: hidden. CSS hovers handle the CTA arrow nudge (translate-x-1) and the color inversions on buttons/links.

Iconography

There is no icon library. The only glyph is a unicode right arrow → used in the hero CTA, rendered in cream (on-ink) at text-2xl and animated on hover. Bullet and divider characters (·, —) are used typographically. Everything else is type or photography.

Do's and Don'ts

• Do keep every section ruled with 1px ink hairlines and share borders between blocks — the grid sheet is the identity.
• Do reserve tomato #D24B36 for action and editorial emphasis only; keep forest #2F5D45 for accents/meta.
• Do pair Bodoni display against uppercase wide-tracked Archivo; use tabular nums for all figures.
• Don't introduce border radius, drop shadows, or glass — the system is flat and printed.
• Don't let the collage cards lose their rotation/parallax or the flip-to-kraft reveal; that interplay is the signature.
• Don't add a third type family or recolor the cream paper surface.

Known Gaps

• letterSpacing values in the typography tokens are converted from Tailwind em tracking (0.25em → 2.75px at 11px, 0.18em → 2.34px at 13px) for px-based token clarity; the source uses em values.
• ink-muted is expressed as rgba(58,63,68,0.70) from the Tailwind /70 opacity modifier on #3A3F44.
• The kraft tint on the popular plan column is #D9C2A0 at 30% opacity (Tailwind bg-[#D9C2A0]/30); the token lists the base hex.