---
version: alpha
name: "Flamingo Estate"
description: "Design system for Flamingo Estate, the LA garden estate and luxury botanical goods brand — deep forest greens, dusty rose, warm linen, and editorial serif luxury rooted in the abundance of the natural world."

colors:
  # Surface / canvas
  background: "#f9f5ef"          # /* estimated */ warm linen — the dominant page canvas
  surface: "#2c3d2e"             # /* estimated */ deep garden green — hero panels, inverted sections
  surface-warm: "#f0e9dc"        # /* estimated */ parchment — alternate section background

  # Text / ink
  ink: "#1a1a18"                 # /* estimated */ near-black with warm undertone
  on-background: "#1a1a18"
  on-surface: "#f9f5ef"          # /* estimated */ linen on dark green

  # Brand accent
  primary: "#c4785a"             # /* estimated */ terracotta-rose — primary CTA
  on-primary: "#ffffff"
  primary-container: "#e8d5c9"   # /* estimated */ blush — subtle tinted chip/tag backgrounds

  # Secondary accent
  secondary: "#3d5c3f"           # /* estimated */ mid garden green — secondary buttons, links
  on-secondary: "#ffffff"

  # Interaction states
  primary-hover: "#a85f44"       # /* estimated */ deeper terracotta hover
  secondary-hover: "#2c3d2e"     # /* estimated */ dark green hover

  # Borders
  border: "#c8bfb0"              # /* estimated */ warm greige — structural outlines, card borders
  border-dark: "#2c3d2e"         # /* estimated */ dark green border on light surfaces

  # Shadow tints
  shadow-soft: "#b5a99a"         # /* estimated */ warm sand shadow tint

  # Focus
  focus-ring: "#c4785a"          # /* estimated */ terracotta focus ring — on-brand

  # Semantic
  success: "#3d5c3f"
  error: "#a83232"
  warning: "#c4785a"

typography:
  display-hero:
    fontFamily: "Canela, Freight Display, Georgia, 'Times New Roman', serif"
    fontSize: 80px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: -0.5px
  display:
    fontFamily: "Canela, Freight Display, Georgia, 'Times New Roman', serif"
    fontSize: 56px
    fontWeight: 300
    lineHeight: 1.05
    letterSpacing: -0.25px
  heading-section:
    fontFamily: "Canela, Freight Display, Georgia, 'Times New Roman', serif"
    fontSize: 40px
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Canela, Freight Display, Georgia, 'Times New Roman', serif"
    fontSize: 28px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: 0px
  body-large:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.01em
  body:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.8
    letterSpacing: 0.01em
  nav-link:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.08em
  button-ui:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.12em
  caption:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 2.7
    letterSpacing: 0.1em

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 120px

rounded:
  none: 0px
  sm: 4px
  md: 6px
  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-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
  button-secondary-hover:
    backgroundColor: "{colors.secondary-hover}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.secondary-hover}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.on-surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
  button-ghost-hover:
    backgroundColor: "{colors.on-surface}"
    textColor: "{colors.surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 32px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.on-background}"
    borderColor: "{colors.border}"
    rounded: "{rounded.none}"
    padding: 24px
  card-dark:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    padding: 32px
  input:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 0px
  input-focus:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 0px
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 12px
  badge-dark:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 12px
  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 40px
---

# Flamingo Estate Design System

## Overview

Flamingo Estate is what the garden looks like when it becomes a brand. Richard Christiansen's Los Angeles estate — perched in the Hollywood Hills and planted with heirloom tomatoes, roses, and herbs — has been translated into a design language that smells like morning dew and expensive soap. The page sits on a warm linen ground (`{colors.background}`) that reads as sun-bleached paper, and every section alternates between that pale warmth and a deep forest green (`{colors.surface}`) that feels like standing in the shade of a fig tree. The overall register is not DTC luxury so much as estate-catalogue publishing — the kind of thick-paper catalog you'd find tucked between cookbooks on a well-stocked shelf.

The typography contract is the soul of the system. Display moments are set in Canela — a low-contrast editorial serif with calligraphic delicacy and genuine warmth, used at 40–80px and weight 300 throughout. It never shouts. It speaks the way a handwritten note on good stationery speaks, in that particular register of considered affluence. Below 24px, Helvetica Neue takes over in a very pure, unembellished form — at 13–15px with open letter-spacing, it reads as catalog text rather than branding copy, which is exactly right. The pairing is classic: a warm italic-leaning serif for romance and display, a neutral grotesk for provenance and product.

