Text
Composable typography component with family, size, weight, tracking, leading, and color props.
Font Families
family="display"
Space Grotesk
family="sans"
Inter
family="mono"
JetBrains Mono
Type Scale
72px
Dutchy60px
Dutchy48px
Dutchy36px
Dutchy30px
Dutchy24px
Dutchy20px
Dutchy16px
Dutchy14px
Dutchy12px
DutchyWeights
normal
The quick brown fox jumps over the lazy dogmedium
The quick brown fox jumps over the lazy dogsemibold
The quick brown fox jumps over the lazy dogbold
The quick brown fox jumps over the lazy dogTracking (Letter Spacing)
tighter
Typographytight
Typographynormal
Typographywide
Typographywider
Typographywidest
TypographyCommon Patterns
Display Heading
Bold Uppercase
Tight Tracking
Section Heading
Section Headers
Lead Paragraph
Dutch design is characterized by its bold simplicity, structural clarity, and functional beauty.
Body Text
Body text uses Inter at regular weight with relaxed line height for optimal readability. This creates comfortable reading for longer content blocks and ensures the text remains clear and legible.
Label
Monospace • Uppercase • Wide Tracking
Polymorphic (as prop)
as="h1"
Rendered as h1
as="h2"
Rendered as h2
as="span" (inline)
This paragraph contains inline styled text within it.
as="label"
Colors
foreground
Dutchy Design Systemmuted
Dutchy Design Systemprimary
Dutchy Design Systemdestructive
Dutchy Design Systemsuccess
Dutchy Design Systembackground
Dutchy Design System