Typography
Name | Size | Line Height | Example |
|---|---|---|---|
.text-xs | 0.75rem12px | 1rem16px | Aa |
.text-sm | 0.875rem14px | 1.25rem20px | Aa |
.text-base | 1rem16px | 1.5rem24px | Aa |
.text-lg | 1.125rem18px | 1.75rem28px | Aa |
.text-xl | 1.25rem20px | 1.75rem28px | Aa |
.text-2xl | 1.5rem24px | 2rem32px | Aa |
.text-3xl | 1.875rem30px | 2.25rem36px | Aa |
.text-4xl | 2.25rem36px | 2.5rem40px | Aa |
.text-5xl | 3rem48px | 3rem48px | Aa |
Usage in Figma
Typography tokens in Figma are published from Stylus Design System and should be available by default in Figma files within the Scribe workspace.
Usage in code
Typography in Stylus is built on Tailwind CSS utilities. You can apply typography styles by using the appropriate classes on your elements.
Font Families
Stylus uses Public Sans as its primary font.
This text uses Public Sans
export default () => <p className="font-sans">This text uses Public Sans</p>;Font Weights
Use font weight utilities to emphasize text and create hierarchy. We do not use weights 100โ300 or 800โ900.
Normal (400)
Medium (500)
Semibold (600)
Bold (700)
export default () => ( <div> <p className="font-normal">Normal (400)</p> <p className="font-medium">Medium (500)</p> <p className="font-semibold">Semibold (600)</p> <p className="font-bold">Bold (700)</p> </div>);Line Heights
Scribe lets you instantly capture and share your team's knowledge with smarter documentation.
Scribe lets you instantly capture and share your team's knowledge with smarter documentation.
Scribe lets you instantly capture and share your team's knowledge with smarter documentation.
export default () => ( <div className="max-w-64 space-y-4"> <p className="leading-tight"> Scribe lets you instantly capture and share your team's knowledge with smarter documentation. </p> <p className="leading-normal"> Scribe lets you instantly capture and share your team's knowledge with smarter documentation. </p> <p className="leading-relaxed"> Scribe lets you instantly capture and share your team's knowledge with smarter documentation. </p> </div>);Letter Spacing
To aid legibility, smaller text should have wider spacing, while larger text can handle tighter spacing.
Scribe
Scribe
Scribe
Scribe
export default () => ( <div className="text-lg"> <p className="tracking-tight">Scribe</p> <p className="tracking-normal">Scribe</p> <p className="tracking-wide">Scribe</p> <p className="tracking-wider">Scribe</p> </div>);Text Colors
Use the text- prefix with any color from the palette.
Primary text
Secondary text
Error text
export default () => ( <div> <p className="text-slate-900 dark:text-slate-100">Primary text</p> <p className="text-slate-600 dark:text-slate-400">Secondary text</p> <p className="text-red-600 dark:text-red-500">Error text</p> </div>);