The accent color — a terracotta-rose (`{colors.primary}`) lifted directly from dried flowers and clay pots — appears on primary CTAs, focus rings, and occasional badge moments. It is used with real restraint: never as a surface, never decoratively, always as the single warm-color action point on a page that otherwise breathes in greens and linens. This is a brand whose color palette could have been extracted from a cutting garden in October, and the design honors that by keeping the chromatic gestures precise rather than abundant.

**Key Characteristics:**
- Warm linen canvas (`{colors.background}`) as the default content surface — never white, always paper-warm
- Deep forest green (`{colors.surface}`) for hero panels, inverted sections, and brand-anchoring moments
- Terracotta-rose accent (`{colors.primary}`) deployed only for primary CTAs and focus states — one warm-color action per view
- Canela (or Freight Display) at weight 300 for all display text — 40–80px, never bolded, never all-caps
- Helvetica Neue for all body copy and UI labels — 13–15px, wide letter-spacing on small caps, no decorative use
- Sharp zero-radius corners on buttons and inputs — letterpress restraint, no pill shapes or rounded rectangles in the action system
- `0.08–0.12em` letter-spacing on nav links and button labels — the spaced-out tracking of fine goods packaging
- Borderless card composition relying on generous whitespace rather than strokes to define product tiles
- Photography-led pages: full-bleed garden and lifestyle imagery sets seasonal pace; product photography is editorial, never staged-white-background
- Motion is slow and botanical — 0.4s ease-in transitions mirror the pace of things growing

## Colors

### Primary
- **Warm Linen** (`{colors.background}`): The primary page canvas — a sun-bleached cream that reads as uncoated paper stock. Sets the editorial tone before a single image loads.
- **Garden Green** (`{colors.surface}`): The brand's darkest anchor — a deep forest green used for hero panels, newsletter bands, and full-bleed section breaks. It reads as shade, not night.
- **Parchment** (`{colors.surface-warm}`): A half-step warmer than the linen canvas — used for alternate content sections and product background fills.

### Brand Accent
- **Terracotta Rose** (`{colors.primary}`): The single warm chromatic note in the system. Applied to primary "Add to Basket" buttons, form submit actions, and focus rings. Evokes dried flowers and garden clay. Hover deepens to `{colors.primary-hover}`.
- **Blush Container** (`{colors.primary-container}`): Desaturated blush for badge backgrounds, product tag chips, and category labels — a quieter accent that implies category state rather than action.
- **Mid Green** (`{colors.secondary}`): The secondary action color — used for text links on light surfaces, secondary buttons, and hover underlines. One step lighter than the hero green.

### Text & Ink
- **Near Black Warm** (`{colors.ink}`): All primary text on light surfaces — a near-black with the warmth of ink on paper, never pure black.
- **Linen on Green** (`{colors.on-surface}`): Inverted text color for the dark garden green panels — the same linen as the canvas, used as reverse text.

### Borders & Structure
- **Warm Greige Border** (`{colors.border}`): Structural hairlines and card edges — a warm greige that reads as ruled paper rather than digital gray.
- **Dark Green Border** (`{colors.border-dark}`): Used on secondary button outlines and form field borders on light surfaces — structural weight without gray-out.

### Semantic
- **Estate Success** (`{colors.success}`): Mid garden green for confirmation states — tonally consistent with the palette.
- **Error** (`{colors.error}`): A muted terracotta-red — warm enough to stay in the palette, functional enough to signal error.

## Typography

### Font Family
- **Display / Editorial**: `Canela`, with fallbacks `Freight Display, Georgia, 'Times New Roman', serif`. A low-contrast editorial serif with warmth and calligraphic detail — used exclusively for headings at weight 300. For external implementations, Freight Display Pro or Cormorant Garamond (Google Fonts) approximate the warm-editorial feel.
- **Body / UI**: `Helvetica Neue`, with fallbacks `Helvetica, Arial, sans-serif`. The standard catalog grotesk — set with open tracking at small sizes for a fine-goods-packaging register.
- **OpenType**: Standard ligatures only. Canela's natural spacing is preserved; no optical size adjustments needed.

*Note: Canela is licensed through Commercial Type. For open-source substitutions, Cormorant Garamond at weight 300 (Google Fonts) or EB Garamond are closest in temperature.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Full-bleed hero headlines — 80px, weight 300, seasonal campaign titles |
| `display` | Section-opener statements and editorial headlines at 56px |
| `heading-section` | Major section headings — product category titles, feature section openers at 40px |
| `heading-sub` | Sub-section heads and product group labels at 28px |
| `body-large` | Lead editorial paragraphs, hero subtitles, provenance copy at 18px |
| `body` | Standard product descriptions, about copy, ingredient lists at 15px |
| `nav-link` | Navigation labels — 13px, 0.08em tracking — catalog spaced |
| `button-ui` | CTA labels — 12px, 0.12em tracking — uppercase packaging register |
| `caption` | Fine print, badge labels, quantity notes at 10px |

