Typography

Font families

Hololink UI uses two families, exposed as semantic tokens:

Token	Value	Preview
--s-font-sans	'Outfit', 'Inter', system-ui, -apple-system, sans-serif	Aa Bb 0123

Token	Value	Preview
--s-font-mono	'JetBrains Mono', 'Fira Code', monospace	Aa Bb 0123

• --s-font-sans is Outfit, falling back to Inter, then the system UI font.
• --s-font-mono is JetBrains Mono, falling back to Fira Code, then the system monospace.

The package does not bundle the font files. If Outfit or JetBrains Mono are not loaded by your app, the browser uses the next family in the stack.

Sans: The quick brown fox jumps over the lazy dog

Mono: const tokens = await load(‘tokens.css’);

body {
  font-family: var(--s-font-sans);
}
code {
  font-family: var(--s-font-mono);
}

Type scale

Use the semantic size tokens. They map to the primitive scale (12, 14, 16, 18, 20, 24 and 30px; the primitive scale also defines a 36px --p-font-size-4xl that has no semantic alias yet). Sizes are in rem, so they respect the user’s font-size setting.

Token	Value	Preview
--s-font-size-caption	0.75rem	Aa
--s-font-size-label	0.875rem	Aa
--s-font-size-body	1rem	Aa
--s-font-size-lead	1.125rem	Aa
--s-font-size-title	1.25rem	Aa
--s-font-size-headline	1.5rem	Aa
--s-font-size-display	1.875rem	Aa

Live samples

Display (--s-font-size-display)Headline (--s-font-size-headline)Title (--s-font-size-title)Lead paragraph (--s-font-size-lead)Body text (--s-font-size-body)Label (--s-font-size-label)Caption (--s-font-size-caption)

.page-title {
  font-size: var(--s-font-size-display);
  font-weight: 600;
}
.hint {
  font-size: var(--s-font-size-caption);
  color: var(--s-color-text-tertiary);
}

Roles and guidance

Role	Size token	Weight	Use
Display	--s-font-size-display	600	Hero, page title
Headline	--s-font-size-headline	600	Section headings
Title	--s-font-size-title	600	Card and dialog titles
Lead	--s-font-size-lead	400	Lead paragraphs
Body	--s-font-size-body	400	Default text, inputs
Label	--s-font-size-label	600	Buttons (uppercase, 0.05em tracking), field labels
Body small	--s-font-size-label	400	Secondary text
Caption	--s-font-size-caption	400	Metadata, tooltips
Label small	--s-font-size-caption	600	Badges, tags, error text
Code	--s-font-size-label in --s-font-mono	400	Code, tokens, keyboard hints

Weights, line heights and letter spacing are design guidance. tokens.css defines sizes and families only, so set the rest in your own CSS.

Do not set text below 12px (--s-font-size-caption).