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

# Vagabond · Design System

> Scandinavian restraint, led by fashion photography

**Theme:** light · **Industry:** fashion · **Source:** https://www.vagabond.com/us/ · **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._

Vagabond’s homepage pairs a quiet monochrome interface with large, tightly framed fashion photography. Spacious editorial storytelling and clear category links keep the experience focused on collections and craft.

## North star

Let high-impact fashion photography lead, while keeping the interface quiet, monochrome, and generously spaced.

## Overview

The visual identity is restrained and editorial: black text and navigation sit against white and near-white surfaces, while pale gray provides a cool canvas for product cards. Colorful image pixels belong chiefly to campaign and product photography, not the interface palette. Proxima Nova is used throughout, with light weights and subtle, relatively open tracking for navigation and body copy; headings gain distinction through measured weight and scale rather than decorative styling. The page begins with a broad split campaign image, then alternates centered brand storytelling, craft imagery, edition-led product photography, and smaller collection tiles. Generous whitespace separates these blocks, giving the photography room to carry the mood. Footer columns return to a practical, compact information hierarchy. Borders are fine and pale, controls are quiet, and the overall treatment stays flat, with no prominent decorative shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#000000` | `--color-soft-ink` | neutral | Primary logo, navigation, headings, body copy, and text links. |
| Cool Mist | `#e9ecef` | `--color-cool-mist` | surface | Measured canvas and product-card background; keep it as a cool, pale neutral. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page surface, campaign framing, and light button backgrounds. |
| Quiet Line | `#ced4da` | `--color-quiet-line` | semantic | Subtle button and footer borders; use for hairlines, not strong dividers. |
| Porcelain | `#f8f9fa` | `--color-porcelain` | surface | Secondary pale surface, including understated footer areas. |
| Slate Text | `#343a40` | `--color-slate-text` | neutral | Rare supporting text tone; measured in a small amount of interface copy. |

### Semantic aliases

`--color-canvas` → `#e9ecef` (Cool Mist) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#f8f9fa` (Porcelain) · `--color-text` → `#000000` (Soft Ink) · `--color-border` → `#ced4da` (Quiet Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#e9ecef` | 17.71:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#f8f9fa` | 19.92:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| proxima-nova | `--font-body` | webfont | 300, 600 | Site-wide typography for navigation, headings, body copy, links, captions, and buttons. | Source Sans 3 |

- **proxima-nova:** Use light 300 for most text and 600 for primary headings; tracking is gently open, with natural casing.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 600 | 1.3 | 0.019em | — | proxima-nova | Primary page or campaign heading, when present. |
| h2 | 24px | 300 | 1.3 | 0.05em | — | proxima-nova | Section headings for editorial and collection content. |
| h3 | 20px | 300 | 1.5 | 0.03em | — | proxima-nova | Supporting subheadings within content blocks. |
| body | 16px | 300 | 1.5 | 0.038em | — | proxima-nova | Brand storytelling and descriptive paragraph copy. |
| caption | 14px | 300 | 1.29 | 0.057em | — | proxima-nova | Small labels beneath campaign and collection imagery. |
| button | 16px | 300 | 1.5 | 0.038em | — | proxima-nova | Quiet account, locale, and action controls. |
| nav | 16px | 300 | 1.5 | 0.025em | — | proxima-nova | Main category navigation and utility navigation. |
| link | 18px | 300 | 1.56 | 0.022em | — | proxima-nova | Editorial calls to action and collection links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 7, 8, 12, 15, 16, 20, 24, 32 px.
- Section rhythm 48px · element gap 4px · card padding — · max content width 1392px.

Use a full-width editorial canvas with campaign imagery spanning the page, followed by content blocks aligned to a centered site grid. The measured maximum width is 1392px. The homepage uses a two-panel hero, centered copy sections, four-image craft row, paired edition imagery, and smaller collection tiles. Maintain comfortable density and clear whitespace between sections; measured section rhythm is 48px, with a 4px base spacing unit. Footer information resolves into four columns.

## Shape & elevation

