---
version: alpha
name: "Tata Harper"
description: "Vermont farm-to-face luxury skincare brand design system built on deep botanical green, near-white cream, and an editorial dual-typeface architecture that pairs an ultra-light serif display face with a precise grotesque for UI."

colors:
  # Surface / canvas
  background: "#fffff7"
  surface: "#ffffff"
  surface-dark: "#0a2600"

  # Text / ink
  ink: "#0a2600"
  on-background: "#0a2600"
  on-surface: "#444444"

  # Brand accent
  primary: "#2e7320"
  on-primary: "#fffff7"
  primary-container: "#7adb64" # light botanical green for hover fills and tints

  # Secondary accent
  secondary: "#43b02a"
  on-secondary: "#ffffff"

  # Badge accent
  badge-new: "#336a6e"
  badge-sale: "#dcff13" # electric lime — promo contrast accent; use only for sale banners

  # Borders
  border: "#cdcdcd"
  border-dark: "#0a2600"
  border-muted: "#808080" # was rgba(0,0,0,0.5) — Google format requires hex

  # States / interaction
  focus-ring: "#0038ff" # accessibility blue used by skip-link focus
  text-hover: "#0c2e00"
  link-hover: "#2e7320"

  # Shadow tints
  shadow-soft: "#999999"

typography:
  display-hero:
    fontFamily: "ivyora-display, Garamond, Baskerville, Caslon, serif"
    fontSize: 50px
    fontWeight: 300
    lineHeight: 1.15
    letterSpacing: -0.5px
  display:
    fontFamily: "ivyora-display, Garamond, Baskerville, Caslon, serif"
    fontSize: 40px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: 0px
  heading-section:
    fontFamily: "ivyora-display, Garamond, Baskerville, Caslon, serif"
    fontSize: 34px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: 0px
  heading-sub:
    fontFamily: "neue-haas-grotesk-display, Inter, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  body-large:
    fontFamily: "neue-haas-grotesk-display, Inter, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body:
    fontFamily: "neue-haas-grotesk-display, Inter, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: 0.324px
  nav-link:
    fontFamily: "neue-haas-grotesk-display, Inter, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.49
    letterSpacing: 0.324px
  button-ui:
    fontFamily: "neue-haas-grotesk-display, Inter, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.49
    letterSpacing: 0.324px
  label-caps:
    fontFamily: "neue-haas-grotesk-display, Inter, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0.432px
  caption:
    fontFamily: "neue-haas-grotesk-display, Inter, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0.324px

spacing:
  xs: 5px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 56px
  3xl: 80px
  4xl: 120px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 43px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 43px
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 43px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 43px
  button-size-selector:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-muted}"
    typography: "{typography.caption}"
    rounded: "{rounded.xs}"
    padding: 5px 10px
  button-size-selector-active:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    borderColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.xs}"
    padding: 5px 10px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.none}"
    padding: 24px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 16px
  badge-new:
    backgroundColor: "{colors.badge-new}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 3px 8px
  badge-sale:
    backgroundColor: "{colors.badge-sale}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 3px 8px
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.nav-link}"
---

# Tata Harper Design System

## Overview

Tata Harper's digital identity is the visual equivalent of a Vermont greenhouse at golden hour: everything is botanical, everything is considered, and the green runs very deep. The page opens on a near-white cream canvas (`#fffff7`) that carries faint warmth — not clinical white, not fashion-brand black — and all text lands in a forest green so saturated it reads at first as almost-black (`#0a2600`). This is not an accident. Tata Harper does not separate its green from its typography; the brand ink IS the botanical color, compressed to near-darkness. It is one of the few beauty systems where the primary text and the brand identity share a single hex.

The type hierarchy is built on a strict two-typeface contract. Ivyora Display — an ultra-light editorial serif with calligraphic Italian inflection — carries every hero headline, category opener, and story moment at weight 300. Nothing above 50px, nothing bold, nothing urgent. The grounder is Neue Haas Grotesk Display, a precise Swiss grotesque that handles navigation, product names, buttons, captions, and all transactional copy at weights 400 and 500. The combination reads like a luxury editorial magazine translated to e-commerce: the serif sets the register, the grotesque sells the product. A recurring typographic signature is the sparing use of `letter-spacing: 0.324px` and uppercase transforms on navigation and label elements — a quiet-but-persistent spatial widening that adds the lightness of haute couture to functional copy.

