Typography
Geist-inspired typography system with numbered heading scales, button/label/copy variants, and the Text component.
Font Family
UI Font: Inter
Aa Bb Cc
All UI text, headings, body, and captions use Inter from Google Fonts.
Mono Font
01 23 45
Code blocks and technical content use the system monospace stack.
Logo Font: BEASIGNE
The BEASIGNE font is used only in the logo wordmark. Never use it for UI text. Always render the logo from supplied image assets, never from the font.
Heading Scale
Numbered heading scale from 72px to 14px with precise line-height and letter-spacing for each size.
Never Miss a Sale
Never Miss a Sale
Never Miss a Sale
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Button Typography
Label Typography
Copy Typography
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Text Component
The Text component provides type-safe access to all typography variants.
import { Text } from '@finitless/design-system';
// Heading variants
<Text variant="heading-48">Page Title</Text>
<Text variant="heading-24">Card Title</Text>
// With semantic element
<Text variant="heading-32" as="h1">Main Heading</Text>
// Button/Label variants
<Text variant="button-14">Button Label</Text>
<Text variant="label-12">Form Label</Text>
// Copy variants with color
<Text variant="copy-16">Body text</Text>
<Text variant="copy-14" color="muted">Secondary text</Text>
// Modifiers
<Text variant="copy-16" weight="semibold">Bold text</Text>
<Text variant="heading-24" color="link">Link colored</Text>Heading 32
Heading 20 (muted)
This is body copy at 16px with comfortable line height.
Secondary text in muted color at 14px.
Font Weights
Aa
Regular
400
font-normal
Aa
Medium
500
font-medium
Aa
Semibold
600
font-semibold
Aa
Bold
700
font-bold
Aa
Extrabold
800
font-extrabold
Helper Functions
import {
getHeadingClass,
getButtonClass,
getLabelClass,
getCopyClass,
} from '@finitless/design-system';
// Get Tailwind classes for any typography style
getHeadingClass(48) // Returns class string for heading-48
getButtonClass(14) // Returns class string for button-14
getLabelClass(12) // Returns class string for label-12
getCopyClass(16) // Returns class string for copy-16Font Loading
HTML
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
Next.js (App Router)
import { Inter } from 'next/font/google';
const inter = Inter({
subsets: ['latin'],
weight: ['400', '500', '600', '700', '800'],
display: 'swap',
});
export default function RootLayout({ children }) {
return (
<html className={inter.className}>
<body>{children}</body>
</html>
);
}Best Practices
Hierarchy
- Use heading-72/64 for hero sections only
- Limit to 2-3 heading levels per page
- Use copy variants for body text, not headings
Accessibility
- Minimum 16px for body text (prevents iOS zoom)
- 4.5:1 contrast ratio for normal text (WCAG AA)
- Use antialiased font rendering on dark backgrounds