PureForm Design System

PureForm Design System mockup preview
Click to expand

PureForm is an exercise in extreme reduction -- whitespace-dominant, typographically restrained, and anchored by a single blue accent. Designed for minimalist SaaS landing pages and single-purpose tools, it strips away every unnecessary element. There are no shadows, no gradients, no decorative flourishes. The design speaks through hierarchy, spacing, and the disciplined use of a single accent color against monochrome surfaces.

Accent Blue#2563EB
Surface Base#FAFAFA
Black#0A0A0A
Success#16A34A
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

h1Inter · 48px · Extra Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h2Inter · 36px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h3Inter · 28px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h4Inter · 22px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyInter · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

smallInter · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

tinyInter · 12px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

monoJetBrains Mono · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 16px

PureForm is an exercise in extreme reduction -- whitespace-dominant, typographically restrained, and anchored by a single blue accent. Designed for minimalist SaaS landing pages and single-purpose tools, it strips away every unnecessary element. There are no shadows, no gradients, no decorative flourishes. The design speaks through hierarchy, spacing, and the disciplined use of a single accent color against monochrome surfaces.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

defaultactivedefaultactivewarningerrorinfo

List

default

hover

active

default

checked

default

selected

default

Do's & Don'ts

Do

use only the single accent blue for interactive elements; no additional colors
rely on weight contrast (400 vs 700 vs 800) within Inter to create hierarchy
use generous whitespace (48-128px) between major sections
ensure every screen can be understood in under 3 seconds by stripping distractions
use the monochrome palette for 95% of the interface; blue is the 5% exception

Don't

add shadows, gradients, or decorative elements -- flatness is the entire point
use more than three visual elements in any component; reduce until it hurts
add borders where spacing alone can separate content
introduce colored backgrounds; only use surface-sunken for subtle differentiation
center-align body text; left-align everything for clean scan lines
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 6.1 KB
Downloads 0
clean light minimal minimalist saas

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/pureform and implement it in my code

Don't have the MCP? Install it here