Shape language is deliberately restrained. Primary CTAs (`{colors.ink}` background, `{colors.on-primary}` text) are sharp rectangles with zero radius, padding wide enough to feel substantial. Size-selector chips use a minimal `{rounded.xs}` (2px) — barely a hint of softening, more tactile nub than pill. The only roundness that signals "this is active" comes from a botanical-green fill (`{colors.primary}`) replacing the dark ink on hover. The badge system introduces two accents that feel genuinely surprising for luxury: a deep-teal new-product badge (`{colors.badge-new}`) and an electric lime sale indicator (`{colors.badge-sale}`). Both are deliberate — Tata Harper treats promotional moments with the same intentionality it applies to the editorial ones.

**Key Characteristics:**
- Near-white cream canvas (`{colors.background}`) — carries subtle warmth, never clinical
- Deep forest green ink (`{colors.ink}`) that doubles as the brand identity color — text and logo share the same hex
- Ivyora Display at weight 300 for all editorial headings — confident lightness, never compressed
- Neue Haas Grotesk Display for all UI, body, and navigational copy
- Uppercase nav links with `0.324–0.432px` letter-spacing — couture spatial signature
- Sharp rectangular buttons (`{rounded.none}`) with generous horizontal padding (~43px each side)
- Botanical green CTA fill (`{colors.primary}`) reserved for primary hover states and accent moments
- Electric lime sale badge (`{colors.badge-sale}`) as the only true contrast accent — bold, seasonal, singular
- Minimal border radius vocabulary: just `{rounded.xs}` (2px) for size chips and `{rounded.none}` everywhere else
- Photography style: full-bleed nature backdrops, skin-close texture shots, Vermont farm imagery
- CSS variables for primary (`--color-primary: #2e7320`) and semantic badges (badge-new, badge-sale)
- Shopify-based stack with Tailwind; standard 8px spatial base scale

## Colors

### Primary
- **Vermont Deep** (`{colors.background}`): The page canvas — a near-white cream tinted slightly warm. This reads as clean paper, not screen.
- **Forest Ink** (`{colors.ink}`): All primary typography and logo. At `lch(12.29%)` luminance this near-black green functions as both brand signature and body copy — a system where brand color and text color collapse into one.
- **Botanical Green** (`{colors.primary}`): The functional accent — applied to primary button hover fills, active navigation states, link-hover moments, and price text. The CSS custom property `--color-primary: #2e7320` names it explicitly.

### Secondary Accents
- **Leaf Bright** (`{colors.secondary}`): A lighter botanical green pulled from the semantic `colors.semantic.primary` value; appears in promo banner fills and `needsclick`-layer CTA backgrounds.
- **Hover Fill** (`{colors.primary-container}`): Button-before animation fill — transitions in as a lighter mint on hover before settling. Creates the "sweep" effect on CTAs.

### Promotional Badges
- **Teal New** (`{colors.badge-new}`): Reserved exclusively for "New" product badges — a mid-depth teal that signals freshness without competing with the botanical green.
- **Lime Sale** (`{colors.badge-sale}`): Electric `#dcff13` used only for sale price and promotional banner text. High-contrast, season-specific — Tata Harper treats promotional color as editorial punctuation.

### Text & States
- **Body Grey** (`{colors.on-surface}`): Secondary and body copy at `#444444` — a warm dark grey that softens the reading load compared to pure forest ink.
- **Hover Ink** (`{colors.text-hover}`): One lightness step darker than the base ink for interactive darkening on hover states.
- **Muted Border** (`{colors.border-muted}`): `rgba(0,0,0,0.5)` flattened to `#808080` — used for size selector chip outlines at rest.

### Borders & Surfaces
- **Warm Divider** (`{colors.border}`): `#cdcdcd` applied to horizontal section rules and input outlines at rest — light enough to whisper structure.
- **Dark Surface** (`{colors.surface-dark}`): The inverted canvas for dark-mode editorial sections and promo bars — the same forest green used for ink, now flipped to background.

