The design system uses a system font stack for optimal performance and native feel.
The quick brown fox jumps over the lazy dog
System font stack
:root {
--font-family-base: system-ui, -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}A consistent type scale for headings and text elements.
:root {
--text-base: 1rem; /* 16px */
--text-sm: 0.875rem; /* 14px */
--text-lg: 1.25rem; /* 20px */
}Available font weights for different purposes.
Light (200) - Secondary text weight
Regular (400) - Primary text weight
Bold (700) - Emphasis and headings
:root {
--text-light: 200;
--text-base: 400;
--text-bold: 700;
}Different line heights for optimal readability.
Default line height (1.5) - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
:root {
--line-height-base: 1.5;
}Common text styles and variations.
Bold text - using <strong> or .text-bold
Italic text - using <em> or .text-italic
Small text - using <small> or .text-sm
Strikethrough text - using <del>
Underlined text - using <u>
Highlighted text - using <mark>
Inline code - using <code>
Standard text colors for different purposes.
Default text color
Muted text color
Primary text color
Success text color
Danger text color
:root {
--color-dark: #343a40;
--color-muted: #6c757d;
--color-primary: #6e0e50;
--color-success: #1e7e34;
--color-danger: #dc3545;
}Examples of common text patterns and combinations.
Posted on
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
This is a blockquote. It stands out from regular text and is commonly used for quotes or notable text.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
--font-family-base--text-base--text-sm--text-lg--text-base--text-bold--line-height-base