---
version: alpha
name: "Fishwife"
description: "Token-first design system for Fishwife — a tinned-fish brand built on retro-cannery joy, vivid illustrated color, and a warm rounded-serif personality."

colors:
  background: "#fffcf3"
  surface: "#73c3f5"      # sky-blue panel — primary hero canvas color
  surface-warm: "#fece59" # warm yellow — promo strip and accent panels
  surface-coral: "#fef0ed" # soft blush tint for secondary cards
  ink: "#010101"
  ink-muted: "#313131"    # --color--body--light; softer body text
  on-surface: "#010101"
  on-background: "#010101"
  primary: "#fdcd62"      # brand gold-yellow — primary CTA and badge fill
  on-primary: "#010101"
  primary-container: "#fece59" # deeper warm yellow for hero panels
  secondary: "#73c3f5"    # sky blue — hero background, secondary accent
  on-secondary: "#010101"
  alert-red: "#f04a49"    # --color-slider-caption-bg; slider captions, promo alerts
  badge-blue: "#387cc0"   # --color-product-badge-bg; product badges
  border: "#010101"       # 1px solid black throughout
  border-muted: "#e5e7eb" # light dividers
  focus-ring: "#fdcd62"   # gold focus outline, matches primary
  shadow-soft: "#c0b8a8"  # warm mid-tone for subtle elevation

typography:
  display-hero:
    fontFamily: "Recoleta, Playfair Display, Georgia, serif"
    fontSize: 70px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -1px
  display:
    fontFamily: "Recoleta, Playfair Display, Georgia, serif"
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  heading-section:
    fontFamily: "Recoleta, Playfair Display, Georgia, serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Recoleta, Playfair Display, Georgia, serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.11
    letterSpacing: 0.9px
  body-large:
    fontFamily: "Albert Sans, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px
  body:
    fontFamily: "Albert Sans, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "Recoleta, Playfair Display, Georgia, serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.4px
  button-ui:
    fontFamily: "Recoleta, Playfair Display, Georgia, serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  caption:
    fontFamily: "Albert Sans, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  label-upper:
    fontFamily: "Albert Sans, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: 0px
  micro:
    fontFamily: "Albert Sans, Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: 0px

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

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    border: 1px solid {colors.border}
  button-primary-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    border: 1px solid {colors.border}
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    border: 1px solid {colors.border}
  button-secondary-hover:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    border: 1px solid {colors.border}
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    border: 1px solid {colors.border}
  card-elevated:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-secondary}"
    rounded: "{rounded.lg}"
    padding: 24px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    border: 1px solid {colors.border}
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  badge-blue:
    backgroundColor: "{colors.badge-blue}"
    textColor: "{colors.background}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  badge-alert:
    backgroundColor: "{colors.alert-red}"
    textColor: "{colors.background}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
---

# Fishwife Design System

## Overview

Fishwife's website reads like the inside of an illustrated tin — vivid, immediate, and almost impossibly cheerful. The homepage opens on a sky-blue panel (`{colors.surface}`) that feels closer to the Mediterranean coast than a DTC product page, and a pop-up modal immediately confirms the energy: warm golden CTAs (`{colors.primary}`), coral product photography, and the rounded Recoleta serif set large and loose. Nothing here is restrained. The design language borrows from mid-century canning labels — bold chromatic stripes, saturated illustration, a serif that curves with personality — and deploys it at homepage scale, where every scroll is another panel of a vibrant, hand-felt graphic story.

The typography pairing is the system's backbone. Recoleta — a rounded slab-inspired serif built on the geometry of old-school display typefaces — handles every headline from 70px hero moments down to product card titles and button labels. It feels both retro and unmistakably contemporary, landing somewhere between a Saturday market chalkboard and a quality cookbook. Albert Sans runs everything utilitarian: body copy, captions, labels, fine print. The contrast isn't about scale alone — it's temperament, warmth against clarity, and together they evoke the personality of a brand that is both knowingly designed and genuinely joyful.

Color is where Fishwife earns its distinctiveness. Rather than a single hero accent, the system holds a full illustrated palette: the warm cream canvas (`{colors.background}`) anchors every section; golden yellow (`{colors.primary}`) sits on CTAs and badges; the signature sky blue (`{colors.surface}`) appears on hero panels and promotional backgrounds; coral red (`{colors.alert-red}`) fires on slider captions and alerts; and a confident deep blue (`{colors.badge-blue}`) marks product category badges. These colors don't compete — they rotate across sections the way a well-printed tin cycles through its label bands. Shadow is minimal and outline-heavy; the system relies on 1px solid black borders and vivid fills to assert depth rather than anything soft or blurred.

