---
version: alpha
name: Cuyana
description: '"Fewer, better things" rendered as a warm minimal retail system: near-black Styrene A on white, a leather-tan accent, square-cornered CTAs, photography-forward whitespace, and every interaction governed by 0.2s ease-in-out precision that feels as considered as the product.'

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f5f5f5"            # light section bands, secondary content zones /* estimated */
  surface-warm: "#f2ede7"       # warm cream — editorial callout backgrounds /* estimated */

  # Ink / text
  ink: "#1a1a1a"                # near-black primary — rgb(26,26,26) — dominant system value (240 count)
  ink-deep: "#1c1b1b"           # secondary near-black — rgb(28,27,27) — nav and link text (50 count)
  ink-secondary: "#525252"      # mid-dark gray supporting copy — rgb(82,82,82) — 76 count
  ink-muted: "#424242"          # subdued gray — rgb(66,66,66) — hover/muted state
  on-dark: "#ffffff"            # text on near-black backgrounds and CTA fill

  # Brand accent — warm leather tan
  primary: "#664a30"            # leather tan — rgb(102,74,48) — brand accent links, editorial accents
  primary-container: "#e8ddd3"  # tinted warm sand container /* estimated */
  on-primary: "#ffffff"         # white text on the tan anchor

  # Interaction / state
  text-hover: "#565656"         # link hover — rgb(86,86,86) — dembrandt-extracted hover
  focus-ring: "#606a72"         # keyboard focus — rgb(96,106,114) — extracted from input outline

  # Semantic
  error: "#d9392f"              # badge and validation red — CSS variable --badge-background-color

  # Borders
  border: "#dddddd"             # hairline dividers, input stroke — rgb(221,221,221)
  border-strong: "#1a1a1a"      # focused inputs and strong structural borders — near-black

  # Shadow tints (opaque approximations)
  shadow-soft: "#000000"        # was rgba(0,0,0,0.15) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Styrene A, Styrene B, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.5px
  display:
    fontFamily: "Styrene A, Styrene B, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.25px
  heading-section:
    fontFamily: "Styrene A, Styrene B, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Styrene A, Styrene B, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.27
    letterSpacing: 0px
  body-large:
    fontFamily: "Styrene A, Styrene B, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  body:
    fontFamily: "Styrene A, Styrene B, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: 0px
  body-medium:
    fontFamily: "Styrene A, Styrene B, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px
  nav-link:
    fontFamily: "Styrene A, Styrene B, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0.32px
  button-ui:
    fontFamily: "Styrene A, Styrene B, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  label-ui:
    fontFamily: "Styrene A, Styrene B, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.54
    letterSpacing: 0.72px
  label-uppercase:
    fontFamily: "Styrene A, Styrene B, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0.72px
  caption:
    fontFamily: "Styrene A, Styrene B, Arial, Helvetica Neue, Helvetica, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.36
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 13px
  lg: 18px
  xl: 20px
  2xl: 30px
  3xl: 32px
  4xl: 48px
  5xl: 70px

rounded:
  none: 0px
  sm: 4px
  modal: 6px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 20px
  button-primary-hover:
    backgroundColor: "{colors.ink-deep}"
    textColor: "{colors.on-dark}"

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 13px 20px
    borderColor: "{colors.border-strong}"
  button-outline-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-strong}"

  button-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.body-medium}"
    rounded: "{rounded.none}"
    padding: 0px
  button-text-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 16px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 14px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-strong}"

  modal:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.modal}"
    padding: 32px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-deep}"
    typography: "{typography.nav-link}"
    padding: 18px 32px

  promo-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-ui}"
    padding: 8px 16px

  eyebrow:
    textColor: "{colors.ink}"
    typography: "{typography.label-uppercase}"
    padding: 0px

  link:
    textColor: "{colors.ink-deep}"
    typography: "{typography.body}"
    padding: 0px
  link-hover:
    textColor: "{colors.text-hover}"

  accent-link:
    textColor: "{colors.primary}"
    typography: "{typography.body-medium}"
    padding: 0px
  accent-link-hover:
    textColor: "{colors.ink}"
