Colors
Primary
--primary
Secondary
--secondary
Accent
--accent
Base
--base
Black
--black, .black
Primary Off
--primary-off, .primary-off
Secondry Off
--secondary-off, .secondary-off
Accent Off
--accent-off
White
--white, .white
Light Grey
--grey-light
Grey
--grey
Grey Mid
--grey-mid, .grey-mid
Grey Dark
--grey-dark, .grey-dark
Typography
3x Large x
--text-xxxl, .text-xxxl
H1 - 2x Large x
--text-xxl, .text-xxl
H2 - Extra Large x
--text-xl, .text-xl
H3 - Large x
--text-l, .text-l
H4 - Medium x
--text-m, .text-m
Body Text x
--text-body, .text-body
Text Small x
--text-s, .text-s
Text Extra Small x
--text-xs, .text-xs
Text Normal
.text-normal
Text Bold
.text-normal
Text Bolder
.text-normal
Text Capitalize
.text-normal
Text Uppercase
.text-uppercase
Text Italic
.text-italic
Spacing
X Small (Variable)
0.67rem / 10px
var(--clamp-xs)
Small (Variable)
1rem / 16px
var(--clamp-s)
Body (Variable)
1.125rem / 18px
var(--clamp-body)
Medium (Variable)
1.5rem / 24px
var(--clamp-m)
Large (Variable)
2.25rem / 36px
var(--clamp-l)
Extra Large (Variable)
3.375rem / 54px
var(--clamp-xl)
2x Large (Variable)
5rem / 80px
var(--clamp-xxl)
3x Large (Variable)
7.5rem / 120px
var(--clamp-xxxl)
Border Radius
Small Rounded
0.67rem / 10px
var(--clamp-xs)
Medium Rounded
0.67rem / 10px
var(--clamp-xs)
Large Rounded
0.67rem / 10px
var(--clamp-xs)
X Large Rounded
0.67rem / 10px
var(--clamp-xs)
2X Large Rounded
0.67rem / 10px
var(--clamp-xs)
Circle
0.67rem / 10px
var(--clamp-xs)
Shadows
Shadow Accent
.shadow-accent
Shadow Mild
.shadow-mild
Shadow Soft
.shadow-soft
Shadow Elegant
.shadow-elegant
Shadow Focus
.shadow-focus
Shadow Highlight
.shadow-highlight