**Key Characteristics:**
- Warm cream canvas (`{colors.background}`) — near-white with a biscuit warmth, never clinical
- Golden yellow (`{colors.primary}`) as the primary CTA and badge fill — bright but grounded by black borders
- Sky blue (`{colors.surface}`) and warm yellow (`{colors.surface-warm}`) as the main hero panel colors — the illustrated-tin palette
- Coral accent (`{colors.alert-red}`) for high-alert moments: slider captions, promotional callouts
- Recoleta at weight 600 for all display headlines — rounded slab energy at 60–70px
- Albert Sans as the functional counterpart — clean, neutral, 14–20px for all body and UI text
- 1px solid black borders (`{colors.border}`) on every button, card, and interactive element — the printing-press frame
- Pill-shaped CTAs (`{rounded.pill}`) with black outlines and yellow fills — vintage-label button treatment
- Illustrated product photography sits against chromatic panel backgrounds (blue, yellow, coral) — product IS the art
- Generous 9px medium radius for inputs and compact components; pill for CTAs and badges; 16px for cards

## Colors

### Primary Canvas
- **Fishwife Cream** (`{colors.background}`): The base canvas — warm off-white, the inside of a clean linen napkin. Sets the non-clinical tone before a single color appears.
- **Near-Black Ink** (`{colors.ink}`): Primary text, borders, outlines. Not a design-system grey — one step from black, maintaining the print-quality crispness.
- **Body Charcoal** (`{colors.ink-muted}`): Softer body text from `--color--body--light`. Used for extended reading paragraphs where pure black would be fatiguing.

### Brand Accent & Panels
- **Fishwife Gold** (`{colors.primary}`): The signature CTA color — a warm, saturated golden yellow lifted directly from the tin label. All primary buttons and key badges wear this fill.
- **Warm Yellow Panel** (`{colors.primary-container}`): Slightly deeper yellow for hero panel backgrounds and promo strips — the full-bleed color behind headline moments.
- **Cannery Blue** (`{colors.secondary}`): Sky blue — the dominant hero-panel color. Rich, coastal, illustrative. Used as the primary hero section background.

### Semantic & Categorical Colors
- **Coral Red** (`{colors.alert-red}`): High-visibility accent for slider captions, promotional alerts, sale flags. The most chromatic member of the palette.
- **Deep Badge Blue** (`{colors.badge-blue}`): Product-category badges, informational tags. Distinct from the sky-blue panel color — this is a denser, more authoritative blue.

### Borders, Dividers & States
- **Hard Black** (`{colors.border}`): 1px solid black on all interactive components, cards, and frames. No grey borders in this system — the frame is always decisive.
- **Light Divider** (`{colors.border-muted}`): Hairline separators inside tables, list rows, footer columns.
- **Focus Gold** (`{colors.focus-ring}`): Focus state outline matches the primary gold — keyboard focus is visible and on-brand.

## Typography

### Font Family
- **Display / Headlines**: `Recoleta` — a warm, round-spurred serif built on early 20th-century display sensibilities. Closer to Tiffany or ITC Benguiat than a Swiss rational serif. Fallback: `Playfair Display, Georgia, serif`. Not available on Google Fonts natively — `Playfair Display` (available on Google Fonts) captures much of the rounded warm-serif character.
- **Body / UI**: `Albert Sans` — a geometric humanist sans-serif that provides functional clarity without the coldness of a pure grotesque. Available on Google Fonts. Fallback: `Inter, ui-sans-serif, system-ui, sans-serif`.
- **Recoleta also appears in buttons and UI labels** — the system leans into the serif for interactive chrome, which reinforces the brand warmth rather than splitting personality with a separate UI face.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Hero section headlines, splash screens — 70px Recoleta 600 |
| `display` | Section openers, large editorial moments — 60px Recoleta 400 |
| `heading-section` | Sub-section titles, product category headers — 48px Recoleta 500 |
| `heading-sub` | Card titles, feature callouts — 36px Recoleta 500, 0.9px tracking |
| `body-large` | Lead paragraphs, intro copy — 20px Albert Sans 400 |
| `body` | Standard reading text, product descriptions — 16px Albert Sans 400 |
| `nav-link` | Navigation links — 16px Recoleta 500 |
| `button-ui` | All button labels — 16px Recoleta 700 |
| `caption` | Fine print, metadata, footnotes — 14px Albert Sans 400 |
| `label-upper` | Uppercase labels, tags, categories — 14px Albert Sans 500 |
| `micro` | Tiny badge text, legal — 12px Albert Sans 700 |

