---
version: alpha
name: "Seedlip"
description: "Design system for Seedlip, the pioneer of distilled non-alcoholic spirits — deep botanical green, cream parchment, and copper warmth over an apothecary-meets-garden-journal typographic system."

colors:
  # Surface / canvas
  background: "#f7f4ef"  # warm off-white parchment, the editorial ground
  surface: "#154734"     # Seedlip deep forest green — brand ground for hero and inverted panels
  surface-warm: "#2a6249" # mid-green for hover panels and nested containers

  # Text / ink
  ink: "#0f2e1f"         # near-black botanical green — replaces pure black throughout
  on-background: "#0f2e1f"
  on-surface: "#f7f4ef"  # parchment text on forest green surfaces

  # Brand accent
  primary: "#154734"     # the brand green IS the primary — CTAs and active states on light ground
  on-primary: "#f7f4ef"
  primary-hover: "#19553e" # dembrandt computed hover on the forest green
  primary-container: "#d0d5cc" # desaturated sage — product variant chips, light category tags

  # Warm copper accent (estimated from Seedlip's known apothecary palette and bottle label)
  copper: "#a0522d"       # /* estimated */ warm copper from botanical label prints
  copper-light: "#c8813c" # /* estimated */ warm amber for active/selected states

  # Text states
  ink-secondary: "#3a5a40" # mid-green for body text on parchment — softer than full ink
  ink-muted: "#666666"     # dembrandt-confirmed neutral gray for captions and secondary UI

  # Borders
  border: "#154734"        # brand green structural border — ghost buttons, form outlines
  border-subtle: "#d0d5cc" # sage-gray for section rules and card hairlines
  border-light: "#e5e7eb"  # dembrandt-confirmed light neutral — input and grid borders

  # Focus
  focus-ring: "#154734"    # brand green for keyboard focus rings

  # Shadow tints
  shadow-soft: "#c0c9bc"   # desaturated green-gray for soft elevation

  # Semantic
  success: "#154734"       # brand green doubles as success indicator
  error: "#9b2335"         # deep red for validation errors
  warning: "#a0522d"       # warm copper for warnings /* estimated */

typography:
  display-hero:
    fontFamily: "mollieGlaston, Libre Baskerville, Georgia, serif"
    fontSize: 88px
    fontWeight: 400
    lineHeight: 0.9
    letterSpacing: -1px
  display:
    fontFamily: "mollieGlaston, Libre Baskerville, Georgia, serif"
    fontSize: 68px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "mollieGlaston, Libre Baskerville, Georgia, serif"
    fontSize: 56px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.5px
  heading-sub:
    fontFamily: "mollieGlaston, Libre Baskerville, Georgia, serif"
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  body-large:
    fontFamily: "fsNeruda, Source Serif 4, Georgia, serif"
    fontSize: 26px
    fontWeight: 300
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "fsNeruda, Source Serif 4, Georgia, serif"
    fontSize: 20px
    fontWeight: 300
    lineHeight: 1.5
    letterSpacing: 0px
  body-standard:
    fontFamily: "fsNeruda, Source Serif 4, Georgia, serif"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.83
    letterSpacing: 0px
  nav-link:
    fontFamily: "fsNeruda, Source Serif 4, Georgia, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 1.8px
  button-ui:
    fontFamily: "brCandor, Montserrat, Futura, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 1.6px
  label-ui:
    fontFamily: "brCandor, Montserrat, Futura, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 1.4px
  caption:
    fontFamily: "brCandor, Montserrat, Futura, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 1.4px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 80px
  5xl: 120px

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 28px
  button-secondary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 28px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.on-surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 28px
  button-ghost-hover:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 28px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-background}"
    rounded: "{rounded.none}"
    padding: 24px
  card-dark:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    padding: 24px
  input:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-light}"
    typography: "{typography.body-standard}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body-standard}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink}"
    typography: "{typography.label-ui}"
    rounded: "{rounded.none}"
    padding: 4px 12px
  badge-dark:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-ui}"
    rounded: "{rounded.none}"
    padding: 4px 12px
  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 48px
  nav-inverted:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.nav-link}"
    padding: 16px 48px
---

# Seedlip Design System

## Overview

