---
version: alpha
name: "Glow Recipe"
description: "K-beauty-meets-California design system built on juicy fruit-forward pastels, a geometric all-caps wordmark face, and pill-heavy forms that make skincare feel playful and approachable."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#fdf6fa"          # soft blush white — off-white tinted with brand rose for section panels

  # Text / ink
  ink: "#272727"              # near-black for all primary body copy — rgb(39,39,39)
  ink-secondary: "#777777"    # mid-gray for metadata, secondary labels — rgb(119,119,119)
  on-background: "#272727"
  on-surface: "#272727"

  # Brand accent
  primary: "#c22f57"          # Glow Recipe signature berry rose — rgb(194,47,87); used in CTAs, borders, active states
  on-primary: "#ffffff"
  primary-container: "#fcedf7" # blush pink wash — rgb(252,237,247); used in soft CTA backgrounds and surface tints

  # State / interaction
  text-hover: "#000000"       # links darken to full black on hover — from dembrandt links.hover
  focus-ring: "#c22f57"       # matches primary for branded focus treatment
  focus-tint: "#fcedf7"       # light blush for focus background tint

  # Semantic
  success: "#2e7d32"          # standard accessible green — estimated, not extracted
  error: "#c62828"            # warm red for form validation — estimated, not extracted
  warning: "#f57f17"          # amber warning — estimated, not extracted

  # Borders
  border: "#cccccc"           # mid-gray hairline borders on dividers and inputs — rgb(204,204,204)
  border-strong: "#272727"    # full near-black border on primary outline buttons and strong separators
  border-accent: "#c22f57"    # brand-rose border on active/selected states — rgb(194,47,87)

  # Shadow tints
  shadow-soft: "#000000"      # was rgba(0,0,0,0.2) in source — flattened to black for shadow-tint reference; used as 0 0 18px at low opacity

typography:
  display-hero:
    fontFamily: "'Josefin Sans', 'Century Gothic', Futura, 'Trebuchet MS', sans-serif"
    fontSize: 45px
    fontWeight: 700
    lineHeight: 0.85
    letterSpacing: 0px
  display:
    fontFamily: "'Josefin Sans', 'Century Gothic', Futura, 'Trebuchet MS', sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  heading-section:
    fontFamily: "'Josefin Sans', 'Century Gothic', Futura, 'Trebuchet MS', sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  heading-sub:
    fontFamily: "'Josefin Sans', 'Century Gothic', Futura, 'Trebuchet MS', sans-serif"
    fontSize: 19px
    fontWeight: 900
    lineHeight: 1.0
    letterSpacing: 0px
  body-large:
    fontFamily: "'Josefin Sans', 'Century Gothic', Futura, 'Trebuchet MS', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.59
    letterSpacing: 0px
  body:
    fontFamily: "'Josefin Sans', 'Century Gothic', Futura, 'Trebuchet MS', sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  nav-link:
    fontFamily: "'Josefin Sans', 'Century Gothic', Futura, 'Trebuchet MS', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  button-ui:
    fontFamily: "'Josefin Sans', 'Century Gothic', Futura, 'Trebuchet MS', sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.9px
  label-allcaps:
    fontFamily: "'Josefin Sans', 'Century Gothic', Futura, 'Trebuchet MS', sans-serif"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.9px
  caption:
    fontFamily: "'Josefin Sans', 'Century Gothic', Futura, 'Trebuchet MS', sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 15px
  lg: 24px
  xl: 40px
  2xl: 60px
  3xl: 80px
  4xl: 120px

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

components:
  button-primary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 15px 30px
    border: "1px solid {colors.border-strong}"
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 15px 30px
    border: "1px solid {colors.ink}"
  button-secondary:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 15px 30px
    border: "1px solid {colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 15px 30px
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 18px
    border: "1px solid {colors.ink}"
  button-ghost-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 18px
    border: "1px solid {colors.border-strong}"
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 16px
  card-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 16px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 10px 12px
    border: "1px solid {colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 10px 12px
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.label-allcaps}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  badge-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-allcaps}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
---