### Principles
- **Recoleta is the brand voice at every size**: from 70px hero down to 16px button labels, the same rounded serif maintains warmth. There is no "safe" sans substitute for interactive text.
- **Albert Sans handles the functional tier**: body, captions, labels, utility copy. It reads cleanly at 14–20px without competing with the Recoleta display above it.
- **Weight as signal**: 600–700 in Recoleta = display authority; 400–500 = warmth and accessibility. Albert Sans 400 = legible prose; 500–700 = emphasis and badge text.
- **Letter-spacing is contextual**: tight negative tracking on hero display (`-1px`); natural spacing on body; slight positive tracking (0.4–1px) on uppercase labels and badges.
- **No all-caps body text**: uppercase is reserved for short labels and promo badges — the Recoleta personality doesn't survive being forced into all-caps at paragraph scale.

## Layout

### Spacing System
Base unit: 8px. The scale runs the Tailwind standard: 4, 8, 16, 24, 32, 48, 64, 96px. Dominant usage: 8px for inline gaps, 16px for component padding, 24–32px for card-level padding, 64–96px for section breathing room.

The spacing personality is direct and product-forward — panels stack without excessive white space between them. The color-blocking strategy (cream → blue → yellow → white) creates chapter separation without relying on vertical margin alone.

### Grid & Container
- Max content width: ~1440px with a practical column grid sitting at ~1200px
- Hero: full-bleed chromatic panels (sky blue, warm yellow) with centered text and product photography
- Product grid: 4-column on desktop, dropping to 2-column tablet, 1-column mobile
- Footer: multi-column navigation on a cream background, standard e-commerce structure

### Whitespace Philosophy
- **Color panels do the sectioning work**: shifts from cream to blue to yellow create clear visual chapters, so inter-section margins can be tighter
- **Product photography fills its container edge-to-edge**: no padding around product images on chromatic panel backgrounds
- **Internal card padding is generous**: 24px minimum inside product and content cards, breathing room for the serif type

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No border, no shadow | Chromatic panel backgrounds, hero fills |
| Outlined (Level 1) | `1px solid #010101` | Buttons, inputs, standard cards |
| Heavy Outlined (Level 2) | `2px solid #010101` | Featured product cards, emphasized frames |
| Product Badge | Solid color fill, pill-shaped, no shadow | Category badges, promo tags |
| Focus Ring | `2px solid {colors.focus-ring}` offset | Keyboard-accessible interactive states |

**Shadow Philosophy**: Fishwife has a near-shadow-free elevation model. Depth is asserted through three mechanisms — outline weight (1px vs 2px solid black), surface color (cream vs sky blue vs yellow), and typographic scale. The printing-press aesthetic means every element either sits flat on its canvas or is framed by a decisive border. The one concession is a soft warm shadow tint (`{colors.shadow-soft}`) for modals and overlapping drawers, where a pure-flat composition would feel jarring.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Panel bleeds, full-width section backgrounds, images in chromatic frames |
| `sm` | 4px | Very compact UI chips, tight table cells |
| `md` | 9px | Inputs, compact components, search fields |
| `lg` | 16px | Product cards, content cards, modal panels |
| `pill` | 9999px | All primary and secondary CTAs, category filter chips, badges |

The system is bimodal: most interactive chrome is either decisively pill-shaped (buttons, badges, tags) or modestly rounded (cards at 16px, inputs at 9px). The 9px medium radius is sourced directly from the dembrandt extraction (`border-radius: 9999px` on swiper bullets, 9px on form inputs). This creates a friendly, non-sharp feel without drifting into the soft-rounded excess of some DTC brands.

## 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`** — Golden yellow fill (`{colors.primary}`), black text, 1px solid black border, pill-shaped. The signature brand CTA. Used for "Add to Cart," "Shop Now," and modal confirmation actions.
- **`button-secondary`** — Cream fill (`{colors.background}`), black text, 1px solid black border, pill-shaped. Appears alongside primary on product pages and in pop-up modals ("Not yet, I'm curious").
- **`button-primary-hover`** / **`button-secondary-hover`** — Warm yellow deepens slightly; secondary picks up a light warm-yellow fill on hover. Border and text remain black throughout.