Seedlip arrived before the non-alcoholic category had a visual language of its own, so it borrowed from the apothecary — and then pushed further into something genuinely distinctive. The website opens on a warm parchment ground (`{colors.background}`) that immediately signals hand-craftsmanship and provenance. Against this, the dominant visual event is the deep forest green (`{colors.surface}`): a colour so specific it reads less like a brand choice and more like a garden in late summer, the particular ink-green of heavy botanical illustration. Every section that carries brand authority — hero panels, inverted feature rows, the global navigation at rest — lives in this shade. The product photography matches it exactly: bottles surrounded by ingredients, shot with the moody naturalism of a Victorian herbarium.

The typography makes a three-way declaration. Mollie Glaston handles all display moments — an expressive serif with exaggerated calligraphic swashes and a hand-drawn quality that hovers between fine-dining menu and apothecary ledger. At 44–88px it brings the same organic irregularity as the illustrated label work, never mechanical. FS Neruda carries all editorial and body copy: a light-weight (300) serif with gentle humanist curves, set with generous leading that reads like prose worth lingering over. BR Candor plays the third voice — a spaced, all-caps geometric grotesk exclusively for UI labels, button text, and category identifiers. The role division is strict: Glaston for authority, Neruda for voice, Candor for instruction.

What elevates the system above its botanical peers is the apothecary rigor: sharp-cornered buttons with letter-spaced uppercase labels (`{typography.button-ui}`), hairline borders (`{colors.border}`) in brand green, and an almost complete absence of rounded softness. No pill-shaped CTAs, no drop shadows under cards, no decorative gradients. The sophistication comes entirely from the interplay of the parchment-and-forest-green palette, the illustrated photography, and a typographic system that treats every line of text as a considered mark.

**Key Characteristics:**
- Deep forest green (`{colors.surface}`) as the brand's primary canvas — hero panels, inverted feature rows, and navigation all anchor here
- Warm parchment (`{colors.background}`) for content sections — never white, always slightly toasted
- Mollie Glaston display serif at 44–88px for all brand statements — swashy, calligraphic, unmistakably hand-drawn
- FS Neruda Light (weight 300) as the body and editorial serif — liquid, unhurried, 1.5–1.83 line-height
- BR Candor as the uppercase utility grotesk — buttons, labels, and category tags at 5.2–1.4px letter-spacing
- Strict `{rounded.none}` on all interactive elements — sharp corners reinforce the apothecary-ledger character
- Brand green structural borders (`{colors.border}`) on all outlines — gray never substitutes for structure
- `{typography.button-ui}` set in BR Candor UPPERCASE with 1.6px letter-spacing — the brand's instructional voice
- Full-bleed photography of bottles with herbs, flowers, and citrus — dark, moody, beautifully lit naturalism
- Minimal color palette: green, parchment, and near-black ink — copper warmth is reserved for label illustration, not UI chrome
- Generous section spacing (80–120px) — the brand never crowds; it lets botanical imagery breathe
- Material Symbols Rounded for UI icons — the only non-typographic chrome in the system

## Colors

### Primary
- **Parchment** (`{colors.background}`): The editorial ground — a warm off-white with slight warmth, closer to uncoated paper than a bright screen. Sets the apothecary-pantry register from the first scroll.
- **Seedlip Forest Green** (`{colors.surface}`): The brand color in full strength. Hero sections, inverted feature panels, navigation bar, product card overlays. As much a texture as a color — botanical and authoritative.
- **Botanical Ink** (`{colors.ink}`): Near-black with green bias — used for all headlines and body text on parchment. The brand displaces pure black entirely.

### Brand Accent
- **Forest Green Primary** (`{colors.primary}`): On light surfaces, the brand green becomes the CTA color — button fills, active nav indicators, and focus states. Hover deepens to `{colors.primary-hover}`.
- **Sage Chip** (`{colors.primary-container}`): A desaturated sage-gray derived from the palette — used for product variant selector chips and soft category labels. Reads as option state, not action.
- **Copper** (`{colors.copper}`): The warm accent from Seedlip's botanical label prints — used sparingly for editorial warmth, decorative dividers, and warm hover states on certain feature sections. /* estimated */