---

# Cuyana Design System

## Overview

Cuyana built its brand around a single directive — fewer, better things — and the design system enacts it with an almost editorial exactitude. The canvas is white (`{colors.background}`) throughout, unbroken by tinted bands or promotional splashes, and the near-black `{colors.ink}` (`#1a1a1a`) handles every word from the hero headline down to the cart confirmation. The effect is closer to a well-curated boutique catalogue than a conventional e-commerce storefront. Photography does the atmospheric work: warm natural light, leather and linen textures, a palette of olive, sand, and dusty blue that bleeds off into white margins without chrome getting in the way.

The typeface is **Styrene A** — a contemporary geometric grotesque with a slightly warmer stroke character than strict neo-grotesk alternatives like Helvetica or Neue Haas Grotesk. It runs at a single weight of 400 across display, body, and navigation, with a 500 medium appearing only on secondary interactive labels. The one chromatic moment in the palette is a warm leather-tan (`{colors.primary}`, `#664a30`) — the literal color of a well-worn bag strap — applied selectively to accent links, editorial anchors, and promo highlights. It is not a loud CTA color; it is a brand signature held in reserve.

Buttons are square-cornered and near-black. Every primary CTA is a filled `{colors.ink}` block with white type and zero border radius. This geometry signals deliberateness rather than friendliness — the product is the warmth, and the interface steps aside. Motion is precise and restrained: 0.2s `ease-in-out` governs nearly every interactive state (453 instances in the extracted data), with 0.3s reserved for the nav drawer and hero transitions. The cumulative effect is a site that feels like its inventory: constructed with care, never fussy.

**Key Characteristics:**
- Single chromatic accent — leather-tan `{colors.primary}` (`#664a30`) applied to editorial accent links; all CTAs are near-black `{colors.ink}`
- White-canvas-first (`{colors.background}`); no tinted or dark marketing theme
- **Styrene A** at weight 400 across every level — display, body, nav; 500 reserved for secondary labels only
- **Square corners on everything** (`{rounded.none}`) — buttons, inputs, image frames, cards; the brand is not softened by radius
- Dominant near-black `{colors.ink}` (`#1a1a1a`) at 240 computed instances — the highest-frequency color in the extracted system
- Uppercase labels with positive letter-spacing (`{typography.label-uppercase}`, `{typography.label-ui}`) for section markers and filter tags
- 0.2s `ease-in-out` on all button, link, and card interactions — the universal system clock
- Hairline border `{colors.border}` (`#dddddd`) as the sole structural separator; no drop shadows on content surfaces
- Photography-forward layout: warm lifestyle imagery with generous whitespace margins handles the premium positioning
- Flat elevation across product and content surfaces; `0 0 30px rgba(0,0,0,0.15)` shadow reserved for modals only
- Slight negative letter-spacing on display type (-0.5px at hero scale) gives the geometric grotesque a composed, refined quality
- No second typeface; no gradients; no illustration; restraint as the design strategy

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The universal canvas. Nav, product grid, editorial sections, and checkout all sit on pure white.
- **Light Gray** (`{colors.surface}`): Faint section bands and secondary content zones — a barely-visible shift.
- **Warm Cream** (`{colors.surface-warm}`): Editorial callout backgrounds; the warmth comes from photography and accent links, not this surface.

### Ink / Text
- **Near-Black** (`{colors.ink}`): The dominant value at `#1a1a1a` — every heading, body paragraph, and CTA fill. Not pure black; the slight warmth is intentional.
- **Deep Near-Black** (`{colors.ink-deep}`): Nav text and emphasis links at `#1c1b1b` — imperceptibly different from `{colors.ink}`, used by the navigation layer.
- **Dark Gray** (`{colors.ink-secondary}`): Mid-dark gray for supporting product copy, form helper text, and subdued metadata.
- **Muted Gray** (`{colors.ink-muted}`): Hover-dim and lower-priority copy at `#424242`.