### Cards

- **Standard Card**: cream background, 1px solid black border, 16px radius, 24px padding. Product cards and editorial feature blocks.
- **Chromatic Panel Card**: sky-blue (`{colors.surface}`) or warm-yellow background, no border, 0px radius (full-bleed). Hero sections and promo strips use these as section containers rather than discrete cards.

### Inputs

Clean inputs with 9px radius, 1px solid black border, 12px 16px padding. Focus state upgrades the border to `{colors.focus-ring}` gold — visible and on-brand. Placeholder text in `{colors.ink-muted}`.

### Badges / Tags

Three flavors reflecting the CSS variable palette:
- **Gold badge** (`{components.badge}`): Primary product highlight — "NEW," "LIMITED," bestseller marks
- **Deep blue badge** (`{components.badge-blue}`): Product category identifiers
- **Coral badge** (`{components.badge-alert}`): Sale, promo, alert signals

All badges are pill-shaped with a 14px Albert Sans 500 label — legible at small sizes and consistent with the overall button language.

### Navigation

The header uses a cream background (`{colors.background}`) with the Fishwife wordmark logo centered or left-aligned, accompanied by cart and account controls. Nav links use Recoleta 16px weight 500 — the brand voice is present even in chrome. Hover state: color shifts to `--color--alternative` (matching the CSS variable extraction). A sky-blue or warm-yellow promo strip (`{colors.surface-warm}`) sits above the main nav for sale alerts and shipping messages.

## Do's and Don'ts

### Do
- Use `{colors.background}` (warm cream) as the base canvas — it reads as clean without the clinical coldness of pure white
- Apply `{colors.primary}` gold exclusively to primary CTAs, badges, and featured highlight moments — its saturation earns attention
- Use `{colors.surface}` sky blue and `{colors.surface-warm}` warm yellow as hero panel fills — rotate them across sections like illustrated tin bands
- Set all display and button text in Recoleta — the rounded serif is the brand voice at every scale
- Apply 1px solid black borders (`{colors.border}`) to every button, input, and card — the printing-press frame is non-negotiable
- Size primary CTAs with pill radius (`{rounded.pill}`) — every interactive action should read as a label-shaped button
- Use `{colors.alert-red}` coral sparingly and specifically: promo banners, sale flags, urgent alerts — not for decorative panels
- Maintain the Albert Sans / Recoleta pairing: Recoleta for warmth and personality, Albert Sans for clarity and utility
- Size product photography to fill chromatic panel backgrounds edge-to-edge — the product IS the illustration
- Keep the Recoleta weight between 400 and 700 depending on hierarchy — never introduce a third display face

### Don't
- Don't use pure white (`#ffffff`) for the page canvas — the warm cream offset (`{colors.background}`) is the base
- Don't remove the 1px solid black border from buttons — outline-free buttons lose the label-printing character
- Don't use `{colors.surface}` sky blue as a text color — it's a panel fill, not an ink color
- Don't use `{colors.alert-red}` for non-alert purposes — it reads as urgent and loses impact if overused
- Don't swap Recoleta in button labels for Albert Sans — the brand voice breaks if CTAs speak in the functional register
- Don't introduce mid-range border-radius (4–12px) on buttons — the system is binary: inputs at 9px, everything interactive at pill
- Don't add soft drop shadows to product cards — chromatic fills and black borders create sufficient depth
- Don't use `{colors.badge-blue}` as a general accent — it's reserved for product category labels
- Don't stack two chromatic panels of the same color — the illustrated-tin rhythm depends on alternation (cream, blue, yellow, cream)
- Don't set Recoleta body text below 16px — the rounded spurs become muddy at caption scale; use Albert Sans below 16px

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <480px | Single column, display drops to 40–48px, hero panels stack |
| Mobile | 480–768px | Single column, 56px display, stacked product grid |
| Tablet | 768–1024px | 2-column product grid, 60px display, nav collapses to hamburger |
| Desktop | 1024–1440px | Full 4-column product grid, 70px display, full nav |
| Large Desktop | >1440px | Max-width container at ~1440px, section padding expands |