### Shadow
- **Soft Drop** (`{colors.shadow-soft}`): `#999999` base for the card shadow `rgba(0,0,0,0.15) 1px 1px 10px` used on modal overlays and sticky nav. Conservative and functional.

## Typography

### Font Family
- **Display / Editorial**: `ivyora-display` (Adobe Fonts), fallbacks: `Garamond, Baskerville, Caslon, serif`. A contemporary high-contrast editorial serif with Italian warmth, always set at weight 300. Carries section opens, hero headlines, and editorial narrative.
- **Primary UI / Body**: `neue-haas-grotesk-display` (Adobe Fonts), fallbacks: `Inter, Helvetica Neue, Helvetica, sans-serif`. Handles all transactional surfaces — nav, buttons, product names, body copy, captions. Weights 400 (regular) and 500 (medium).
- **OpenType**: No stylistic alternates detected. Neue Haas uses standard tracking at 0.324px across most running text — a subtle optical correction for screen rendering.

*Note: Both faces are commercially licensed via Adobe Fonts. For Google Fonts substitutions: use Playfair Display or Cormorant Garamond for `ivyora-display`; use Inter for `neue-haas-grotesk-display`.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Hero headlines, category opener splash text — 50px Ivyora at weight 300 |
| `display` | Section title panels, editorial feature headlines — 40px Ivyora at weight 300 |
| `heading-section` | Product collection headings, story section openers — 34px Ivyora |
| `heading-sub` | Product names, sub-section titles, UI headings — 22px Neue Haas Medium |
| `body-large` | Lead paragraphs, ingredient callouts — 20px Neue Haas at weight 400 |
| `body` | Default running copy, product descriptions — 16px Neue Haas with 0.324px spacing |
| `nav-link` | Navigation items, uppercase category labels — 16px Neue Haas Medium, tracked |
| `button-ui` | All CTA and button labels — 16px Neue Haas Medium, consistent with nav cadence |
| `label-caps` | Uppercase section labels, filter headers — 14px Neue Haas Medium, 0.432px tracking |
| `caption` | Price text, badge labels, footnotes — 12px Neue Haas Regular, 0.324px spacing |

### Principles
- **Unashamed lightness**: Ivyora at weight 300 for all editorial headings signals confidence through restraint, not proclamation. This is luxury skincare, not luxury fashion — the type should feel like a label on a glass bottle.
- **The grotesk does the work**: Neue Haas handles every click, every price, every form. It carries the transactional register; Ivyora carries the emotional one.
- **Uppercase as signature, not shouting**: Nav and label-caps use `text-transform: uppercase` with tight `0.324–0.432px` letter-spacing — it creates spatial elegance at small sizes, not emphasis.
- **No bold hierarchy**: The system caps at weight 500 (Medium) for Neue Haas. No 700 weight appears. Emphasis comes from typeface contrast (serif vs grotesque), size, and spacing — not weight escalation.
- **Tracked body**: `letterSpacing: 0.324px` on body copy is a Tata Harper signature — it creates a slightly airy reading rhythm that reinforces the brand's "breathe, it's natural" tone.

## Layout

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

Tata Harper spacing is generous by luxury e-commerce standards. Section breaks breathe at 80–120px, product grids use structured 56px gutters between tile groups, and the primary content container sits comfortably at 1440px max-width with inner horizontal padding that prevents edge crowding on wide monitors. The underlying CSS uses a Tailwind 1.08× scale (spacing values appear as multiples of 8.64px rather than pure 8px increments, suggesting a base-font-size multiplier from the root), but the design intent maps cleanly to the standard 8px grid.

### Grid & Container
- Max content width: 1440px (breakpoint observed at `1440px` and `1500px`)
- Product grids: 4-column on desktop (`≥1024px`), 2-column at tablet, 1-column on mobile
- Hero: full-bleed imagery with centred or left-anchored type stack over a botanical backdrop
- Editorial sections: alternating full-width farm photography with contained text-and-product columns
- Navigation: sticky fixed bar with centered wordmark, utility links left/right

