Skip to main content
DS nav
DS Example FORMS EXPERIMENT TYPE EXPERIMENT COLOR EXPERIMENT Halftone Example Layout Example Grids Example Theming All Images Example Scroll anims Example Colors Links Example Home
Box components Example Theme Container Themed Layout Main Layout Example Components Example Buttons Example Type Example Cards Example Markdown
Tools Another action Dropdown Submenu 404 Page

Typography System

A showcase of our enhanced typography components with HTMLAttributes support.

Global defaults
Global H6

Global H1

Global H2

Global H3

Global H4

Global H5

Global paragraph

H2 with .fs-1 class

Paragraph with .fs-2 class

Paragraph with .fs-3 class

Paragraph with .fs-4 class

Paragraph with .fs-5 class

Paragraph with .fs-6 class

Paragraph with .fs-8 class

Micro context (scale × 0.4)

Micro H1

Micro H2

Micro H3

Micro H4

Micro paragraph text

Copyright notice

Small context (scale × 0.6)

Small H1

Small H2

Small H3

Small paragraph text

Caption context (scale × 0.8 + styling)

Caption H1

Caption H2

Caption H3

Caption paragraph with medium weight and letter spacing

Large context (scale × 1.5)

Large H1

Large H2

Large H3

Large paragraph text

Nested scope:

Caption H3 in large section

Caption paragraph in large section

Simple utilities work naturally:

H2 with .fs-1 class

Paragraph with .fs-2 class

Paragraph with .fs-3 class

Paragraph with .fs-4 class

Paragraph with .fs-5 class

Paragraph with .fs-6 class

Paragraph with .fs-8 class

Display context (scale × 2 + display styling)

Display H1

Display H2

Display H3

Display paragraph

Hero context (scale × 3 + centered)

Hero

Massive

Text

How this works

Key Principles:

  • DRY: Define scale multipliers once, apply them to all tokens within scope
  • Natural hierarchy: H1-H6 maintain their relationships automatically
  • Simple utilities: Short class names like .fs-1, .fs-2, etc.
  • No !important: Clean specificity, easy to override
  • Maintainable: Change one multiplier to adjust entire context

This approach respects CSS fundamentals while leveraging modern features like @scope and calc().

Component Size 1 - Extra Small Text

Component Size 2 - Small Text

Component Size 3 - Base Text

Component Size 4 - Large Text

Component Size 5 - Extra Large Text

Component Size 6 - 2XL Text

Component Size 7 - 3XL Text

Component Size 8 - 4XL Text

Component Size 9 - 5XL Text

Component Size 9 - 5XL Text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Component Size 10 - 6XL Text

Component Size 11 - 7XL Text

Component Size display-1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Component Size display-2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Component Size display-3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

  • More spacious item one
  • More spacious item two
  • More spacious item three
  • Very spacious item with large indent
  • Generous spacing between items
  • Comfortable reading experience
  • Item with border and padding
  • Another bordered item
  • Third bordered item
  1. First step with extra padding
  2. Second step with comfortable spacing
  3. Final step with consistent styling
  • First item with default styling
  • Second item using default spacing
  • Third item inherits list settings
  1. Step one of the process
  2. Step two follows naturally
  3. Step three completes the sequence
  • Tight spacing item one
  • Tight spacing item two
  • Tight spacing item three
  • Custom indented item
  • Square bullets with larger indent
  • Consistent spacing maintained
  • Parent item one
  • Parent item two with nested content
    • Nested item A
    • Nested item B
  • Parent item three

Size 1 - Extra Small Text

Size 2 - Small Text

Size 3 - Base Text

Size 4 - Large Text

Size 5 - Extra Large Text

Size 6 - 2XL Text

Size 7 - 3XL Text

Size 8 - 4XL Text

Size 9 - 5XL Text

Size 10 - 6XL Text

Size 11 - 7XL Text

Component Size 1 - Extra Small Text

Component Size 2 - Small Text

Component Size 3 - Base Text

Component Size 4 - Large Text