The 25 breakpoints extracted by dembrandt include many Tailwind utility variants (1800, 1536, 1279, 1199, etc.) — the primary design breakpoints are the standard mobile/tablet/desktop trio.

### Touch Targets
- Primary CTAs: 44px minimum tap height via 12px vertical padding + Recoleta 16px line-height; pill shape provides generous horizontal width
- Product cards: entire card is tappable
- Navigation links: 44px minimum tap area with padding

### Collapsing Strategy
- **Hero chromatic panels**: stack vertically on mobile; text centers over product photography rather than sitting beside it
- **Product grid**: 4-col → 2-col → 1-col. Card border and radius maintained throughout
- **Navigation**: horizontal nav → hamburger drawer with full-screen overlay
- **Display type**: 70px → 56px → 40px progressive reduction; weight stays 600, tracking tightens proportionally

### Image Behavior
- Product photography fills its containing panel on all breakpoints — no fixed image height on mobile
- Illustrated label art on product cards maintains aspect ratio; cards reflow around it
- Hero panel photography scales responsively; focal point stays centered on small screens

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Primary text / borders: `{colors.ink}`
- Body text: `{colors.ink-muted}`
- Brand gold CTA: `{colors.primary}`
- Cannery blue panel: `{colors.surface}`
- Warm yellow panel: `{colors.primary-container}`
- Coral alert: `{colors.alert-red}`
- Category badge blue: `{colors.badge-blue}`
- Border: `1px solid {colors.border}`
- Focus ring: `{colors.focus-ring}`

### Example Component Prompts

- "Create a hero section with a sky-blue background (`{colors.surface}`). Headline in Recoleta 70px weight 600, color `{colors.ink}`, letter-spacing -1px, line-height 1.1. Below the headline, two pill-shaped CTAs side by side: primary in `{colors.primary}` yellow with `{colors.ink}` text and `1px solid {colors.border}` border; secondary in `{colors.background}` cream with same border. Centered layout, product can label photography fills the right half of the panel."
- "Build a product card: cream background (`{colors.background}`), 16px border-radius, 1px solid `{colors.ink}` border, 24px padding. Product title in Recoleta 22px weight 500, color `{colors.ink}`. Price in Recoleta 18px weight 700. A gold badge (`{colors.primary}` fill, `{colors.ink}` text, pill-shape, 4px 10px padding, 14px Albert Sans weight 500) in the top-left corner of the product image."
- "Design a promo banner: warm yellow panel (`{colors.primary-container}`), full-width, 48px height. Center text in Albert Sans 14px weight 500 uppercase `{colors.ink}`. Left and right chevron arrows in `{colors.ink}`. 1px solid `{colors.border}` along the bottom edge."
- "Create a newsletter signup row: cream background, Recoleta 36px weight 500 headline `{colors.ink}`. Inline email input at 9px radius, 1px solid black border, 12px 16px padding, Albert Sans 16px, followed immediately by a pill CTA button in `{colors.primary}` gold with Recoleta 16px weight 700 label."
- "Render a category filter bar: row of pill chips in `{colors.background}` cream, 1px solid `{colors.border}` border, 4px 10px padding, 14px Albert Sans weight 500 text. Active chip flips to `{colors.primary}` yellow fill, same border and text color. Chips use `{rounded.pill}` throughout."
- "Build a product page badge cluster: left-aligned row. Category badge in `{colors.badge-blue}` deep blue, white text, pill-shape, 14px Albert Sans 500. Sale badge in `{colors.alert-red}` coral, white text, same treatment. New badge in `{colors.primary}` gold, `{colors.ink}` text."

### Iteration Guide

1. Start on warm cream (`{colors.background}`) — it's the label stock; never use pure white
2. Rotate section backgrounds through the illustrated-tin palette: cream → sky blue (`{colors.surface}`) → warm yellow (`{colors.primary-container}`) → cream
3. Every button is a label: pill-shaped (`{rounded.pill}`), gold fill, 1px solid black border, Recoleta 16px 700 text
4. Recoleta carries display and interactive voice; Albert Sans handles prose, metadata, and labels
5. Black borders (`1px solid {colors.border}`) on every interactive component — the printing-press frame is the depth system
6. Reserve coral (`{colors.alert-red}`) and deep blue (`{colors.badge-blue}`) for semantic signals: urgency and category
7. Product photography is illustration — place it directly against chromatic panels without shadows or frames

---

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