Fonts
font_primary
font_primary-alt
font_display
font_display-alt
Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Alt Text
Prescription Skincare.Simplified.
Text Sizes
Text 6xl
Text 5xl
Text 4xl
Text 3xl
Text 2xl
Text xl
Text lg
Text md
Text sm
Text xs
Text 2xs
Text 2xs
Text Colors
Primary Text Color
Secondary Text Color
Tertiary Text Color
Text colors inside "mode_dark-slate"
Primary Text Color
Secondary Text Color
Tertiary Text Color
Each mode has their own set of Primary, Secondary and Tertiary text colors
Text colors inside "mode_natural-green"
Primary Text Color
Secondary Text Color
Tertiary Text Color
Each mode has their own set of Primary, Secondary and Tertiary text colors
Text alignment and font weight
text-align
Text left
Text right
Text right
Font Weight
font-weight_regular
font-weight_medium
font-weight_bold
BG Colors
Paddings
padding-y_4xs
padding-y_3xs
padding-y_2xs
padding-y_xs
padding-y_sm
padding-y_md
padding-y_lg
padding-y_xl
padding-y_2xl
padding-y_3xl
Responsive Spacing
padding-y_lg-to-md
Large padding but later scales down to md on smaller devices
Large padding but later scales down to md on smaller devices
padding-y_lg-to-sm
Large padding but later scales down to sm on smaller devices
Large padding but later scales down to sm on smaller devices
padding-y_lg-to-xs
Large padding but later scales down to xs on smaller devices
Large padding but later scales down to xs on smaller devices
padding-top_4xs
padding-top_3xs
padding-top_2xs
padding-top_xs
padding-top_sm
padding-top_md
padding-top_lg
padding-top_xl
padding-top_2xl
padding-top_3xl
Responsive Spacing
padding-top_lg-to-md
Large padding but later scales down to md on smaller devices
Large padding but later scales down to md on smaller devices
padding-top_lg-to-sm
Large padding but later scales down to sm on smaller devices
Large padding but later scales down to sm on smaller devices
padding-top_lg-to-xs
Large padding but later scales down to xs on smaller devices
Large padding but later scales down to xs on smaller devices
padding-bottom_4xs
padding-bottom_3xs
padding-bottom_2xs
padding-bottom_xs
padding-bottom_sm
padding-bottom_md
padding-bottom_lg
padding-bottom_xl
padding-bottom_2xl
padding-bottom_3xl
Responsive Spacing
padding-bottom_lg-to-md
Large padding but later scales down to md on smaller devices
Large padding but later scales down to md on smaller devices
padding-bottom_lg-to-sm
Large padding but later scales down to sm on smaller devices
Large padding but later scales down to sm on smaller devices
padding-bottom_lg-to-xs
Large padding but later scales down to xs on smaller devices
Large padding but later scales down to xs on smaller devices
Margins
margin-y_4xs
margin-y_3xs
margin-y_2xs
margin-y_xs
margin-y_sm
margin-y_md
margin-y_lg
margin-y_xl
margin-y_2xl
margin-y_3xl
margin-top_4xs
margin-top_3xs
margin-top_2xs
margin-top_xs
margin-top_sm
margin-top_md
margin-top_lg
margin-top_xl
margin-top_2xl
margin-top_3xl
margin-bottom_4xs
margin-bottom_3xs
margin-bottom_2xs
margin-bottom_xs
margin-bottom_sm
margin-bottom_md
margin-bottom_lg
margin-bottom_xl
margin-bottom_2xl
margin-bottom_3xl
Flex
flex_vertical / gap-2xs
flex_horizontal / gap-2xs
flex_horizontal / alignments
flex gaps
flex stretch
Card with Lots of content, but parent makes both children stretch in height
color-mode_natural-green
Less content
color-mode_natural-green
Mode (Color Mode)
mode_base AltText.
color-mode_base
mode_pastel-grey-green AltText.
mode_pastel-grey-green
mode_natural-green AltText.
mode_natural-green
mode_dark-green AltText.
mode_dark-green
mode_drum AltText.
mode_drum
mode_pale-sand AltText.
mode_pale-sand
mode_almost-white AltText.
mode_almost-white
mode_slate AltText.
mode_slate
mode_dark-slate AltText.
mode_dark-slate
mode_slate-brown AltText.
mode_slate-brown
Sections (and color modes)
Borders
border_y
- renders top and bottom border
- renders top and bottom border
border_top
- renders top border
- renders top border
border_bottom
- renders bottom border
- renders bottom border
Width
width_auto
width_100percent
width_60percent
width_50percent
width_40percent
width_35percent
Max Width
max-width_xl
max-width_lg
max-width_md
max-width_sm
max-width_xs
Height
height_auto
height_100percent
height_50vh
height_100vh
height_100dvh
Min Height
min-height_100percent
min-height_100dvh