### Text & Secondary
- **Mid Green** (`{colors.ink-secondary}`): A softer botanical green for body paragraphs on parchment — less dense than full ink, maintains the garden register.
- **Caption Gray** (`{colors.ink-muted}`): Neutral mid-gray for captions, fine print, and secondary metadata — the one value in the palette that steps fully outside the green family.

### Borders & Structure
- **Brand Green Border** (`{colors.border}`): 1px solid forest green on outlines, ghost buttons, and form elements. Structural weight is always on-brand.
- **Sage Divider** (`{colors.border-subtle}`): A desaturated sage for section hairlines and card separators — quieter than the full brand border.
- **Light Neutral** (`{colors.border-light}`): The lightest structural value at Tailwind gray-200 — input borders and grid separators.

### Semantic
- **Error** (`{colors.error}`): Deep botanical red for validation messages and error states.
- **Warning** (`{colors.warning}`): Copper-adjacent warm amber for urgency states. /* estimated */

## Typography

### Font Family
- **Display**: `mollieGlaston` — a self-hosted expressive serif with calligraphic swashes and hand-drawn energy. Used exclusively for brand-voice headings. Closest Google Fonts substitute: `Libre Baskerville` for structure with `Playfair Display` for display moments.
- **Body / Editorial**: `fsNeruda` — a self-hosted humanist serif, almost always set at weight 300 (Light). Warm, fluid, and comfortable at long body lengths. `Source Serif 4` (Google Fonts) is a close substitute.
- **UI / Labels**: `brCandor` — a self-hosted geometric grotesk used exclusively in UPPERCASE with generous letter-spacing for buttons, navigation labels, and category tags. `Montserrat` or `Futura` cover this role externally.
- **Icons**: Material Symbols Rounded — at 20–40px for all UI icons.

*Note: All three primary typefaces are self-hosted on Seedlip's CDN. For external implementations: `Playfair Display` or `Cormorant Garamond` for Glaston, `Source Serif 4` for Neruda, `Montserrat` for Candor.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Full-bleed hero headlines at 88px — the largest brand statement, Glaston's swashes fully visible |
| `display` | Section hero headers and campaign openers at 68px |
| `heading-section` | Major feature section headings at 56px — product range intros, story moments |
| `heading-sub` | Sub-section heads and product group titles at 44px |
| `body-large` | Hero subtitle copy and lead paragraphs at 26px, Neruda weight 300 |
| `body` | Standard product descriptions and about copy at 20px, Neruda weight 300 |
| `body-standard` | Expanded prose sections at 18px with generous 1.83 line-height for reading rhythm |
| `nav-link` | Navigation labels in Neruda with 1.8px spacing — present but unhurried |
| `button-ui` | CTA labels in BR Candor UPPERCASE, 16px, 1.6px letter-spacing |
| `label-ui` | Category tags, product labels, form field labels in BR Candor UPPERCASE at 14px |
| `caption` | Fine print, ingredient notes, footnotes in BR Candor at 14px |

### Principles
- **Three-typeface hierarchy, never blurred**: Glaston for brand statements, Neruda for voice and reading, Candor for instruction and navigation. Crossing these roles breaks the apothecary register.
- **Neruda lives at weight 300**: The lightness is essential. Heavy Neruda reads as a different brand. The 300 weight creates the floating, calligraphic quality that aligns with the illustrated labels.
- **Candor is always uppercase with tracking**: BR Candor loses its character in mixed case. Every instance from nav links to button labels enforces `text-transform: uppercase` with at least 1.4px letter-spacing.
- **Glaston's swashes are a feature**: The expressive terminal strokes and calligraphic energy in Mollie Glaston distinguish Seedlip from every other wellness brand using neutral sans-serifs. Let it breathe at large sizes.
- **Liberal leading on body**: 1.5–1.83 on all prose — the brand treats copy as something to be read carefully, not scanned.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

Seedlip's spacing is stately and considered — the parchment canvas earns its room. Major editorial sections get 80–120px of vertical breath; feature rows with photography use 64px; product grids maintain 24–32px internal padding. The brand explicitly resists the stacked-card density of DTC convenience sites. Each section is a chapter.

