---
name: Cowboy
description: "This site is a prime example of a premium hardware brand using minimalism, high-quality photography, and strict color restraint to convey sophistication."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1D1D1D"
  secondary: "#1D1D1D99"
  neutral: "#A3A3A3"
  bg-soft: "#EBEAE7"
  line: "rgba(229, 231, 235, 1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 64px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1.8px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.47
    fontWeight: 400
    letterSpacing: "normal"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.33
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 8px
  lg: 8px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

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

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1D1D1D`)** — uses `ink` token
- **Secondary text (`#1D1D1D99`)** — uses `ink-soft` token
- **Muted (`#A3A3A3`)** — uses `muted` token
- **Borders (`rgba(229, 231, 235, 1)`)** — uses `line` token

## Typography

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

## Layout

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

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

## Elevation & Depth

- 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.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 8px
- `pill`: 9999px

## Components

- **button:** Full-width, pill-shaped solid buttons with high-contrast black fill and white text.
- **card:** Modal-style split panels combining a full-bleed lifestyle image with a clean white form container.
- **chip:** None visible in the primary modal interface.
- **input:** Clean, bordered text inputs with generous internal padding and light gray placeholders.
- **hero:** Full-bleed lifestyle photography integrated into a focused newsletter signup modal.

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```