### Brand Accent
- **Leather Tan** (`{colors.primary}`): Cuyana's single chromatic statement — `#664a30`, the hue of a natural leather strap. Applied to accent links, promotional highlights, and selected sale indicators. Not used on CTAs, which stay near-black.

### Interaction / State
- **Link Hover** (`{colors.text-hover}`): `#565656` — links dim to a medium gray on hover rather than introduce color.
- **Focus Ring** (`{colors.focus-ring}`): `#606a72` — a blue-gray focus outline for keyboard accessibility.

### Semantic
- **Error** (`{colors.error}`): `#d9392f` — validation and badge alerts only.

### Borders & Shadows
- **Hairline** (`{colors.border}`): `#dddddd` — the dominant structural separator; appears on inputs, footer dividers, and section breaks.
- **Strong Border** (`{colors.border-strong}`): Near-black `{colors.ink}` for focused inputs and explicit structural outlines.
- **Shadow** (`{colors.shadow-soft}`): Opaque stand-in for the single modal shadow (`rgba(0,0,0,0.15)` — flattened for the Google spec).

## Typography

### Font Family
- **Primary**: `Styrene A`, self-hosted as `StyreneA-Regular-Web.woff2` and `StyreneA-Bold-Web.woff2`. A contemporary geometric grotesque with slightly warm proportions. Fallbacks: `Styrene B, Arial, Helvetica Neue, Helvetica, sans-serif`. No Google Fonts, no variable fonts.
- **Supplementary display body**: `StyreneS-Regular` (a condensed companion variant) appears at 28px and 15px in the type extraction — used for select editorial callout lines.
- **Decorative**: `icomoon.woff` — icon font for UI icons (cart, account, search).
- Weight strategy: 400 for nearly everything; 500 for secondary interactive labels. The type system is essentially single-weight.

### Hierarchy

The full type scale is in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 40px / 400 / -0.5px — campaign and hero headlines |
| `display` | 28px / 400 / -0.25px — editorial section openers, category titles |
| `heading-section` | 24px / 400 — h1-level product category headings |
| `heading-sub` | 22px / 400 — product names, feature callouts |
| `body-large` | 18px / 400 — editorial copy, product intro paragraphs |
| `body` | 16px / 400 — standard descriptions, cart copy, form instructions |
| `body-medium` | 15px / 500 — secondary interactive labels, emphasis body |
| `nav-link` | 14px / 400 / 0.32px — primary navigation items |
| `button-ui` | 15px / 400 — CTA and button copy |
| `label-ui` | 13px / 400 / 0.72px — filter labels, UI tags |
| `label-uppercase` | 11px / 400 / 0.72px uppercase — section eyebrows, structural markers |
| `caption` | 11px / 400 — metadata, size guides, footnotes |

### Principles
- **Single weight, single face**: Styrene A at 400 does nearly all the work. Weight 500 appears only on interactive secondary labels — not on headings or body.
- **Scale carries hierarchy**: size and letter-spacing distinguish levels; no bold moments in the display stack.
- **Negative tracking at display**: -0.5px at 40px gives the geometric grotesque a composed, slightly tight character — closer to editorial than storefront.
- **Uppercase labels carry structure**: `{typography.label-uppercase}` and `{typography.label-ui}` with positive letter-spacing (0.72px) are used for category markers, filters, and section openers — the system's only expressive typographic gesture.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. The base is an 8px-adjacent system with some Shopify-influenced practical values (13px, 18px). Component internals favor `{spacing.sm}` through `{spacing.lg}` (8–18px); section rhythms stretch to `{spacing.5xl}` (70px), the principal vertical cadence between major page sections.

