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

# Birdies · Design System

> Polished footwear, framed by editorial calm

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

Birdies pairs an almost monochrome interface with richly styled shoe photography and restrained editorial typography. A clear shopping flow moves from immersive campaigns to product discovery, category browsing, press quotes, and newsletter signup.

## North star

Keep the interface quiet and legible so editorial shoe photography—not decorative UI—provides the page’s color and character.

## Overview

The visual strategy is deliberately restrained: white is the main canvas, black carries navigation and strong text, and pale gray quietly separates product areas and footer content. The measured palette contains no dedicated accent; color comes primarily from photography, where shoes, foliage, stone, and wardrobe styling create rich seasonal contrast. Typography mixes polished editorial moments with practical shopping labels: a Calluna serif hero headline contrasts with uppercase, tracked Sofia Pro navigation and calls to action, while Nunito handles compact body copy. Full-width campaign imagery alternates with clean product and category grids, giving shoppers both mood and clear routes into the catalog. The page uses a comfortable rhythm, generous white space, and a broad content frame rather than dense decoration. Thin gray rules and subtle button shadows provide just enough structure. Keep interface chrome quiet so campaign imagery and footwear remain the visual focus.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Birdies Ink | `#000000` | `--color-birdies-ink` | brand | Primary text, logo, navigation, dark announcement strip, and high-contrast shopping controls. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, navigation band, product imagery backdrop, and light button surfaces. |
| Soft Display Gray | `#f7f7f7` | `--color-soft-display-gray` | surface | Quiet product and footer surfaces that distinguish content without adding strong color. |
| Quiet Divider | `#cccccc` | `--color-quiet-divider` | semantic | Subtle input and interface borders; use as a hairline rather than a prominent frame. |
| Nav Hairline | `#d9d9d9` | `--color-nav-hairline` | neutral | Faint navigation separator detail, not a defining brand color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f7f7f7` (Soft Display Gray) · `--color-surface-2` → `#000000` (Birdies Ink) · `--color-text` → `#000000` (Birdies Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#cccccc` (Quiet Divider)

### 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 |
| `#ffffff` | `#000000` | 21:1 | AAA |

### Gradients

- `linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)), linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0))`
- `linear-gradient(90deg, rgba(0, 0, 0, 0), rgb(255, 255, 255))`
- `linear-gradient(to right, rgb(0, 0, 0), rgb(0, 0, 0))`
- `linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)), linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Nunito | `--font-body` | webfont | 400, 600, 700 | Main body and caption text, with some measured link and navigation instances. | Nunito |
| Sofia Pro Regular | `--font-sofia-pro-regular` | webfont | 400 | Button labels and measured navigation labels. | Montserrat |
| Tangerine | `--font-display` | webfont | 400 | Decorative display heading role in the measured type system. | Tangerine |
| Sofia Pro | `--font-sofia-pro` | webfont | 400, 700 | Headings, links, and uppercase eyebrow labels. | Montserrat |
| Instrument Sans | `--font-instrument-sans` | webfont | 400, 700 | Small measured navigation labels and heading-family custom property. | Instrument Sans |
| calluna | `--font-calluna` | webfont | 400, 300 | Large editorial hero heading, including campaign titles. | Cormorant Garamond |

- **Nunito:** Friendly, readable sans; mostly regular weight, compact body copy, with uppercase labels used elsewhere.
- **Sofia Pro Regular:** Regular-weight sans for concise controls; uppercase navigation and shopping labels create a crisp retail rhythm.
- **Tangerine:** Use sparingly for expressive display moments; its script-like character contrasts with the practical interface.
- **Sofia Pro:** Measured headings are regular; eyebrow and link styles use uppercase with conspicuously open tracking.
- **Instrument Sans:** Use as a clean secondary sans; the screenshot’s navigation remains restrained and predominantly lowercase.
- **calluna:** Light, refined serif contrast for campaign headlines; keep it separate from compact commerce labels.

### Type scale — Perfect Fourth (ratio ≈ 1.361, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 400 | 1 | 0 | — | calluna | Editorial campaign headline over hero photography. |
| h2 | 40px | 400 | 1.5 | 0.05em | — | Tangerine | Expressive display heading for campaign or feature sections. |
| h3 | 32px | 400 | 0.78 | 0 | — | Sofia Pro | Secondary campaign and content headings. |
| h4 | 22px | 400 | 1.2 | 0 | — | Sofia Pro | Compact section or card headings. |
| body | 14px | 400 | 1.5 | 0 | — | Nunito | Product, promotional, and supporting page copy. |
| caption | 13px | 400 | 1.5 | 0 | — | Nunito | Small supporting labels and footnotes. |
| button | 15px | 400 | 1.5 | 0 | — | Sofia Pro Regular | Shopping calls to action and form submission. |
| nav | 15px | 400 | 1.5 | 0 | uppercase | Sofia Pro Regular | Primary product-category navigation. |
| link | 14px | 400 | 1 | 0.088em | uppercase | Sofia Pro | Compact uppercase shopping and utility links. |
| eyebrow | 14px | 400 | 1 | 0.088em | uppercase | Sofia Pro | Tracked uppercase section labels and editorial markers. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 8, 10, 12, 16, 20, 24, 32, 40, 48 px.
- Section rhythm 68px · element gap 8px · card padding — · max content width 1344px.

A broad, centered commerce frame supports a full-bleed campaign hero, followed by a product grid, paired editorial panels, another image-led campaign, category tiles, and a three-panel feature. The measured page max width is 1344px, with a comfortable density and a 4px base spacing unit. Product discovery uses a 12-column section; campaign pairs and category groups shift to two- and four-column layouts. White space separates content bands, while the footer balances a signup area against company and help links.

## Shape & elevation

- Radius: button `50%` · nav `9999px` · xs `8px` · pill `9999px`
- Shadow `inset` (nav): `rgba(0, 0, 0, 0.15) 0px -1px 0px 0px inset`
- Shadow `md` (button): `rgba(0, 0, 0, 0.15) 0px 2px 10px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is predominantly flat, with white canvas areas and pale gray product surfaces doing most of the grouping. Borders are quiet and limited to hairlines around form or navigation details. Measured buttons have a subtle shadow, while restrained image overlays help text sit legibly on campaign photography. Avoid card-like elevation as a default.

