1. Design Tokens: Colors

branded Swatches

$color-brand
$color-accent
$color-tertiary

base Swatches

$color-default
$color-muted
$color-primary
$color-secondary

greyscale Swatches

bw

$color-black
$color-white

shades

$color-grey-90
$color-grey-70
$color-grey-50
$color-grey-30
$color-grey-10

semantic Swatches

info

$color-info-light
$color-info
$color-info-dark

success

$color-success-light
$color-success
$color-success-dark

warning

$color-warning-light
$color-warning
$color-warning-dark

danger

$color-danger-light
$color-danger
$color-danger-dark

social Swatches

$color-twitter
$color-x
$color-facebook
$color-instagram
$color-linkedin
$color-youtube
$color-tiktok
$color-pinterest
$color-flickr
$color-vimeo

Color Context Swatch Grid

Default

branded
base
greyscale
semantic

Muted

branded
base
greyscale
semantic

Primary

branded
base
greyscale
semantic

Secondary

branded
base
greyscale
semantic

2. Typography

Standard Headings

H1 Heading Element

H2 Heading Element

H3 Heading Element

H4 Heading Element

H5 Heading Element
H6 Heading Element

Heading Decorations

Divider Heading

Line Heading

Bullet Heading

Body & Text Sample

Lead Paragraph: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Standard Content: Lorem ipsum dolor sit amet, active text link consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Meta Information: Published on Jan 31, 2026 • 5 min read

Muted Text Style
Emphasis Text Style
Primary Text Style
Secondary Text Style
Success Text Style
Warning Text Style
Danger Text Style

List Variations

Disc
  • List Item Alpha
  • List Item Bravo
  • List Item Charlie
Circle
  • List Item Alpha
  • List Item Bravo
  • List Item Charlie
Square
  • List Item Alpha
  • List Item Bravo
  • List Item Charlie
Decimal
  • List Item Alpha
  • List Item Bravo
  • List Item Charlie
Hyphen
  • List Item Alpha
  • List Item Bravo
  • List Item Charlie

Standard Headings

H1 Heading Element

H2 Heading Element

H3 Heading Element

H4 Heading Element

H5 Heading Element
H6 Heading Element

Heading Decorations

Divider Heading

Line Heading

Bullet Heading

Body & Text Sample

Lead Paragraph: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Standard Content: Lorem ipsum dolor sit amet, active text link consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Meta Information: Published on Jan 31, 2026 • 5 min read

Muted Text Style
Emphasis Text Style
Primary Text Style
Secondary Text Style
Success Text Style
Warning Text Style
Danger Text Style

List Variations

Disc
  • List Item Alpha
  • List Item Bravo
  • List Item Charlie
Circle
  • List Item Alpha
  • List Item Bravo
  • List Item Charlie
Square
  • List Item Alpha
  • List Item Bravo
  • List Item Charlie
Decimal
  • List Item Alpha
  • List Item Bravo
  • List Item Charlie
Hyphen
  • List Item Alpha
  • List Item Bravo
  • List Item Charlie

Standard Headings

H1 Heading Element

H2 Heading Element

H3 Heading Element

H4 Heading Element

H5 Heading Element
H6 Heading Element

Heading Decorations

Divider Heading

Line Heading

Bullet Heading

Body & Text Sample

Lead Paragraph: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Standard Content: Lorem ipsum dolor sit amet, active text link consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Meta Information: Published on Jan 31, 2026 • 5 min read

Muted Text Style
Emphasis Text Style
Primary Text Style
Secondary Text Style
Success Text Style
Warning Text Style
Danger Text Style

List Variations

Disc
  • List Item Alpha
  • List Item Bravo
  • List Item Charlie
Circle
  • List Item Alpha
  • List Item Bravo
  • List Item Charlie
Square
  • List Item Alpha
  • List Item Bravo
  • List Item Charlie
Decimal
  • List Item Alpha
  • List Item Bravo
  • List Item Charlie
Hyphen
  • List Item Alpha
  • List Item Bravo
  • List Item Charlie

Standard Headings

H1 Heading Element

H2 Heading Element

H3 Heading Element

H4 Heading Element

H5 Heading Element
H6 Heading Element

Heading Decorations

Divider Heading

Line Heading

Bullet Heading

Body & Text Sample

Lead Paragraph: Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.