# Glow Recipe Design System

## Overview

Glow Recipe occupies a rare position in beauty commerce: a brand identity that commits fully to delight without sacrificing credibility. The site's primary canvas is clean white (`{colors.background}`), but the brand's signature energy arrives through controlled doses of berry rose (`{colors.primary}`) and blush pink (`{colors.primary-container}`) — never applied everywhere, always applied with intent. The palette reads like a watermelon cross-section: mostly pale and fresh, with vivid saturated color concentrated at the core. This is K-beauty's fruit-forward aesthetic translated into a Shopify-powered e-commerce surface.

The typography system is built entirely on Josefin Sans, a geometric sans-serif with a distinctive low-x-height and clean circular forms. Where most beauty brands reach for a luxury serif at display scale, Glow Recipe leans on Josefin's uppercase geometry — it reads as modern and direct without the cool remove of a Swiss grotesque. Headings frequently use `uppercase` + `font-weight: 700` at medium sizes (18–45px) rather than giant wordmark moments, creating a clean categorical voice suited to product-first shopping. The overall effect is confident without being loud, playful without being juvenile.

The most distinctive UI choice is the **all-pill-all-the-time button system**. Every interactive CTA — "Shop Now," "Add To Bag," "View More," "Follow Us" — wraps itself in a `border-radius: 100px` or `200px` pill. This is not a soft override; it is the entire button language. Combined with `1px solid #272727` black borders on most button states, the pill CTAs read simultaneously soft (the silhouette) and graphic (the sharp black edge), which captures Glow Recipe's brand duality: Korean skincare ritual × California directness.

**Key Characteristics:**
- Josefin Sans (`{typography.display-hero}`) as the sole typeface — low x-height, geometric circles, distinctive at uppercase weight 700
- Clean white canvas (`{colors.background}`) with blush pink (`{colors.primary-container}`) as the only tinted surface
- Berry rose (`{colors.primary}`) appears in accents, active borders, and badge fills — never as a full-bleed hero color
- All primary and secondary CTAs use `{rounded.pill}` — border-radius at 100px–200px is non-negotiable
- `1px solid {colors.border-strong}` black borders on most buttons — graphic outline style, not filled blocks
- Uppercase + weight 700 + letter-spacing 0.9px for all button labels and category heads
- 8px spacing base with 7.5px as the dominant micro-unit (observed at 233 instances in dembrandt)
- `15px` border-radius as the card/image rounding sweet spot — softens product photography without going full-pill
- Shadow system is minimal: a single `0 0 18px rgba(0,0,0,0.2)` on elevated overlays only; all cards are flat
- Fruit-forward product photography drives all visual personality — the chrome steps back and lets watermelon, strawberry, and plum imagery do the work

## Colors

### Primary
- **Off-White Canvas** (`{colors.background}`): The default page background. Clean white, not cream. Every product listing, hero section, and navigation bar defaults to this surface.
- **Blush Panel** (`{colors.surface}`): A softly rose-tinted white used for section backgrounds, hover surfaces, and promotional content areas. The brand's version of "warm paper."

### Brand Accent
- **Berry Rose** (`{colors.primary}`): Glow Recipe's signature color — a medium-depth rose-berry (not hot pink, not burgundy). Applied to active borders, badge fills, accent text, focus rings, and the site's category-selection indicator. Never used as a page background or button fill.
- **Blush Wash** (`{colors.primary-container}`): The pastel tint of the brand rose — used as the background for soft secondary CTAs ("View more" button), badge containers, and hover surface tints.

### Text & Ink
- **Near-Black** (`{colors.ink}`): Primary text — headings, body copy, button labels, navigation, all set in `#272727` (not pure black). This slight softening takes the sharp edge off what would otherwise be a very high-contrast system.
- **Mid-Gray** (`{colors.ink-secondary}`): Secondary copy — ingredient callouts, sub-labels, price metadata. Lighter than the ink, never approaching the blush palette.

