---
version: alpha
name: "Saie"
description: "Token-first design system reference for Saie — clean, sun-drenched beauty with warm-near-black ink, a signature periwinkle accent, sharp 0px corners, and editorial close-up photography."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f7f7f7"          # light neutral panel — approximated from tertiary sections
  surface-dark: "#1b2121"     # deep warm-charcoal — the brand's near-black, used for overlays and dark panels

  # Text / ink
  ink: "#1b2121"               # primary text — rgb(27,33,33); all headings, body, nav labels
  ink-muted: "#767676"         # secondary metadata — approximated mid-gray for placeholders and captions
  on-background: "#1b2121"
  on-surface: "#1b2121"

  # Brand accent
  primary: "#1b2121"           # warm near-black — fills primary CTAs, borders, announcement bar
  on-primary: "#ffffff"
  primary-container: "#f2f2f2" # light container for low-emphasis surfaces — approximated from neutral panels

  # Saie accent — the signature periwinkle/lavender
  accent: "#c0c0da"            # periwinkle blue — rgb(192,192,218); announcement bar, selected states, link accents
  accent-muted: "#91889d"      # dusty mauve — rgb(145,136,157); CTA text links, muted accent moments

  # State / interaction
  text-hover: "#202828"        # darkened near-black on hover — approximated from dembrandt hover data
  focus-ring: "#0018ff"        # extracted CSS variable --vw-focus-outline-color
  focus-tint: "#0018ff"

  # Borders
  border: "#1b2121"            # 1px solid — buttons, inputs, primary dividers
  border-light: "#f2f2f2"      # 2px solid rgb(242,242,242) — light dividers and card separators

  # Shadow tints
  shadow-soft: "#6c6c6c"       # approximated from rgba(108,108,108,0.15) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Ordinary-Display, Arial, sans-serif"
    fontSize: 52px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: 0px
  display:
    fontFamily: "Ordinary-Display, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: 0px
  heading-section:
    fontFamily: "Ordinary-Display, Arial, sans-serif"
    fontSize: 25px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Ordinary-Display, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: 0px
  body-large:
    fontFamily: "Ordinary-Display, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0px
  body:
    fontFamily: "Ordinary-Display, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0px
  nav-link:
    fontFamily: "Ordinary-Display, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0px
  button-ui:
    fontFamily: "Ordinary-Display, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0.5px
  label-ui:
    fontFamily: "Ordinary-Display, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0.5px
  caption:
    fontFamily: "Ordinary-Display, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0.3px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 30px
  2xl: 40px
  3xl: 60px
  4xl: 102px

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 40px
  button-primary-hover:
    backgroundColor: "{colors.text-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 40px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 40px
    borderColor: "{colors.primary}"
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 40px
    borderColor: "{colors.primary}"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 40px
    borderColor: "{colors.on-primary}"
  button-ghost-hover:
    backgroundColor: "{colors.on-primary}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 40px
    borderColor: "{colors.on-primary}"
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 16px
  card-product:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 8px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px
    borderColor: "{colors.focus-ring}"
  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
  modal:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 32px
  announcement-bar:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 8px 20px
---

# Saie Design System

## Overview

Saie ("Say It") is a clean beauty brand that shows up on screen the way its products promise to feel on skin: effortless, sun-warm, and uncluttered. The homepage opens on close-cropped golden photography — a glowing cheek, a mascara wand, a pair of lips mid-smile — and the digital frame refuses to compete. The primary canvas is pure white (`{colors.background}`) with a deep warm-charcoal (`{colors.primary}`) doing virtually every active job: nav bar, button fills, body text, borders. Everything resolves from one near-black and two supporting tones, which gives the experience the calm authority of a well-designed beauty counter rather than the shouted sales floor of most DTC cosmetics.

