# Cowboy · Design system migration spec

> Source: https://cowboy.com  ·  Curated by OpenDesign  ·  en

> This site is a prime example of a premium hardware brand using minimalism, high-quality photography, and strict color restraint to convey sophistication.

## 1. Identity DNA

Cowboy's visual identity operates like a high-end European e-bike brand—where industrial design precision meets the candid texture of urban lifestyle photography. Every element serves a singular, premium focus, stripping away decoration to reveal a sophisticated core of minimalist function.

**One-liner:** A refined, premium brand site for an urban e-bike company, using a monochrome palette and high-quality imagery.
**Keywords:** premium · urban mobility · minimalist · sophisticated · lifestyle
**Analogy:** A high-end European e-bike brand that blends industrial design with urban lifestyle photography.

## 2. Color

Color is disciplined to a monochromatic foundation of near-black and white, with warm grays introduced only for functional hierarchy and subtle borders. The system rejects vibrant accents entirely, allowing high-quality imagery and generous whitespace to carry the emotional weight.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#EBEAE7` | card background |
| `--ink` | `#1D1D1D` | body text |
| `--ink-soft` | `#1D1D1D99` | secondary text |
| `--muted` | `#A3A3A3` | placeholder |
| `--line` | `rgba(229, 231, 235, 1)` | divider |

**Color principle:** A strictly neutral palette dominated by near-black and white, using subtle warm grays for secondary elements and borders.

The principle is absolute: color restraint creates a neutral stage where the product and its world become the singular focus.

## 3. Typography

Typography is voiced through a clean humanist-sans category, prioritizing clarity and a sense of refined approachability. The scale is purpose-built, with distinct tiers for bold headlines, functional UI text, and discreet fine print.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.0 | 400 | -1.8px | Large hero headlines and modal titles |
| body | 16px | 1.47 | 400 | normal | Standard body text and UI elements |
| caption | 12px | 1.33 | 400 | normal | Fine print and legal text |

## 4. Spacing

Spacing follows a strict 4px rhythm, creating a consistent and predictable visual cadence across the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A consistent 4px base unit with standard increments, using larger values (48px, 64px) for major section padding.

## 5. Surfaces

Depth is articulated through carefully calibrated, low-opacity drop shadows that lift elements without creating harsh contrasts. Surfaces are defined by light, 1px borders in warm gray, establishing subtle separation and input boundaries.

- **Radius:** sm 4px · md 8px · lg 8px · pill 9999px
- **Shadows:**
  - rgba(0, 0, 0, 0.1) 0px 10px 15px -3px
  - rgba(0, 0, 0, 0.06) 0px 1px 6px 0px
- **Borders:** 1px solid rgb(229, 231, 235) used for inputs and subtle separators.

## 6. Layout

The layout skeleton is anchored by a focused, centered column. Key components, like the newsletter modal, employ a split-panel approach that divides the view equally between imagery and content on desktop before stacking vertically on mobile.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** The modal overlay splits into a 50/50 image-text layout on desktop and stacks vertically on mobile.

## 7. Motion & Interaction

Motion philosophy prioritizes subtlety and purpose over decoration. Transitions are smooth and brief, using standard material-style easing to communicate state changes clearly.

- **Durations:** micro 100ms · small 150ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions for color, background, and border changes
  - Standard material-style easing for micro-interactions

- **Hover:** Subtle color or background transitions on interactive elements.
- **Click:** Active states likely involving subtle transforms or color inversions.
- **Transition:** 0.1s to 0.3s transitions for most UI state changes.
- **Keyboard:** Standard focusable elements with likely outline-based focus rings.

## 8. Voice & Don'ts

The editorial voice is sophisticated, inviting, and subtly playful, favoring short, evocative headlines with tight tracking. It deliberately avoids technical jargon, corporate language, and aggressive sales pitches in favor of direct, action-oriented calls to action.

- **Tone:** Sophisticated, inviting, and subtly playful.
- **Headline style:** Short, evocative, and conversational, often with slightly reduced tracking.
- **CTA style:** Direct and action-oriented, using full-width pill buttons for high visibility.
- **Avoid:** Technical jargon / Overly corporate language / Aggressive sales pitches

### Don'ts
- ❌ don't use a vibrant, high-saturation accent color — screenshot shows a strictly neutral palette
- ❌ don't use sharp, square corners — screenshot shows consistently rounded borders (8px and pill)
- ❌ don't use decorative or display typefaces — screenshot shows a clean humanist-sans font
- ❌ don't use wide letter spacing — screenshot shows significant negative tracking on large headlines
- ❌ don't use drop shadows on buttons — screenshot shows flat, solid-color buttons
- ❌ don't use cluttered grids — screenshot shows generous whitespace and centered, focused layouts

The system is defined as much by what it refuses—vibrant accents, square corners, decorative type, cluttered grids—as by what it permits.

## System Prompt (paste into AI tool)

```
This is a premium, refined brand site for a modern e-bike company (Cowboy). The design DNA is minimalist and sophisticated, using a strictly neutral palette of near-black (#1D1D1D) and white (#FFFFFF) with subtle warm grays for borders and secondary text. Typography is a clean humanist-sans (SuisseIntl) with large, tight-tracked headlines. Key interactions are handled through pill-shaped buttons and clean, well-padded form inputs. The layout is focused and spacious, often centered. Critical donts: never use vibrant accent colors, never use sharp square corners, and never use wide-tracked or decorative typography.
```