### Grid & Container
- Max content width: approximately 1440px centered; wide breakpoints up to 1800px noted in the extraction
- Product grid: 4 columns desktop, 2 tablet, 1 mobile with generous gutters matching the brand's spacious editorial feel
- Navigation: transparent-to-white sticky top bar with centered Cuyana wordmark, horizontal category links, utility icons right-aligned
- Hero: full-bleed editorial lifestyle photography with overlaid headline and a single near-black CTA

### Whitespace Philosophy
- Whitespace signals quality — the brand philosophy ("fewer, better") reads in the margins as much as in the copy
- Product cards are generously spaced in the grid; the layout does not pack items for density
- Section divisions rely on whitespace rather than dividers or background fills; the `{colors.border}` hairline appears sparingly

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Product cards, all content surfaces, the page canvas |
| Hairline (Level 1) | `1px solid {colors.border}` | Input borders, footer separator, promo bar edge |
| Strong (Level 2) | `1px solid {colors.border-strong}` | Focused input borders, explicit structural outlines |
| Overlay (Level 3) | `0 0 30px {colors.shadow-soft}` at 15% | Modals and overlays — the single departure from flat |
| Focus Ring | `{colors.focus-ring}` 2px outline | Keyboard accessibility |

**Shadow Philosophy**: Cuyana is flat by conviction. Product cards, editorial sections, navigation — none carry a resting shadow. The single shadow in the system is `0 0 30px rgba(0,0,0,0.15)` on the modal overlay. This is in direct alignment with the "fewer" ethos: no decorative depth, no layer metaphors in the content. The site reads as a printed catalogue, not a layered digital surface.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | **All interactive elements and content surfaces** — buttons, inputs, cards, image frames |
| `sm` | 4px | Rare utility — close button chrome, small form accents |
| `modal` | 6px | Modal top edge only (5.5px extracted; normalized to 6px) |
| `pill` | 9999px | Rare — circular utility icons only |

The shape language is near-binary: everything is square. The `{rounded.none}` CTA button is the brand's most deliberate move against the soft-radius defaults of contemporary e-commerce — it communicates substance over approachability, craft over convenience. The 6px modal top radius is the one permitted softness, appearing only in transient overlay surfaces.

## Components

The complete component spec lives in the `components:` token block.

### Button Variants

- **`button-primary`** — Near-black (`{colors.ink}`) fill, white text, **0px radius**, `13px` vertical padding. The site's universal CTA. Hover deepens slightly to `{colors.ink-deep}`. 0.2s ease-in-out transition.
- **`button-outline`** — White fill, near-black `{colors.border-strong}` 1px outline, **0px radius**. Used for secondary actions and ghost-style alternatives.
- **`button-text`** — Bare text link in leather-tan `{colors.primary}` at weight 500. No fill, no radius. Hover resolves to near-black `{colors.ink}` — the accent fades, not amplifies, on interaction.

### Cards

- **`card`** — White (`{colors.background}`), square corners, no shadow. Product photography flush to the top edge; name in `{typography.heading-sub}`, price in `{typography.body}`. The system is flat; hover may reveal a quick-add affordance without lifting the card.

### Inputs

- Square-cornered (`{rounded.none}`) with `{colors.border}` hairline by default; transitions to near-black `{colors.border-strong}` on focus. Dark-gray `{colors.ink-secondary}` placeholder text; full near-black `{colors.ink}` on active input. Padding: 12px vertical, 14px horizontal.

### Navigation

- **`nav-bar`** — White fill, near-black `{colors.ink-deep}` Styrene A at 14px with subtle 0.32px tracking. Cuyana wordmark at top-left; category links horizontal; utility icons right. Sticky on scroll; hero can render as transparent-nav over photography before scrolling.
- **`promo-bar`** — White strip above the nav, near-black `{typography.label-ui}` copy. Persistent announcement strip.

### Eyebrows & Labels

- **`eyebrow`** — 11px uppercase Styrene A with 0.72px letter-spacing (`{typography.label-uppercase}`). Used as section category markers and structural dividers between content blocks. The system's most expressive typographic token.

