Typography

Type scale

Sizes follow a modular scale. Display sizes are used for headings; text sizes for body and UI copy.

Font weights

Text wrapping

Any real component copy that can wrap to two or more lines - a Modal/Alert/Toast/Tooltip title or description, a SectionHeader heading/subheading, an Accordion item title, a Checkbox/RadioButton/Toggle label or hint, a RadioGroup card's title or description - carries Tailwind's text-balance utility (text-wrap: balance). It evens out the line lengths of a wrapped heading or short paragraph instead of leaving a single short orphan word on the last line. Single-line, intentionally-clipped text (a Badge/Tag label, a Button label, a Table header cell) doesn't need it - text-balance only matters once text is actually allowed to wrap.

This documentation site's own prose (every heading and paragraph inside .prose-doc) has used the same utility from the start - this section makes that existing, previously-unstated convention explicit and extends it to the real component layer (components/base/**/components/application/ **) as well, not just doc-page copy.

Font family

--font-barlow is set to Barlow - the primary typeface of the DEW design system. The type scale above previews in Barlow, and it's applied directly on every component's root element (Button, Input, Badge, Checkbox, Tag, Tooltip…), so components inherit it wherever they're used, regardless of the surrounding page font.

--font-sans is set to Geist and is scoped to this documentation site's own UI - sidebar, headings, body copy - not the design system itself.

--font-mono is set to Geist Mono for code snippets and token values across the documentation UI.