Foundations
Rich-Text ElementsTypographyImage Sizes
Structure
WrappersLayoutsContainersItems
Themes
Modern Theme ColorsExpressive Them Colors
Components
FormsButtonsCardsTagsBadges
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Rich Text Element styles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Bold

Italic

Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget risus vitae massa semper aliquam quis mattis quam. Morbi vitae tortor tempus, placerat leo et, suscipit lectus. Phasellus ut euismod massa, eu eleifend ipsum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget risus vitae massa semper aliquam quis mattis quam. Morbi vitae tortor tempus, placerat leo et, suscipit lectus. Phasellus ut euismod massa, eu eleifend ipsum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget risus vitae massa semper aliquam quis mattis quam. Morbi vitae tortor tempus, placerat leo et, suscipit lectus. Phasellus ut euismod massa, eu eleifend ipsum.

  • Unordered list item
  • Unordered list item
  • Unordered list item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget risus vitae massa semper aliquam quis mattis quam. Morbi vitae tortor tempus, placerat leo et, suscipit lectus. Phasellus ut euismod massa, eu eleifend ipsum.

  1. Ordered list item
  2. Ordered list item
  3. Ordered list item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget risus vitae massa semper aliquam quis mattis quam. Morbi vitae tortor tempus, placerat leo et, suscipit lectus. Phasellus ut euismod massa, eu eleifend ipsum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget risus vitae massa semper aliquam quis mattis quam. Morbi vitae tortor tempus, placerat leo et, suscipit lectus. Phasellus ut euismod massa, eu eleifend ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget risus vitae massa semper aliquam quis mattis quam. Morbi vitae tortor tempus, placerat leo et, suscipit lectus. Phasellus ut euismod massa, eu eleifend ipsum.

Typography Scale

heading 1

heading 2

heading 3

heading 4

heading 5
heading 6

Paragraph

heading 6
text block
heading 6Block Quote
Typography Scale
display-xl
display-large
display-medium
display-small
heading-xxlarge
heading-xlarge
heading-large
heading-medium
heading-small
label-xxlarge
label-xlarge
label-large
label-medium
label-small
body-xxlarge
body-xlarge
body-large
body-medium
body-small
Images
1:1 Square Image
3:2 Landscape Image
2:3 Portrait
16:9 Image
Wrappers
Wrappers are used to "wrap" or tie together UI elements such as buttons, icons and content.
Gap: Comfortable, Tight
Button Wrapper
Button TextButton Text
Icon Wrapper
Image Wrapper
Form Wrapper
Breadcrumb Wrapper
Containers
Containers are used to provide the size of the content space within a page section.
Sizes: small, medium, large
Small
Medium
Large
Colors
Primary
Secondary
Grayscale
System
Layouts
Layouts are used to provide the size of the content space within a page section.
Types: flex, grid
Sizes: 1-Column; 2-Column; 3-column
Flex
Grid
Large