### Whitespace Philosophy
- **Structural generosity**: Major section breaks at 80–120px vertical spacing — pages breathe like a brand lookbook, not a product catalogue.
- **Photography-led layout**: The grid gives way to full-bleed imagery at key moments; text lives below or beside, never competing for visual priority with the farm and skin shots.
- **Detail density in product tiles**: Product cards pack ingredient badges, star ratings, volume selectors, and pricing into a compact vertical footprint — fine-grained information architecture within a generous outer container.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default canvas, product card backgrounds, section dividers |
| Subtle (Level 1) | `rgba(0,0,0,0.09) 0px 0px 10px` | Dropdown menus, hover-state card lift |
| Card (Level 2) | `rgba(0,0,0,0.15) 1px 1px 10px` | Modal overlays, sticky navigation bar |
| Elevated (Level 3) | `rgba(66,73,96,0.4) 0px 0px 15px` | Drawer panels, product detail overlays |
| Focus Ring | `rgba(0,56,255,0.22) 0px 0px 0px 4px` + `2px solid #0038ff` | Browser accessibility focus ring on interactive elements |

**Shadow Philosophy**: Tata Harper uses elevation sparingly and only for functional surfacing — drawers, modals, and the sticky nav are the three contexts that earn a shadow. Product cards default to flat; the brand trusts photography and whitespace to create perceived depth rather than box-shadow architecture. The focus ring is a strong accessibility-blue `#0038ff` with a 4px glow — visually jarring against the botanical palette, but correctly prioritizing keyboard accessibility.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Primary and secondary buttons, input fields, cards, modals — the dominant form language |
| `xs` | 2px | Size-selector chips — barely-there softening, implies interactivity without compromising sharpness |
| `sm` | 4px | Tooltip containers, small badge variants |
| `md` | 8px | Third-party UI components (Klaviyo, PrimeReact embeds) — not part of core Tata Harper language |
| `pill` | 9999px | Circular icon buttons, review dot indicators, progress pips |

Tata Harper is functionally a two-radius system: `0` for everything structural and a near-zero `2px` for interactive chips. The radical sharpness of the buttons is the design's most distinctive tactile signature — luxury skincare expressed as a laboratory label, not a spa pillow.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button Variants

- **`button-primary`** — Deep forest ink background (`{colors.ink}`), cream text (`{colors.on-primary}`), zero radius, generous 43px horizontal padding. Hover sweeps to botanical green (`{colors.primary}`). Used for "Add to Bag", "Shop Now", primary checkout CTAs.
- **`button-secondary`** — Transparent background, `{colors.ink}` text with matching border, same geometry as primary. Hover inverts to full ink fill. Used for secondary CTAs, "Learn More", editorial discover moments.
- **`button-size-selector`** — Compact rectangular chip (`{rounded.xs}`) with `{colors.border-muted}` outline at rest. Active state fills to `{colors.ink}` with white text. Used for volume variant pickers (50ML, 125ML, 315ML).

### Cards
Product tiles are flat (`{rounded.none}`, no shadow), white surface, product image full-width at top, then typography stack: ingredient-category eyebrow, product name in `{typography.heading-sub}`, price in `{typography.caption}`. Badge overlays (`{components.badge-new}`, `{components.badge-sale}`) position absolutely over the image corner. Editorial cards use `{components.card-dark}` for botanical inverse moments — deep forest green surface with cream text.

### Inputs
Search and form inputs are sharp rectangles (`{rounded.none}`), white background, `{colors.border}` outline at rest. Focus sharpens to `{colors.ink}` border — no glow, no color shift, just increased border weight. Typography `{typography.body}` throughout. Klaviyo-powered email capture uses a dark-canvas variant: transparent input on `{colors.surface-dark}` with bottom-border-only treatment in `{colors.badge-sale}` (lime) for maximum contrast on the promotional banner.

### Badges / Tags
The badge system has two semantic states: **New** (`{components.badge-new}` — teal `{colors.badge-new}`) and **Sale** (`{components.badge-sale}` — lime `{colors.badge-sale}`). Both use sharp corners, caption-weight type, and minimal padding. The contrast ratio between lime and forest ink is intentionally aggressive for sale moments — visibility over elegance, briefly.

### Navigation
The top bar is sticky, cream-background, centered wordmark in Ivyora Display at ~32px. Navigation links are Neue Haas Medium at 16px with 0.324px tracking, forest ink, uppercase for category names. Hover state: underline with `{colors.link-hover}` tint. On scroll, the bar maintains its cream surface; it does not go transparent. Mobile: hamburger collapse to full-screen overlay.

