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

# Larroudé · Design System

> Refined footwear, framed like fashion editorial

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

Larroudé’s homepage pairs a restrained monochrome storefront with cinematic, full-bleed fashion photography. Clean product grids, understated type, and compact category links let the shoes and campaign imagery carry the visual identity.

## North star

Keep the interface quiet and the product photography dominant, using clean white space and restrained black typography to frame each image.

## Overview

The visual system keeps the storefront itself quiet: white sections, near-black text, and restrained hairlines make product browsing feel clean and editorial. Large campaign images interrupt the repeated catalog rhythm, bringing in rich greens, warm browns, and blush tones from the photography rather than from a prominent interface palette. Plain is the workhorse sans for navigation, product details, and links; Platform gives headings and uppercase labels a more distinctive editorial voice. Product grids use consistent columns and open white space, with names and prices directly below each image. Category tiles and two-up campaign panels create clear shifts in pace without introducing colored section bands. The first viewport overlays navigation and promotional messaging on a full-bleed image, while the footer reverses to a solid black field with white text. The result is fashion-led commerce: polished, image-first, and easy to scan.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas for the storefront, product grids, and category sections; also used for text over dark photography. |
| Soft Ink | `#111111` | `--color-soft-ink` | neutral | Primary headings, product names, descriptions, and dark text on light surfaces. |
| Runway Black | `#000000` | `--color-runway-black` | brand | Inverse footer surface, link accents, badges, and the narrow announcement strip. |
| Graphite Line | `#333333` | `--color-graphite-line` | neutral | Measured footer border tone; keep it for subtle divisions rather than prominent card outlines. |
| Quiet Silver | `#b8b8b8` | `--color-quiet-silver` | neutral | Muted footer text and secondary information against black. |
| Shearling Sand | `#e8e0d5` | `--color-shearling-sand` | surface | Warm neutral card surface; appears sparingly in product-related areas, not as a defining page band. |
| Charcoal Note | `#414141` | `--color-charcoal-note` | neutral | Minor text tone within measured content; use only for subdued supporting copy. |
| Pale Footer Gray | `#d2d2d2` | `--color-pale-footer-gray` | neutral | Low-frequency footer detail, not a major background or brand color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#000000` (Runway Black) · `--color-surface-2` → `#e8e0d5` (Shearling Sand) · `--color-text` → `#111111` (Soft Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#b8b8b8` (Quiet Silver) · `--color-border` → `#333333` (Graphite Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#111111` | `#ffffff` | 18.88:1 | AAA |
| `#111111` | `#000000` | 1.11:1 | fail |
| `#111111` | `#e8e0d5` | 14.44:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#e8e0d5` | 1.31:1 | fail |
| `#b8b8b8` | `#ffffff` | 1.98:1 | fail |
| `#b8b8b8` | `#000000` | 10.59:1 | AAA |
| `#b8b8b8` | `#e8e0d5` | 1.52:1 | fail |

### Gradients

