Components
Type scale, weights, tracking and colour utilities sourced from Tailwind v4. The project uses a single font family — --font-sans — mapped via @theme inline.
Applied globally in @layer base — every h1–h6 gets these properties automatically, no utility classes needed. Each property reads from a --heading-N-* CSS variable with a fallback, so themes/overrides can redefine them without touching this file.
<h1>--heading-1-*<h2>--heading-2-*<h3>--heading-3-*<h4>--heading-4-*<h5>--heading-5-*<h6>--heading-6-*Prose text at four sizes. Default weight is font-normal (400).
Large
text-lgBody text at large size. Used for lead paragraphs and prominent descriptions.
Base
text-baseBody text at base size. The default for all prose content in the application.
Small
text-smBody text at small size. Labels, supporting copy, secondary information.
XSmall
text-xsExtra small text. Timestamps, legal copy, metadata, captions.
Weight scale available via Tailwind utilities.
font-normal400Normal — The quick brown fox
font-medium500Medium — The quick brown fox
font-semibold600Semibold — The quick brown fox
font-bold700Bold — The quick brown fox
font-extrabold800Extrabold — The quick brown fox
tracking-widest is commonly used for uppercase labels and badge text.
tracking-tighter-0.05emTighter — The quick fox
tracking-tight-0.025emTight — The quick fox
tracking-normal0emNormal — The quick fox
tracking-wide0.025emWide — The quick fox
tracking-wider0.05emWider — The quick fox
tracking-widest0.1emWidest — The quick fox
Semantic colour utilities. Always use token-based colours — never raw hex.
text-foregroundForeground — The quick brown fox jumps over the lazy dog
text-muted-foregroundMuted foreground — The quick brown fox jumps over the lazy dog
text-primaryPrimary — The quick brown fox jumps over the lazy dog
text-destructiveDestructive — The quick brown fox jumps over the lazy dog
text-secondary-foregroundSecondary fg — The quick brown fox jumps over the lazy dog
Real-world combinations used across the product. Copy the utility string directly.
text-3xl font-boldDesign System Migration
text-lg font-boldToken architecture
text-base font-semiboldContribution History
text-sm text-muted-foregroundMigrating the UI to Tailwind v4 with a fresh component library built the shadcn-style way.
text-xs font-medium uppercase tracking-widest text-muted-foregroundDESIGN SYSTEM
text-xs font-semiboldTailwind v4
How the scale reads together in a realistic content block.
Wellzesta
Migrating the UI to Tailwind v4 with a fresh component library built the shadcn-style way — Tailwind + CVA + tailwind-merge + clsx. One source of truth for tokens, shared between Figma and code.
Three layers mirror how Figma variables are organized. Designers and engineers share the same token names, preventing drift between design and implementation.
4 semantic tokens consumed by this component.
--foregroundForeground--muted-foregroundMuted Foreground--primaryPrimary--borderBorder