---
version: alpha
name: "Summer Fridays"
description: "Token-first design system reference for Summer Fridays — a skincare brand built on indulgent warmth, script display lettering, and a near-navy dark canvas offset by cream and soft slate."

colors:
  background: "#ffffff"               # was #000418 (= same hex as ink → 1:1 body-contrast); fixed to white (the light canvas where ink reads); dark hero canvas uses surface-dark pattern
  surface: "#ffffff"
  surface-tint: "#d5d1ca"  # warm greige — borders, dividers, quiet separators
  ink: "#000418"
  ink-on-dark: "#ffffff"
  on-background: "#ffffff"
  on-surface: "#000418"
  primary: "#5c7899"  # slate blue — promo bar, accent badges, embedded widget fills
  on-primary: "#ffffff"
  primary-container: "#d5d1ca"  # greige — secondary surface, select borders
  border: "#d5d1ca"
  border-dark: "#000418"  # was rgba(0,4,24,0.3) at 30% — opaqued against white; Google format requires hex
  focus-ring: "#000418"
  error: "#ea3333"
  shadow-soft: "#424960"  # was rgba(66,73,96,0.4) — opaqued; Google format requires hex

typography:
  display-hero:
    fontFamily: "Expressa, 'Pinyon Script', cursive"
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: -0.75px
  display:
    fontFamily: "Expressa, 'Pinyon Script', cursive"
    fontSize: 45px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.13px
  heading-section:
    fontFamily: "'futura-pt', 'Jost', ui-sans-serif, system-ui, sans-serif"
    fontSize: 26px
    fontWeight: 450
    lineHeight: 1.15
    letterSpacing: -0.52px
  heading-sub:
    fontFamily: "'futura-pt', 'Jost', ui-sans-serif, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 450
    lineHeight: 1.28
    letterSpacing: -0.27px
  body-large:
    fontFamily: "'futura-pt', 'Jost', ui-sans-serif, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 450
    lineHeight: 1.4
    letterSpacing: 0.13px
  body:
    fontFamily: "'futura-pt', 'Jost', ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 450
    lineHeight: 1.25
    letterSpacing: 0.13px
  nav-link:
    fontFamily: "'futura-pt', 'Jost', ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 450
    lineHeight: 1.19
    letterSpacing: -0.14px
  button-ui:
    fontFamily: "'futura-pt', 'Jost', ui-sans-serif, system-ui, sans-serif"
    fontSize: 13px
    fontWeight: 450
    lineHeight: 1.31
    letterSpacing: 1.1px
  label-ui:
    fontFamily: "'futura-pt', 'Jost', ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 450
    lineHeight: 1.25
    letterSpacing: 0.78px
  caption:
    fontFamily: "'futura-pt', 'Jost', ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 450
    lineHeight: 1.25
    letterSpacing: 0.13px

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

rounded:
  none: 0px
  sm: 3px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 20px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 6px 12px
  button-secondary-hover:
    backgroundColor: "{colors.surface-tint}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 6px 12px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.surface}"
    borderColor: "{colors.surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 6px 12px
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 6px 12px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.none}"
    padding: 24px
  input:
    backgroundColor: "transparent"
    textColor: "{colors.surface}"
    borderColor: "{colors.surface}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 6px 12px
  input-focus:
    backgroundColor: "transparent"
    textColor: "{colors.surface}"
    borderColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 6px 12px
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 6px 12px
  badge-subtle:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.surface}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 6px 12px
  badge-filled:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 2px 8px
---

# Summer Fridays Design System

## Overview

Summer Fridays is a California skincare brand that dresses its digital presence the way its products feel — indulgent, warm, and unabashedly pleasurable. The homepage loads as a near-navy canvas (`{colors.background}`) saturated with lush product photography: soft-serve creams, glassy lip glosses, and warm berries that read more like a still-life painting than an e-commerce hero. The darkness is intentional — not moody-editorial but sumptuous, the digital equivalent of warm ambient candlelight. When the page shifts to white-surfaced product sections, the contrast feels like stepping into a sun-drenched boutique after a quiet evening walk.