Standard Content: Lorem ipsum dolor sit amet, active text link consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Meta Information: Published on Jan 31, 2026 • 5 min read

Muted Text Style
Emphasis Text Style
Primary Text Style
Secondary Text Style
Success Text Style
Warning Text Style
Danger Text Style

List Variations

Disc
  • List Item Alpha
  • List Item Bravo
  • List Item Charlie
Circle
  • List Item Alpha
  • List Item Bravo
  • List Item Charlie
Square
  • List Item Alpha
  • List Item Bravo
  • List Item Charlie
Decimal
  • List Item Alpha
  • List Item Bravo
  • List Item Charlie
Hyphen
  • List Item Alpha
  • List Item Bravo
  • List Item Charlie

3. UI Components

Layout Extras & Status

Badges
8 100
Labels
Stable Beta Hotfix
Spinner
Icons
Progress Bar
Badges
8 100
Labels
Stable Beta Hotfix
Spinner
Icons
Progress Bar
Badges
8 100
Labels
Stable Beta Hotfix
Spinner
Icons
Progress Bar
Badges
8 100
Labels
Stable Beta Hotfix
Spinner
Icons
Progress Bar

Navigation Patterns

Navbar Example
Breadcrumb Path
Page Pagination
Navbar Example
Breadcrumb Path
Page Pagination
Navbar Example
Breadcrumb Path
Page Pagination
Navbar Example
Breadcrumb Path
Page Pagination

Button Styles & Sizes

Size: Small
Size: Default
Size: Large
Size: Small
Size: Default
Size: Large
Size: Small
Size: Default
Size: Large
Size: Small
Size: Default
Size: Large

Feedback Alerts

Info Alert: System notification text for component verification.

Success Alert: System notification text for component verification.

Warning Alert: System notification text for component verification.

Danger Alert: System notification text for component verification.

Info Alert: System notification text for component verification.

Success Alert: System notification text for component verification.

Warning Alert: System notification text for component verification.

Danger Alert: System notification text for component verification.

Info Alert: System notification text for component verification.

Success Alert: System notification text for component verification.

Warning Alert: System notification text for component verification.

Danger Alert: System notification text for component verification.

Info Alert: System notification text for component verification.

Success Alert: System notification text for component verification.

Warning Alert: System notification text for component verification.

Danger Alert: System notification text for component verification.

Card Containers

Card Placeholder

Default Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id!

Explore More
Card Placeholder

Muted Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id!

Explore More
Card Placeholder

Primary Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id!

Explore More
Card Placeholder

Secondary Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id!

Explore More
Card Placeholder

Default Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id!

Explore More
Card Placeholder

Muted Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id!

Explore More
Card Placeholder

Primary Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id!

Explore More
Card Placeholder

Secondary Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id!

Explore More
Card Placeholder

Default Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id!

Explore More
Card Placeholder

Muted Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id!

Explore More
Card Placeholder

Primary Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id!

Explore More
Card Placeholder

Secondary Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id!

Explore More
Card Placeholder

Default Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id!

Explore More
Card Placeholder

Muted Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id!

Explore More
Card Placeholder

Primary Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id!

Explore More
Card Placeholder

Secondary Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam neque, quibusdam in eos aliquam quasi officia autem reprehenderit iure delectus, quod dignissimos ab dicta suscipit quam iusto fugit culpa id!

Explore More

Image Overlays

Default Base

Overlay Sample

Default

Overlay Sample

Primary

Overlay Sample

Secondary

Overlay Sample

Primary Gradient

Overlay Sample

Secondary Gradient

Muted Base

Overlay Sample

Default

Overlay Sample

Primary

Overlay Sample

Secondary

Overlay Sample

Primary Gradient

Overlay Sample

Secondary Gradient

Primary Base

Overlay Sample

Default

Overlay Sample

Primary

Overlay Sample

Secondary

Overlay Sample

Primary Gradient

Overlay Sample

Secondary Gradient

Secondary Base

Overlay Sample

Default

Overlay Sample

Primary

Overlay Sample

Secondary

Overlay Sample

Primary Gradient

Overlay Sample

Secondary Gradient

Standard Form Elements

Tables

Table Caption
Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Caption
Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Caption
Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Caption
Table Heading Table Heading Table Heading
Table Data Table Data Table Data
Table Data Table Data Table Data
Table Data Table Data Table Data