### Grid & Container
- Max content width: ~1280px, centered, with full-bleed forest green panels at all viewport widths
- Hero: full-bleed forest green panel with centered or offset product photography; Glaston headline at 88px
- Product range: 3-column on desktop — each bottle presented with generous negative space and editorial copy
- Feature rows: alternating full-bleed green / parchment panels with image-left / text-right composition
- Footer: multi-column link grid on deep green with parchment type

### Whitespace Philosophy
- **Section breath**: 80–120px between editorial sections. Seedlip positions itself as a considered craft product; the spacing enforces this.
- **Green panels as chapters**: Full-bleed forest green rows function as section anchors, not banners. Each one signals a distinct brand moment.
- **Photography-first**: Product imagery fills its container. The bottle label's botanical illustration IS the content — surrounding space serves it.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default state for all surfaces — cards, sections, full-bleed panels |
| Hairline (Level 1) | `1px solid {colors.border}` | Button outlines, ghost CTAs, form field borders |
| Subtle (Level 2) | `1px solid {colors.border-subtle}` | Section hairlines, product card separators |
| Soft Lift (Level 3) | `0 4px 12px rgba(21,71,52,0.12)` | Cart drawer, modal overlays, floating nav |
| Focus Ring | `2px solid {colors.focus-ring}` | Keyboard focus on all interactive elements |

**Shadow Philosophy**: Seedlip is an almost entirely flat system. The forest-green / parchment alternation provides all the sectional depth the brand needs. Where other DTC sites layer box-shadows to imply premium quality, Seedlip achieves it through color authority and typographic restraint. The single soft shadow (`rgba(21,71,52,0.12)`) is brand-tinted rather than neutral black — even utility shadows carry the forest-green pigment.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All buttons, inputs, cards, and UI elements — the brand's default and dominant shape |
| `sm` | 4px | Rare: tooltip corners, fine-detail chips |
| `md` | 8px | Modal corners and overlay panels |
| `lg` | 16px | Very occasional large container softening |
| `pill` | 9999px | Not used for interactive elements — only circular icon buttons |

Seedlip is a near-zero-radius system. Sharp corners are not a constraint but an explicit apothecary signal — the precision of a botanical formula, not the softness of a consumer convenience product. Interactive elements especially stay `{rounded.none}`: a pill CTA would contradict the brand's character entirely.

## Components

### Button Variants

- **`button-primary`** — Forest green fill (`{colors.primary}`) with parchment uppercase BR Candor label, zero radius. The main purchase CTA and "find a stockist" actions. Hover deepens to `{colors.primary-hover}`.
- **`button-secondary`** — Transparent fill with 1px solid brand green border (`{colors.border}`), zero radius. Used for secondary editorial actions and "explore" links on parchment sections.
- **`button-ghost`** — Transparent fill with parchment border on forest green surfaces, zero radius. Appears inside inverted hero panels and dark feature sections.

### Cards

Product and editorial cards on Seedlip use the parchment background (`{colors.background}`) with `{rounded.none}` and no drop shadow. Product photography is edge-to-edge at the card top; below, product name in Glaston at 44px, description in Neruda Light, and a BR Candor CTA. The `card-dark` variant places content on forest green for featured product moments — Glaston headlines in parchment, Neruda body in `{colors.on-surface}`.

### Inputs

Form fields use a transparent background with 1px `{colors.border-light}` border at rest, shifting to `{colors.focus-ring}` on focus. The field text is Neruda 18px weight 300. No radius. On dark sections (newsletter, email capture in forest green panels), borders invert to `{colors.on-surface}` and text renders in parchment. The modal signup form captured in the screenshot follows this pattern with clean rectangular fields and a BR Candor "SIGN UP" CTA.

### Badges / Tags

- **`badge`** — Sage chip (`{colors.primary-container}`) on brand ink, zero radius, BR Candor uppercase label. Used for product variant selection and category state.
- **`badge-dark`** — Forest green fill with parchment text, zero radius — product range markers and event labels.

### Navigation

The navigation bar sits on the warm parchment background with the Seedlip wordmark centered (or left-aligned on scroll). Nav links render in FS Neruda with 1.8px tracking, giving the navigation bar a quiet confidence. On forest green hero sections, the nav inverts to `nav-inverted` with parchment type. Below ~768px the nav collapses to a hamburger; the mobile drawer opens on forest green with full-height parchment navigation links at scale.