### Principles
- **Canela is weight 300 always**: The editorial serif only works at its correct lightness. Never bold a headline — Canela's elegance lives in its thinness.
- **Uppercase reserved for UI only**: Nav links and button labels use uppercase with wide letter-spacing — the fine-goods packaging register. Canela headings are always sentence case.
- **Body text is unhurried**: Helvetica Neue at 15px and 1.8 line-height — the generous rhythm of a catalog, not a product listing.
- **No bold Helvetica**: The design uses weight 400 throughout the sans register. Weight contrast comes from typeface contrast (serif vs. grotesk), not weight escalation.
- **Wide tracking at small sizes**: 0.08–0.12em letter-spacing on nav and button text — the unmistakable spacing of luxury goods labeling.

## Layout

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

Flamingo Estate's spacing is extraordinarily generous. Hero sections breathe at 96–120px. Between major content blocks, 64px is the minimum. Within product tiles, 24–40px governs internal padding. This is not a brand in a hurry — the whitespace IS part of the product, suggesting abundance and unhurried living rather than efficient commercial conversion.

### Grid & Container
- Max content width: ~1440px centered, with full-bleed green and linen panels extending edge-to-edge
- Hero: full-bleed botanical photography with centered text overlay on a semi-transparent surface, or split-layout with text on green left / image right
- Product grid: 4-column desktop, 2-column tablet, 1-column mobile
- Editorial sections: alternating full-bleed green band and linen content rows
- Footer: multi-column link structure with the estate address and coordinates as a signature element

### Whitespace Philosophy
- **Abundance signals quality**: The brand never stacks sections tightly. Each product or section gets room to be contemplated.
- **Green panels as chapter dividers**: Full-bleed forest green rows function as editorial breathing points — a visual inhale between content chapters.
- **Photography as the primary surface**: Imagery fills containers edge-to-edge; product photography is styled-lifestyle, never isolated white-background shots.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default state — page canvas, product cards, section panels |
| Hairline (Level 1) | `1px solid {colors.border}` — warm greige | Card edges, form field outlines, subtle section rules |
| Dark Outline (Level 2) | `1px solid {colors.border-dark}` — garden green | Secondary button borders, active form states |
| Subtle Lift (Level 3) | `0 4px 16px rgba(44, 61, 46, 0.12)` | Cart drawer, floating panels on scroll |
| Dialog (Level 4) | `0 8px 32px rgba(26, 26, 24, 0.18)` | Modals, overlays, subscription selection panels |
| Focus Ring | `2px solid {colors.focus-ring}` — terracotta | Interactive focus — the warm accent as keyboard indicator |

**Shadow Philosophy**: Flamingo Estate is architecturally flat. Product cards have no shadow — the linen ground separates them from the canvas through whitespace, not elevation. When depth appears (drawers, modals), it reads as a warm botanical shadow, tinted toward the dark green rather than neutral black. The brand never lifts cards or hero images off the page; everything stays planted, like something rooted in the ground.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, inputs, cards, image containers — the default everywhere |
| `sm` | 4px | Micro UI elements — small chips, quantity selectors |
| `md` | 6px | Secondary UI chrome — select dropdowns, small interactive panels |
| `pill` | 9999px | Rare — subscription toggle switches only |

The Flamingo Estate radius system is nearly entirely sharp. Buttons are rectangular. Inputs are borderless horizontal lines. Cards have no rounding. This letterpress-flat geometry is a deliberate counterpoint to the brand's sensual botanical imagery — the design container is structured and still, the photography is lush and alive.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them.

### Button Variants

- **`button-primary`** — Terracotta-rose (`{colors.primary}`) fill, white text, zero radius, wide letter-spacing. The primary add-to-basket and checkout CTA. Sharp-cornered rectangles with 14px vertical padding. Hover deepens to `{colors.primary-hover}`.
- **`button-secondary`** — Transparent fill with `1px solid {colors.border-dark}` outline, dark green border, zero radius. Used for "Shop Collection" and secondary editorial actions on linen surfaces.
- **`button-ghost`** — Transparent fill with white border on deep green surfaces, zero radius. Appears in the inverted hero and newsletter sections for on-dark actions.

### Cards

