Style Guide

🎨 Colors

Brand

Primary
Secondary

Background

Background
Surface

Neutral

Light
Dark

Text

Title
Body

Base

Border
Shadow
Muted

Status

Info
Success
Warning
Danger

🔤 Typography

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six

Lorem ipsum Nostrud Duis minim Ut id incididunt deserunt consequat id irure nostrud Voluptate Aliquipst eu aliqua eu sed anim aute laborum est officia consectetur irure aliquip ex veniam laboris cillum Duis occaecat fugiat adipisicing ex in dolore ullamco ad ullamco velit nisi.

This is a text link
  • Unordered List
  • Unordered List
  • Unordered List
  1. Ordered List
  2. Ordered List
  3. Ordered List

Lorem ipsum Nostrud Duis minim.

⊞ Layout

Spacing

--space-4xl
--space-3xl
--space-2xl
--space-xl
--space-l
--space-m
--space-s
--space-xs
--space-2xs
--space-3xs
--space-4xs

Grid

Symmetrical

Asymmetrical

🧩 Elements

Alerts

This is the default alert

This is an info alert

This is a success alert

This is a warning alert

This is a danger alert

This is a muted alert

Buttons

Small Default (Medium) Large Extra Large

Divider

Form

Checkbox
Radio

Icon Box

Heading

Lorem ipsum Nostrud Duis minim Ut id incididunt deserunt consequat id irure nostrud Voluptate Aliquipst eu.

Heading

Lorem ipsum Nostrud Duis minim Ut id incididunt deserunt consequat id irure nostrud Voluptate Aliquipst eu.

Progress Bar