The typographic centerpiece is **Expressa**, a sweeping script display typeface used for hero lettering, section words like "summer minis," and any moment that calls for tactile warmth. Its counterpart is **futura-pt** — a geometric sans deployed at a consistent weight 450 (medium-book), all-caps in buttons and labels, title-case in navigation. The pairing is a classic script-and-sans formula executed with restraint: Expressa owns the emotion, futura-pt owns the clarity. Letter-spacing on utility text (`{typography.button-ui}`, `{typography.label-ui}`) pushes to `0.78–1.1px`, giving the functional chrome a spa-menu quality that feels considered rather than generic.

The shape language is binary and soft: nearly everything in the system is either fully sharp (`{rounded.none}`) or a minimal `{rounded.sm}` corner — a 3px radius that removes the harshness of a hard edge without veering toward rounded-app territory. The one departure is the pill badge, which uses `{rounded.pill}` for its single outline-style variant. This restraint means that the signature softness of the brand lives in the photography and the script display typeface, not in the UI geometry.

**Key Characteristics:**
- Near-navy dark canvas (`{colors.background}`) for the hero and primary marketing sections — warm, not cold
- Expressa script display typeface at 45–60px — the emotional heart of every page
- futura-pt at weight 450 throughout — never bold, never thin; a consistent mid-weight confidence
- Button text set all-caps with `{typography.button-ui}` wide tracking (`1.1px`) — spa-menu signaling
- 3px radius (`{rounded.sm}`) as the single non-pill radius — sharp-leaning without harshness
- `{colors.primary}` slate blue (`#5c7899`) for promo bars, embedded widget fills, and accent badges — the brand's one cool-tone accent against the warm-dark canvas
- `{colors.surface-tint}` warm greige (`#d5d1ca`) for dividers, select-field borders, and quiet separators
- Product photography as color — berries, cream, amber, and mauve supply the warm palette; UI chrome stays in the dark-navy/white/slate register
- Outline-only (pill) badge variant in white-on-dark for promotional messaging on dark sections
- `0.3s linear` transition timing across all interactive states — unhurried, consistent, luxurious

## Colors

### Primary
- **Deep Navy** (`{colors.background}`): Primary page canvas for hero and marketing sections. `#000418` is darker than pure navy — reads as almost-black with a cool undertone, which lets the warm photography glow against it.
- **Pure White** (`{colors.surface}`): Product section backgrounds, card surfaces, modal fills, and all text that reads over the dark canvas.
- **On-Background** (`{colors.on-background}`): White text on the dark hero — nav links, promo bar copy, CTA labels in ghost-button state.

### Brand Accent
- **Slate Blue** (`{colors.primary}`): `#5c7899` — a muted, dusty blue that bridges warm and cool. Used for the promo/announcement bar background, embedded review widget fills, and the filled badge variant. This is the brand's one deliberate accent; it never appears as a primary CTA background in the core UI.

### Neutral & Structural
- **Warm Greige** (`{colors.surface-tint}`): `#d5d1ca` — borderlines, select-field outlines, and quiet dividers. This is the system's only neutral tint; it skews warm (very slight beige undertone) rather than grey-grey.
- **Border Dark** (`{colors.border-dark}`): Used for 1px strokes on inputs and UI elements that sit on light backgrounds. Originally `rgba(0,4,24,0.3)` in CSS — opaqued to `#000418` for token use; actual rendered value on white ≈ `#b3b4bf`.
- **Border** (`{colors.border}`): Warm greige for lighter dividers on white surfaces.

### Text States
- **Ink** (`{colors.ink}`): `#000418` — the same deep navy used for the canvas. On white surfaces, this is the primary text color. Using the brand's signature near-black rather than pure `#000000` keeps the system internally consistent.
- **Ink on Dark** (`{colors.ink-on-dark}`): White on dark sections.

### Semantic
- **Error** (`{colors.error}`): `#ea3333` — standard form validation, alert states.
- **Shadow Soft** (`{colors.shadow-soft}`): `#424960` — opaqued from `rgba(66,73,96,0.4)` for use in dropdowns and overlay lifts. The blue-grey tint ensures shadows harmonize with the `{colors.background}` canvas.

## Typography