## Do's and Don'ts

### Do
- Set all editorial headings in `{typography.display-hero}` or `{typography.display}` using Ivyora Display at weight 300 — never bold, never above 50px
- Use `{colors.ink}` (deep forest green) for ALL primary text including the wordmark — text and brand identity share one hex
- Keep buttons sharp: `{rounded.none}` for primary and secondary CTAs — the sharpness is the brand's tactile signature
- Use `{colors.primary}` (`#2e7320`) only for hover fills, active states, and functional link moments — it should feel like reaching into the garden, not decorating the page
- Apply uppercase + `0.324px` letter-spacing for navigation and label-caps tier — it elevates micro-copy without adding weight
- Use the electric lime badge (`{colors.badge-sale}`) exclusively for sale and promotional price moments — its visual jolt is the point, and diluting it defeats the purpose
- Default to flat (no-shadow) card surfaces — photography and whitespace carry the depth
- Pair Ivyora headings with a Neue Haas eyebrow above them in `{typography.label-caps}` uppercase for editorial pacing
- Use `{colors.background}` (`#fffff7`) as the page canvas — the warm tint is botanically intentional, not default white

### Don't
- Don't mix Ivyora and Neue Haas in the same heading level — each typeface has its own tier and they should never compete
- Don't use bold weights (700+) in the Neue Haas stack for emphasis — the cap is 500 (Medium); hierarchy comes from size and typeface, not weight escalation
- Don't apply `{colors.badge-sale}` lime to decorative elements or section backgrounds — it belongs only to promotional pricing
- Don't soften buttons with `{rounded.sm}` or `{rounded.md}` — any radius above `{rounded.xs}` breaks the laboratory-label sharpness
- Don't set body copy in Ivyora — the serif is editorial-only; using it for running text loses the typeface hierarchy contract
- Don't reduce padding on buttons below 12px 32px — the generosity of the horizontal padding is what makes the button feel substantive
- Don't introduce gradients on surfaces or CTAs — Tata Harper is flat, matte, solid tint
- Don't use pure black (`#000000`) for text — forest ink (`{colors.ink}`) is the brand's dark, and it carries the botanical identity
- Don't place dark editorial (`{components.card-dark}`) sections back-to-back without a cream break — the deep green is a punctuation mark, not a default

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <425px | Single-column layout, full-width cards, micro-typography holds |
| Mobile | 425–768px | Single-column, hamburger nav, stacked hero with image above text |
| Tablet | 768–1024px | 2-column product grids begin, primary nav still collapsed |
| Desktop | 1024–1440px | Full horizontal nav, 4-column product grids, editorial side-by-side layouts |
| Large Desktop | >1440px | Max container width locks at 1440px; outer gutters expand |

### Touch Targets
- Primary buttons: minimum 48px height via `14px × 2 + line-height` — meets WCAG 2.5.8
- Navigation links: uppercase nav items with `padding: 16px 8px` for adequate tap zones in the mobile drawer
- Size selector chips: `padding: 5px 10px` — borderline on small screens; considered acceptable given the product page context
- Product tiles: full card is tappable, not just the image or title

### Collapsing Strategy
- **Navigation**: Full horizontal menu collapses to hamburger icon at `<1024px`; tap opens a full-screen dark-overlay drawer with category tree
- **Hero**: Full-bleed imagery stacks above text on mobile; desktop shows text over or beside the image at full viewport width
- **Product grid**: 4-column desktop → 2-column tablet → 1-column mobile; card dimensions scale to fill container
- **Editorial sections**: Multi-column farm/story layouts reduce to stacked single-column on mobile; image-first ordering preserved
- **Sticky nav**: Maintains fixed position across all breakpoints; height compresses slightly on mobile

