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

# STAUD · Design System

> Quiet storefront, expressive fashion imagery

**Theme:** light · **Industry:** fashion · **Source:** https://staud.clothing/ · **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._

STAUD’s homepage pairs a restrained black-and-white storefront with oversized fashion and lifestyle photography. A compact header, direct category browsing, editorial campaigns, product cards, and a practical footer guide visitors from discovery to shopping.

## North star

Keep the interface quiet and neutral, letting large, carefully composed fashion photography carry the page’s color and personality.

## Overview

The page uses a quiet neutral framework so the campaign photography supplies most of the visual character. White is the main canvas for the compact header, hero caption, category links, and shopping content; black anchors the announcement strip, wordmark, icons, and text. A pale gray surface distinguishes the footer. Photography is edge-to-edge in the opening hero, then organized into five category tiles and balanced two-column campaign panels; image colors remain editorial content rather than extra interface colors. Antique Legacy carries most headings, body copy, and links in a measured, medium-weight voice, while Poppins is reserved for small navigation labels and announcement details. Centered hero copy and clean, generous white intervals give way to denser product browsing and a multi-column footer. Components stay mostly flat, with understated controls and pill-like CTA shapes rather than decorative effects.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, header, campaign copy areas, and primary light backgrounds. |
| Runway Ink | `#000000` | `--color-runway-ink` | brand | Announcement strip, wordmark, navigation icons, body text, and footer links. |
| Soft Gallery | `#f7f7f7` | `--color-soft-gallery` | surface | Pale footer surface; a quiet contrast to the white shopping canvas. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f7f7f7` (Soft Gallery) · `--color-text` → `#000000` (Runway Ink) · `--color-text-muted` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f7f7f7` | 19.6:1 | AAA |
| `#ffffff` | `#f7f7f7` | 1.07:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Antique Legacy | `--font-body` | webfont | 450, 400, 500 | Primary display and interface type for headings, body, links, captions, and buttons. | Lora |

- **Antique Legacy:** Measured weights 400, 450, and 500. Mostly sentence case; captions use uppercase. Tracking is neutral.

### Type scale — Major Third (ratio ≈ 1.262, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 25.5px | 500 | 1.17 | 0 | — | Antique Legacy | Primary campaign headline or featured editorial title. |
| h2 | 20px | 500 | 1.5 | 0 | — | Antique Legacy | Secondary campaign headings and section titles. |
| body | 16px | 500 | 1.5 | 0 | — | Antique Legacy | Campaign descriptions and standard supporting copy. |
| caption | 12px | 450 | 1.43 | 0 | uppercase | Antique Legacy | Small uppercase utility labels and secondary details. |
| button | 12px | 500 | 1.25 | 0 | — | Antique Legacy | Compact shopping actions such as SHOP NOW. |
| nav | 12px | 450 | 1.42 | 0 | — | Poppins | Small header and utility navigation labels. |
| link | 16px | 500 | 1.5 | 0 | — | Antique Legacy | Category names, campaign links, and footer destinations. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 3, 4, 5, 6, 8, 10, 12, 16, 24, 32, 36 px.
- Section rhythm 60px · element gap 12px · card padding — · max content width 1368px.

The desktop page spans a measured maximum width of 1368px, with a full-bleed hero followed by a centered campaign caption. A five-column category row leads into two balanced editorial panels, then a dense product rail and four-column footer. The measured base spacing unit is 4px; the section gap is 60px and element gap is 12px. Keep the top navigation compact, preserve generous white space around editorial content, and allow product browsing and footer links to feel more information-dense.

## Shape & elevation

- Radius: button `9999px` · link `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.4s ease` on interactive elements.

The page is predominantly flat: no measured shadows or gradients define the interface, and the palette reports no border color. Establish hierarchy with image scale, white space, and background changes rather than cards floating above the canvas. Use pill-shaped CTA treatments where appropriate, while navigation and footer links remain visually light.

## Imagery

Use high-quality fashion and lifestyle photography as the dominant visual material, with full-width campaign framing in the hero and clean, consistently cropped imagery for category tiles. Editorial panels pair image and copy, with copy centered over the photography where shown. Product thumbnails should remain legible in a horizontal rail. Rich pinks, burgundies, dark blues, and garment colors belong to the photographs, not to the measured interface palette.

## Components

### Announcement strip

A slim black band above the white header, with centered small Poppins text and a linked store update.

### Store header

White horizontal header with a centered STAUD wordmark, menu control at left, and search, account, and bag icons at right.

### Campaign hero

Full-bleed fashion image followed by a centered short message and an understated SHOP NOW action.

### Category tiles

Five side-by-side image links for Dresses, Shoes, Clothing, Bags, and Outerwear, each with a concise label.

### Editorial campaign panels

Two balanced image-led panels with centered headline, short supporting copy, and a shopping CTA.

### Product rail

