ThiloDesign System
DV

Typography

Foundation

Two font families (Geist Sans + Geist Mono), loaded via next/font/google and applied via CSS variables.

Prose headings

For long-form content, docs, and markdown. In dense UI (tables, toolbars) use the UI scale below instead.

H1H1
H2H2
H3H3
H4H4
LeadLead
ParagraphThe quick brown fox jumps over the lazy dog.
MutedMuted

Font families

Geist Sans

The quick brown fox jumps over the lazy dog

font-sans

All UI text — default

Geist Mono

The quick brown fox jumps over the lazy dog

font-mono

IDs, code, tokens, numbers

Type scale

PreviewClassSizeWhen to use
Design Systemtext-2xl font-semibold24pxPage hero heading
Design Systemtext-xl font-semibold20pxSection heading
Design Systemtext-lg font-semibold18pxPanel title
Design Systemtext-base font-semibold16pxSub-heading, card title
Design Systemtext-sm font-semibold14pxPage title (compact density)
Design Systemtext-sm14pxBody text, form labels
Design Systemtext-xs font-medium12pxBadge, filter label, section tag
Design Systemtext-xs12pxCaption, secondary body
Design Systemtext-[11px]11pxTable cell content, tooltips
Design Systemtext-[10px] font-semibold uppercase tracking-widest10pxSection label (group headers)
Design Systemtext-[10px]10pxSub-labels, metadata
Design Systemtext-[9px] font-semibold uppercase tracking-[0.08em]9pxNav group headers (sidebar)

Font weights

PreviewClassWeightWhen to use
Design Systemfont-normal400Body text, descriptions
Design Systemfont-medium500Labels, secondary headings
Design Systemfont-semibold600Headings, titles, emphasis
Design Systemfont-bold700Rare — logo mark, strong emphasis only

Text colors

PreviewClassContext
Design Systemtext-foregroundDefault / primary text
Design Systemtext-muted-foregroundSecondary / helper text
Design Systemtext-card-foregroundText on card surface
Design Systemtext-sidebar-foregroundText in sidebar
Design Systemtext-primary-foregroundText on primary button
Design Systemplaceholder:text-muted-foregroundInput placeholder
Design Systemtext-destructiveDestructive / error

Letter spacing

PreviewClassValueWhen to use
DESIGN SYSTEMtracking-tight-0.025emHeadings (text-sm font-semibold and above)
DESIGN SYSTEMtracking-wide0.025emTable header labels (text-[10px] uppercase)
DESIGN SYSTEMtracking-widest0.1emSection labels (text-[10px] uppercase font-semibold)
DESIGN SYSTEMtracking-[0.08em]0.08emSidebar nav group headers (9px uppercase)
DESIGN SYSTEM(none)0All body text and table cells

Line height

PreviewClassValueWhen to use
Design Systemleading-none1Single-line UI elements (badges, buttons)
Design Systemleading-tight1.25Compact headings
Design Systemleading-snug1.375Card titles with wrapping
Design Systemleading-normal1.5Default — most body text
Design System Second lineleading-relaxed1.625Code blocks
Design System Second lineleading-71.75remProse paragraphs (shadcn pattern)

Monospace usage

Ticket IDT7A3763font-mono text-[11px] text-muted-foreground
Token namebg-status-open-bgfont-mono text-[10px]
File path@/components/ui/buttonfont-mono text-[10px] text-muted-foreground/50
Numeric count28font-mono text-[10px] in Badge

On this page