### Image Behavior
- Product photography: square or slight portrait ratio, full-bleed within tile; lazy-loaded with `image-fade-in` animation (`0.5s cubic-bezier`)
- Hero imagery: full-viewport-width with `object-fit: cover`; focal point preserved through responsive scaling
- Ingredient and lifestyle shots: flexible aspect ratios keyed to section layout; never cropped to thumbnail on mobile — they scale down in full

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` — `#fffff7` (warm cream)
- Primary Text / Ink: `{colors.ink}` — `#0a2600` (deep forest green — also the brand color)
- Brand Accent (hover / active): `{colors.primary}` — `#2e7320`
- Secondary Text: `{colors.on-surface}` — `#444444`
- Border at rest: `{colors.border}` — `#cdcdcd`
- Sale Badge: `{colors.badge-sale}` — `#dcff13`
- CTA background: `{colors.ink}` / CTA text: `{colors.on-primary}` — `#fffff7`

### Example Component Prompts

- "Create a hero section on `{colors.background}` (#fffff7) with full-bleed farm photography behind a centred text stack. Eyebrow: 14px Neue Haas Medium uppercase, `{colors.ink}`, 0.432px letter-spacing. Headline: 50px Ivyora Display weight 300, `{colors.ink}`, line-height 1.15. Body: 16px Neue Haas Regular, `{colors.on-surface}` (#444444), 0.324px spacing. CTA: `{components.button-primary}` — `{colors.ink}` fill, `{colors.on-primary}` text, `{rounded.none}`, 14px 43px padding. Hover fills to `{colors.primary}`."
- "Design a product tile using `{components.card}` (white surface, `{rounded.none}`, no shadow). Full-width product image top. Below: 12px Neue Haas uppercase eyebrow in `{colors.primary}` for ingredient category; 22px Neue Haas Medium product name in `{colors.ink}`; star rating row; 16px Neue Haas Regular price in `{colors.ink}`. Badge overlay `{components.badge-new}` (teal `{colors.badge-new}`, `{typography.caption}`, sharp corners) in upper-left image corner."
- "Build a size selector chip row for volume variants. Each chip: `{components.button-size-selector}` — transparent bg, `{colors.border-muted}` (#808080) 1px solid border, `{rounded.xs}` (2px radius), 12px Neue Haas Regular uppercase, `{colors.ink}`, 5px 10px padding. Active chip: `{components.button-size-selector-active}` — `{colors.ink}` fill, `{colors.on-primary}` text, same geometry."
- "Create a sticky navigation bar on `{colors.background}`. Centered wordmark: Ivyora Display 32px weight 300, `{colors.ink}`. Nav links: 16px Neue Haas Medium uppercase, `{colors.ink}`, 0.324px letter-spacing, no underline at rest, underline on hover with `{colors.link-hover}` tint. Right cluster: search icon, cart count badge. `{colors.border}` hairline at bar bottom."
- "Design an email capture section on `{components.card-dark}` (`{colors.surface-dark}` / `#0a2600` surface). Headline: 40px Ivyora Display weight 300, `{colors.on-primary}`. Body: 16px Neue Haas Regular, `{colors.on-primary}` at 80% opacity. Input: transparent bg, bottom-border-only in `{colors.badge-sale}` (#dcff13), `{rounded.none}`, 16px 0px padding. Submit CTA: `{components.button-primary}` inverted — `{colors.badge-sale}` fill, `{colors.ink}` text."

### Iteration Guide

1. Start with `{colors.background}` (`#fffff7`) as the page canvas — never default white. The warmth is brand-intentional.
2. Set all editorial headings in Ivyora Display weight 300 first. Then layer Neue Haas Medium for the supporting UI copy. Never invert these roles.
3. Brand color and text color are the same hex (`{colors.ink}`). Lean into it — a botanical illustration where the ink is the brand.
4. Reserve `{colors.primary}` (`#2e7320`) for hover fills, active states, and accent link moments only. It should feel like touching the garden, not decorating the layout.
5. Buttons are sharp rectangles — `{rounded.none}`, generous padding (14px 43px baseline), dark fill by default. Do not round them.
6. Use uppercase + 0.324–0.432px letter-spacing for navigation, label tiers, and category pills. It adds couture lightness without changing font weight.
7. Elevation is earned: only modals, drawers, and the sticky nav receive box-shadows. Everything else is flat.
8. The electric lime (`{colors.badge-sale}`) is a season-limited exclamation mark. Use it once per layout maximum, and only for sale or promotional price signals.

---

## 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 Tata Harper. Brand names and trademarks belong to their respective owners.