Skip to main content

​
Usage guidelines

Follow Anvil2 guidance on casing, alignment, and color/contrast. Use AI Kit tokens consistently across all typography to maintain a cohesive type system.

​
Type ramp

Use AI Kit tokens consistently across all typography to maintain a cohesive type system. Headline styles should follow the same sizing and font-weight conventions established in Anvil2 to ensure consistency across experiences.

​
Type pairing guidance

Pair each headline level with its matching body size to keep hierarchy consistent across the product: a bigger headline earns a bigger supporting line, a smaller one stays compact.

​
Do’s and don’ts

​
Casing

Use title case for headlines and titles, and sentence case for body copy. Rely on A2 Typography rules for casing.

​
Alignment

Left-align body copy and headlines by default. Center only for short, standalone copy (empty states, single-line confirmations, modal titles). Right-align only for RTL locales or short supporting notes next to a left-aligned label — never a full paragraph. Baseline-align label/value pairs within a row or card.

​
Color and contrast

Standard text must meet a 4.5:1 contrast ratio against its background. Large text (18.5px+ bold, or 24px+ regular) must meet 3:1. Check secondary/tertiary grays against both white and dark surfaces before shipping — lighter grays used below 12px are the highest-risk combination.

​
Weight matrix

Sofia Pro: Bold (700) only, across all headline sizes (Extra-Large, Large, Medium, Small; page title remains Sofia Bold). Inter: Regular (body copy), Semibold (600) for emphasis and bold body text, Bold (700) for Eyebrow and table headers only. Medium (500) is used only for Button labels.
Last modified on October 27, 2026