Product cards are nearly chrome-free: linen background (`{colors.background}`), zero border radius, no drop shadow, minimal visual structure. Product photography fills the card's upper container at a consistent 4:5 ratio. Titles in Canela 28px below the image, price in Helvetica Neue 15px, CTA as a small uppercase text link rather than a heavy button. The card hover lifts the image subtly with a `0.4s ease` scale transform — movement as the only depth signal.

### Inputs

Form inputs throughout the site use a borderless base state with only a bottom border — `1px solid {colors.border}` — echoing the fine-line restraint of the Aesop register. On focus, the bottom border transitions to terracotta (`{colors.focus-ring}`). No box, no fill change, no shadow — just the warm underline activating. Email subscription inputs inside green panels render linen text on a transparent field.

### Badges / Tags

- **`badge`** — Blush container (`{colors.primary-container}`) with near-black ink, no radius, 10px caption text with 0.1em tracking — used for "Best Seller", "New", and "Limited Edition" product callouts.
- **`badge-dark`** — Garden green fill with linen text — used on inverted (dark green) panel surfaces for product category labels.

### Navigation

The header is a linen-ground bar with the Flamingo Estate wordmark centered in Canela weight 300. Navigation links run at 13px Helvetica Neue with 0.08em tracking in near-black, spaced evenly across the bar. Below 500px, the horizontal nav collapses to a hamburger that opens as a full-screen linen overlay. The announcement bar above the nav uses the garden green ground with linen text at caption size.

## Do's and Don'ts

### Do
- Set all display and section headings in Canela (or Cormorant Garamond) at weight 300 — sentence case, never bold, never uppercase
- Use the deep garden green (`{colors.surface}`) for hero moments and brand-anchoring panels — it is the brand's darkest and most powerful surface
- Reserve terracotta (`{colors.primary}`) strictly for primary CTA buttons and focus rings — one application per screen view
- Apply zero radius (`{rounded.none}`) to all interactive elements — sharp corners are the design's structural language
- Set navigation labels and button text in Helvetica Neue with 0.08–0.12em letter-spacing — the packaging-goods register is intentional
- Let the warm linen canvas (`{colors.background}`) breathe with 64–120px vertical padding between major sections
- Use botanical and lifestyle photography as the primary visual content driver — never white-background product shots
- Pair Canela display text with Helvetica Neue body at a significant size contrast (at least 3:1 ratio)
- Use the warm greige border (`{colors.border}`) for all structural hairlines — never pure gray

### Don't
- Don't bold Canela headings — weight 300 is the design's entire point, and heavier weights destroy the editorial register
- Don't uppercase Canela — it's a sentence-case serif; uppercase belongs only to the Helvetica Neue UI layer
- Don't use terracotta (`{colors.primary}`) as a surface or background fill — it's a warm-color action signal, not a canvas
- Don't round buttons — `{rounded.none}` is the action language of the system; pill buttons belong to a different brand entirely
- Don't introduce drop shadows on product cards — the flat letterpress surface is deliberate
- Don't use pure black text — `{colors.ink}` (near-black warm) replaces black on all light surfaces
- Don't add mid-range radius values (8–16px) — the system is binary: zero or micro (4–6px) for accidental UI only
- Don't introduce white as the page background — the warmth of `{colors.background}` is essential to the editorial mood
- Don't compress vertical spacing below 40px between product sections — the generosity of space signals quality
- Don't mix Helvetica Neue and a second sans-serif — the typeface pairing is deliberately just two voices

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single-column, Canela display drops to 32px, nav full-screen overlay |
| Mobile | 375–500px | Single-column per dembrandt breakpoint, 40px display, stacked product cards |
| Tablet | 500–1024px | 2-column product grid, Canela at 48–56px, hamburger nav |
| Desktop | 1024–1440px | 4-column product grid, full horizontal nav, 80px hero display |
| Large Desktop | ≥1440px | Full-bleed panels, 1440px max content width, maximum editorial whitespace |

### Touch Targets
- Primary CTAs: minimum 48px tap height via 14px vertical padding
- Nav links: full-row touch targets in the mobile overlay menu
- Product cards: entire card area is tappable, not just the title or button
- Add-to-basket: 48px minimum height on mobile, full-width in mobile single-column layout

### Collapsing Strategy
- **Nav**: Full horizontal linen bar collapses to hamburger below 500px — full-screen linen overlay on open
- **Display type**: 80px → 56px → 40px → 32px progressive scaling; sentence case and weight 300 maintained
- **Hero**: Full-bleed botanical imagery scales to mobile viewport width; text overlay centers and stack-collapses
- **Product grid**: 4-column → 2-column at 500px → 1-column at 375px
- **Section spacing**: 120px desktop → 64px tablet → 40px mobile — reduces but preserves the editorial pace

