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

# Cowboy · Design System

> Quietly refined, built around the ride.

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

Cowboy’s homepage pairs a restrained monochrome interface with immersive urban cycling imagery. Large editorial headlines and expansive product showcases alternate with concise feature details and proof points.

## North star

Let cinematic bicycle imagery and oversized, calm typography lead, while keeping interface color and decoration deliberately restrained.

## Overview

The visual system is anchored by a soft #f5f5f5 canvas, crisp white product panels, and deep #1d1d1d sections that frame cinematic hero and model imagery. Typography stays largely in SuisseIntl: regular-weight, clean sans-serif headlines scale dramatically against concise supporting copy, while occasional monospaced display styling adds a technical accent. The page alternates full-bleed, darkened lifestyle photography with bright, spacious bicycle showcases; its broad section changes create rhythm without relying on ornamental decoration. Product cards and controls use restrained rounded forms, while pale neutral surfaces keep the visual focus on bikes and riders. Large images, quiet navigation, compact proof points, and short feature lists make the experience feel editorial and premium rather than like a dense catalog. Warm beige and gray tones appear as limited section treatments or image-led gradients, not as dominant brand accents.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Mist | `#f5f5f5` | `--color-gallery-mist` | surface | Primary page canvas and quiet bands behind press, editorial, community, and test-ride content. |
| Graphite Ink | `#1d1d1d` | `--color-graphite-ink` | brand | Dark hero and feature bands, headline text, dark primary controls, and contrast panels. |
| Studio White | `#ffffff` | `--color-studio-white` | surface | Clean product-showcase panels, light cards, and reversed text or controls on dark imagery. |
| Soft Slate | `#777777` | `--color-soft-slate` | neutral | Muted supporting copy and subdued secondary interface details. |
| Warm Parchment | `#f1eee7` | `--color-warm-parchment` | surface | Occasional warm-tinted section surface; supporting neutral rather than a primary brand accent. |
| Mist Gray | `#cfcfcf` | `--color-mist-gray` | neutral | Pale gradient or section transition tone; not a defining interface color. |
| Iron Line | `#3e3e3e` | `--color-iron-line` | semantic | Footer hairlines and structural dividers. |
| Ash Detail | `#a0a09f` | `--color-ash-detail` | neutral | Subtle footer and text detail, including low-emphasis heading or supporting copy. |

### Semantic aliases

`--color-canvas` → `#f5f5f5` (Gallery Mist) · `--color-surface` → `#ffffff` (Studio White) · `--color-surface-2` → `#1d1d1d` (Graphite Ink) · `--color-surface-3` → `#f1eee7` (Warm Parchment) · `--color-text` → `#1d1d1d` (Graphite Ink) · `--color-text-muted` → `#777777` (Soft Slate) · `--color-text-subtle` → `#ffffff` (Studio White) · `--color-border` → `#3e3e3e` (Iron Line)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1d1d1d` | `#f5f5f5` | 15.46:1 | AAA |
| `#1d1d1d` | `#ffffff` | 16.86:1 | AAA |
| `#1d1d1d` | `#f1eee7` | 14.55:1 | AAA |
| `#777777` | `#f5f5f5` | 4.11:1 | AA-large |
| `#777777` | `#ffffff` | 4.48:1 | AA-large |
| `#777777` | `#1d1d1d` | 3.76:1 | AA-large |
| `#777777` | `#f1eee7` | 3.86:1 | AA-large |
| `#ffffff` | `#f5f5f5` | 1.09:1 | fail |
| `#ffffff` | `#1d1d1d` | 16.86:1 | AAA |
| `#ffffff` | `#f1eee7` | 1.16:1 | fail |

### Gradients

