Headings (Open Sans)

Heading 1

text-heading-1 (clamp: 2.5rem - 4.25rem / 40px - 68px)

Heading 2

text-heading-2 (clamp: 2.25rem - 3.5rem / 36px - 56px)

Heading 3

text-heading-3 (clamp: 2rem - 3rem / 32px - 48px)

Heading 4

text-heading-4 (clamp: 1.75rem - 2.5rem / 28px - 40px)
Heading 5
text-heading-5 (clamp: 1.5rem - 2rem / 24px - 32px)
Heading 6
text-heading-6 (clamp: 1.25rem - 1.5rem / 20px - 24px)

Body Text (Open Sans)

Text Large - The quick brown fox jumps over the lazy dog

text-large (1.25rem / 20px)

Text Medium - The quick brown fox jumps over the lazy dog

text-medium (1rem / 16px)

Text Small - The quick brown fox jumps over the lazy dog

text-small (0.875rem / 14px)

Caption - The quick brown fox jumps over the lazy dog

text-caption (0.875rem / 14px)

Lists

Unordered List

  • First item in the list
  • Second item with more content
    • Nested item one
    • Nested item two
  • Third item in the list
<ul> with <li>

Ordered List

  1. First step in the process
  2. Second step with details
    1. Sub-step one
    2. Sub-step two
  3. Third step to complete
<ol> with <li>

Color Palette

Primary Colors

50
100
200
300
400
500
600
700
800
900
950

Surface Colors

50
100
200
300
400
500
600
700
800
900
950

Form Inputs

This field has an error

Buttons

Severities

Variants

Sizes

With Icons

Data Table

Name
Email
Role
Status
John Doejohn@example.comAdminActive
Jane Smithjane@example.comUserActive
Bob Wilsonbob@example.comUserInactive

Messages