Foundations
Typography
Crystal's font stack and typographic conventions.
Crystal's typography system uses a minimal, functional font stack optimized for readability across all themes.
Font Stack
| Role | Font | Usage |
|---|---|---|
| Sans | Inter | Body text, headings, UI elements |
| Mono | JetBrains Mono | Code blocks, technical data |
| Display | Syne | Landing page hero accents only |
Source of truth: The
@artasce/crystal-tokenspackage defines--crystal-font-family-sans(Inter) and--crystal-font-family-mono(JetBrains Mono) as the canonical font tokens.
CSS Custom Properties
body {
font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
}
code, pre {
font-family: var(--font-jetbrains), ui-monospace, monospace;
}Type Scale
Crystal uses a standard type scale aligned with Tailwind's defaults:
| Class | Size | Line Height | Use |
|---|---|---|---|
text-xs | 0.75rem (12px) | 1rem | Labels, badges |
text-sm | 0.875rem (14px) | 1.25rem | Secondary text, captions |
text-base | 1rem (16px) | 1.5rem | Body text |
text-lg | 1.125rem (18px) | 1.75rem | Lead paragraphs |
text-xl | 1.25rem (20px) | 1.75rem | Small headings |
text-2xl | 1.5rem (24px) | 2rem | Section headings |
text-3xl | 1.875rem (30px) | 2.25rem | Page headings |
text-4xl | 2.25rem (36px) | 2.5rem | Hero sub-headings |
text-5xl | 3rem (48px) | 1 | Hero headings |
Best Practices
- Use Inter for all UI text. It has excellent legibility at small sizes and a large weight range.
- Reserve Syne for high-impact display text on landing pages only. Do not use it for body copy or documentation.
- Use JetBrains Mono for all code samples, terminal output, and technical identifiers (token names, class names).
- Pair heading weights with body weights: bold headings (600-700) with regular body text (400).