---
name: Wemakethings De
description: "A masterclass in typographic-driven design where massive, outlined background text acts as the primary visual anchor."
version: alpha

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

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 864px
    lineHeight: 0.83
    fontWeight: 400
    letterSpacing: "-1px"
  heading:
    fontFamily: geometric-sans
    fontSize: 80px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "0px"
  body:
    fontFamily: geometric-sans
    fontSize: 24px
    lineHeight: 1.33
    fontWeight: 400
    letterSpacing: "0px"
  nav:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 0px

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

---

## Overview

Bold typographic statements backed by strict monochrome grids.

*An industrial blueprint*

## Colors

Pure monochrome binary system using absolute black and white.

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

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** geometric-sans

- Typography is the primary structural and expressive element
- Huge background text must always be outlined and non-interactive
- Navigation links are uppercase geometric sans

## Layout

Full-width sections intersected by 1px black borders, creating a technical blueprint grid

*Rhythm:* Strict grid with generous padding

## Elevation & Depth

- Borders: Thin 1px solid black lines used to define grid boundaries and underline active states

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 0px

## Components

- **button:** Text-based with arrow indicators, uppercase geometric sans, 1px border treatment
- **card:** Grid cells defined by thin black borders
- **chip:** None
- **input:** None
- **hero:** Massive uppercase bold typography overlaid on giant outlined background characters

## Do's and Don'ts

**Don't:**
- don't use gradients or complex shadows — screenshot shows flat monochrome surfaces
- don't use rounded corners — screenshot shows strict 0px radius on all elements
- don't use multiple font families — screenshot shows exclusive use of geometric sans-serif
- don't use bright accent colors — screenshot shows strictly black and white palette
- don't use small, cramped typography — screenshot shows massive, expansive display text
- don't use standard card layouts — screenshot shows text directly overlaid on giant outlined background type

---

## System Prompt (paste into AI agent)

```
This design system serves a premium bicycle and lifestyle brand, positioning itself through absolute monochrome restraint and massive, confident typography. The palette is strictly binary: white backgrounds (#FFFFFF) and absolute black text (#000000), with no secondary or accent colors. The typography category is exclusively geometric-sans, used across all scales from tiny navigation links to massive 864px background watermarks. The layout is defined by a strict grid of thin 1px black borders, resembling a technical blueprint. Critical constraints: never use rounded corners (radius is always 0px), never introduce color (the design is strictly monochrome), and never use soft shadows or gradients. The interaction model is subtle, relying on sharp, precise transitions and clear visual hierarchy within a rigid structural framework.
```