The signature note is the periwinkle: a soft lavender-blue (`{colors.accent}`) that slides in on the announcement bar, selected-state buttons, and CTA accent links. It's the only real chromatic break in an otherwise monochromatic system, and it reads instantly as "clean beauty meets something unexpectedly sunny" — not the cool-blue of a tech brand or the muted sage of a wellness brand but something softer, more optimistic. Paired with the dusty mauve `{colors.accent-muted}` that appears on underlined CTA links, it forms a quiet palette extension that says the brand has a point of view beyond "neutral minimum."

The typeface is Ordinary-Display — a self-hosted geometric sans with multiple weight axes (Thin, Regular, Medium, Heavy, Bold) that Saie uses with considerable range. Headings at weight 500 read slightly punchy; body at weight 400 stays calm. The brand consistently uses uppercase transforms on its smaller labels and button text at weight 500, which gives the chrome a clean, editorial-label quality without the luxury-brand aggression of all-caps display headings. Sharp 0px corners on every interactive element reinforce the precision: this is not a brand that softens edges.

**Key Characteristics:**
- Ordinary-Display is the sole typeface — all weights from Thin to Heavy, across every typographic role
- Warm near-black `{colors.primary}` (#1b2121) as the primary ink, CTA fill, and border color — no pure black
- Periwinkle `{colors.accent}` (#c0c0da) is the brand's only chromatic accent — announcement bars, selected states, link accents
- Sharp `{rounded.none}` (0px) corners on every button, input, and card — zero softening
- Uppercase transforms on button labels, micro-copy, and UI labels — editorial precision at small sizes
- Photography-led layout — editorial close-ups of skin, lips, and lashes drive the hero and product narrative
- Dark overlay panels use `{colors.surface-dark}` (#1b2121) as a surface, with white type and ghost buttons
- 1px solid `{colors.border}` (#1b2121) as the universal interactive-element outline
- 0.4s ease transitions across button color, background, and border properties
- `badgeRotate` keyframe on rotating badge elements — a signature sunburst badge motif
- Spacing leans on 20px and 60px rhythms; section breathing room at 60–102px
- `{colors.focus-ring}` (#0018ff) for keyboard focus — accessible vivid blue against the near-black palette

## Colors

### Primary
- **Saie Near-Black** (`{colors.primary}`): The brand's anchor tone. Warm deep charcoal rather than pure black — distinguishes Saie's warmth from clinical cosmetics. Applied to primary CTA fills, nav background, body text, and all border lines.
- **Pure White** (`{colors.background}`): Default page canvas. Clean and bright against the warm photography.
- **Light Surface** (`{colors.surface}`): Subtle off-white for tertiary sections, hover states, and low-emphasis zones.

### Brand Accent
- **Saie Periwinkle** (`{colors.accent}`): The chromatic signature — a soft lavender-blue appearing in the announcement bar, on selected pill buttons, and as accent link color. It reads warm rather than cold because it sits alongside `{colors.primary}` rather than pure black.
- **Dusty Mauve** (`{colors.accent-muted}`): The secondary accent tone, used on CTA text links with an underline decoration. A muted bridge between the near-black base and the periwinkle highlight.

### Text States
- **Primary Ink** (`{colors.ink}`): Body copy, nav links, price text — same warm near-black as the brand.
- **Muted Ink** (`{colors.ink-muted}`): Placeholders, helper text, secondary captions.
- **On-Dark** (`{colors.on-primary}`): White text and ghost button text on `{colors.primary}` or `{colors.surface-dark}` surfaces.

### Borders & Focus
- **Border** (`{colors.border}`): 1px solid on buttons, inputs, and interactive containers — consistent with the near-black ink.
- **Border Light** (`{colors.border-light}`): 2px dividers on cards and grid separators — a near-invisible neutral.
- **Focus Ring** (`{colors.focus-ring}`): Vivid accessible blue (#0018ff) for keyboard focus outlines.

### Shadow Tints
- **Shadow Soft** (`{colors.shadow-soft}`): Base for the light dropdown shadow — `rgba(108,108,108,0.15) 0px 10px 10px 0px`, approximated opaque.

## Typography

### Font Family
- **Primary**: `Ordinary-Display` — a self-hosted geometric sans (Thin, Regular, Medium, Heavy, Bold weights). Fallback: `Arial, sans-serif`. The Regular and Medium weights are the daily workhorses; Heavy appears for display moments.
- **OpenType Features**: No variable fonts detected. Multiple static weights loaded (`Ordinary-DisplayRegular`, `Ordinary-DisplayMedium`, `Ordinary-DisplayHeavy`). Standard ligatures.

*Note: Ordinary-Display is a commercial typeface. For external implementations, Geist, DM Sans, or Plus Jakarta Sans serve as close geometric-sans substitutes.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Campaign hero headings, feature section titles at large scale |
| `display` | Page-level section headings, collection titles — uppercase, weight 500 |
| `heading-section` | Section headings, product category labels — tight 1.05 line height |
| `heading-sub` | Sub-section titles, product names |
| `body-large` | Intro paragraphs, callout copy |
| `body` | Standard product copy, descriptions, checkout text |
| `nav-link` | Navigation links, footer columns — weight 400, normal tracking |
| `button-ui` | All CTA labels — weight 500, uppercase, slight tracking |
| `label-ui` | Form labels, badge text, UI micro-labels — weight 500, uppercase |
| `caption` | Legal copy, product size/variant labels, fine print — weight 500, uppercase |

### Principles
- Uppercase at small sizes is the brand's editorial signal — button labels, micro-labels, and captions all transform to uppercase at weight 500, creating a clean label hierarchy without bold.
- Weight 500 is the ceiling for body contexts; display headings that need emphasis stay at 500 rather than pushing to bold.
- The single typeface family across all weights creates a seamless visual system — no serif guest appearances, no script flourishes.
- Line height is uniformly tight (1.05) on headings and 1.30 on body — Saie's rhythm is crisp and forward-moving, not leisurely.
- No tracked-out display text — letter-spacing stays at 0px on headings and only opens slightly (+0.3–0.5px) on labels and captions for legibility.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px (with 10px, 20px as high-frequency values).

Saie's spacing has a particular 20px preference — it appears 69 times in computed styles, functioning as the brand's modal "md" value that sits between 16px and 24px. Section breathing room lives at 60–102px vertical padding. Inner padding on buttons and inputs is compact (10–12px vertical), which keeps the chrome tight and lets photography breathe.

### Grid & Container
- Max content width: approximately 1280–1440px; Tailwind CSS handles responsive column breakpoints
- Hero: full-bleed photography with overlaid text, no container constraint
- Product grid: 4 columns at desktop, 2 at tablet, 1 at mobile
- Content sections use 60–102px top/bottom padding for section cadence
- Announcement bar is full-width, edge-to-edge, in `{colors.primary}` with `{colors.on-primary}` text

### Whitespace Philosophy
- Photography drives pacing — where other brands use whitespace alone, Saie relies on full-bleed editorial images to create visual rest between product sections.
- Tight button and input chrome (10–12px padding) keeps forms and CTAs efficient rather than roomy.
- Section-level whitespace (60–102px) provides the editorial authority that matches the brand's photography.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page canvas, hero photography |
| Hairline (Level 1) | `1px solid #1b2121` | Button outlines, input borders, interactive element outlines |
| Light Divider (Level 1 alt) | `2px solid #f2f2f2` | Card grid separators, section dividers |
| Card Hover (Level 2) | `rgba(108,108,108,0.15) 0px 10px 10px 0px` | Dropdown menus and flyout panels |
| Dialog (Level 3) | `rgba(0,0,0,0.16) 0px 5px 40px 0px` | Modal overlays, cart drawer emergence |
| Focus Ring | `#0018ff 0px 0px 0px 3px` | Keyboard navigation — vivid blue accessible ring |

**Shadow Philosophy**: Saie's depth model is nearly border-first. The 1px solid `{colors.border}` line defines every interactive element — buttons, inputs, select fields — and functions as the system's depth cue at rest. Drop shadows appear only at modal and dropdown level, where genuine emergence from the page needs expressing. The light card-hover shadow (`{colors.shadow-soft}`) is restrained at 15% opacity so it reads as a soft ambient lift, not product-card theatre.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | All buttons, inputs, cards, modals — the universal default |
| `sm` | 4px | Inline highlight marks (`<mark>` element), micro UI accents |
| `md` | 8px | Soft card variant — used occasionally in third-party embedded panels |
| `lg` | 20px | Highlighted text callouts and promotional bubble elements |
| `pill` | 9999px | Announcement bar chips, rotating badge callouts, select swatch pills |

Saie's shape system is overwhelmingly sharp. The 50%/100% radius values extracted (196 instances) apply exclusively to circular icon buttons and swatch indicators — not to CTAs or cards. The brand-facing interactive system is binary: square for everything that matters, circle/pill only for ornamental elements like rotating sunburst badges.

## 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`** — filled `{colors.primary}` (#1b2121) rectangle with 0px radius, white text in Ordinary-Display weight 500 uppercase, 12px 40px padding. The core CTA across the site: "Add to Bag", "Shop Now", "Continue".
- **`button-secondary`** — white fill with `1px solid {colors.border}` outline, same sharp rectangle. Used for secondary actions sitting on white surfaces: "About Us", "Learn More".
- **`button-ghost`** — transparent fill with white `2px solid` border — appears on `{colors.surface-dark}` hero panels where the photography provides the background. "Shop Now" on dark overlaid hero sections.

### Cards

- **`card-product`** — white canvas, 0px radius, no shadow at rest. Product photography fills the card top edge-to-edge. Title in `{typography.body}` `{colors.ink}`, price below in the same font. 8px base padding.
- **`card`** — general editorial panel at 16px padding. No border, no radius — just whitespace and photography doing the work.

### Inputs

- Email and newsletter inputs: `{colors.background}` fill, `1px solid {colors.border}` outline, 0px radius, 10px padding. Focus state switches border to `{colors.focus-ring}` (#0018ff) with a 3px offset ring via the `--link-color-high-contrast` CSS variable. No label animation — placeholder text.

### Badges / Tags

- Product badges use `{colors.accent}` (#c0c0da) periwinkle fill, `{colors.primary}` text, `{typography.caption}`, and `{rounded.pill}`. Reads as a soft chromatic signal against white product cards — "NEW", "SALE", variant labels.
- The rotating sunburst badge (`badgeRotate`, 20s linear keyframe) uses circular clip with uppercase micro-text — a signature Saie decorative element applied to "NEW SHADES", "LIP LINER" callouts.

### Announcement Bar

- **`announcement-bar`** — `{colors.primary}` (#1b2121) full-width bar with white caption text, 8px vertical padding. Houses carousel slides with periwinkle `{colors.accent}` arrow elements. The system's one fully-dark chrome strip.

### Navigation

- Sticky white nav bar at the top. "Saie" wordmark centered. Nav links in `{typography.nav-link}` `{colors.ink}` weight 400. Hover: underline appears with `border-color` and `color` transitioning at 0.4s ease. Cart, search, account icons right-aligned. Mobile collapses to hamburger.

## Do's and Don'ts

### Do
- Use `{colors.primary}` (#1b2121) — the warm near-black, not pure `#000000` — for all primary fills and borders; the warmth is a deliberate brand signal
- Default all interactive elements to `{rounded.none}` (0px); sharp corners are the brand's precision marker
- Apply uppercase transforms to button labels, UI micro-labels, and captions via Ordinary-Display weight 500
- Use `{colors.accent}` periwinkle as the single chromatic accent — announcement bar fills, selected states, accent link text
- Fill hero zones with editorial close-up photography — skin detail, lashes, lips — and let it run full-bleed
- Maintain the 1px solid `{colors.border}` outline on every interactive element in resting state
- Use ghost buttons (`{components.button-ghost}`) on dark photography panels — white outline on dark surface only
- Transition button `background-color`, `color`, and `border-color` at 0.4s ease for hover states
- Apply `{colors.focus-ring}` (#0018ff) as the visible keyboard focus indicator — it needs the vivid contrast
- Keep section spacing generous (60–102px vertical) to match the editorial pacing of the photography

### Don't
- Don't use pure `#000000` for text or borders — the brand's warmth lives specifically in `{colors.primary}` (#1b2121)
- Don't introduce a second chromatic accent beyond `{colors.accent}` periwinkle — no coral, no green, no warm-pink blush tones on the chrome
- Don't soften buttons or card corners with any radius — even `{rounded.sm}` on a CTA reads as off-brand
- Don't capitalize the wordmark as a display heading — "Saie" is sentence case in headings and brand references
- Don't use bold weight (700+) in the typography system; weight 500 is the ceiling for on-brand emphasis
- Don't apply drop shadows to product cards at rest — the flat 1px border line is the brand's depth language
- Don't use the periwinkle `{colors.accent}` as a full-button CTA fill on white surfaces; it lacks sufficient contrast at `{typography.button-ui}` size
- Don't introduce gradients — the brand is flat-color surfaces and photography, nothing in between
- Don't substitute Arial or system sans for Ordinary-Display in rendered contexts; the geometric structure is brand-specific
- Don't shrink button padding below 10px vertical — the 0px radius means padding defines the tap target entirely

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <400px | Single column, wordmark shrinks, nav collapses to hamburger |
| Mobile | 400–640px | Single column, 1-up product grid, 20px section padding |
| Tablet Small | 640–768px | 2-column grid, 30–40px section padding |
| Tablet | 768–1024px | 2–3 column grid, nav transitions, 40–60px section spacing |
| Desktop | 1024–1280px | 4-column product grid, full sticky nav, 60px section spacing |
| Large Desktop | >1280px | Maximum editorial scale, full-bleed photography, 102px section spacing |

Saie's 28 breakpoints reflect Tailwind CSS arbitrary values and tight Shopify/PrimeReact responsive behavior. Structural pivots cluster around 640px, 768px, and 1024px.

### Touch Targets
- All primary CTA buttons maintain minimum 44px tap height via padding; 12px 40px on button-primary gives ~37px on small type but the button height is set explicitly in the Shopify theme
- Announcement bar arrows: minimum 24×24px hit area
- Nav icons: 44×44px minimum hit area on mobile
- Product cards: full card tappable to product detail page

### Collapsing Strategy
- **Nav**: Full horizontal link bar collapses to hamburger + wordmark + cart on mobile; drawer slides in from left at 0.5s ease
- **Product grid**: 4-col → 2-col → 1-col; portrait product photography maintains aspect ratio throughout
- **Hero**: Full-bleed photography at all breakpoints; text overlays resize; CTA buttons stack vertically below ~400px
- **Section spacing**: 102px desktop → 60px tablet → 30–40px mobile — editorial pacing preserved at smaller scale
- **Announcement bar**: Stays full-width at all breakpoints; carousel slide speed unchanged

### Image Behavior
- Editorial close-up photography (skin, lashes, lips) maintains full-bleed treatment on all breakpoints
- Product photography serves square or portrait aspect ratios; no forced landscape
- Hero photography uses warm, high-contrast skin tones — no clinical white-on-white alternates
- Card images maintain consistent proportions across grid reflows

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (pure white page canvas)
- Brand primary / ink: `{colors.primary}` (#1b2121 — warm near-black)
- Chromatic accent: `{colors.accent}` (#c0c0da — periwinkle)
- Muted accent: `{colors.accent-muted}` (#91889d — dusty mauve)
- On buttons/dark: `{colors.on-primary}` (#ffffff)
- Border: `{colors.border}` (#1b2121 — matches ink)
- Focus ring: `{colors.focus-ring}` (#0018ff — vivid accessible blue)
- Default radius: `{rounded.none}` (0px — always sharp)
- Default shadow: none at rest; `rgba(108,108,108,0.15) 0px 10px 10px 0px` on dropdowns

### Example Component Prompts

- "Create a Saie-style primary CTA button: background `{colors.primary}` (#1b2121), text `{colors.on-primary}` (#ffffff), font Ordinary-Display weight 500 13px uppercase letter-spacing 0.5px, border-radius `{rounded.none}` (0px), padding 12px 40px. Hover state: background `{colors.text-hover}` (#202828), transition `background-color 0.4s ease, color 0.4s ease`."
- "Design a Saie product card on `{colors.background}` (#ffffff) with `{rounded.none}` (0px) radius and no shadow. Portrait product photo fills the top edge-to-edge. Below: product name in Ordinary-Display 18px weight 400 `{colors.ink}` (#1b2121), shade name and price in Ordinary-Display 16px weight 400, 'Add To Bag' button in `{colors.primary}` with 1px solid border. 8px inner padding."
- "Build a Saie announcement bar: full-width `{colors.primary}` (#1b2121) background, Ordinary-Display 11px weight 500 uppercase `{colors.on-primary}` text, 8px 20px padding. Include left/right arrow buttons in `{colors.accent}` (#c0c0da) — transparent fill, `{colors.accent}` border. No border-radius on any element."
- "Create a Saie-style email capture modal: `{colors.background}` (#ffffff) fill, `{rounded.none}` (0px) radius, centered on `rgba(0,0,0,0.5)` dark scrim. Heading: 'SUBSCRIBE AND SAVE' in Ordinary-Display 16px weight 500 uppercase `{colors.ink}`. Email input with `1px solid {colors.border}` border, 10px padding, 0px radius. CTA button 'CONTINUE' in `{components.button-primary}` style. Close icon top-right in `{colors.ink}`."
- "Design a Saie rotating sunburst badge: circular container with `border-radius: 50%`, `{colors.primary}` (#1b2121) fill, white Ordinary-Display 11px weight 500 uppercase text arranged in a circular path. Apply `animation: badgeRotate 20s linear infinite` (20s rotation). Use for 'NEW SHADES', 'LIP LINER' product callouts."
- "Create a Saie navigation bar: `{colors.background}` (#ffffff) fill, sticky. Centered 'Saie' wordmark in Ordinary-Display 20px weight 500 `{colors.ink}`. Left: shop categories in `{typography.nav-link}` weight 400. Right: search, account, bag icons. Bottom: no border. On hover: links add bottom border `2px solid {colors.border}` transitioning at `border-color 0.4s ease`."

### Iteration Guide

1. Start with `{colors.background}` (#ffffff) canvas and `{colors.primary}` (#1b2121) — the warm near-black, never raw `#000000`. This warmth is Saie's first distinction from clinical beauty brands.
2. Use `{colors.accent}` (#c0c0da) periwinkle exactly once per section maximum — announcement bar, selected state, or accent link. It's a seasoning, not a base coat.
3. Default every interactive element to `{rounded.none}` (0px). If you reach for a softened corner, stop and ask whether it's really a card (no) or a badge/swatch (maybe `{rounded.pill}`).
4. Set button labels in Ordinary-Display weight 500 uppercase — the uppercase transform is mandatory at `{typography.button-ui}` and `{typography.label-ui}` sizes.
5. Keep body and nav text at weight 400 — the 500/uppercase combination belongs only to chrome (buttons, labels, captions).
6. Use `1px solid {colors.border}` as the single interactive-element outline; don't supplement with shadows or glows on primary CTAs.
7. Fill hero and feature sections with editorial close-up photography — the design system is a frame for the photography, not a substitute for it.
8. Apply the light dropdown shadow (`rgba(108,108,108,0.15) 0px 10px 10px 0px`) only on floating layers (dropdowns, tooltips) — never on static product cards.
9. Transition hover states at `0.4s ease` for `color`, `background-color`, and `border-color` — the motion system is consistent and moderate, not instant or overwrought.
10. When adding section spacing, target 60–102px vertical padding at desktop scale; compress to 30–40px on mobile to maintain editorial pacing at smaller screen sizes.

---

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