Font Gallery

Crystal uses three typefaces: Inter for body copy, Playfair Display for hero and marketing headlines, and Montserrat for section headings and UI. Code blocks use the system monospace stack.

Font Specimens

InterSans-Serif
Body

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Light (300)Regular (400)Medium (500)SemiBold (600)Bold (700)
--font-inter
Playfair DisplaySerif
Display

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Regular (400)Medium (500)SemiBold (600)Bold (700)ExtraBold (800)Black (900)
--font-playfair
MontserratGeometric Sans
Heading

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Light (300)Regular (400)Medium (500)SemiBold (600)Bold (700)ExtraBold (800)Black (900)
--font-montserrat

Type Scale

text-xs12pxCrystal Design System
text-sm14pxCrystal Design System
text-base16pxCrystal Design System
text-lg18pxCrystal Design System
text-xl20pxCrystal Design System
text-2xl24pxCrystal Design System
text-3xl30pxCrystal Design System
text-4xl36pxCrystal Design System
text-5xl48pxCrystal Design System
text-6xl60pxCrystal Design System
text-7xl72pxCrystal Design System

Font Pairing Preview

Recommended pairing: Playfair Display (display) + Montserrat (headings) + Inter (body) + system mono (code).

font-display / Playfair Display

Design with intention.
Build with precision.

font-heading / Montserrat

Every Gemstone Tells a Story

font-body / Inter

The Crystal Design System draws inspiration from the natural geometry of gemstones. Each theme captures the unique character of its namesake mineral — from the icy brilliance of Diamond to the deep warmth of Garnet. Fibonacci spacing creates a mathematical harmony that feels both intentional and organic.

font-mono / System Monospace

<html data-crystal="diamond" data-mode="dark">
  <body class="font-body antialiased">
    <h1 class="font-display text-5xl">Hello, Crystal.</h1>
  </body>
</html>

Caption / Inter xs

Crystal Design System v2.0 · 32 themes · 5 crystallizations · Fibonacci spacing