Component Size 5 - Extra Large Text

Component Size 6 - 2XL Text

Component Size 7 - 3XL Text

Component Size 8 - 4XL Text

Component Size 9 - 5XL Text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Component Size 10 - 6XL Text

Component Size 11 - 7XL Text

Component Size display-1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Component Size display-2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Component Size display-3

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Component Documentation

Usage Examples 

// Basic typography components
 <Heading level={2}>Section Title</Heading>
 <Text size="lg" weight="medium">Important text</Text>
 <Text>Regular paragraph content.</Text>

 // Advanced usage with props
 <Heading
   level={1}
   size="3xl"
   color="primary"
   align="center"
   fontFamily="serif"
   id="custom-title"
 >
   Custom Title
 </Heading>

 <Text
   as="span"
   size="xl"
   weight="semibold"
   color="success"
   truncate
   style="max-width: 300px;"
 >
   Truncated success message
 </Text>

 <List
   variant="bullet"
   spacing="relaxed"
   size="md"
   aria-label="Feature list"
 >
   <ListItem>First item</ListItem>
   <ListItem>Second item</ListItem>
   <ListItem marker="→">Custom marker item</ListItem>
 </List>

Props Reference

Heading Component

Prop Type Default Description
level 1 | 2 | 3 | 4 | 5 | 6 2 Heading level, determines the HTML tag (h1-h6)
as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' - Explicitly set the HTML element, overrides level
size 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' Based on level Font size of the heading
weight 'normal' | 'medium' | 'semibold' | 'bold' 'bold' Font weight of the heading
color 'default' | 'muted' | 'primary' | 'error' | 'success' 'default' Text color of the heading
align 'left' | 'center' | 'right' 'left' Text alignment
fontFamily 'sans' | 'serif' | 'mono' 'sans' Font family override

Text Component

Prop Type Default Description
as 'span' | 'p' | 'div' | 'strong' | 'em' | 'mark' | 'small' | 'label' | 'time' 'span' HTML element to render
size 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' 'md' Font size of the text
weight 'normal' | 'medium' | 'semibold' | 'bold' 'normal' Font weight of the text
color 'default' | 'muted' | 'subtle' | 'primary' | 'error' | 'success' | 'warning' 'default' Text color
align 'left' | 'center' | 'right' 'left' Text alignment
fontFamily 'sans' | 'serif' | 'mono' 'sans' Font family override
leading 'tight' | 'normal' | 'relaxed' | 'loose' 'normal' Line height variant
truncate boolean false Whether to truncate text with ellipsis

Text Component

Prop Type Default Description
size 'sm' | 'md' | 'lg' 'md' Font size of the paragraph
spacing 'tight' | 'normal' | 'relaxed' 'normal' Line height and spacing variant
color 'default' | 'muted' | 'subtle' | 'primary' 'default' Text color
align 'left' | 'center' | 'right' | 'justify' 'left' Text alignment
fontFamily 'sans' | 'serif' | 'mono' 'sans' Font family override
maxWidth string - Maximum width CSS value
as 'p' | 'div' 'p' HTML element to render

List Component

Prop Type Default Description
variant 'bullet' | 'numbered' | 'none' 'bullet' List style variant
spacing 'tight' | 'normal' | 'relaxed' 'normal' Spacing between list items
size 'sm' | 'md' | 'lg' 'md' Font size for list items
as 'ul' | 'ol' Based on variant HTML element to render
fontFamily 'sans' | 'serif' | 'mono' 'sans' Font family override

ListItem Component

Prop Type Default Description
marker string - Custom marker for the list item
as 'li' 'li' HTML element to render

Table Components

The documentation section itself uses our new Table components. Here's an example of how to use them: 