### Borders & Dividers
- **Border Default** (`{colors.border}`): `#cccccc` hairlines on select dropdowns, input separators, and soft dividers between product attribute groups.
- **Border Strong** (`{colors.border-strong}`): The workhorse border — `1px solid #272727` on all primary outline buttons, strong separators, and navigation underlines.
- **Border Accent** (`{colors.border-accent}`): Berry rose `1px solid` border on category-selected states, active filter pills, and highlighted element rings.

### Shadow
- The shadow system is deliberately thin. The focus ring uses a two-layer white + black outline (`rgb(255,255,255) 0 0 0 2.25px, rgb(0,0,0) 0 0 0 3.75px`) for accessibility. Elevated overlays (drawers, modals) use a single soft `rgba(0,0,0,0.2) 0 0 18px 0` — no decorative layering, no brand-tinted shadows.

## Typography

### Font Family
- **Primary**: `Josefin Sans`, with fallbacks `Century Gothic`, `Futura`, `Trebuchet MS`, `sans-serif`
- No secondary typeface — every typographic role uses Josefin Sans
- **OpenType Features**: `"lnum"` (lining numerals) applied globally — ensures consistent price formatting and product counts align vertically in grids

*Josefin Sans is a free Google Font. It is the closest publicly available match to its own proportions. No substitution needed.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Large hero callouts, campaign headlines, oversized product category heads — 45px weight 700, uppercase |
| `display` | Section titles, feature product headers, editorial intros — 28px weight 400 |
| `heading-section` | Sub-section heads, group labels, ingredient category titles — 22px weight 400 |
| `heading-sub` | Product card names, emphasized labels, ultra-bold accent text — 19px weight 900 |
| `body-large` | Hero description paragraphs, product story copy, marketing prose — 16px weight 400 |
| `body` | Standard product descriptions, review text, detail page copy — 15px weight 400 |
| `nav-link` | Navigation links, footer links — 16px weight 400 |
| `button-ui` | All button labels, CTA text — 16px weight 700 uppercase + 0.9px tracking |
| `label-allcaps` | Category tags, badges, filter chips, small all-caps labels — 13px weight 700 |
| `caption` | Metadata, legal copy, helper text, product attribute micro-labels — 13px weight 400 |

### Principles
- **Josefin Sans is the entire voice** — no serif guest appearances, no script accents, no secondary grotesque. One font family does all roles.
- **Uppercase is the display default** — major headings and all buttons run in uppercase. This is not shouting; at Josefin's geometric proportions, uppercase reads as clean and architectural rather than aggressive.
- **Weight polarity** — the system lives at weight 400 (body, nav) and weight 700 (display, buttons). Weight 900 exists for accent moments. Intermediate weights (500, 600) are avoided.
- **Letter-spacing reserved for uppercase UI** — the 0.9px tracking on `{typography.button-ui}` and `{typography.label-allcaps}` is intentional and specific. Body copy and headings run at 0px spacing.
- **Lining numerals throughout** — the `"lnum"` feature keeps price stacks, rating counts, and step numbers vertically aligned.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px, with 7.5px as the dominant micro-unit in the live implementation (used for fine padding inside card details, icon gutters, and product attribute rows).

Glow Recipe uses a compact-to-generous spread: tight chrome (3–8px inside interactive elements), moderate card padding (15–16px), and wide section breathing room (60–120px between major page zones). The rhythm feels purposeful rather than expansive — the brand is a product catalog first, not an editorial magazine.

### Grid & Container
- Max content width: approximately 1260–1500px (responsive breakpoints at 1260px and 1500px)
- Product grid: 4 columns at desktop, 2 at tablet, 1 at mobile; 15px gutters
- Hero: full-width photography with overlaid type and CTA, constrained to max-width on wide viewports
- Navigation: sticky top bar, white background, centered logo wordmark, right-side icons

