Design standards

A practical reference of real-world typography, spacing, color, and layout choices.

Apps

Apps

Apps

Desktop

Desktop

Desktop

Mobile

Apps

Typography scale

Headline to micro text sizes used across real products.

A young person with long, wavy hair sits in front of a plain background, looking directly at the camera.
A young person with long, wavy hair sits in front of a plain background, looking directly at the camera.
A young person with long, wavy hair sits in front of a plain background, looking directly at the camera.

Apps

Spacing scale

Common spacing values used in real apps.

A young person with long, wavy hair sits in front of a plain background, looking directly at the camera.
A young person with long, wavy hair sits in front of a plain background, looking directly at the camera.
A young person with long, wavy hair sits in front of a plain background, looking directly at the camera.

Apps

Color system

Backgrounds, text, accents, and strokes used in real products.

A young person with long, wavy hair sits in front of a plain background, looking directly at the camera.
A young person with long, wavy hair sits in front of a plain background, looking directly at the camera.
A young person with long, wavy hair sits in front of a plain background, looking directly at the camera.

Apps

Corner radius

Common border-radius values used in real products.

A young person with long, wavy hair sits in front of a plain background, looking directly at the camera.
A young person with long, wavy hair sits in front of a plain background, looking directly at the camera.
A young person with long, wavy hair sits in front of a plain background, looking directly at the camera.

Desktop

Desktop

Typography scale

Headline to micro text sizes used across real products.

A young person with long, wavy hair sits in front of a plain background, looking directly at the camera.
A young person with long, wavy hair sits in front of a plain background, looking directly at the camera.
A young person with long, wavy hair sits in front of a plain background, looking directly at the camera.

Apps

Spacing scale

Common spacing values used in real apps.

A young person with long, wavy hair sits in front of a plain background, looking directly at the camera.
A young person with long, wavy hair sits in front of a plain background, looking directly at the camera.
A young person with long, wavy hair sits in front of a plain background, looking directly at the camera.

Desktop

Color system

Backgrounds, text, accents, and strokes used in real products.

A young person with long, wavy hair sits in front of a plain background, looking directly at the camera.
A young person with long, wavy hair sits in front of a plain background, looking directly at the camera.
A young person with long, wavy hair sits in front of a plain background, looking directly at the camera.

Desktop

Corner radius

Common border-radius values used in real products.

A young person with long, wavy hair sits in front of a plain background, looking directly at the camera.
A young person with long, wavy hair sits in front of a plain background, looking directly at the camera.
A young person with long, wavy hair sits in front of a plain background, looking directly at the camera.

My mission is to

Help you create and earn on your terms.

Help you create and earn on your terms.

No spam, unsubscribe anytime.

Create a free website with Framer, the website builder loved by startups, designers and agencies.