---
name: On
description: "This site is a prime example of minimalist premium e-commerce where the design system completely defers to the product, creating a clean, high-end aesthetic."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  neutral: "#666666"
  line: "rgba(0,0,0,0.05)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "0px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0.72px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

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

---

## Overview

Swiss-engineered performance footwear presented with minimal, clean aesthetics.

*A premium Swiss performance brand where the product is the hero against a clinical white backdrop.*

## Colors

High-contrast monochrome palette focusing entirely on product photography.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#666666`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.05)`)** — uses `line` token

## Typography

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

## Layout

Structured multi-column grid for product catalogs.

*Rhythm:* Clean and consistent spacing with a strong focus on alignment to a grid.

## Elevation & Depth

- rgba(0, 0, 0, 0.2) 0px 0px 18px 0px
- Borders: 1px solid rgba(0,0,0,0.05)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Pill-shaped black buttons with white text, or minimal text-based links.
- **card:** Clean product cards with large isolated imagery, gray backgrounds, and minimal UI elements like heart icons.
- **chip:** Small, uppercase, bordered or outlined tags for features like 'BESTSELLER'.
- **input:** Standard text inputs with clear borders and minimal styling.
- **hero:** Large product showcase on a white background with bold typography.

## Do's and Don'ts

**Don't:**
- don't use drop shadows on product images — screenshot shows flat, clean product isolation.
- don't use highly saturated accent colors — screenshot shows a strict monochrome palette.
- don't use decorative script or display serif fonts — screenshot shows a modern humanist sans.
- don't use heavy border weights — screenshot shows a subtle 1px border for cards and inputs.
- don't use complex multi-color gradients — screenshot shows a solid white background.
- don't use playful or rounded typography — screenshot shows tight, performance-oriented tracking.

---

## System Prompt (paste into AI agent)

```
This is a premium Swiss athletic brand with a clean, minimalist e-commerce interface. The design relies on a high-contrast monochrome palette with a pure white background (#FFFFFF) and deep black text (#000000), allowing the product photography to be the primary focus. The typography uses a custom humanist-sans family for bold, confident headings and a clear, legible body font. Interaction is subtle, with smooth 200-400ms transitions using cubic-bezier easing. Critical donts: never use heavy drop shadows on products, avoid multi-color gradients, and keep the layout spacious and grid-based. The interface is clinical yet premium, emphasizing engineering and performance.
```