- Radius: button `2px` · media `50%` · xs `2px`
- Shadow `inset` (button): `rgb(255, 255, 255) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.03) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 20px 28px 0px`
- Motion: standard transition `0.5s ease-in-out` on interactive elements.

The page is predominantly flat: white and pale gray surfaces, fine borders, and no noticeable card shadows. A subtle measured inset-and-shadow treatment appears on a button, but it is not a defining visual motif. Separate content through whitespace and image framing rather than stacked panels or pronounced elevation.

## Imagery

Use polished fashion and shoemaking photography rather than illustration or 3D. Campaign images are large, closely framed portraits arranged side by side; product and craft images appear in orderly grids with restrained crops. Keep photography natural and cool-toned, letting garments, shoes, people, and workshop details provide the page’s color. Avoid heavy overlays or decorative image treatments.

## Components

### Header and navigation

A white, restrained header pairs the black wordmark with lightweight category links and compact search, favorites, account, and bag utilities.

### Announcement strip

A narrow, centered delivery-and-duties message sits below navigation, with a simple close control at the far edge.

### Split campaign hero

Two large adjacent campaign photographs introduce women’s and men’s shopping paths, with minimal framing and small labels.

### Editorial brand block

Centered brand copy and a simple learn-more link sit in a broad white area with generous breathing room.

### Craft image row

Four rectangular workshop and process photographs form a compact editorial sequence, each with a small caption.

### Edition showcase

A short centered introduction leads into large paired product photographs, followed by smaller collection tiles.

### Multi-column footer

Four compact link columns organize membership, customer care, information, and brand details over a pale surface.

### Measured component styles

- **Primary button** (“Skip to main content”): background #4d5564 · text #ffffff · radius 2px · padding 0px · 300 16px proxima-nova
- **Secondary button** (“United States (USD)”): background #ffffff · text #000000 · border 1px solid #ced4da · radius 2px · padding 7px 15px · 300 16px proxima-nova
- **Link** (“Women”): transparent background · text #000000 · radius 0px · padding 0px · 300 17.9992px proxima-nova
- **Card**: background #e9ecef · text #000000 · radius 0px · padding 0px · 300 16px proxima-nova
- **Navigation item** (“Start page Footwear Bags Accessories & a”): transparent background · text #000000 · radius 0px · padding 0px · 300 16px proxima-nova

## Do

- Let fashion photography dominate the first viewport.
- Keep interface text black on quiet white or pale gray surfaces.
- Use Proxima Nova-style sans-serif typography with light weights.
- Give editorial copy generous whitespace and restrained alignment.
- Build collection browsing from clean image grids and concise labels.
- Use pale hairlines and minimal control framing.

## Don't

- Do not add saturated brand accents absent from the measured palette.
- Do not place large text overlays across campaign photography.
- Do not use heavy shadows, gradients, or prominent rounded cards.
- Do not crowd navigation or editorial content.
- Do not treat photo colors as interface tokens.
- Do not turn understated labels into bold, all-caps display text.

## Agent prompt

Build a new fashion-commerce page in Vagabond’s restrained Scandinavian editorial style. Use Gallery White (#ffffff) as the main surface, Soft Ink (#000000) for navigation and text, Cool Mist (#e9ecef) for quiet canvas or product-card areas, Porcelain (#f8f9fa) for secondary surfaces, and Quiet Line (#ced4da) for subtle borders. Keep Slate Text (#343a40) rare. Use a Proxima Nova-like sans serif, mostly light weights with gently open tracking. Organize the page around large, natural fashion photography, clear category paths, centered editorial copy, and orderly product imagery. Keep spacing generous, content hierarchy simple, and controls understated. Prefer flat surfaces and hairlines over shadows or decoration; let the photography supply most visual color.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Centered editorial copy on a white surface, with a single supporting link. | brand context, learn-more link | centered text, generous whitespace, minimal link styling |
| 2 | product-showcase | Centered introduction followed by large paired edition photography and smaller collection tiles. | edition discovery, women’s and men’s paths | paired image panels, small image captions, white section background |
| 3 | footer | Four information columns above a compact payment, social, and locale utility area. | account creation, help and policy links, locale selection | multi-column link lists, pale background, fine dividers |

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