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

# Thousand Fell · Design System

> Forward-looking footwear, presented with editorial restraint.

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

A fashion-led footwear storefront pairs clean monochrome commerce interfaces with vivid campaign photography and circular-design storytelling. Product grids and restrained typography keep shopping practical while red image panels and full-bleed campaigns give the page a distinct editorial pulse.

## North star

Keep the shopping interface quiet and precise so vivid campaign photography and circular-footwear storytelling carry the personality.

## Overview

The page sets a clean white canvas against black text and pale product-card surfaces, letting footwear and campaign photography provide most of the visual color. A measured red accent appears in the announcement strip, recycling story panels, and footer, while the hero itself uses a dramatic red photographic field rather than decorative interface color. Lateral is the workhorse: compact navigation, readable product details, and confident headings stay direct and contemporary. Larger display moments use Lateral Extended for a distinctive, weightier editorial voice. The layout alternates between spacious centered statements, wide split-image stories, and dense product carousels, creating a rhythm between brand narrative and shopping. Images are large, tightly framed, and often edge-to-edge; product imagery sits on quiet light backgrounds. Flat surfaces, square controls, and minimal borders keep the interface crisp, while generous gaps separate content without adding ornamental chrome.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, navigation, button fills, and light content areas; it gives photography room to lead. |
| Carbon Ink | `#000000` | `--color-carbon-ink` | brand | Primary copy, navigation, product names, marquee bands, and filled shop buttons. |
| Cloud Grey | `#f7f7f7` | `--color-cloud-grey` | surface | Quiet product-card image backgrounds that separate footwear photography from surrounding white sections. |
| Campaign Red | `#c62b2e` | `--color-campaign-red` | accent | Announcement strip, recycling-story panels, and footer; also echoes the red campaign imagery. |
| Soft Graphite | `#767676` | `--color-soft-graphite` | semantic | Muted supporting text, including secondary product and explanatory details. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f7f7f7` (Cloud Grey) · `--color-text` → `#000000` (Carbon Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#767676` (Soft Graphite) · `--color-border` → `#ffffff` (Gallery White) · `--color-accent` → `#c62b2e` (Campaign Red)

### 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 |
| `#767676` | `#ffffff` | 4.54:1 | AA |
| `#767676` | `#f7f7f7` | 4.24:1 | AA-large |
| `#c62b2e` | `#ffffff` | 5.55:1 | AA |
| `#c62b2e` | `#f7f7f7` | 5.18:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Lateral | `--font-body` | webfont | 400, 700, 500, 600 | Core interface type for navigation, body copy, headings, links, product details, and buttons. | Inter |
| Lateral Extended | `--font-display` | webfont | 500, 700 | Distinctive display treatment for prominent editorial statements. | Space Grotesk |
| Univers LT Std | `--font-univers-lt-std` | webfont | 400, 300 | Occasional compact product-interface details, such as variant-count labels. | Arial |

- **Lateral:** Use regular weights for utility copy, heavier weights for section headings, and uppercase styling for buttons and eyebrow labels.
- **Lateral Extended:** Reserve its broad, confident character for display headlines; measured weights are medium and bold.
- **Univers LT Std:** A minor supporting face; keep use sparse and small rather than extending it to major copy.

### Type scale — Perfect Fifth (ratio ≈ 1.462, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 500 | 1.05 | 0 | — | Lateral Extended | Prominent editorial statements and oversized brand messaging. |
| h1 | 40px | 400 | 1.05 | 0 | — | Lateral | Primary page or campaign headline. |
| h2 | 32px | 600 | 1.25 | 0 | — | Lateral | Section headings for brand stories and product areas. |
| h3 | 20px | 700 | 1.25 | 0 | — | Lateral | Product-category and supporting content headings. |
| body | 14px | 400 | 1.4 | 0 | — | Lateral | Product descriptions, recycling information, and explanatory copy. |
| caption | 10.5px | 400 | 1.2 | 0.05em | uppercase | Lateral | Small uppercase labels and compact metadata. |
| button | 14px | 500 | 1.25 | 0 | uppercase | Lateral | Uppercase shopping and action controls. |
| nav | 12px | 400 | 1.67 | 0 | — | Lateral | Header links and compact navigation items. |
| link | 14px | 400 | 1.4 | 0 | — | Lateral | Product, category, and informational links. |
| eyebrow | 10.5px | 400 | 1.2 | 0.05em | uppercase | Lateral | Uppercase introductory labels above content. |

