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

# Sarah Flint · Design System

> Quiet luxury, grounded in craft and comfort

**Theme:** light · **Industry:** fashion · **Source:** https://www.sarahflint.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 luxury footwear homepage pairs refined editorial typography with close-up product imagery and generous white space. Neutral product grids give way to warm campaign photography, with simple navigation and understated shopping controls.

## North star

Let refined editorial typography and warm footwear photography lead, while keeping the interface neutral, spacious, and easy to shop.

## Overview

The page uses a white canvas as its visual anchor, with near-black typography and pale gray product-card surfaces keeping the storefront quiet and legible. The muted palette supports the imagery rather than competing with it: campaign photography supplies warm creams, browns, and deep botanical shadows, while the footer becomes a distinct dark information band. IvyPresto Display brings an editorial, feminine character to headings and product names; Proxima Nova handles navigation, labels, and controls with a more functional voice. The layout alternates broad campaign panels with centered category introductions and compact, multi-column shoe grids. Product photography is cleanly framed against light backgrounds, while lifestyle images add texture and context. Generous section separation lets these different image modes breathe. Borders and small badges mark interactions and product details without adding heavy decoration or elevation.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas across the header, product sections, and post-footer strip; also used for light text on dark controls. |
| Soft Ink | `#121212` | `--color-soft-ink` | brand | Main dark text and links; forms the inverse newsletter footer and its primary button surface. |
| Quiet Gray | `#e7e7e7` | `--color-quiet-gray` | surface | Measured pale section surface; use for subtle section bands rather than as a campaign-image color. |
| Porcelain Gray | `#f4f4f4` | `--color-porcelain-gray` | surface | Product-card background behind isolated footwear photography. |
| Muted Silver | `#c4c4c4` | `--color-muted-silver` | neutral | Low-emphasis footer text and secondary information. |
| Charcoal Gray | `#4d4d4d` | `--color-charcoal-gray` | neutral | Secondary navigation and footer text where full black would feel too strong. |
| True Black | `#000000` | `--color-true-black` | semantic | Selected strong text, links, and measured media or badge details; use sparingly against the white canvas. |
| Fine Silver | `#cccccc` | `--color-fine-silver` | neutral | Thin media outlines and subtle separators, not a prominent decorative border. |
| Pale Line | `#ececec` | `--color-pale-line` | neutral | Faint measured button and footer detailing; keep it visually subordinate. |
| Badge Gray | `#dddddd` | `--color-badge-gray` | semantic | Fine outline around small product badges. |
| Alert Red | `#ff0000` | `--color-alert-red` | accent | A rare measured text accent; reserve for small emphasis, not large surfaces or primary CTAs. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#e7e7e7` (Quiet Gray) · `--color-surface-2` → `#f4f4f4` (Porcelain Gray) · `--color-surface-3` → `#121212` (Soft Ink) · `--color-text` → `#000000` (True Black) · `--color-text-muted` → `#121212` (Soft Ink) · `--color-text-subtle` → `#c4c4c4` (Muted Silver) · `--color-border` → `#cccccc` (Fine Silver) · `--color-accent` → `#ff0000` (Alert Red)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#e7e7e7` | 16.98:1 | AAA |
| `#000000` | `#f4f4f4` | 19.09:1 | AAA |
| `#000000` | `#121212` | 1.12:1 | fail |
| `#121212` | `#ffffff` | 18.73:1 | AAA |
| `#121212` | `#e7e7e7` | 15.15:1 | AAA |
| `#121212` | `#f4f4f4` | 17.03:1 | AAA |
| `#c4c4c4` | `#ffffff` | 1.74:1 | fail |
| `#c4c4c4` | `#e7e7e7` | 1.41:1 | fail |
| `#c4c4c4` | `#f4f4f4` | 1.59:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ivypresto-display | `--font-body` | webfont | 400 | Editorial headings, product names, and prominent text links. | Cormorant Garamond |
| proxima-nova | `--font-proxima-nova` | webfont | 400, 700 | Navigation, buttons, captions, labels, and functional storefront text. | Montserrat |

- **ivypresto-display:** Regular-weight serif with lightly expanded tracking; sentence case and title case keep the editorial tone.
- **proxima-nova:** Regular and bold weights; compact utility copy, tracked uppercase eyebrows, and clear, bold navigation labels.