## Do's and Don'ts

### Do
- Set all display headings in Mollie Glaston — the swashes and calligraphic character ARE the Seedlip brand voice at display size
- Use FS Neruda at weight 300 for all body and editorial copy — the light weight is essential, not optional
- Apply BR Candor UPPERCASE with letter-spacing for every button, label, and UI instruction
- Default to `{rounded.none}` for all interactive elements — sharp corners are the brand's apothecary precision
- Use the forest green ground (`{colors.surface}`) for hero sections, feature panels, and brand-authority moments
- Maintain 80–120px vertical spacing between major sections — the brand breathes, it doesn't stack
- Use 1px solid forest green borders (`{colors.border}`) for all outlines — structural color is brand color
- Pair Glaston headlines with Neruda Light body copy on every screen — the three-typeface hierarchy must appear together
- Let botanical product photography fill its container fully — the label illustration is brand equity
- Reserve BR Candor for UI instruction contexts only — it reads as a command voice, not an editorial one

### Don't
- Don't add pill radius (`{rounded.pill}`) to CTA buttons — softness undermines the apothecary-ledger character
- Don't use FS Neruda above weight 300 for body copy — heavier weights flatten its liquid quality
- Don't set Mollie Glaston at body sizes — below 32px the swashes become clutter, not character
- Don't introduce decorative gradients or photographic overlays on UI surfaces
- Don't use gray (`#666`) as a structural border color — `{colors.border}` (forest green) is the only outline color
- Don't add drop shadows to product cards — flat surfaces on parchment are the correct visual register
- Don't use pure white (`#ffffff`) as the page canvas — the parchment warmth of `{colors.background}` is intentional
- Don't lowercase BR Candor in button labels — the UPPERCASE tracking is the instructional voice, not a style option
- Don't crowd sections — if the spacing feels generous, it's probably correct; Seedlip pages breathe
- Don't introduce a fourth typeface — the three-voice system (Glaston / Neruda / Candor) is closed

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <479px | Single-column, Glaston scales to 44px, hero stacks vertically |
| Mobile | 479–767px | Single-column product grid, nav collapses to hamburger |
| Tablet | 768–1023px | 2-column product grid, Glaston 56–68px, full editorial spacing maintained |
| Desktop | 1024–1280px | 3-column product grid, full horizontal nav, Glaston 68–88px |
| Large Desktop | ≥1280px | Max container 1280px, full editorial spacing, 88px hero display |

### Touch Targets
- Primary CTAs: minimum 48px tap height via 14px vertical padding
- Nav links: full-row tap targets in the mobile drawer overlay
- Product cards: full card area is tappable, not just the CTA region
- Icon buttons: 44px minimum touch area

### Collapsing Strategy
- **Nav**: Full horizontal parchment bar collapses to hamburger below 768px. Mobile drawer opens as full-height forest green panel with large Neruda nav links.
- **Display type**: 88px → 56px → 44px progressive scaling; Glaston swashes maintained at all sizes.
- **Hero**: Full-bleed forest green panel shifts from side-by-side (bottle photography + Glaston headline) to stacked on mobile — text first, bottle below.
- **Product grid**: 3-column → 2-column at 768px → 1-column at 480px; card spacing maintained.
- **Section spacing**: 120px desktop → 80px tablet → 48px mobile — reduces but never collapses to margins.

### Image Behavior
- Product photography is edge-to-edge within its container at all breakpoints
- Bottle imagery maintains its aspect ratio; no forced cropping of label detail
- Full-bleed green panels extend to viewport edge at every breakpoint — color anchoring is structural, not decorative
- The wordmark scales proportionally; it never simplifies to an icon

---

## Agent Prompt Guide

