Foundations

Typography

The kit sets text in Inter and code in JetBrains Mono, with system fonts behind both. It does not ship the font files, so the page that uses it decides where they come from.

Loading the fonts

Serve the faces from your own origin. A hosted font service receives the IP address of every visitor, and this site serves its own fonts for that reason. Fontsource packages each weight as a stylesheet:

pnpm add @fontsource/inter @fontsource/jetbrains-mono

src/app.css css

@import '@lyeve-labs/ui-kit/styles.css';
@import '@fontsource/inter/400.css';
@import '@fontsource/inter/500.css';
@import '@fontsource/inter/600.css';
@import '@fontsource/inter/700.css';
@import '@fontsource/jetbrains-mono/400.css';
@import '@fontsource/jetbrains-mono/500.css';
@import '@fontsource/jetbrains-mono/600.css';

Those are the weights the components draw. Until a face loads, or if it never does, text falls back to the system sans-serif and code to the system monospace.

Two type scales

The kit declares two scales. The brand scale names seven steps after what they set, from display to mono, for page titles, section heads and marketing pages. The console scale is the one the components are drawn in: text-xs to text-2xl, which the kit restates at Tailwind's own values. Most interface text is text-sm.

Brand scale

Each step is a size token, a line height token and, for the heading steps, a letter spacing token. Apply them together, because a size token sets the size and nothing else: text-h2 leading-h2 tracking-h2.

Step	Size	Line height	Letter spacing
`text-display`	64px (4rem)	1.05	-0.04em
`text-h1`	44px (2.75rem)	1.1	-0.025em
`text-h2`	32px (2rem)	1.15	-0.02em
`text-h3`	22px (1.375rem)	1.25	-0.015em
`text-body`	16px (1rem)	1.55	none
`text-caption`	13px (0.8125rem)	1.5	none
`text-mono`	18px (1.125rem)	1.5	none

text-display The quick brown fox

text-h1 The quick brown fox

text-h2 The quick brown fox

text-h3 The quick brown fox

text-body The quick brown fox

text-caption The quick brown fox

text-mono The quick brown fox

Console scale

text-xs 12 / 16px The quick brown fox jumps over the lazy dog.

text-sm 14 / 20px The quick brown fox jumps over the lazy dog.

text-base 16 / 24px The quick brown fox jumps over the lazy dog.

text-lg 18 / 28px The quick brown fox jumps over the lazy dog.

text-xl 20 / 28px The quick brown fox jumps over the lazy dog.

text-2xl 24 / 32px The quick brown fox jumps over the lazy dog.

Headings

The kit's own headings take the brand steps. PageHeader sets a page's h1 in the h2 step, 32px and bold, and SectionHeading sets a section's h2 in the h3 step, 22px and semibold. A section's h3 is text-sm and semibold, so under a card's own title it reads as a smaller step rather than a second title. A page built from those components gets its heading sizes from them.

Text color roles

text-fg: primary body copy.
text-muted: secondary text, descriptions, captions.
text-faint: hints, placeholders, disabled labels.
text-brand: links and inline accents, used sparingly.