### Type scale — Perfect Fourth (ratio ≈ 1.324, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 400 | 1.3 | 0.015em | — | ivypresto-display | Primary campaign or page heading in editorial display serif. |
| h2 | 30px | 400 | 1.3 | 0.02em | — | ivypresto-display | Section titles introducing categories and product collections. |
| h3 | 24px | 400 | 1.3 | 0.025em | — | ivypresto-display | Product and secondary editorial headings. |
| h4 | 18px | 400 | 1.3 | 0.033em | — | ivypresto-display | Smaller collection headings and supporting content titles. |
| body | 13px | 400 | 1.5 | 0.077em | — | ivypresto-display | Editorial descriptions and supporting brand copy. |
| caption | 12px | 400 | 0.83 | 0.083em | capitalize | proxima-nova | Compact product labels and image captions. |
| button | 15px | 400 | 1.2 | 0.067em | — | proxima-nova | Shopping, newsletter, and carousel controls. |
| nav | 14px | 700 | 1.3 | 0.043em | — | proxima-nova | Primary category navigation and utility menu labels. |
| link | 16.5px | 400 | 1.3 | 0.037em | — | ivypresto-display | Product names and editorial text links. |
| eyebrow | 10px | 700 | 1.2 | 0.13em | uppercase | proxima-nova | Uppercase introductory labels above headings. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 1, 2, 4, 5, 6, 7, 10, 12, 16, 30, 50 px.
- Section rhythm 50px · element gap 18px · card padding — · max content width 780px.

A centered header sits above a full-bleed split campaign hero. The rest of the page alternates centered category introductions, four-column image tiles, and four-column product grids with large photographic bands between them. Measured content max width is 780px; campaign media may span the viewport. The page uses a comfortable density and a measured 50px section gap, with headings commonly centered and the newsletter footer aligned in columns.

## Shape & elevation

- Radius: media `50%` · badge `2px` · link `6px` · xs `2px` · sm `6px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0, 0, 0.3, 1)` on interactive elements.

The interface is predominantly flat: no measured shadow system or gradients define the page. Product cards rely on pale backgrounds, while thin gray outlines distinguish select media and badges. The cookie notice is visibly layered above the hero in the screenshot, but keep ordinary sections and cards unraised.

## Imagery

Photography defines the page: isolated shoes sit on pale, low-detail card backgrounds, while full-width campaign panels show footwear in styled settings and brand-making scenes. Category tiles use cropped lifestyle shots that include models, outfits, and product context. The top campaign pairs a dark, textured shoe photograph with a light editorial text panel. No illustrative or 3D treatment defines the brand.

## Components

### Primary navigation

White header with a centered wordmark, utility icons, and a horizontal category menu in bold Proxima Nova; keep links dark and unboxed.

### Campaign hero

Full-bleed split composition pairing footwear photography with a pale editorial panel, serif display copy, and a restrained shop CTA.

### Category tile

Four-image lifestyle row with image-led cards and small overlaid serif labels; use photography rather than ornamental card chrome.

### Product card

Footwear isolated on #f4f4f4, with small badge, serif product name, price, and compact color options below.

### Product badge

Small, lightly filled badge with dark text and a fine #dddddd border; use for labels such as New or Bestseller.

### Newsletter footer

Dark #121212 footer band with offer copy, email input, and grouped assistance and policy links in subdued light text.

### Text link

Dark serif product or editorial link; measured text links use #121212, with occasional understated outlined navigation-style links.

### Measured component styles

- **Primary button** (“Skip to content”): background #121212 · text #ffffff · radius 0px · padding 0px 30px · 400 15px proxima-nova
- **Link** (“Perfect Perez 85”): transparent background · text #121212 · radius 0px · padding 0px · 400 16.25px ivypresto-display
- **Input**: transparent background · text #121212 · radius 0px · padding 15px 98px 15px 15px · 400 16px proxima-nova
- **Card** (“New”): background #f4f4f4 · text #111111 · radius 0px · padding 0px · 400 16px proxima-nova
- **Badge** (“New”): background #fbfbfb · text #000000 · border 1px solid #dddddd · radius 1.875px · padding 4.4px 6.3px 5px 6.3px · 400 12px proxima-nova · capitalize
- **Navigation item** (“NEW IN BESTSELLERS SHOP ALL PUMPS BOOTS ”): transparent background · text #111111 · radius 0px · padding 0px · 400 16px proxima-nova

## Do

- Keep the main canvas white and the interface palette restrained.
- Use editorial serif type for collection titles and product names.
- Let campaign photography carry warmth, texture, and color.
- Keep product images clean against pale gray card surfaces.
- Use dark sans-serif text for functional navigation and controls.
- Separate major image and product sections with generous breathing room.

## Don't

- Do not introduce gradients or decorative shadows.
- Do not use bright accent colors as large interface surfaces.
- Do not crowd product cards with extra visual chrome.
- Do not apply the footer's dark treatment to the whole page.
- Do not force campaign photography into a uniform product-grid crop.
- Do not replace the serif and sans-serif contrast with a single type voice.