### Links

- **`link`** — Near-black `{colors.ink-deep}` by default; dims to `{colors.text-hover}` (`#565656`) on hover with underline decoration. No color accent on standard body links.
- **`accent-link`** — Leather-tan `{colors.primary}` at weight 500; used for sale callouts, featured brand references, and editorial highlights. Hover resolves to near-black `{colors.ink}`.

## Do's and Don'ts

### Do
- Keep every button and input at `{rounded.none}` (0px) — the square corner is the brand's geometric position; softening it contradicts the "fewer, better" discipline
- Use near-black `{colors.ink}` for all primary CTAs — not the leather-tan accent; the tan is for editorial links, not conversion buttons
- Reserve `{colors.primary}` leather-tan for accent links, sale markers, and editorial highlights — use it sparingly to preserve its brand-signature quality
- Set all display and large heading type in Styrene A at weight 400 with slight negative letter-spacing (-0.25 to -0.5px at scale)
- Apply uppercase with 0.72px letter-spacing via `{typography.label-uppercase}` for section eyebrows and category markers — this is the only expressive typographic gesture in the system
- Keep the page canvas pure white (`{colors.background}`); warmth comes from photography and the leather-tan accent, not from warm-tinted backgrounds
- Use `{colors.border}` (`#dddddd`) hairline as the structural separator; avoid using fills, drop shadows, or background colors to divide sections
- Transition interactive states at 0.2s `ease-in-out` — the system's universal motion clock

### Don't
- Don't introduce border-radius on buttons or inputs — even 4px softens the brand beyond intent
- Don't use the leather-tan `{colors.primary}` for primary CTA buttons — it reads as an accent, not a conversion driver; fill CTAs with near-black
- Don't add a second typeface — Styrene A handles the full hierarchy alone
- Don't add drop shadows to product cards, image frames, or editorial sections — the system is flat by design
- Don't raise display type weight to 700 or bold — the single-weight strategy is the system's calm authority
- Don't use pure black (`#000000`) for body text — `{colors.ink}` (`#1a1a1a`) is the warmer near-black the brand chose
- Don't create filled section bands in warm cream or gray — keep backgrounds white and use whitespace for rhythm
- Don't exceed 0.5s for interaction transitions — Cuyana's motion is precise (0.2s) not theatrical

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <544px | Single column; hero is full-bleed; nav collapses to hamburger |
| Mobile | 544–767px | Single-column product grid; promo bar may collapse; type scales down |
| Tablet | 768–1023px | Two-column product grid; nav partially visible; hero retains photography scale |
| Desktop | 1024–1399px | Full four-column product grid; sticky horizontal nav; editorial hero layout |
| Large Desktop | ≥1400px | Max container; photography dominates; generous section rhythm at `{spacing.5xl}` |

### Touch Targets
- Primary CTA (`button-primary`) has `13px` vertical padding; at 15px font the tap target reaches ~44px
- Nav utility icons (cart, account, search) are minimum 44×44px touch area
- Product cards are large tap zones; the whole card surface is interactive

### Collapsing Strategy
- **Navigation**: Full horizontal nav → hamburger drawer on mobile; Cuyana wordmark persists centered; promo bar persists at all sizes
- **Product grid**: 4-col → 2-col → 1-col; gutter narrows but remains generous
- **Hero**: Full-bleed editorial photography at all breakpoints; headline type scales proportionally while retaining negative tracking
- **Spacing**: `{spacing.5xl}` (70px) section rhythm compresses to ~32px on mobile

