The Dutchy type system uses three carefully selected font families: Space Grotesk for bold display text, Inter for readable body copy, and JetBrains Mono for code.
Space Grotesk
Used for headlines, titles, and any text that needs to make an impact. Bold weights only.
Inter
The workhorse font for body text, UI elements, and anything that needs to be highly readable.
JetBrains Mono
For code blocks, technical content, labels, and anywhere monospace adds clarity.
A carefully crafted scale that provides clear visual hierarchy. Display sizes use Space Grotesk, body sizes use Inter.
Bold Uppercase
Tight Tracking
Used for hero headlines and major section titles. Always uppercase with tight letter-spacing.
Section Headers
For section titles and card headers. Bold weight with wider tracking.
Body text uses Inter at regular weight with relaxed line height for optimal readability. This creates comfortable reading for longer content blocks.
Default for paragraphs and general content.
Monospace • Uppercase • Wide Tracking
For tags, badges, metadata, and technical labels.
Dutch design is characterized by its bold simplicity, structural clarity, and functional beauty. It rejects unnecessary ornamentation in favor of honest expression.
The foundation of Dutch design lies in its commitment to clarity and purpose. Every element must justify its existence. This philosophy extends from architecture to graphic design, creating a cohesive visual language that speaks through structure rather than decoration.
Sharp corners and clean edges define the aesthetic. The deliberate absence of rounded corners creates a bold, architectural feel that demands attention without shouting. It's confident design that knows its worth.
Colors in Dutch design serve structural purposes. The warm orange primary creates focal points, while the neutral palette provides a stable foundation. Each color has a role, a purpose, a place in the hierarchy.
"Good design is as little design as possible. Less, but better."
— Dieter Rams
This philosophy permeates every aspect of the Dutchy Design System. From typography choices to spacing scales, each decision reinforces the core values of bold simplicity and structural integrity.
/* Tailwind Config */
fontFamily: {
display: ['Space Grotesk', 'sans-serif'],
sans: ['Inter', 'sans-serif'],
mono: ['JetBrains Mono', 'monospace'],
}
/* Usage */
<h1 class="font-display text-6xl font-bold uppercase tracking-tighter">
Display Heading
</h1>
<p class="font-sans text-base leading-relaxed">
Body paragraph text
</p>
<code class="font-mono text-sm">
Code snippet
</code>