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
--clamp-xxxl: clamp(3rem, calc(3rem + ((1vw - 0.3rem) * 7.6923)), var(--xxxl));
--text-xxxl, .text-xxxl
2x Large
--clamp-xxxl: clamp(3rem, calc(3rem + ((1vw - 0.3rem) * 7.6923)), var(--xxxl));
--text-xxl, .text-xxl
Extra Large
--clamp-xxxl: clamp(3rem, calc(3rem + ((1vw - 0.3rem) * 7.6923)), var(--xxxl));
--text-xl, .text-xl
Large
--clamp-xxxl: clamp(3rem, calc(3rem + ((1vw - 0.3rem) * 7.6923)), var(--xxxl));
--text-l, .text-l
Medium
--clamp-xxxl: clamp(3rem, calc(3rem + ((1vw - 0.3rem) * 7.6923)), var(--xxxl));
--text-m, .text-m
Body Text
--clamp-xxxl: clamp(3rem, calc(3rem + ((1vw - 0.3rem) * 7.6923)), var(--xxxl));
--text-body, .text-body
Text Small
--clamp-xxxl: clamp(3rem, calc(3rem + ((1vw - 0.3rem) * 7.6923)), var(--xxxl));
--text-s, .text-s
Text Extra Small
--clamp-xxxl: clamp(3rem, calc(3rem + ((1vw - 0.3rem) * 7.6923)), var(--xxxl));
--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)