## Imagery

Photography is the defining color source: shoes are shown in clean product views as well as styled outdoor and editorial scenes. Campaigns use full-width frames, with concise white or dark text and simple buttons placed over or beside the image. The footwear remains easy to identify; there are no prominent illustrations or 3D renderings. One hero is video-led, reinforcing the fashion-campaign feel.

## Components

### Announcement and navigation

A black shipping message band sits above a white header with the Birdies mark, uppercase category links, and compact utility icons.

### Campaign hero

Full-bleed lifestyle imagery pairs a refined serif headline with a simple contrasting shopping button.

### Product discovery grid

A new-arrivals and best-sellers switcher leads into a multi-column shoe grid with product variants and a centered shop action.

### Editorial image pair

Two side-by-side campaign tiles use short white titles and light shopping buttons over distinct shoe photography.

### Category tiles

A four-column image-led category row labels sandals, sneakers, loafers, and flats directly on the visuals.

### Press and testimonial

A centered editorial quote is supported by a row of publication marks, presented with generous white space.

### Newsletter footer

Signup copy and a simple email field share the footer with company and help link groups, social links, and legal details.

### Measured component styles

- **Primary button**: background #f3f4f6 · text #000000 · radius 0px · padding 8px 12px · 400 15px Sofia Pro Regular
- **Link** (“Call of the Wild SHOP ALL SHOES”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px Nunito
- **Input**: transparent background · text #000000 · border 1px solid #d1cfcd · radius 0px · padding 10.4px 12.8px · 400 14px Nunito
- **Navigation item** (“Birdies shop all new arrivals best selle”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px Nunito

## Do

- Use white and black for the interface’s dominant contrast.
- Let shoe and campaign photography supply most of the color.
- Keep navigation and shopping labels concise and easy to scan.
- Pair editorial serif headlines with clean sans-serif commerce text.
- Use full-bleed photography for major campaign moments.
- Separate product discovery from campaigns with generous white space.

## Don't

- Do not introduce a bright interface accent absent from the measured palette.
- Do not decorate product grids with heavy borders or shadows.
- Do not place dense copy over busy campaign photography.
- Do not make the interface more visually prominent than the footwear.
- Do not use playful display typography for routine controls.
- Do not compress the page into one continuous, crowded content block.

## Agent prompt

Build a fashion-commerce page in Birdies’ restrained editorial style. Use Gallery White (#ffffff) as the primary canvas, Birdies Ink (#000000) for navigation and strong text, and Soft Display Gray (#f7f7f7) for quiet product or footer surfaces. Reserve Quiet Divider (#cccccc) and Nav Hairline (#d9d9d9) for subtle rules. Let polished shoe photography introduce the page’s richer colors. Combine refined serif campaign headlines with practical sans-serif body copy and compact uppercase shopping labels. Structure the page as spacious image-led campaigns alternating with product and category grids, followed by editorial proof and a newsletter footer. Keep controls simple, borders faint, and shadows minimal. Match the measured 1344px maximum content width and comfortable spacing rhythm; do not invent decorative colors or dense card treatments.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed video-led campaign with headline and CTA aligned over the image. | campaign storytelling, single shopping CTA | full-bleed media, serif headline, contrasting button |
| 2 | product-grid | Tabbed product discovery followed by a multi-column catalog grid. | new arrivals and best sellers tabs, variant browsing, shop now action | product photography, light gray image surfaces, compact labels |
| 3 | gallery | Two equal editorial image panels side by side. | distinct campaign links, category-specific discovery | paired photography, overlay titles, light CTA buttons |
| 4 | hero | Full-bleed campaign image with centered editorial copy and CTA. | product storytelling, single product link | full-width lifestyle photography, centered text, high-contrast CTA |
| 5 | category-nav | Four-column image-led category navigation. | browse by shoe type | category photography, direct image labels, even grid |
| 6 | feature-split | Three-part editorial image composition with campaign copy in the center. | collection discovery, campaign CTA | blue-toned product imagery, editorial center panel, image-led layout |
| 7 | testimonials | Centered review text above a horizontal row of publication marks. | social proof, press recognition | editorial quote, publication logos, open white space |
| 8 | footer | Newsletter form and promotional details on one side; company and help links on the other. | email signup offer, support navigation, social links | pale footer surface, simple email field, legal link row |

## Source CSS custom properties (selected)

```css
--section-vertical-spacing: 4.25rem;
--section-vertical-spacing-tight: 4rem;
--section-stack-gap: 3rem;
--section-stack-gap-tight: 3rem;
--form-gap: 1.25rem;
--fieldset-gap: 1rem;
--form-control-gap: 0.625rem;
--checkbox-control-gap: 0.75rem;
--heading-font-family: "Instrument Sans", sans-serif;
--heading-font-weight: 400;
--heading-font-style: normal;
--heading-text-transform: normal;
--heading-letter-spacing: 0.05em;
--text-font-family: Nunito, sans-serif;
--text-font-weight: 400;
--text-font-style: normal;
--text-letter-spacing: 0.0em;
--button-font: normal 600 0.8125rem / 1.65 Nunito, sans-serif;
--button-text-transform: uppercase;
--button-letter-spacing: 0.1em;
--text-heading-size-factor: 1.2;
--text-h1: max(0.6875rem, clamp(1.375rem, 1.146341463414634rem + 0.975609756097561vw, 2rem) * 1.2);
--text-h2: max(0.6875rem, clamp(1.25rem, 1.0670731707317074rem + 0.7804878048780488vw, 1.75rem) * 1.2);
--text-h3: max(0.6875rem, clamp(1.125rem, 1.0335365853658536rem + 0.3902439024390244vw, 1.375rem) * 1.2);
--text-h4: max(0.6875rem, clamp(1rem, 0.9542682926829268rem + 0.1951219512195122vw, 1.125rem) * 1.2);
--text-h5: calc(0.875rem * 1.2);
--text-h6: calc(0.75rem * 1.2);
--text-xxs: 0.6875rem;
--text-xs: 0.75rem;
--text-sm: 0.8125rem;
--text-base: 0.875rem;
--text-lg: 1.0rem;
--text-xl: 1.25rem;
--rounded-full: 9999px;
--button-border-radius: 0.0rem;
--input-border-radius: 0.0rem;
--shadow-sm: 0 2px 8px rgb(0 0 0 / 0.05);
--shadow: 0 5px 15px rgb(0 0 0 / 0.05);
--shadow-md: 0 5px 30px rgb(0 0 0 / 0.05);
--shadow-block: px px px rgb(var(--text-primary) / 0.0);
```

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