### Quick Color Reference
- Page Background: Parchment (`{colors.background}`) — `#f7f4ef`
- Brand Ground: Forest Green (`{colors.surface}`) — `#154734`
- Primary Text: Botanical Ink (`{colors.ink}`) — `#0f2e1f`
- Inverted Text: Parchment (`{colors.on-surface}`) — `#f7f4ef`
- Primary CTA: Forest Green (`{colors.primary}`) — `#154734`
- CTA Hover: Mid Green (`{colors.primary-hover}`) — `#19553e`
- Border: Brand Green (`{colors.border}`) — `#154734`
- Tag / Chip: Sage (`{colors.primary-container}`) — `#d0d5cc`
- Divider: Sage Hairline (`{colors.border-subtle}`) — `#d0d5cc`

### Example Component Prompts

- "Build a Seedlip hero section on forest green (`#154734`) full-bleed background. Headline in Mollie Glaston (or Libre Baskerville substitute) at 88px, weight 400, line-height 0.9, color parchment (`#f7f4ef`). Lead copy in FS Neruda (or Source Serif 4) Light 26px, weight 300, line-height 1.5, parchment. CTA: forest green fill `#154734`, parchment text, BR Candor (or Montserrat) UPPERCASE 16px weight 600, 1.6px letter-spacing, zero border-radius, padding 14px 32px."
- "Design a product card on parchment (`#f7f4ef`) with zero border-radius, no shadow. Product photograph full-bleed top, aspect ratio 4:5. Below: product name in Mollie Glaston 44px weight 400, color `#0f2e1f`. Description in FS Neruda Light 18px line-height 1.83. Add-to-cart CTA in forest green (`#154734`) fill, parchment text, Montserrat UPPERCASE 16px, zero radius, padding 14px 32px."
- "Create a newsletter capture band in Seedlip forest green (`#154734`) full-bleed. Headline in Mollie Glaston 56px parchment. Email input: zero radius, 1px solid `#f7f4ef` border, parchment text in FS Neruda 18px weight 300. Submit button: parchment (`#f7f4ef`) background, `#154734` text, Montserrat UPPERCASE 16px 1.6px spacing, zero radius, padding 14px 32px."
- "Build a ghost outline button on forest green surface: transparent background, 1px solid parchment (`#f7f4ef`) border, zero radius, parchment text in Montserrat UPPERCASE 16px weight 600 1.6px spacing, padding 12px 28px. Hover: fills to `#f7f4ef` with `#154734` text."
- "Design a product variant chip: sage (`#d0d5cc`) background, botanical ink (`#0f2e1f`) text, Montserrat UPPERCASE 14px weight 600 1.4px spacing, zero radius, padding 4px 12px. Selected state: forest green `#154734` fill with parchment text."
- "Create a Seedlip navigation bar on parchment (`#f7f4ef`). Wordmark in Mollie Glaston 28px, `#0f2e1f`. Nav links in FS Neruda 18px weight 400, 1.8px letter-spacing, `#0f2e1f`, no underline at rest, 1px forest green underline on hover. Right side: cart icon in Material Symbols Rounded 24px. Bar padding: 16px 48px."

### Iteration Guide

1. Every layout begins with the parchment / forest green alternation — `{colors.background}` for content chapters, `{colors.surface}` for brand-authority panels. Never use pure white or mid-gray.
2. All brand-voice headlines go in Mollie Glaston — scaled from 44px (sub-section) to 88px (hero). The swash character must be visible; don't use it below 32px.
3. Body and editorial prose lives in FS Neruda weight 300 — 18–26px, generous line-heights. The lightness is the brand.
4. Every UI instruction — button labels, nav links, category tags — is BR Candor UPPERCASE with 1.4–1.6px letter-spacing. No exceptions.
5. All interactive elements default to `{rounded.none}` — sharp corners are the apothecary precision signal. Never introduce pill radius on buttons.
6. CTAs on parchment surfaces use the forest green fill (`{colors.primary}`) with parchment text. On forest green surfaces, invert to parchment fill with green text.
7. Structure color is brand color — borders, outlines, and form fields use `{colors.border}` (forest green), not neutral gray.
8. Depth = color alternation. Skip box-shadows on cards and content panels; use the forest-green / parchment rhythm to signal hierarchy.
9. Section padding stays generous — 80–120px desktop vertical spacing is the baseline, not the ceiling.
10. Photography is the primary visual content. The botanical bottle illustration IS the brand — give it full-bleed containers and substantial breathing room.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Seedlip. Brand names and trademarks belong to their respective owners.