OpenType features in use: `"liga"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 2, 3, 4, 5, 6, 8, 12, 16, 20, 24, 27, 40, 60, 100 px.
- Section rhythm 60px · element gap 8px · card padding — · max content width 780px.

A wide storefront canvas alternates between two-column campaign stories, product carousels, centered statements, four-item category rows, and three-column editorial features. The measured content max width is 780px, while campaign and closing media can stretch full bleed. Headings align left for stories and shopping modules, with a centered treatment for the “Made to live many lives” statement. Comfortable density and pronounced section gaps separate distinct content modes; product areas carry more compact, repeated information.

## Shape & elevation

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

The interface is predominantly flat, with no measured shadows. Product cards rely on white or pale grey backgrounds rather than raised containers, and square corners reinforce the straightforward retail feel. Separation comes from image blocks, whitespace, and occasional fine rules; avoid adding decorative layers or elevated panels.

## Imagery

Photography is the page’s main expressive layer: lifestyle campaigns show people wearing the shoes in urban settings, while product cards isolate individual sneakers against light grey. Red campaign imagery connects the hero, recycling story, category tiles, and footer. A later full-bleed fashion collage closes the page. Small editorial image groups show materials and everyday wear; imagery is photographic rather than illustrative or 3D-led.

## Components

### Announcement strip

A slim red banner at the very top presents short campaign or service messaging in small uppercase white text.

### Primary navigation

White horizontal header with a bold wordmark, compact black links, and shopping utilities; keep the navigation visually quiet.

### Campaign hero

Large split campaign area combining a red-toned shoe image with lifestyle photography, overlaid white heading and a contrasting shop action.

### Product carousel cards

Footwear sits on #f7f7f7 image fields; white information areas carry product name, price, small variant thumbnails, and muted supporting copy.

### Category tiles

A row of four footwear categories uses large product imagery, concise labels, and simple shop links beneath.

### Recycling story panel

A split editorial feature places white text and an outlined action on a strong red field alongside lifestyle photography.

### Footer

A broad red closing area combines a white brand mark, compact link columns, and supporting brand or social details.

### Measured component styles

- **Primary button** (“WHITE-BLACK-GREY”): background #efeff2 · text #000000 · radius 0px · padding 0px · 400 10.5px Lateral · uppercase
- **Secondary button** (“SHOP NOW”): background #000000 · text #ffffff · border 1px solid #000000 · radius 0px · padding 12px 20px · 500 14px Lateral · uppercase
- **Link** (“Men's Military”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px Lateral
- **Input**: transparent background · text #000000 · radius 0px · padding 3px 0px · 400 14px Lateral
- **Card** (“New WHITE-STONE WHITE-BLACK-GREY METALLI”): background #f7f7f7 · text #000000 · radius 0px · padding 0px · 400 14px Lateral
- **Navigation item** (“Women Men Accessories Recycle Search Sea”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px Lateral

## Do

- Use white as the primary interface canvas.
- Let footwear and campaign photography provide visual impact.
- Use #c62b2e for announcement and recycling-story moments.
- Keep product imagery on quiet pale surfaces.
- Use black text and square, direct action controls.
- Alternate commerce modules with editorial story sections.

## Don't

- Do not add gradients or decorative shadows.
- Do not round product cards or primary controls.
- Do not make every section red or image-heavy.
- Do not crowd product cards with oversized text.
- Do not introduce bright interface colors beyond the measured palette.
- Do not replace campaign photography with generic illustrations.

## Agent prompt

Build a new Thousand Fell-style footwear storefront page with a restrained, editorial commerce aesthetic. Use Gallery White (#ffffff) as the main canvas, Carbon Ink (#000000) for copy and primary controls, Cloud Grey (#f7f7f7) behind product photography, Campaign Red (#c62b2e) for selected campaign bands, and Soft Graphite (#767676) for secondary text. Set the interface in a clean sans-serif close to Lateral, with compact navigation, clear section headings, uppercase action labels, and a distinctive extended display face for one or two major statements. Alternate product grids and category rows with split lifestyle stories and spacious editorial breaks. Favor large, authentic footwear photography, flat square-edged components, quiet borders, and comfortable whitespace. Keep shopping details legible and the brand storytelling visually vivid without adding ornamental effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Large two-column campaign with image-led panels and overlaid copy on the left. | primary shop action, campaign storytelling | red-toned image field, white headline, split photography, dark ticker band |
| 2 | product-grid | Product carousel beneath a left-aligned heading and compact shop link. | browse new arrivals, view product details | light product backgrounds, variant thumbnails, price and product labels |
| 3 | other | Centered, spacious statement with a short supporting line. | brand positioning | centered display headline, minimal supporting copy |
| 4 | category-nav | Four product-category tiles arranged in one horizontal row. | shop by silhouette, category shortcuts | large shoe images, compact labels, simple shop links |
| 5 | feature-split | Two-column story with a red text panel and adjacent lifestyle image. | recycling call to action | red campaign field, white copy, outlined button |
| 6 | category-nav | Four image-led category tiles in a compact horizontal row. | browse best sellers, shop new arrivals | campaign photography, white text overlays, small shop buttons |
| 7 | feature-split | Two-column information block with a large heading and compact supporting content. | explain return program, recycle call to action | left-aligned heading, small service copy, simple text link |
| 8 | feature-split | Editorial image on one side and stacked benefit statements on the other. | learn about materials, shop the footwear | grayscale lifestyle photo, bold mini-headings, compact copy |
| 9 | feature-grid | Three-column image and copy grid beneath a section heading. | explore brand principles | editorial photography, short feature titles, compact descriptions |
| 10 | product-grid | Product carousel below a left-aligned section heading and shop action. | browse women's styles, compare color options | pale product-card fields, variant swatches, price labels |
| 11 | footer | Full-bleed campaign image followed by a red footer with brand and link columns. | navigate store links, visit social channels | fashion collage, white footer typography, red background |

## Source CSS custom properties (selected)

```css
--color-black: #000000;
--color-blue: #000000;
--color-blue-bg: rgba(48,67,233,0.1019607843);
--color-white: #ffffff;
--color-navy: #080f4e;
--color-lavender: #d1bfe7;
--color-sunset: #f95031;
--color-marigold: #ffca40;
--color-dark-green: #14332a;
--color-mist: #efeff2;
--color-orange: #d34518;
--color-dark-grey: #767676;
--color-medium-grey: #d4d4d4;
--color-light-grey: #f0f0f0;
--color-extra-light-grey: #f8f8f8;
--color-error: #d34518;
--color-media-background: #f7f7f7;
--space-5: .3571428571rem;
--space-8: .5714285714rem;
--space-10: .7142857143rem;
--space-15: 1.0714285714rem;
--space-16: 1.1428571429rem;
--space-20: 1.4285714286rem;
--space-25: 1.7857142857rem;
--space-30: 2.1428571429rem;
--space-35: 2.5rem;
--space-40: 2.8571428571rem;
--space-45: 3.2142857143rem;
--space-50: 3.5714285714rem;
--space-55: 3.9285714286rem;
--space-60: 4.2857142857rem;
--space-65: 4.6428571429rem;
--space-70: 5rem;
--space-75: 5.3571428571rem;
--space-80: 5.7142857143rem;
--space-85: 6.0714285714rem;
--space-90: 6.4285714286rem;
--space-100: 7.1428571429rem;
--space-120: 8.5714285714rem;
--space-130: 9.2857142857rem;
```

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