### Whitespace Philosophy
- **Compact card density** — product grids are dense; the 15–16px card padding is modest, prioritizing product count on screen
- **Generous inter-section breathing** — between major page sections, 60–120px vertical margin maintains a clean editorial feel
- **Photography leads** — Glow Recipe's product photography (fruit textures, gel swatches, glassy skin) earns the space; the grid steps back to frame it

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Product cards, page canvas, the default |
| Hairline (Level 1) | `1px solid {colors.border}` or `{colors.border-strong}` | Form inputs, outline buttons, section dividers |
| Tinted Surface (Level 2) | `{colors.surface}` or `{colors.primary-container}` background | Soft CTA sections, hover panels, ingredient callout blocks |
| Overlay (Level 3) | `rgba(0,0,0,0.2) 0 0 18px 0` | Drawer overlays, modal backgrounds, cart sidebars |
| Focus Ring | `rgb(255,255,255) 0 0 0 2.25px, rgb(0,0,0) 0 0 0 3.75px` | Keyboard focus indicator — white halo + black outer ring |

**Shadow Philosophy**: Glow Recipe's elevation model is almost entirely flat. The brand energy lives in color, photography, and pill shapes — not in depth or layering. The one exception is the soft diffuse `box-shadow: rgba(0,0,0,0.2) 0 0 18px` on elevated overlays (cart drawer, modal), which separates the surface from the page without producing a "lifted" sense. The focus ring is the most visually distinctive depth treatment: a two-ring white-then-black outline that works on any surface color and doubles as a brand-consistent a11y affordance.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Hard-edged separators, select dropdown chrome, carousel track |
| `sm` | 4px | Image thumbnails, small chip containers |
| `md` | 8px | Text inputs, small form controls, tooltip containers |
| `lg` | 15px | Product card images, large panel images, content containers |
| `pill` | 9999px | All primary CTAs, secondary buttons, ghost buttons, filter tags, badges — the dominant shape |

Glow Recipe's radius language is strongly bimodal: either `15px` for images and cards, or full `pill` (100px–200px) for everything interactive. The brand avoids mid-range radii (20–80px) outside of pill buttons — if it's not an image, it's either a card corner or a pill. This binary is the system's most identifiable shape trait.

## 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`** — White fill, near-black `1px solid` border, full pill, Josefin Sans weight 700 uppercase 0.9px tracking. The default "Shop Now," "Add To Bag," "Follow Us" CTA. Hover inverts to black fill + white text.
- **`button-secondary`** — Blush `{colors.primary-container}` fill, near-black border, same pill shape. Used for "View more," softer promotional CTAs. Hover shifts to berry rose fill.
- **`button-ghost`** — Transparent fill, black border, pill. Used for tertiary actions, navigation supplementary links. Hover surfaces the blush tint.

### Cards
Product cards are flat white (`{components.card}`) with `{rounded.lg}` (15px) image rounding. No card-level shadow — products separate from the grid via whitespace and image contrast alone. On hover, the card background softens to `{colors.surface}` blush. Product image occupies the full card width, flush to top with the 15px radius visible.

### Inputs
Standard text inputs use `{rounded.sm}` (4px) with a `{colors.border}` gray hairline border. On focus, the border sharpens to `{colors.border-strong}` near-black — no glow, no ring. Email inputs in the newsletter module use a split layout: input and submit share a single pill container, with the input left-radius 7px and the submit full-pill.

### Badges / Tags
- **Accent badge** (`{components.badge-accent}`) — Berry rose fill, white text, pill. Used on "NEW," "BESTSELLER," product launch callouts.
- **Soft badge** (`{components.badge}`) — Blush wash fill, berry rose text, pill. Used for category tags, ingredient highlights, product attribute chips.

