Typography
Typography is kept intentionally simple so content stays readable and components feel consistent. This page shows the current baseline for headings, body text, and common inline elements.
Headings
Section titled “Headings”Heading 1
Section titled “Heading 1”Use for the main page title.
Heading 2
Section titled “Heading 2”Use for major sections.
Heading 3
Section titled “Heading 3”Use for subsections and grouping content.
Heading 4
Section titled “Heading 4”Use for smaller supporting sections.
Body text
Section titled “Body text”This is a standard paragraph. It’s the default text style used across pages and documentation. The goal is comfortable reading, clear spacing, and predictable rhythm.
This is a second paragraph to show how content stacks. Paragraph spacing should feel consistent and easy to scan.
Lead text
Section titled “Lead text”Lead text is used for short intros and key summaries. It’s slightly larger and a bit stronger than body text.
Links should be easy to identify and readable in both light and dark mode.
Here’s an example link: Visit the blog
Unordered lists:
- Clear spacing between items
- Consistent indentation
- Works well for documentation and notes
Ordered lists:
- Step one
- Step two
- Step three
Inline text styles
Section titled “Inline text styles”You’ll see a few common inline styles used throughout the site:
- Bold text for emphasis
- Italic text for light emphasis
- Inline code like
const theme = "dark"for technical content
Blockquote
Section titled “Blockquote”Good typography makes content easier to understand, and systems easier to maintain.
As the component library grows, typography may expand to include more opinionated patterns (like callouts, captions, and tables), but the foundation will stay focused on clarity and accessibility.