---
title: "Cuyana design system"
variant: extended
source: https://cuyana.com/
captured_at: 2026-10-12
theme: light
industry: fashion
generator: Design DNA (https://four.wiralomi.com/style/cuyana-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Cuyana · Design System

> Fewer things, framed with quiet confidence

**Theme:** light · **Industry:** fashion · **Source:** https://cuyana.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Cuyana’s homepage pairs restrained storefront typography with expansive fashion photography to foreground its bags, apparel, and accessories. A white navigation shell and warm neutral footer keep the experience calm while image-led category tiles make browsing immediate.

## North star

Let warm, editorial product photography dominate, and use restrained typography, white space, and flat neutral surfaces to keep the storefront quiet.

## Overview

The visual strategy is quiet and image-led: white canvas and near-black typography leave the product photography to supply most of the warmth, contrast, and seasonal color. The hero spans the page with two fashion images and small white overlay copy; below it, compact category tiles and a two-panel lookbook continue the photographic rhythm. StyreneA-Regular-Web is used throughout, with regular-weight headings, compact body copy, and uppercase, letter-spaced eyebrow and caption labels. Navigation remains on a clean white band, with dark announcement strip above it and a restrained burgundy accent limited to small navigational details. The lower brand statement and multi-column footer sit on a pale warm surface, separating utility links and newsletter signup from the more immersive imagery. Thin gray rules and square-edged controls reinforce the flat, considered storefront rather than adding decorative effects.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas, header, and image-section backing; white also carries copy over dark promotional imagery. |
| Soft Ink | `#1a1a1a` | `--color-soft-ink` | neutral | Main text and navigation color, dark announcement band, and filled newsletter action. |
| Linen Blush | `#f8f3f0` | `--color-linen-blush` | surface | Warm pale footer and brand-story surface that softens the transition from photography. |
| Quiet Rule | `#dddddd` | `--color-quiet-rule` | semantic | Thin separators and input outlines, including understated footer form boundaries. |
| Muted Graphite | `#525252` | `--color-muted-graphite` | neutral | Secondary copy and subdued utility text, especially in the footer and country selector. |
| Deep Slate | `#212529` | `--color-deep-slate` | semantic | Minor measured body-text color; visually secondary to the primary near-black text. |
| Oxblood Note | `#621830` | `--color-oxblood-note` | accent | Restrained burgundy accent in navigation details; not a broad section or button fill. |
| Leather Brown | `#664a30` | `--color-leather-brown` | semantic | Minor navigation color echoing the warm leather tones in product photography. |
| Charcoal Link | `#424242` | `--color-charcoal-link` | semantic | Sparse darker link text, used as a small variation within the otherwise neutral text system. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f8f3f0` (Linen Blush) · `--color-surface-2` → `#1a1a1a` (Soft Ink) · `--color-text` → `#1a1a1a` (Soft Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#525252` (Muted Graphite) · `--color-border` → `#dddddd` (Quiet Rule) · `--color-accent` → `#621830` (Oxblood Note)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1a1a1a` | `#ffffff` | 17.4:1 | AAA |
| `#1a1a1a` | `#f8f3f0` | 15.8:1 | AAA |
| `#ffffff` | `#f8f3f0` | 1.1:1 | fail |
| `#ffffff` | `#1a1a1a` | 17.4:1 | AAA |
| `#525252` | `#ffffff` | 7.81:1 | AAA |
| `#525252` | `#f8f3f0` | 7.1:1 | AAA |
| `#525252` | `#1a1a1a` | 2.23:1 | fail |
| `#621830` | `#ffffff` | 12.41:1 | AAA |
| `#621830` | `#f8f3f0` | 11.27:1 | AAA |
| `#621830` | `#1a1a1a` | 1.4:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| StyreneA-Regular-Web | `--font-body` | webfont | 400, 500 | Site-wide type for navigation, headings, body copy, labels, links, and controls | Inter |
| Styrene A | `--font-styrene-a` | system | 400 | System fallback for the primary Styrene A interface typeface | Inter |

- **StyreneA-Regular-Web:** Mostly regular weight; navigation and buttons use medium weight. Eyebrows and captions are uppercase with noticeably open tracking.
- **Styrene A:** Fallback only; preserve the restrained sans-serif character and compact, unembellished typesetting.

### Type scale — Minor Third (ratio ≈ 1.166, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 24px | 400 | 1.33 | 0 | — | StyreneA-Regular-Web | Hero headline and primary page-level heading. |
| h2 | 22px | 400 | 1.27 | 0 | — | StyreneA-Regular-Web | Prominent editorial and section headings. |
| h3 | 19px | 400 | 1.37 | 0 | — | StyreneA-Regular-Web | Category and secondary feature headings. |
| h4 | 18px | 400 | 1.33 | 0 | — | StyreneA-Regular-Web | Smaller section and footer headings. |
| body | 13px | 400 | 1.54 | 0 | — | StyreneA-Regular-Web | Brand story, descriptive copy, and supporting text. |
| caption | 11px | 400 | 1.55 | 0.065em | uppercase | StyreneA-Regular-Web | Compact uppercase supporting labels and fine print. |
| button | 12px | 500 | 1.67 | 0 | uppercase | StyreneA-Regular-Web | Uppercase newsletter and utility actions. |
| nav | 13px | 500 | 1.54 | 0 | — | StyreneA-Regular-Web | Primary menu and store navigation. |
| link | 13px | 400 | 1.54 | 0 | — | StyreneA-Regular-Web | Category links and footer navigation. |
| eyebrow | 11px | 400 | 1.55 | 0.065em | uppercase | StyreneA-Regular-Web | Small uppercase labels above or alongside content. |

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 2, 3, 4, 6, 7, 8, 10, 12, 13, 14, 15, 18, 20, 25, 28, 32 px.
- Section rhythm 32px · element gap 7px · card padding — · max content width 1376px.

The page uses a wide, near-edge-to-edge storefront composition; the measured page maximum width is 1376px. A slim announcement strip and horizontal navigation lead into a full-bleed, two-image hero. Category imagery forms a four-column row, followed by two broad editorial panels. The footer shifts into a more compact multi-column arrangement. Content is mostly left-aligned, with tight gaps and little ornamental padding; section changes rely on imagery and a warm footer band rather than cards.

## Shape & elevation

- Shadow `inset` (nav): `rgb(221, 221, 221) 0px -1px 0px 0px inset`
- Motion: standard transition `0.2s ease-in-out` on interactive elements.

The page is predominantly flat, with no visible card shadows or rounded containers. Fine gray hairlines define subtle boundaries, particularly around utility controls and footer inputs. Contrast and layering come from the black announcement strip, white navigation band, full-bleed photography, and pale footer surface rather than elevation effects.

## Imagery

Photography is the defining visual material: polished fashion and product scenes show models carrying bags, close product views, and lifestyle settings in warm leather, cream, and dark tones. Images are cropped edge-to-edge in the hero, category tiles, and paired lookbook panels. Text overlays are sparse and white where placed over images. There are no prominent illustrations or 3D renderings.

## Components

### Announcement strip

A narrow near-black band above the white header, with centered compact white promotional copy.

### Store navigation

A single horizontal white row with the Cuyana wordmark, compact menu links, and right-aligned search, store, and account utilities.

### Split-image hero

Full-width paired fashion images with a small white headline and shop link anchored near the lower-left.

### Category image tiles

Four adjacent photographic category panels with short white labels placed over the lower image area.

### Editorial feature pair

Two large side-by-side lifestyle and product images, each identified by a concise white overlay label.

### Newsletter signup

Footer form with a fine gray outlined email field and a square-edged dark button; button labels are uppercase.

### Multi-column footer

Warm pale footer surface containing brand copy, contact details, customer and company links, newsletter signup, and country controls.

### Measured component styles

- **Primary button** (“Subscribe”): transparent background · text #ffffff · border 1px solid #1a1a1a · radius 0px · padding 14px 28px · 500 15px StyreneA-Regular-Web
- **Link** (“Bags”): transparent background · text #1a1a1a · radius 0px · padding 0px 6px · 400 13px StyreneA-Regular-Web
- **Input**: transparent background · text #525252 · border 1px solid #dddddd · radius 0px · padding 12px 14px · 400 13px StyreneA-Regular-Web
- **Navigation item** (“Cuyana \| Women's Premium Essentials”): transparent background · text #1c1b1b · radius 0px · padding 0px · 400 13px StyreneA-Regular-Web

## Do

- Keep the canvas white and the footer softly warm.
- Let large product photographs carry the strongest color.
- Use Styrene-like sans-serif typography consistently.
- Keep navigation compact and horizontally aligned.
- Use restrained uppercase labels with open tracking.
- Separate utility content with thin gray rules.
- Keep controls square-edged and visually flat.

## Don't

- Do not add gradients or decorative card shadows.
- Do not use burgundy as a large background fill.
- Do not crowd the photography with overlay copy.
- Do not round buttons, fields, or image tiles.
- Do not introduce a bright palette that competes with product imagery.
- Do not turn the footer into a dark, high-contrast block.

## Agent prompt

Build a new Cuyana-style fashion storefront page with a calm, editorial hierarchy. Use Gallery White (#ffffff) as the main canvas and Soft Ink (#1a1a1a) for navigation, body text, and the dark announcement or primary action. Reserve Linen Blush (#f8f3f0) for a warm footer or brand-story band; use Quiet Rule (#dddddd) for fine borders and Muted Graphite (#525252) for secondary copy. Keep Oxblood Note (#621830) as a tiny accent, not a dominant fill. Use a restrained Styrene-like sans serif, compact navigation, regular-weight headings, and widely tracked uppercase labels. Compose the page from edge-to-edge fashion photography, clear category tiles, and paired editorial features. Keep controls flat and square-edged, and rely on image cropping and tonal contrast rather than shadows or decorative effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed split fashion photography with a small lower-left text overlay. | Shop latest arrivals, Overlay category message | Paired editorial images, White text over photography |
| 2 | category-nav | Four adjacent image tiles with left-aligned labels near the lower edge. | Direct category browsing, Image-led navigation | Four-column photo grid, White overlay labels |
| 3 | feature-split | Two broad side-by-side editorial image panels with overlaid labels. | Explore lookbook, Discover work bags | Paired lifestyle photography, Minimal white captions |
| 4 | footer | Warm-toned footer with a brand statement, multi-column links, contact details, and newsletter form. | Browse support links, Subscribe by email, Choose market | Pale warm surface, Fine outlined email field, Dark square-edged button |

## Source CSS custom properties (selected)

```css
--heading-font-family: "StyreneA-Regular-Web",sans-serif;
--heading-font-weight: 500;
--heading-font-style: normal;
--text-font-family: "StyreneA-Regular-Web",sans-serif;
--text-font-weight: 400;
--text-font-style: normal;
--base-text-font-size: 13px;
--default-text-font-size: 14px;
--background: #ffffff;
--background-rgb: 255, 255, 255;
--light-background: #ffffff;
--light-background-rgb: 255, 255, 255;
--heading-color: #1c1b1b;
--text-color: #1a1a1a;
--text-color-rgb: 26, 26, 26;
--text-color-light: #6a6a6a;
--text-color-light-rgb: 106, 106, 106;
--text-color-secondary: #565656;
--text-color-secondary-rgb: 86, 86, 86;
--link-color: #595959;
--link-color-rgb: 89, 89, 89;
--border-color: #dddddd;
--border-color-rgb: 221, 221, 221;
--badge-background-color: #621830;
--badge-text-color: #ffffff;
--button-background: #1a1a1a;
--button-background-rgb: 26, 26, 26;
--button-border: #1a1a1a;
--button-text-color: #ffffff;
--header-background: #ffffff;
--header-heading-color: #1c1b1b;
--header-light-text-color: #6a6a6a;
--header-border-color: #dddddd;
--footer-background: #f8f3f0;
--footer-text-color: #525252;
--footer-heading-color: #1c1b1b;
--footer-border-color: #dfdbd8;
--navigation-background: #ffffff;
--navigation-background-rgb: 255, 255, 255;
--navigation-text-color: #1a1a1a;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/cuyana-com