CURATED · OPEN · FREE

Wemakethings De

Bold typographic statements backed by strict monochrome grids.

EditorialBold TypographyMonochromeProductRestrained

↓ Download design system (2 MB)Open in OpenDesign

Visit: https://wemakethings.de

📦 Browse pack contents →

Identity DNA

PrecisionCraftsmanshipGerman EngineeringMinimalismClarity

An industrial blueprint

Color

#000000Ink

#FFFFFFBG

rgba(0,0,0,1)Line

Pure monochrome binary system using absolute black and white.

Typography

geometric-sans

display864px · 400
heading80px · 500
body24px · 400
nav16px · 500

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

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Strict grid with generous padding

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 0px

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

Layout

1920container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

220msmicro

400mssmall

600msmedium

cubic-bezier(0.22, 1, 0.36, 1)easing

Smooth page transitions · Sticky grid-based scroll effects

Subtle underline or color inversion within defined grid cells · Immediate state change with no excessive feedback

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

Voice & Don'ts

Tone Confident, Direct, Authoritative, Minimal
Headlines ALL CAPS, bold, concise, large-scale geometric sans-serif
CTAs Uppercase text with minimal arrow indicators, integrated into the grid

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
Avoid: Exclamation marks
Avoid: Fluffy marketing speak
Avoid: Soft rounded UI elements
Avoid: Gradient fills

Inside the pack — real screenshots

Wemakethings De — 桌面首屏（hero） — 桌面首屏（hero）

Wemakethings De — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

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