## Agent prompt

Build a luxury footwear storefront page in the Sarah Flint visual style. Use Gallery White (#ffffff) as the canvas, Soft Ink (#121212) for core text and the dark newsletter footer, Porcelain Gray (#f4f4f4) behind isolated shoe photography, and fine neutral borders such as Fine Silver (#cccccc) only where useful. Pair an elegant editorial serif similar to Cormorant Garamond with a clean functional sans-serif similar to Montserrat. Structure the page with a quiet centered header, a split full-bleed campaign, image-led category tiles, airy product grids, and a dark multi-column footer. Keep product details restrained and readable; use small outlined badges and simple controls. Use warm lifestyle photography to supply color, and avoid gradients, heavy shadows, or oversized interface accents.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | White header with centered wordmark, utility icons, and a horizontal category menu. | category navigation, account and cart access, country selector | centered serif wordmark, bold sans-serif links, minimal utility icons |
| 2 | hero | Full-bleed split campaign: footwear photography on one side, pale campaign panel on the other. | campaign CTA, featured collection | split composition, editorial serif copy, image-led |
| 3 | category-nav | Centered category introduction followed by a four-column lifestyle image row. | category shortcuts, shop collection links | centered serif heading, image tiles, overlay labels |
| 4 | feature-grid | Editorial collage of footwear and lifestyle images in a broad campaign band. | collection storytelling, shop now link | asymmetric photo collage, warm neutral imagery |
| 5 | hero | Full-bleed campaign panel with a photographic and editorial split. | collection promotion, shop CTA | full-width imagery, campaign typography |
| 6 | product-grid | Four-column product row with pale image cards and centered product details. | product discovery, quick product comparison, view all | New badges, price labels, color swatches |
| 7 | product-showcase | Centered collection intro above a multi-row, four-column footwear grid. | collection browsing, product discovery | serif section heading, Bestseller badges, color swatches |
| 8 | hero | Full-bleed two-part brand story, image beside a colored text panel. | brand narrative, craft and comfort message | split image and copy, serif statement, signature detail |
| 9 | product-grid | Wide product carousel with a section title, multi-column cards, and pagination controls. | carousel browsing, pagination, view all | product cutouts, Bestseller badges, swatches |
| 10 | feature-split | Text-led craft panel paired with a large workshop and product photograph. | craftsmanship storytelling, brand education | serif heading, supporting copy, split image |
| 11 | testimonials | Wide, pale quote panel with centered testimonial and carousel controls. | quote rotation, carousel navigation | centered italic serif quote, small publication credit |
| 12 | newsletter | Dark footer band divided into newsletter signup and grouped information columns. | email signup, assistance links, policy navigation | dark background, light text, email input |
| 13 | footer | White closing strip with brand mark, copyright, and social links. | social navigation, copyright information | centered wordmark, small utility text |

## Source CSS custom properties (selected)

```css
--color-background: 255,255,255;
--gradient-background: #ffffff;
--color-foreground: 18,18,18;
--color-background-contrast: 191,191,191;
--color-shadow: 18,18,18;
--color-button: 18,18,18;
--color-button-text: 255,255,255;
--color-secondary-button: 255,255,255;
--color-secondary-button-text: 18,18,18;
--color-link: 18,18,18;
--color-badge-foreground: 18,18,18;
--color-badge-background: 255,255,255;
--color-badge-border: 18,18,18;
--payment-terms-background-color: rgb(255 255 255);
--font-body-style: normal;
--font-body-weight: 400;
--font-body-weight-bold: 700;
--font-heading-style: normal;
--font-heading-weight: 400;
--font-body-scale: 1.0;
--font-heading-scale: 1.0;
--media-border-opacity: 0.05;
--media-border-width: 1px;
--media-radius: 0px;
--media-shadow-opacity: 0.0;
--media-shadow-horizontal-offset: 0px;
--media-shadow-vertical-offset: 4px;
--media-shadow-blur-radius: 5px;
--media-shadow-visible: 0;
--product-card-corner-radius: 0.0rem;
--product-card-text-alignment: center;
--product-card-border-width: 0.0rem;
--product-card-border-opacity: 0.1;
--product-card-shadow-opacity: 0.0;
--product-card-shadow-visible: 0;
--product-card-shadow-horizontal-offset: 0.0rem;
--product-card-shadow-vertical-offset: 0.4rem;
--product-card-shadow-blur-radius: 0.5rem;
--collection-card-corner-radius: 0.0rem;
--collection-card-text-alignment: left;
```

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