### Image Behavior
- All product photography maintains its aspect ratio — typically 4:5 for product cards and 16:9 for editorial/campaign images
- Full-bleed hero panels extend edge-to-edge at every breakpoint — the botanical photography is non-negotiable at mobile
- Product images never crop to square; the portrait ratio preserves the brand's sense of lush verticality

---

## Agent Prompt Guide

### Quick Color Reference
- Page Background: Warm Linen (`{colors.background}`) — `#f9f5ef`
- Brand Surface: Garden Green (`{colors.surface}`) — `#2c3d2e`
- Primary Text: Near Black Warm (`{colors.ink}`) — `#1a1a18`
- Inverted Text: Linen (`{colors.on-surface}`) — `#f9f5ef`
- Primary CTA: Terracotta Rose (`{colors.primary}`) — `#c4785a`
- CTA Hover: Deep Terracotta (`{colors.primary-hover}`) — `#a85f44`
- Border: Warm Greige (`{colors.border}`) — `#c8bfb0`
- Badge Background: Blush (`{colors.primary-container}`) — `#e8d5c9`

### Example Component Prompts

- "Build a hero section with full-bleed botanical photography. Overlay text centered: headline in Canela weight 300 at 80px, line-height 1.0, color linen (`#f9f5ef`), sentence case. Subtext in Helvetica Neue 18px weight 400, 1.6 line-height, linen. Primary CTA: terracotta (`#c4785a`) fill, white text, Helvetica Neue 12px, 0.12em letter-spacing, uppercase, zero border-radius, padding 14px 32px."
- "Design a product card on linen (`#f9f5ef`) background, zero border-radius, no drop shadow, 1px solid `#c8bfb0` subtle border. Product image 4:5 ratio fills the top. Canela weight 300 28px title below, `#1a1a18`. Price in Helvetica Neue 15px. Hover: image scale 1.03 at 0.4s ease."
- "Create a full-bleed email subscription section in garden green (`#2c3d2e`). Canela weight 300 40px headline in linen (`#f9f5ef`). Email input: transparent bg, bottom border `1px solid #f9f5ef`, Helvetica Neue 15px linen text, no box radius. Submit: terracotta (`#c4785a`) fill, white Helvetica Neue 12px uppercase, zero radius, padding 14px 32px."
- "Build a navigation bar on linen (`#f9f5ef`). Flamingo Estate wordmark in Canela weight 300 centered. Nav links: Helvetica Neue 13px weight 400, `#1a1a18`, uppercase, 0.08em letter-spacing, no underline default, 1px bottom `#1a1a18` border on hover. Announcement bar above: garden green (`#2c3d2e`) fill, linen text at 10px Helvetica Neue 0.1em tracking."
- "Create a ghost button for use on garden green surfaces: transparent background, `1px solid #f9f5ef` border, Helvetica Neue 12px uppercase 0.12em tracking, linen (`#f9f5ef`) text, zero radius, padding 14px 32px. Hover: fill to `#f9f5ef`, text shifts to `#2c3d2e`."
- "Design a product badge: `#e8d5c9` blush background, `#1a1a18` text, Helvetica Neue 10px 0.1em tracking uppercase, zero border-radius, padding 4px 12px. Use for 'Best Seller' and 'Limited Edition' callouts above product card images."

### Iteration Guide

1. Anchor every layout in the linen/green alternation — `{colors.background}` for content, `{colors.surface}` for brand-anchoring sections. Never white, never neutral gray.
2. Set all headings in Canela weight 300, sentence case, at generous scale (40–80px for display moments).
3. Use Helvetica Neue for everything below 24px — body, nav, buttons, labels. Apply 0.08–0.12em tracking on uppercase UI text only.
4. Reserve terracotta (`{colors.primary}`) for one primary CTA and the focus ring per screen — its warmth is diluted by overuse.
5. Shape language: zero radius everywhere in the action system. Let the typography and photography carry all warmth; the containers are structural and still.
6. No drop shadows on cards. Depth comes from whitespace, color blocking (linen vs. green), and image scale — not shadow.
7. Spacing is editorial not commercial: minimum 64px between sections on desktop, 40px on mobile.
8. Motion is slow and natural: 0.4s ease-in for image hovers, 0.2s ease-in for link underlines and border transitions.
9. Photography sets the palette in every section — editorial lifestyle images lead, product-on-white never appears.
10. The Canela / Helvetica Neue contract is non-negotiable — one serif for romance, one grotesk for provenance. Never add a third voice.

---

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