### Image Behavior
- Lifestyle photography is the visual anchor at every breakpoint — full-bleed on mobile, 4-up on desktop
- Product images maintain 3:4 portrait aspect ratio in the grid
- No skeleton loaders in the base system; images fade in on load with `0.3s ease opacity`

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (#ffffff)
- Text: `{colors.ink}` (#1a1a1a near-black)
- Brand accent / editorial links: `{colors.primary}` (#664a30 leather-tan)
- Primary CTA fill: `{colors.ink}` (#1a1a1a — not the tan)
- Secondary text: `{colors.ink-secondary}` (#525252)
- Border: `{colors.border}` (#dddddd hairline)
- Strong border / focus: `{colors.border-strong}` (#1a1a1a)
- CTA radius: `{rounded.none}` (0px — square)

### Example Component Prompts

- "Create a Cuyana primary CTA button: `{colors.ink}` (#1a1a1a) near-black fill, `{colors.on-dark}` (#ffffff) white label, Styrene A 15px weight 400, `{rounded.none}` square corners (0px radius), padding 13px 20px. Hover deepens background to `{colors.ink-deep}` (#1c1b1b) over 0.2s ease-in-out. No shadow, no gradient."
- "Build a Cuyana product card: `{colors.background}` (#ffffff) white surface, `{rounded.none}` square corners, no resting shadow. Product photography flush to the top edge at full card width. Below: product name in Styrene A 22px weight 400 `{colors.ink}` (#1a1a1a); price in Styrene A 16px regular below. Generous 16px padding on the text zone."
- "Design a Cuyana section eyebrow: Styrene A 11px uppercase with `{typography.label-uppercase}` letter-spacing (0.72px), `{colors.ink}` (#1a1a1a) color, no background. Use before a `{typography.display}` (28px) section headline to create a category-marker hierarchy."
- "Style a Cuyana navigation bar: `{colors.background}` (#ffffff) fill. Cuyana wordmark at top-left. Styrene A 14px weight 400 `{colors.ink-deep}` (#1c1b1b) nav links with 0.32px tracking; hover dims to `{colors.text-hover}` (#565656) and adds underline over 0.2s ease-in-out. Cart, account, search utility icons right-aligned. `1px solid {colors.border}` (#dddddd) bottom separator. Sticky on scroll."
- "Create a Cuyana email capture input: `{rounded.none}` square corners, `1px solid {colors.border}` (#dddddd) default border transitions to `1px solid {colors.border-strong}` (#1a1a1a) on focus over 0.1s ease-in-out. Styrene A 16px `{colors.ink-secondary}` (#525252) placeholder; full `{colors.ink}` on active. Padding 12px 14px. Pair with a `{colors.ink}` near-black square CTA button to the right or below."
- "Build a Cuyana editorial accent link: `{colors.primary}` (#664a30) leather-tan, Styrene A 15px weight 500, no underline by default; hover transitions to `{colors.ink}` (#1a1a1a) near-black with underline over 0.2s ease-in-out. Used for sale callouts, editorial category references, and brand-story links — not for primary navigation or CTAs."

### Iteration Guide

1. Start on `{colors.background}` (#ffffff) white. Cuyana is a white-canvas brand; any warmth belongs in the photography, not in the page chrome.
2. Fill CTAs with `{colors.ink}` (#1a1a1a) near-black — not the leather-tan. The leather-tan (`{colors.primary}`) is the editorial accent reserved for text links and sale markers.
3. Square every corner. Set `{rounded.none}` (0px) on all buttons, inputs, cards, and image containers. Any border-radius softens the brand beyond intent.
4. Set display and heading type in Styrene A at weight 400 with slight negative tracking (-0.25 to -0.5px at display scale). Do not increase weight to bold.
5. Apply `{typography.label-uppercase}` (11px uppercase, 0.72px tracking) as the eyebrow/section-marker layer before major headings — it is the system's one expressive typographic move.
6. Keep surfaces flat. No card shadows, no product-tile lift effects. The single allowed shadow is `0 0 30px rgba(0,0,0,0.15)` on modals only.
7. Use `{colors.border}` (#dddddd) hairline for structural separation — whitespace first, hairline second, filled bands never.
8. Time all transitions at 0.2s `ease-in-out`. The system is precise, not theatrical.

---

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