### Navigation
- Sticky white top bar with a subtle bottom shadow on scroll
- Logo centered in wordmark form — Josefin Sans weight 700 uppercase
- Left: hamburger on mobile, text links on desktop
- Right: search icon, account icon, cart icon with count badge
- Category mega-menu on hover: clean white dropdown, `{typography.nav-link}` text, `{colors.border-accent}` active indicator

## Do's and Don'ts

### Do
- Use `{rounded.pill}` on every interactive CTA — buttons, filter chips, badges, newsletter inputs
- Apply `{colors.primary}` as an accent detail: active borders, badge fills, focus states, not as a background
- Uppercase all button labels and major category heads; pair with weight 700 and 0.9px letter-spacing (`{typography.button-ui}`)
- Default to `{rounded.lg}` (15px) for product cards and imagery — the mid-soft corner that lets photography breathe
- Use `{colors.primary-container}` blush as the tinted surface for soft CTAs and section panels
- Let product photography carry all visual personality — fruit textures and gel swatches are the brand's illustration system
- Apply `1px solid {colors.border-strong}` black borders on outline buttons — graphic edge, not soft shadow
- Keep the page canvas at pure white (`{colors.background}`) — the contrast with brand color moments depends on it
- Use the two-ring focus indicator (white halo + black outer) for all keyboard-focusable elements

### Don't
- Don't use `{colors.primary}` berry rose as a page background or hero fill — it lives only as an accent
- Don't introduce a second typeface — Josefin Sans handles every role; adding a serif or different grotesque breaks the voice
- Don't use border-radius values between 20px and 80px — the system is `{rounded.lg}` (15px) for containers or `{rounded.pill}` for interactions; nothing in-between
- Don't set buttons in sentence case — Glow Recipe's button language is always uppercase, always Josefin Sans weight 700
- Don't add decorative drop shadows to product cards — flatness is the default; depth lives only in photography
- Don't use `{colors.primary}` in body copy or headings — it reads as an interaction affordance; using it for text creates confusion
- Don't add gradients to page backgrounds — the brand is solid color surfaces, not gradient washes
- Don't use weight 500 or 600 — the system polarizes at 400 (reading) and 700 or 900 (emphasis); intermediate weights introduce tonal muddiness

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <365px | Single-column, compact nav, condensed hero typography |
| Mobile | 365–600px | 1-col product grid, full-width CTAs, stacked nav controls |
| Tablet | 600–1050px | 2-col product grid, expanded nav labels, 24px section spacing |
| Desktop | 1050–1260px | 4-col grid, full mega-menu navigation, normal whitespace |
| Large Desktop | ≥1260px | Max-width container active, wide section padding (60–120px), full editorial layout |

### Touch Targets
- All pill buttons maintain a minimum 44px tap height at 15px top/bottom padding
- Icon hit areas (search, cart, account) are 44×44px minimum
- Product cards are fully tappable to the detail page — no separate small "Add" affordance on mobile listing
- Filter and badge chips maintain `{spacing.lg}` 24px minimum width for thumb tapping

### Collapsing Strategy
- **Navigation**: Horizontal mega-menu on desktop collapses to hamburger drawer on mobile; sticky top bar maintained at all breakpoints
- **Product grid**: 4-col → 2-col → 1-col; gutters stay at ~15px regardless of breakpoint
- **Hero layout**: Full-width photography with centered overlay text; text scales from 45px display-hero on desktop to ~24–28px on mobile
- **Section spacing**: 80–120px desktop → 40–60px mobile; comfortable but not wasteful
- **CTAs**: Full-width pill buttons on mobile; auto-width inline on desktop