### Font Family
- **Display**: `Expressa` — a custom script display typeface, self-hosted as `ExpressaEFHeavyRegular.woff2`. Sweeping, high-contrast, warm. No fallbacks exist that match it precisely; system `cursive` is the functional fallback.
- **Primary**: `futura-pt` — Adobe Fonts geometric sans, served via Typekit. Weight 450 throughout. Fallbacks: `Jost` (free Google Font, closest geometric match), then `ui-sans-serif, system-ui, sans-serif`.
- **Scripted accent**: `Pinyon Script` — a Google Font used in select moments (secondary display text, campaign sections). Weight 400, cursive. The brand's secondary script voice.
- **Utility (third-party)**: `Metropolis`, `Jost`, `Helvetica` appear in widget contexts only — do not use for primary UI.
- **OpenType Features**: Standard ligatures only. futura-pt is used at a fixed weight 450 with no variable-font axis; there are no declared `font-feature-settings` in the core system.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Hero statement lettering, campaign titles — Expressa 60px |
| `display` | Section titles, "summer minis" callouts — Expressa/Pinyon Script 45px |
| `heading-section` | Product section headings, editorial sub-titles — futura-pt 26px |
| `heading-sub` | Card titles, product names, smaller section labels — futura-pt 18px |
| `body-large` | Intro paragraphs, featured product descriptions — futura-pt 20px |
| `body` | Standard reading text, nav dropdowns, product descriptions — futura-pt 16px |
| `nav-link` | Top navigation links, footer links — futura-pt 16px, slightly tightened tracking |
| `button-ui` | All button labels, CTAs — futura-pt 13px, all-caps, `1.1px` tracking |
| `label-ui` | Section eyebrows, uppercase UI labels, badge text — futura-pt 16px, `0.78px` tracking |
| `caption` | Metadata, fine-print, form helpers — futura-pt 12px |

