Skip to content

Style Guide

Design Tokens & Typography

Reference page for color , type styles, lists, quotes, buttons, and badges.

Color Tokens

Background

Each swatch is labeled with its token name.

background-light
background-2-light
background-3-light
background-4-light

Foreground

foreground-light
foreground-2-light
foreground-3-light
foreground-4-light

Button Tokens

button-1-light
button-1-hover-light
button-2-light
button-2-hover-light
button-3-light
button-3-hover-light
button-5-light
button-5-hover-light
button-link-1-light
button-link-1-hover-light
button-foreground-1-light
button-foreground-2-light

Border / Input / Ring

border-light
input-light
ring-light

Card / Popover

card-light
card-foreground-light
popover-light
popover-foreground-light

Primary / Secondary

primary-light
primary-foreground-light
secondary-light
secondary-foreground-light

Muted / Accent / Destructive

muted-light
muted-foreground-light
accent-light
accent-foreground-light
destructive-light
destructive-foreground-light

Typography

Type Styles

Labeled specimens for headings, body copy, lists, quotes, stat, and caption.

Headings

H1

Lorem ipsum dolor sit amet consectetur adipisicing elit

H2

Lorem ipsum dolor sit amet consectetur adipisicing elit

H3

Lorem ipsum dolor sit amet consectetur adipisicing elit

H4

Lorem ipsum dolor sit amet consectetur adipisicing elit

H5

Lorem ipsum dolor sit amet consectetur adipisicing elit

H6

Lorem ipsum dolor sit amet consectetur adipisicing elit

Utility Type

Eyebrow

Section label example

Stat

123

Caption

Supporting helper text example

Paragraph Styles

paragraph-lg

Lorem ipsum dolor sit amet , consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

paragraph-default

Lorem ipsum dolor sit amet , consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

paragraph-sm

Lorem ipsum dolor sit amet , consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

Lists

paragraph-lg unordered list

  • Lorem ipsum dolor sit amet , consectetuer adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

paragraph-default unordered list

  • Lorem ipsum dolor sit amet , consectetuer adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

paragraph-sm unordered list

  • Lorem ipsum dolor sit amet , consectetuer adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

paragraph-lg ordered list

  1. Lorem ipsum dolor sit amet , consectetuer adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

paragraph-default ordered list

  1. Lorem ipsum dolor sit amet , consectetuer adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

paragraph-sm ordered list

  1. Lorem ipsum dolor sit amet , consectetuer adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Quote

Blockquote

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Lorem ipsum dolor sit amet

Components

Buttons & Badges

Labeled samples for button and badge styles.

button-1

Button Button Button

button-2

Button Button Button

button-3

Button Button Button

button-5

Button Button Button

button-link-1

Button Button Button

badge-primary

Badge Badge

badge-secondary

Badge Badge