### Image Behavior
- Product photography maintains square (1:1) or slightly portrait aspect ratios across all breakpoints
- Hero imagery reframes for portrait mobile — wider crops swap for tall portrait shots
- `{rounded.lg}` (15px) image rounding persists at every viewport size
- Hover zoom effects (subtle `scale(1.02)`) are disabled on touch devices

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (`#ffffff`)
- Primary text: `{colors.ink}` (`#272727`)
- Secondary text: `{colors.ink-secondary}` (`#777777`)
- Brand accent: `{colors.primary}` (`#c22f57`)
- Blush surface: `{colors.primary-container}` (`#fcedf7`)
- Soft surface panel: `{colors.surface}` (`#fdf6fa`)
- Strong border: `{colors.border-strong}` (`#272727`)
- Soft border: `{colors.border}` (`#cccccc`)
- CTA: Outlined pill, `1px solid {colors.border-strong}`, white fill

### Example Component Prompts

- "Create a Glow Recipe–style product card on `{colors.background}` with `{rounded.lg}` image corner radius. Product photography fills full card width in 1:1 ratio. Below: product name in Josefin Sans 19px weight 900 uppercase, price in 16px weight 400, an 'Add To Bag' CTA button using `{components.button-primary}` specs (white fill, `1px solid #272727` border, full pill `border-radius: 9999px`, weight 700 uppercase, 15px 30px padding). No card shadow."
- "Design a soft promotional banner section with `{colors.primary-container}` (`#fcedf7`) blush background, a `{typography.display-hero}` headline in Josefin Sans 45px weight 700 uppercase, a 2-sentence body paragraph in `{typography.body}`, and a 'Shop Now' CTA using `{components.button-secondary}` (blush fill, black border, pill). Center-align on desktop; stack left-align on mobile."
- "Build a pill-style filter chip row using `{components.badge}`: `{colors.primary-container}` fill, `{colors.primary}` text, Josefin Sans 13px weight 700 uppercase, `{rounded.pill}` border-radius, 4px 10px padding. Active state switches to `{components.badge-accent}`: `{colors.primary}` fill, white text. No border on either state."
- "Create a sticky navigation bar on `{colors.background}` white: centered Josefin Sans weight 700 uppercase logo in `{colors.ink}`, left hamburger icon (32×32px), right cart + account icons. Bottom border: `1px solid {colors.border}`. On scroll, add `rgba(0,0,0,0.2) 0 0 18px 0` shadow. No background color change."
- "Style a newsletter email input inside a pill: left half is a text input (Josefin Sans 15px weight 400, `{colors.ink}` text, no visible border), right half is a submit button with `{colors.ink}` background, `{colors.background}` white text, weight 700 uppercase. The whole container wraps in `border: 1px solid {colors.border-strong}` with `border-radius: 9999px`. Focus state adds `outline: rgb(255,255,255) 0 0 0 2.25px, rgb(0,0,0) 0 0 0 3.75px`."
- "Design an ingredient highlight badge in the product detail section: `{components.badge}` blush fill, `{colors.primary}` text, Josefin Sans 13px weight 700 uppercase, pill shape. Accompany with a 15px Josefin Sans weight 400 description paragraph in `{colors.ink}`. Use `{colors.surface}` blush panel as the section background. No dividers, no shadows."

### Iteration Guide

1. Start with pure white `{colors.background}` — never off-white or warm paper. The blush palette arrives via `{colors.primary-container}` and `{colors.surface}` on specific panels, not as a global canvas tint.
2. Use `{colors.primary}` berry rose only for accents: active borders, badge fills, focus indicators. If it appears as a large-area fill, it's out of system.
3. Make every interactive CTA a full pill (`border-radius: 100px` or `9999px`). This is non-negotiable. Pill = interactive.
4. Apply `1px solid {colors.border-strong}` black borders on outline buttons and strong form elements. The system is graphic-outline rather than filled-button.
5. Typography is Josefin Sans at weight 400 (body) or 700/900 (headings, buttons). Uppercase for buttons and category heads; sentence case for body and description copy.
6. Letter-spacing of 0.9px applies specifically to button and all-caps label contexts (`{typography.button-ui}`, `{typography.label-allcaps}`). Body copy stays at 0px.
7. Photography delivers all visual emotion. Keep chrome flat, white, and clean. If you're adding a gradient or a decorative illustration, you've left the brand.

---

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