### Principles
- **Expressa belongs to the brand voice.** It appears only where emotional warmth is the primary goal — hero statements, campaign words, promotional headings. It never appears in functional UI: no button labels, no captions, no navigation in Expressa.
- **futura-pt at weight 450 is non-negotiable.** The system has no bold, no light, no thin. Weight 450 is the single futura-pt weight — consistent from navigation to captions. If the platform requires a Google Font substitute, use Jost at weight 400 (renders closest to futura-pt 450 in geometric feel).
- **All-caps + wide tracking for actions.** `{typography.button-ui}` and `{typography.label-ui}` use `text-transform: uppercase` with positive letter-spacing. This is the system's only stylistic transformation; body and heading text is set in title case or sentence case.
- **Negative tracking only at heading sizes.** `{typography.heading-section}` tracks at `-0.52px`, `{typography.heading-sub}` at `-0.27px`. Below 18px, tracking is neutral-to-positive.
- **Pinyon Script as secondary script accent.** Where Expressa is reserved for hero-size display, Pinyon Script appears at 45px for campaign sections that need a softer, more calligraphic feel. The two scripts should never appear together in the same viewport.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px, with the system leaning toward multiples of 3 and 6 for granular spacing (3px, 6px, 9px, 12px appear frequently in the raw data — reflecting Shopify's default padding grid). Macro section rhythm uses 36–48–64px gaps.

Summer Fridays uses whitespace generously in white-surfaced product sections and tightly in the dark hero — dense product photography is meant to feel abundant rather than airy. The whitespace philosophy switches registers between sections rather than holding a single tempo.

### Grid & Container
- Max content width: approximately 1440px (breakpoints extend to 1920px but content containers stay centered)
- Hero sections: full-bleed photography with text overlaid — no container constraint in the hero
- Product grid: 2-column on mobile, 3–4 column on desktop with consistent zero-radius image tiles
- Editorial / campaign sections: centered column at ~960–1200px with full-bleed background photography
- Navigation: full-width white bar, centered wordmark, left links and right utilities

### Whitespace Philosophy
- **Dark sections breathe tightly.** The hero and promo sections pack photography edge-to-edge; whitespace here comes from the dark canvas showing between elements, not from generous margins.
- **White sections are generous.** Product grids and ingredient/editorial sections open up with 48–64px vertical rhythm between rows.
- **Promo bar is the densest surface.** The `{colors.primary}` slate bar at the very top of the page is compact — tight vertical padding, small tracking-heavy text. It functions as a banner, not a content zone.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default for all cards, product images, buttons |
| Subtle (Level 1) | `rgba(66,73,96,0.4) 0px 0px 15px 0px` | Dropdown menus, overlay panels |
| Modal (Level 2) | `rgba(0,0,0,0.14) 0px 16px 24px 2px, rgba(0,0,0,0.12) 0px 6px 30px 5px, rgba(0,0,0,0.2) 0px 8px 10px -5px` | Popup modals (email capture, quiz overlays) |
| Focus Ring | `rgb(255,255,255) 0px 0px 0px 2px, rgba(0,4,24,0.3) 0px 0px 0px 3px` | Keyboard focus on interactive controls |

**Shadow Philosophy**: Summer Fridays is photographically elevated rather than shadow-elevated. The dark hero section creates natural depth by contrast — products glow against the near-navy background without any shadow stack. Shadows appear only for genuinely floating surfaces: the email-capture modal uses a three-layer Material-style stack to lift it convincingly above the photography; dropdown menus use a single bluish ambient drop (`{colors.shadow-soft}` tinted) to separate from the page. Inline cards, buttons, and product tiles are flat. The focus ring pattern is distinctive — a white ring followed immediately by a navy ring — which ensures keyboard focus is legible against both light and dark backgrounds simultaneously.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Product cards, editorial panels, full-width content sections |
| `sm` | 3px | Buttons, inputs, form controls — the signature edge-softening value |
| `pill` | 9999px | Outline badge variant on dark sections, carousel page dots |

Summer Fridays uses a near-binary radius language. The `3px` value is the system's single mid-gesture: present enough to feel intentional, small enough not to read as "rounded app." The only genuine pill elements are the promotional outline badges on the dark hero and the carousel dot indicators. Everything structural — cards, drawers, image tiles — is flat-cornered.

## 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`** — Dark navy background (`{colors.ink}`), white text, 3px radius, `{typography.button-ui}` uppercase with `1.1px` tracking. The primary "Shop Now," "Add to Bag," "Open skincare quiz" action. Compact 10px × 20px padding keeps it from feeling heavy.
- **`button-primary-hover`** — Transitions background to `{colors.primary}` slate on hover. A cool slate warmth that acknowledges the interaction without introducing a jarring hue.
- **`button-secondary`** — White background, navy text, same radius and padding as primary. Appears inside modals and on light surfaces where the dark primary would be too emphatic.
- **`button-secondary-hover`** — Background softens to warm greige (`{colors.surface-tint}`) on hover.
- **`button-ghost`** — Transparent background with a `{colors.surface}` white border. Appears on the dark hero sections where the background photography sits behind the button. Text and border are white.
- **`button-ghost-hover`** — Fills to solid white with navy text on hover — a clean inversion.

### Cards

Product cards are flat (`{rounded.none}`) on both the image tile and the surrounding panel. No border, no shadow. The product photography and its surrounding white surface are the card — there is no explicit card frame. Internal padding is 24px for text content. On dark background sections, cards may float on the near-navy canvas with no further treatment.

### Inputs

Email inputs in the newsletter capture and modal use a transparent background with a `{colors.surface}` white border on dark sections, and a transparent background with `{colors.border-dark}` on light sections. Radius: `{rounded.sm}`. Padding: 6px 12px. Focus state shifts the border to `{colors.ink}` and applies the layered white-then-navy focus ring. The focus ring formula (`2px white ring + 3px navy outer`) ensures legibility in all contexts.

### Badges / Tags

- **`badge`** — Filled slate (`{colors.primary}`) on white text. 3px radius. Used for product condition markers and small count indicators.
- **`badge-subtle`** — Outline style (white background, white border) on dark sections — the pill-shaped promotional badge that appears in hero overlay text.
- **`badge-filled`** — Compact slate fill, 3px radius, tighter padding. Used as an inline superscript-style count in product accordions.

### Navigation

Top navigation: full-width white bar, centered "SUMMER FRIDAYS" wordmark in `{colors.ink}`, left navigation links in `{typography.nav-link}`, right utility links (search, account, bag). Sticky on scroll. On dark hero sections, the nav sits above the dark canvas — the white background of the nav bar creates a clear horizon line separating it from the photography below. Links use underline decoration by default (`text-decoration: underline`) with `0.3s linear` color transitions.

## Do's and Don'ts

### Do
- Use Expressa for hero statements and campaign words only — it carries emotional weight and must stay elevated
- Set all button labels and eyebrow labels in `{typography.button-ui}` or `{typography.label-ui}` — all-caps, wide tracking — never title case
- Default to `{colors.background}` (`#000418`) for dark hero sections; never substitute a different dark shade
- Use `{colors.primary}` slate only for the promo bar, filled badges, and hover-state fills — preserve its role as a single cool-tone accent
- Apply the double-ring focus treatment (`2px white + 3px navy`) for keyboard focus on all interactive elements
- Keep image tiles at `{rounded.none}` — product photography looks most intentional without softened corners in this system
- Use `{colors.surface-tint}` warm greige for all border/divider strokes on light surfaces; reserve `{colors.border-dark}` for emphasized borders
- Reference `{typography.body}` at 16px futura-pt weight 450 for all standard body copy — the weight is fixed across the system
- Transition all button states at `0.3s linear` — the system's single timing value
- Let photography supply warmth; keep UI chrome in the dark-navy/white/slate trinity

### Don't
- Don't use Expressa or Pinyon Script in functional UI — not in nav links, buttons, captions, or form labels
- Don't introduce border-radius values beyond `{rounded.sm}` (3px) except for pill-shaped badge/dot elements
- Don't use a chromatic accent beyond `{colors.primary}` slate — no warm terracotta, no blush pink as UI chrome
- Don't apply mid-range shadows (4–12px lift) to product cards — the system is flat outside of genuine overlay surfaces
- Don't substitute futura-pt with a heavy geometric (e.g. Montserrat at 700) — the system's weight 450 read is fundamental to the aesthetic
- Don't use the three-layer modal shadow on anything below overlay-level elevation — it reads as distracting on inline surfaces
- Don't set nav or body text in all-caps — uppercase is reserved for button and label chrome, not reading text
- Don't use pure `#000000` for the page canvas or primary ink; `{colors.background}` (`#000418`) is the system's anchor dark

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <440px | Single column, Expressa hero drops to 32px, full-width ghost buttons |
| Mobile | 440–767px | Single column, 36–45px Expressa, stacked CTA layout |
| Tablet | 768–1023px | 2-column product grid begins, navigation condenses |
| Desktop | 1024–1279px | 3–4 column product grid, full nav, 60px Expressa hero |
| Large Desktop | ≥1280px | Full multi-column layout, max 1440px container, 60px Expressa |

The system declares a wide breakpoint set (376, 440, 480, 576, 640, 750, 767, 768, 800, 834, 853, 900, 992, 1024, 1200, 1279, 1280, 1440, 1536, 1600+). Most are micro-adjustments for Shopify section spacing. Treat 768 / 1024 / 1280 as the three meaningful layout shifts.

### Touch Targets
- Primary buttons: min 44px tap height via padding (10px top/bottom on 13px text = ~33px; may require explicit `min-height: 44px` on mobile)
- Navigation links: generous line-height padding ensures thumb-friendly zones
- Badge/pill elements: compact — rely on surrounding whitespace for tap area

### Collapsing Strategy
- **Nav**: Horizontal nav collapses to hamburger on mobile; slide-in overlay with category list
- **Hero**: Expressa scales from 60px → 36px; photography remains full-bleed and crops tighter
- **Product grid**: 4-column desktop → 3 tablet → 2 mobile
- **Section spacing**: 64–96px desktop → 36–48px mobile
- **Promo bar**: Remains full-width at all breakpoints; text truncates to single key message on mobile

### Image Behavior
- Product photography is full-bleed in hero sections at all viewport sizes — no margin gaps
- Product tiles remain zero-radius at all breakpoints — the flat corner is not relaxed on mobile
- Logo wordmark stays as text at all sizes; never reduces to a monogram

---

## Agent Prompt Guide

### Quick Color Reference
- Background (dark canvas): `{colors.background}` — `#000418`
- Primary text (on dark): `{colors.on-background}` — `#ffffff`
- Surface (white sections): `{colors.surface}` — `#ffffff`
- Primary text (on white): `{colors.ink}` — `#000418`
- Brand accent: `{colors.primary}` — `#5c7899`
- Divider / border: `{colors.surface-tint}` — `#d5d1ca`
- Focus ring: double ring — `2px white` then `3px #000418`
- CTA: `{components.button-primary}` — `#000418` bg, white text, 3px radius

### Example Component Prompts

- "Build a hero section on `{colors.background}` (`#000418`) with a full-bleed warm product photograph. Overlay the headline in Expressa (`{typography.display-hero}`) at 60px, weight 400, color `{colors.on-background}` (`#ffffff`), letter-spacing `-0.75px`. Below it, a ghost CTA using `{components.button-ghost}`: transparent background, `1px solid #ffffff` border, `{rounded.sm}` (3px radius), futura-pt 13px all-caps tracking `1.1px`."
- "Create a product card on `{colors.surface}` (`#ffffff`) with `{rounded.none}` image tile (no radius), no border, no shadow. Product name in `{typography.heading-sub}` (futura-pt 18px weight 450, tracking `-0.27px`). Price in `{typography.body}` (futura-pt 16px weight 450). Add-to-bag button using `{components.button-primary}`: `{colors.ink}` background, white text, `{rounded.sm}` (3px), `{typography.button-ui}` uppercase."
- "Build a promo/announcement bar at full width using `{colors.primary}` (`#5c7899`) background and `{colors.on-primary}` (`#ffffff`) text. Set copy in `{typography.label-ui}`: futura-pt 16px weight 450, all-caps, letter-spacing `0.78px`. Keep vertical padding to 9–12px."
- "Style an email capture input on a dark `{colors.background}` section: transparent background, `1px solid {colors.surface}` (`#ffffff`) border, `{rounded.sm}` (3px radius), futura-pt 16px weight 450 in white, padding 6px 12px. Focus state: border color stays white but the double-ring focus treatment fires: `box-shadow: rgb(255,255,255) 0px 0px 0px 2px, rgba(0,4,24,0.3) 0px 0px 0px 3px`."
- "Create a badge-subtle pill for a dark hero section using `{components.badge-subtle}`: transparent background, `1px solid {colors.surface}` (`#ffffff`) border, `{rounded.pill}` (9999px radius), futura-pt 13px weight 450 uppercase tracking `1.1px`, padding 6px 12px, white text. Use for promotional copy like 'New Arrival' or 'Limited Edition'."
- "Build a skincare quiz entry modal on `{colors.surface}` (`#ffffff`) with the three-layer Material shadow: `rgba(0,0,0,0.14) 0px 16px 24px 2px, rgba(0,0,0,0.12) 0px 6px 30px 5px, rgba(0,0,0,0.2) 0px 8px 10px -5px`. Modal heading in `{typography.heading-section}` (futura-pt 26px weight 450). Body copy in `{typography.body}`. Primary CTA: `{components.button-primary}` full-width."

### Iteration Guide

1. Start with `{colors.background}` (`#000418`) as the hero canvas — resist the urge to lighten it; the near-navy depth is the brand
2. Expressa is the emotional hook: place it first and let it set the scale before laying in futura-pt hierarchy
3. futura-pt weight 450 is fixed — never bold, never light; let size and case do the work of differentiation
4. All functional actions (buttons, labels, eyebrows) are set in uppercase with positive tracking; all reading text is mixed case
5. `{colors.primary}` slate (`#5c7899`) is reserved for the promo bar and accent fills — do not use it as a primary CTA background
6. Radius is nearly binary: flat (`{rounded.none}`) for structure, 3px (`{rounded.sm}`) for controls, pill only for badges and dots
7. Shadows exist only for overlay elevation — inline cards and buttons are flat; floating modals use the three-layer stack
8. Focus rings are always the double-white-then-navy pattern — it is the system's accessibility signature and must not be simplified
9. Photography is the palette: if you need warmth, add a product photo — never add a warm UI accent color
10. Transitions: `0.3s linear` for all interactive states; `0.2s ease` for overlay enter/exit

---

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