- `linear-gradient(to top, rgba(228, 221, 208, 0.5), rgba(0, 0, 0, 0))`
- `linear-gradient(to top, rgba(97, 97, 97, 0.3), rgba(0, 0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| SuisseIntl | `--font-body` | webfont | 400, 500, 600 | Primary navigation, headlines, body copy, links, buttons, and captions. | Inter |
| ui-monospace | `--font-mono` | system | 400 | Occasional technical or code-like display treatment, including measured h2 and code roles. | IBM Plex Mono |

- **SuisseIntl:** Mostly regular weight; use measured medium for navigation and buttons. Display headlines are large, tightly tracked, and sentence case.
- **ui-monospace:** Use sparingly as a distinctive technical contrast; measured display styling is regular weight with neutral tracking.

### Type scale — Augmented Fourth (ratio ≈ 1.443, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 100px | 400 | 0.9 | -0.025em | — | SuisseIntl | Oversized hero-style campaign headlines. |
| h1 | 72px | 400 | 1 | -0.025em | — | SuisseIntl | Primary product and campaign headlines. |
| h2 | 64px | 400 | 1 | 0 | — | ui-monospace | Occasional monospaced section heading treatment. |
| h3 | 52px | 400 | 1 | -0.025em | — | SuisseIntl | Secondary feature and editorial headings. |
| h4 | 44px | 400 | 1 | -0.025em | — | SuisseIntl | Smaller feature-card or supporting section headings. |
| body | 16px | 400 | 1.47 | 0 | — | SuisseIntl | Descriptions, product details, and editorial copy. |
| caption | 14px | 400 | 1 | 0 | — | SuisseIntl | Compact labels and image or feature captions. |
| button | 16px | 500 | 1 | 0 | — | SuisseIntl | Calls to action and pill-control text. |
| nav | 16px | 500 | 1 | -0.025em | — | SuisseIntl | Top navigation links and menu items. |
| link | 16px | 400 | 1.47 | 0 | — | SuisseIntl | Inline and secondary action links. |
| code | 64px | 400 | 1 | 0 | — | ui-monospace | Technical or numerical display treatment. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 10, 12, 20, 24, 48, 60, 64, 110, 120 px.
- Section rhythm 60px · element gap 10px · card padding 56px · max content width 1320px.

Use a broad centered content area, measured at a 1320px maximum width, with a comfortable density and ample breathing room. The page alternates full-bleed hero and product media with contained editorial sections, creating a clear light-dark-light rhythm. Most sections align content to the start; selected brand statements and technology features are centered. Product galleries and feature areas may use multiple columns, while media often spans the full viewport. Keep spacing on the measured 4px-based scale and preserve generous section gaps.

## Shape & elevation

- Radius: button `8px` · card `8px` · media `8px` · badge `8px` · link `8px` · xs `8px` · pill `9999px`
- Shadow `lg` (button): `rgba(0, 0, 0, 0.06) 0px 1px 6px 0px, rgba(0, 0, 0, 0.16) 0px 2px 32px 0px`
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat: broad color bands and image composition create hierarchy rather than stacked cards. Use restrained hairlines, especially in the footer, and measured rounded corners on cards and media. Buttons are generally clean filled pills without a visible shadow; where elevation is required, keep it soft and subtle.

## Imagery

Prioritize cinematic lifestyle photography and high-quality bicycle product imagery. Hero scenes are full-bleed and darkened enough to support readable white text; product sections use bright, uncluttered backgrounds and large isolated bikes. Feature videos and community photo grids add movement and human context. Warm or dark tones within imagery belong to the photographs, not a new interface palette.

## Components

### Pill CTA

Use a pill-shaped action with SuisseIntl medium text; dark fill and white text for primary actions, or white fill and dark text for alternate actions.

### Product showcase

Place a large bike image on a bright white panel, with a concise model heading, compact feature list, and understated model controls.

### Full-bleed campaign hero

Use immersive lifestyle media with a dark treatment, white navigation and headline, short supporting copy, and a contrasting light CTA.

### Feature badge

Small dark rounded label with white text, used over or beside product imagery for concise technical claims.

### Press proof cards

A horizontal series of light quote or award cards with compact editorial text and publication marks.

### Feature list

Present short product capabilities with compact labels and simple plus-style markers, avoiding dense explanatory copy.

### Measured component styles

- **Primary button** (“Explore”): background #1d1d1d · text #ffffff · radius 9999px · padding 20px 24px · 500 16px SuisseIntl
- **Secondary button** (“Discover Cruiser”): background #ffffff · text #1d1d1d · radius 9999px · padding 20px 24px · 500 16px SuisseIntl
- **Link** (“Shop accessories”): background #e8e8e8 · text #1d1d1d · radius 0px · padding 12px 0px · 400 16px SuisseIntl
- **Card** (“"Best e-bike for commuters"”): background #ffffff · text #1d1d1d · radius 8px · padding 48px 64px · 400 16px SuisseIntl
- **Badge** (“Always visible, day and night”): background #1c1c1c · text #ffffff · radius 8px · padding 6px 12px · 400 14px SuisseIntl
- **Navigation item** (“E-bikes”): transparent background · text #ffffff · radius 0px · padding 0px · 500 16px SuisseIntl

## Do

- Use #f5f5f5 as the principal page canvas.
- Reserve #1d1d1d bands for strong contrast and campaign storytelling.
- Let large, high-quality bicycle and rider imagery carry the page.
- Keep headlines clean, oversized, and mostly regular weight.
- Alternate immersive media with quiet product and editorial sections.
- Use white or dark pill CTAs with clear contrast.

## Don't

- Do not introduce unmeasured accent colors into interface elements.
- Do not make the layout resemble a dense conventional product catalog.
- Do not add decorative gradients as a dominant page treatment.
- Do not place long paragraphs over busy photography.
- Do not use heavy shadows or ornamental borders to create hierarchy.
- Do not let illustration or photograph colors redefine the interface palette.

## Agent prompt

Build a new Cowboy page that follows the brand’s restrained, editorial e-bike style. Use Gallery Mist (#f5f5f5) for the main canvas, Studio White (#ffffff) for clean product panels, and Graphite Ink (#1d1d1d) for high-contrast campaign bands, headlines, and primary controls. Keep Warm Parchment (#f1eee7) and Mist Gray (#cfcfcf) limited to subtle section treatments. Use SuisseIntl or a close sans-serif substitute such as Inter; reserve monospaced styling for occasional technical emphasis. Create broad, breathable sections that alternate full-bleed rider imagery with uncluttered bicycle showcases, concise feature lists, and editorial proof points. Keep navigation quiet, CTAs rounded and clear, and card decoration minimal. Treat photography colors as content, not interface accents.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed cinematic opening with left-aligned headline and overlaid navigation. | primary model CTA, persistent top navigation | dark image treatment, white headline, light pill CTA |
| 2 | product-showcase | Bright, full-width bicycle showcase with model details and compact controls. | model selection, feature scan, gallery navigation | white product panel, large isolated bike, compact feature list |
| 3 | hero | Full-bleed dark lifestyle scene with left-aligned text and action. | model-specific discovery CTA | cinematic media, white copy, dark overlay |
| 4 | product-showcase | Bright, full-width product presentation with bike image and concise specification list. | model selection, gallery navigation, specification scan | large bicycle image, light background, simple controls |
| 5 | logo-cloud | Compact horizontal strip of press quotes, award marks, and publication references. | social proof | light cards, publication marks, short quotes |
| 6 | other | Spacious, centered statement on a neutral canvas. | brand message | centered headline, minimal decoration |
| 7 | video | Large media-led area with full-bleed video content. | immersive viewing | large video, minimal framing |
| 8 | feature-grid | Centered technology heading above a three-column feature explanation. | feature comparison, technology explanation | three columns, simple iconography, centered heading |
| 9 | feature-split | Dark feature area with a text panel beside a large bicycle detail image. | feature-by-feature browsing | contrasting split panels, image card, stacked feature labels |
| 10 | other | Short centered headline on a spacious pale canvas. | community message | minimal typography, open whitespace |
| 11 | gallery | Broad gallery of rider photography and supporting video. | community browsing | photo grid, mixed media, rounded image tiles |
| 12 | stats | Centered odometer-style number with a small explanatory caption. | impact proof point | digit tiles, compact caption |
| 13 | cta | Split content panel and regional map illustration, with action in the text area. | test-ride booking, service-area context | dark text panel, light map, pill CTA |
| 14 | recommendations | Centered comparison or guidance prompt with supporting product imagery and two actions. | guided selection, download guide | light neutral panel, centered heading, paired CTAs |
| 15 | feature-grid | Image-led multi-column closing band with concise brand, quality, and support stories. | learn more, service discovery | large editorial imagery, multiple columns, compact actions |

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