Dense horizontal product browsing area with image cards, purchase controls, and directional navigation.

### Footer

Four-column utility area on #f7f7f7 for company, contact, shop, and newsletter content, with small links.

### Measured component styles

- **Primary button** (“SHOP NOW”): transparent background · text #ffffff · radius 50px · padding 4.3px 0px · 500 12px Antique Legacy
- **Link** (“Shop new Fall styles for being out and a”): transparent background · text #000000 · radius 0px · padding 0px · 400 19.2px Antique Legacy
- **Navigation item**: transparent background · text #000000 · radius 0px · padding 0px · 400 19.2px Antique Legacy

## Do

- Use white and black as the interface foundation.
- Let fashion photography provide the strongest color.
- Keep the header compact and the wordmark centered.
- Build category browsing from image-led links.
- Use centered copy over editorial campaign imagery.
- Keep buttons and utility text understated.

## Don't

- Do not introduce unmeasured interface colors.
- Do not add decorative gradients or shadows.
- Do not let controls compete with campaign imagery.
- Do not turn every section into a bordered card.
- Do not make navigation labels oversized.
- Do not use photographic hues as interface tokens.

## Agent prompt

Build a new fashion-commerce page in STAUD’s restrained editorial style. Use Gallery White (#ffffff) as the main canvas, Runway Ink (#000000) for text and key controls, and Soft Gallery (#f7f7f7) for a quiet footer surface. Place a compact header above a large, edge-to-edge fashion image; follow it with centered campaign copy, image-led category links, and balanced editorial panels. Use Antique Legacy or a close free serif substitute for most content, with Poppins for compact utility navigation. Keep typography medium-weight and clean, with small uppercase captions and concise CTA labels. Preserve generous white intervals around campaign content, then allow product browsing and footer links to become denser. Avoid added interface colors, gradients, heavy borders, and ornamental shadows; let photography carry the expressive color.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign image with a centered message and shopping action below. | campaign entry point, direct shopping CTA | edge-to-edge photography, centered caption, white canvas |
| 2 | category-nav | Five image-led category links arranged in one desktop row. | visual category browsing, direct category links | five columns, product photography, short labels |
| 3 | feature-split | Two balanced editorial image panels with centered copy and CTAs. | campaign discovery, shop from editorial content | two-column split, image-led panels, centered overlay copy |
| 4 | product-grid | Dense horizontal product rail with multiple cards and browsing controls. | product discovery, quick add or options, carousel navigation | product thumbnails, compact actions, directional controls |
| 5 | footer | Four-column footer on a pale gray surface, including newsletter content. | support and policy navigation, newsletter signup, store discovery | four columns, small text links, social icons, light gray band |

## Source CSS custom properties (selected)

```css
--osano-clear-dialog-background: rgba(0,0,0,0);
--osano-button-border-color: #FFFFFF;
--osano-button-background-color: #000000;
--osano-button-foreground-color: #FFFFFF;
--osano-dialog-background-color: #ffffff;
--osano-dialog-foreground-color: #000000;
--osano-info-dialog-overlay-color: rgba(0,0,0,0.45);
--osano-link-color: #000000;
--osano-toggle-off-track-color: #c8c8c8;
--osano-toggle-off-thumb-color: #6f6f6f;
--osano-toggle-on-track-color: #000000;
--osano-toggle-on-thumb-color: #FFFFFF;
--osano-widget-color: #37cd8f;
--osano-widget-outline-color: #29246a;
--osano-widget-fill-color: #fff;
--osano-focus-outline-color: Highlight;
--osano-pill-background-color: #EBE0FE;
--osano-pill-foreground-color: #3E1A7F;
--osano-button-close-color: #000000;
--osano-button-accept-background-color: #000000;
--osano-button-accept-border-color: #FFFFFF;
--osano-button-accept-foreground-color: #FFFFFF;
--osano-button-deny-background-color: #000000;
--osano-button-deny-border-color: #FFFFFF;
--osano-button-deny-foreground-color: #FFFFFF;
--osano-button-reject-all-background-color: #000000;
--osano-button-reject-all-background-color-hover: #141414;
--osano-button-reject-all-border-color: #FFFFFF;
--osano-button-reject-all-foreground-color: #FFFFFF;
--osano-button-manage-background-color: #000000;
--osano-button-manage-border-color: #FFFFFF;
--osano-button-manage-foreground-color: #FFFFFF;
--osano-info-dialog-link-color: #000000;
--osano-info-dialog-button-close-color: #000000;
--osano-info-dialog-toggle-off-track-color: #c8c8c8;
--osano-info-dialog-toggle-off-thumb-color: #6f6f6f;
--osano-info-dialog-toggle-on-track-color: #000000;
--osano-info-dialog-toggle-on-thumb-color: #FFFFFF;
--osano-info-dialog-button-background-color: #000000;
--osano-info-dialog-button-border-color: #FFFFFF;
```

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