- `linear-gradient(to right, rgba(0, 0, 0, 0) 0px, rgb(0, 0, 0) 50px, rgb(0, 0, 0) 100%)`
- `linear-gradient(to left, rgba(0, 0, 0, 0) 0px, rgb(0, 0, 0) 50px, rgb(0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Plain | `--font-body` | webfont | 400, 500 | Main interface sans for navigation, body copy, product names, prices, and links. | Inter |
| Platform | `--font-display` | webfont | 400, 500 | Editorial headings, button labels, and eyebrow labels. | DM Sans |

- **Plain:** Regular weight dominates with occasional medium emphasis; body and link text use subtly open tracking.
- **Platform:** Mostly regular headings; buttons and eyebrows use medium weight, uppercase styling, and wide tracking.

### Type scale — Augmented Fourth (ratio ≈ 1.414, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 30px | 400 | 1.5 | 0 | — | Platform | Campaign headline over the homepage hero. |
| h2 | 27px | 400 | 1.1 | 0 | — | Platform | Editorial titles and product-section headings. |
| body | 15px | 400 | 1.4 | 0.009em | — | Plain | General supporting copy and descriptions. |
| caption | 12px | 400 | 1.5 | 0 | — | Plain | Compact secondary labels and product details. |
| button | 13px | 500 | 1.5 | 0.092em | uppercase | Platform | Uppercase calls to action and control labels. |
| nav | 15px | 400 | 1.5 | 0.04em | — | Plain | Primary navigation and menu links. |
| link | 15px | 400 | 1.4 | 0.009em | — | Plain | Product names, prices, and text links. |
| eyebrow | 13px | 500 | 1.5 | 0.092em | uppercase | Platform | Short uppercase campaign or section labels. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 2, 3, 4, 5, 6, 7, 8, 10, 12, 16, 25, 28, 36, 40, 48 px.
- Section rhythm 40px · element gap 16px · card padding — · max content width 1345px.

The page uses a wide, centered storefront with a measured maximum width of 1345px and comfortable density. Most product rows are four columns, while the Best Sellers strip expands to eight items. Sections align to a consistent content edge; product headings sit at the start and See all links at the opposite edge. Full-bleed campaign media breaks up the repeated white catalog sections. Two-up editorial panels add variation, and the black footer closes the sequence. Preserve the measured 40px section rhythm and 16px element rhythm where applicable.

## Shape & elevation

- Radius: button `50%` · nav `50%`
- Shadow `inset` (nav): `rgb(255, 255, 255) 0px 0px 0px 0px inset`
- Motion: standard transition `0.09s cubic-bezier(0, 0, 0.3, 1)` on interactive elements.

The interface is largely flat: white sections meet without pronounced shadows, and product cards have no visible rounded corners. Borders are restrained, with measured dark hairlines most evident in the footer and small outlined product badges. Campaign imagery creates depth through the photography itself, while text overlays sit directly on the image rather than inside elevated containers.

## Imagery

Large fashion photographs lead the experience, with campaign scenes spanning the viewport and text layered over the image. Product imagery is cleanly isolated in pale or white rectangular fields, presented in evenly aligned rows. Category tiles use lifestyle product photos. The imagery supplies the dominant greens, blushes, browns, and black tones; these belong to photography, not the core interface palette.

## Components

### Overlay navigation

White wordmark and navigation links sit over the full-bleed hero image; the menu uses Plain at the measured 15px nav size.

### Announcement strip

A narrow black band above the main navigation carries centered white promotional copy and small directional controls.

### Category tiles

Four image-led categories—Boots, Ballerinas, Pumps, Sneakers—form a compact row with short labels beneath.

### Product grid

White product sections pair a left-aligned heading and See all link with columns of footwear images, names, and prices.

### Campaign banner

Full-width lifestyle imagery carries centered white editorial copy and a simple text link.

### Editorial pair

Two side-by-side image panels use lower-left white titles and Discover More links over the photography.

### Footer

A black four-column footer groups contact details, company links, and shop links in compact white and muted text.

### Product badge

Small uppercase PRE-ORDER or NEW labels use black text and a square-cornered 1px black outline.

### Measured component styles

- **Primary button** (“NEED HELP?”): transparent background · text #ffffff · radius 0px · padding 0px · 500 13px Platform · uppercase
- **Link** (“Verona Ballet Flat In Cocoa Leather And ”): transparent background · text #111111 · radius 0px · padding 0px · 400 15px Plain
- **Card**: background #e8e0d5 · text #111111 · radius 0px · padding 0px · 400 15px Plain
- **Badge** (“PRE-ORDER”): transparent background · text #111111 · border 1px solid #000000 · radius 0px · padding 3px · 400 9.99px Plain · uppercase
- **Navigation item** (“New 163 Pre-Order Best Sellers All Shoes”): transparent background · text #ffffff · radius 0px · padding 0px · 400 15px Plain · shadow rgb(255, 255, 255) 0px 0px 0px 0px inset

## Do

- Use white as the default catalog canvas.
- Let campaign photography occupy large, uninterrupted areas.
- Keep product names and prices directly under their images.
- Use black and near-black text for clear contrast.
- Repeat consistent product columns within each row.
- Keep buttons and labels understated and uppercase.
- Finish with a solid black footer and compact link columns.

## Don't

- Do not turn photography colors into interface accent colors.
- Do not add gradients or decorative shadows to product cards.
- Do not use rounded card containers or heavy borders.
- Do not crowd product images with extra copy.
- Do not introduce colorful section backgrounds across the catalog.
- Do not make navigation visually heavier than the hero.

## Agent prompt

Build a fashion-commerce page in Larroudé’s editorial style. Use Gallery White (#ffffff) for the main canvas, Soft Ink (#111111) for product copy, and Runway Black (#000000) for inverse surfaces and restrained accents. Set Plain or a close sans substitute such as Inter for navigation, details, and links; use Platform or DM Sans for editorial headings and widely tracked uppercase labels. Create a clean, wide product catalog with consistent image columns, compact names and prices, and clear section headings. Break up the grid with full-bleed campaign photography and a small number of two-panel editorial images. Keep corners square, borders rare, and elevation nearly absent. Let colors in the lifestyle imagery provide warmth; do not apply them as interface decoration. End with a black multi-column footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed campaign image beneath an overlay announcement and navigation. | campaign discovery, carousel controls | overlay navigation, centered headline, text link |
| 2 | category-nav | Four image tiles in one horizontal row with labels below. | category shortcuts, image-led browsing | four-column tiles, short captions |
| 3 | product-grid | Left-aligned section title, See all link, and four product columns. | browse products, view all | product cards, names and prices |
| 4 | other | Single full-width lifestyle image with centered text overlay. | campaign discovery, shop category | full-bleed image, centered copy |
| 5 | product-grid | Section heading and See all link above four product columns. | browse products, view all | product cards, price details |
| 6 | other | Full-width campaign image with centered text and link. | seasonal discovery, collection link | full-bleed image, centered overlay |
| 7 | product-grid | Section header followed by an expanded eight-item product row. | browse best sellers, view all | wide product carousel, product labels |
| 8 | other | Single full-bleed campaign image with centered overlay copy. | category discovery, shop category | full-width media, text overlay |
| 9 | product-grid | Section heading, See all link, and four product columns. | browse category, view all | product cards, concise pricing |
| 10 | gallery | Two side-by-side image panels with text at the lower left. | editorial discovery, shop stories | paired photography, overlaid links |
| 11 | product-grid | Section heading and four product cards, with small badges on selected items. | browse new arrivals, spot product status | product badges, image grid, price labels |
| 12 | gallery | Two large side-by-side campaign images with lower-left captions. | campaign discovery, editorial browsing | paired image panels, text links |
| 13 | footer | Black full-width band divided into four compact information columns. | contact support, browse company links | inverse footer, multi-column link lists |

## Source CSS custom properties (selected)

```css
--color-text: #111111;
--color-text-8-percent: rgba(17, 17, 17, 0.08);
--color-text-alpha: rgba(17, 17, 17, 0.35);
--color-text-meta: rgba(17, 17, 17, 0.6);
--color-text-link: #000000;
--color-text-error: #D02F2E;
--color-text-success: #478947;
--color-background: #ffffff;
--color-background-semi-transparent-80: rgba(255, 255, 255, 0.8);
--color-background-semi-transparent-90: rgba(255, 255, 255, 0.9);
--color-background-transparent: rgba(255, 255, 255, 0);
--color-border: #aaaaaa;
--color-border-meta: rgba(170, 170, 170, 0.6);
--color-overlay: rgba(0, 0, 0, 0.7);
--color-background-meta: #f5f5f5;
--color-background-meta-alpha: rgba(245, 245, 245, 0.6);
--color-background-darker-meta: #e8e8e8;
--color-background-darker-meta-alpha: rgba(232, 232, 232, 0.6);
--color-background-placeholder: #e8e8e8;
--color-background-placeholder-lighter: #f0f0f0;
--color-foreground-placeholder: rgba(17, 17, 17, 0.4);
--color-border-input: #aaaaaa;
--color-border-input-alpha: rgba(170, 170, 170, 0.25);
--color-text-input: #111111;
--color-text-input-alpha: rgba(17, 17, 17, 0.04);
--color-text-button: #ffffff;
--color-background-button: #111111;
--color-background-button-alpha: rgba(17, 17, 17, 0.6);
--color-background-outline-button-alpha: rgba(17, 17, 17, 0.1);
--color-background-button-hover: #444444;
--color-icon: rgba(17, 17, 17, 0.4);
--color-icon-darker: rgba(17, 17, 17, 0.6);
--color-text-sale-badge: #000000;
--color-background-sold-badge: #414141;
--color-text-sold-badge: #ffffff;
--color-text-header: #000000;
--color-text-header-half-transparent: rgba(0, 0, 0, 0.5);
--color-background-header: #ffffff;
--color-background-header-transparent: rgba(255, 255, 255, 0);
--color-icon-header: #000000;
```

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