CURATED · OPEN · FREE

Cowboy

A refined, premium brand site for an urban e-bike company, using a monochrome palette and high-quality imagery.

ProductHardwareCalmRefinedClean
Cowboy screenshot
↓ Download design system (59 MB)Open in OpenDesign

Visit: https://cowboy.com

📦 Browse pack contents →

01

Identity DNA

premiumurban mobilityminimalistsophisticatedlifestyle

A high-end European e-bike brand that blends industrial design with urban lifestyle photography.

02

Color

#1D1D1DInk
#1D1D1D99Ink soft
#FFFFFFBG
#EBEAE7BG soft
#A3A3A3Muted
rgba(229, 231, 235, 1)Line

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

03

Typography

humanist-sans · monospace

04

Spacing

4px
8px
16px
24px
32px
48px
64px
96px

A consistent 4px base unit with standard increments, using larger values (48px, 64px) for major section padding.

05

Surfaces

sm · 4px
md · 8px
lg · 8px
pill · 9999px

1px solid rgb(229, 231, 235) used for inputs and subtle separators.

rgba(0, 0, 0, 0.1) 0px 10px 15px -3px · rgba(0, 0, 0, 0.06) 0px 1px 6px 0px

06

Layout

1280container
12columns
24pxgutter
768 / 1024breakpoints

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

07

Motion & Interaction

100msmicro
150mssmall
300msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth transitions for color, background, and border changes · Standard material-style easing for micro-interactions

Subtle color or background transitions on interactive elements. · Active states likely involving subtle transforms or color inversions.

08

Components

09

Voice & Don'ts

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko