Typography
Font families, type scale, weights, line-heights, and tracking. Tailwind v4 scale — custom values live in apps/site/src/app/globals.css.
Font families
Sans (body)
--font-sansDefault body and heading font. System UI stack for native feel and zero-byte cost.
The quick brown fox jumps over the lazy dog
Mono
--font-monoUsed in code blocks, CSS variable names, and tabular figures.
const radius = "0.625rem";
Heading
--font-headingAliases --font-sans today. Override per-theme to give a project its own display face.
Welcome to Perimeter
Type scale
text-xsThe five boxing wizards jump quickly
Captions, data-attribute hints, small helper text
text-smThe five boxing wizards jump quickly
Default body text, form labels, buttons
text-baseThe five boxing wizards jump quickly
Prose paragraphs, input content, docs body
text-lgThe five boxing wizards jump quickly
Emphasized body text, card titles
text-xlThe five boxing wizards jump quickly
Section headings, modal titles
text-2xlThe five boxing wizards jump quickly
Page subsections
text-3xlThe five boxing wizards jump quickly
Page titles
text-4xlThe five boxing wizards jump quickly
Hero headings
text-5xlThe five boxing wizards jump quickly
Landing page hero
Weights
400 NormalPerimeter Style — type system
500 MediumPerimeter Style — type system
600 SemiboldPerimeter Style — type system
700 BoldPerimeter Style — type system
Line height
leading-none (1)The design system is the shared vocabulary between designers, engineers, and product — every component, page, and widget pulls from it so that the whole product feels like one coherent thing.
leading-tight (1.25)The design system is the shared vocabulary between designers, engineers, and product — every component, page, and widget pulls from it so that the whole product feels like one coherent thing.
leading-snug (1.375)The design system is the shared vocabulary between designers, engineers, and product — every component, page, and widget pulls from it so that the whole product feels like one coherent thing.
leading-normal (1.5)The design system is the shared vocabulary between designers, engineers, and product — every component, page, and widget pulls from it so that the whole product feels like one coherent thing.
leading-relaxed (1.625)The design system is the shared vocabulary between designers, engineers, and product — every component, page, and widget pulls from it so that the whole product feels like one coherent thing.
leading-loose (2)The design system is the shared vocabulary between designers, engineers, and product — every component, page, and widget pulls from it so that the whole product feels like one coherent thing.
Tracking
tracking-tighter (-0.05em)PERIMETER STYLE
tracking-tight (-0.025em)PERIMETER STYLE
tracking-normal (0)PERIMETER STYLE
tracking-wide (0.025em)PERIMETER STYLE
tracking-wider (0.05em)PERIMETER STYLE
tracking-widest (0.1em)PERIMETER STYLE