// Basic table
 <Table>
   <TableHead>
     <TableRow>
       <TableHeaderCell>Name</TableHeaderCell>
       <TableHeaderCell>Email</TableHeaderCell>
       <TableHeaderCell>Status</TableHeaderCell>
     </TableRow>
   </TableHead>
   <TableBody>
     <TableRow>
       <TableCell>John Doe</TableCell>
       <TableCell>john@example.com</TableCell>
       <TableCell>Active</TableCell>
     </TableRow>
   </TableBody>
 </Table>

 // Advanced table with custom styling
 <Table
   variant="bordered-striped"
   size="md"
   highlightOnHover
   responsive
 >
   <TableHead bg="primary">
     <TableRow>
       <TableHeaderCell align="left">Product</TableHeaderCell>
       <TableHeaderCell align="center">Quantity</TableHeaderCell>
       <TableHeaderCell align="right">Price</TableHeaderCell>
     </TableRow>
   </TableHead>
   <TableBody>
     <TableRow>
       <TableCell>Widget A</TableCell>
       <TableCell align="center">5</TableCell>
       <TableCell align="right">$19.99</TableCell>
     </TableRow>
     <TableRow>
       <TableCell>Widget B</TableCell>
       <TableCell align="center">3</TableCell>
       <TableCell align="right">$29.99</TableCell>
     </TableRow>
   </TableBody>
   <TableFoot emphasize>
     <TableRow>
       <TableCell>Total</TableCell>
       <TableCell align="center">8</TableCell>
       <TableCell align="right">$159.95</TableCell>
     </TableRow>
   </TableFoot>
 </Table>

Table Component Props

Prop Type Default Description
variant 'default' | 'bordered' | 'striped' | 'bordered-striped' 'default' Table style variant
size 'sm' | 'md' | 'lg' 'md' Size of cell padding and text
fullWidth boolean true Whether table should take full width of container
responsive boolean true Whether to wrap table in scrollable container
highlightOnHover boolean false Whether rows highlight on mouse hover
fontFamily 'sans' | 'serif' | 'mono' 'sans' Font family override

Heading Component

Heading 1 (4xl)

Heading 2 (3xl)

Heading 3 (2xl)

Heading 4 (xl)

Heading 5 (lg)
Heading 6 (md)

Custom Styled Heading

Text Component

Text 4xl Bold

Text 3xl Semibold

Text 2xl Medium

Text xl Normal

Text lg Normal

Text md Normal

Text sm Normal

Text xs Normal

Default Color

Muted Color

Primary Color

Success Color

Error Color

Warning Color

Left Aligned

Center Aligned

Right Aligned

Text as Mark Text as Strong Text as Emphasis Text as Small

This text is too long and will be truncated with an ellipsis

Text Component

This is a large paragraph with default spacing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.

This is a medium paragraph with relaxed spacing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula.

This is a small, tight paragraph with muted color and justified text. It also has a maximum width set. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.

List Components

Bullet List

  • First bullet item
  • Second bullet item
  • Custom marker item

  • Bold item

    with additional content

Numbered List

  1. First numbered item
  2. Second numbered item with emphasized text
  3. Third numbered item that has a bit more content to demonstrate the relaxed spacing
  1. with marker: decimal. First numbered item
  2. Second numbered item with emphasized text
  3. Third numbered item that has a bit more content to demonstrate the relaxed spacing

Custom List

  • • Custom list item one
  • • Custom list item two
  • • Custom list item three

Table Components

Basic Table

Name Role Department
Alice Johnson Designer Product
Bob Smith Developer Engineering
Carol Williams Manager Operations

Striped Table with Row Highlighting

Product Quantity Price
Product A 2 $19.99
Product B 1 $29.99
Product C 3 $14.99
Total 6 $114.94

Complex Table with Custom Cell Styling

Item Details Actions
SKU Stock Category
Premium Widget WDG-123-456

In Stock

Electronics
Deluxe Gadget GDG-789-012

Low Stock

Accessories
Super Doohickey DHK-345-678

Out of Stock

Gadgets

let's make great things

Let's talk →

Let's Talk

Tom avatar

Get in touch

I work at the intersection of design and code.
Interested? Hit me up.
tomhermans@gmail.com

Copyright © 2026 Tom Hermans. Made by Tom Hermans .

All rights reserved 2026 inc Tom Hermans