Colour Schemes
Primary
Midnight
#1B1B23
var(--primary-midnight)
White
#FFFFFF
var(--primary-white)
Earthy Yellow
#F2AE53
var(--primary-earthy-yellow)
Accent
Forest Slate
#294949
var(--accent-forest-slate)
Icterine
#E5E565
var(--accent-icterine)
Thistle
#DCBDE0
var(--accent-thistle)
Timberwolf
#D8D8D8
var(--accent-timberwolf)
Celestial Blue
#85BBE0
var(--accent-celestial-blue)
Magenta Haze
#8C335D
var(--accent-magenta-haze)
Neutral
Gray-100
#F7F7F7
var(--neutral-gray-100)
Gray-200
#EFEFEF
var(--neutral-gray-200)
Gray-300
#C4C5C7
var(--neutral-gray-300)
Gray-400
#828282
var(--neutral-gray-400)
Gray-500
#484848
var(--neutral-gray-500)
Black
#000000
var(--neutral-black)
Utility
Error Red
#DD1D1D
var(--utility-error-red)
Success Green
#18E098
var(--utility-success-green)
Orange
#FB8F2B
var(--utility-orange)
Typography
Heading 1 (Serif) - h1 tag
Heading 1 (Serif Italic) - h1 class="italic"
Heading 1 (Sans) - h1 class="sans"
Heading 2 (Serif It) - h2 tag
Heading 2 (Sans) - h2 class="sans"
Heading 3 - h3 tag
Heading 4 (Serif It)
Heading 4 (Sans) - h4 class="sans"
Heading 5 - h5 tag
Heading 6 - h6 tag
Paragraph XL - p class="p-xl"
Paragraph Large (Semi Bold) - p class="p-lb"
Paragraph Large (Medium) - p class="p-l"
Paragraph Standard (Semi Bold) - p class="p-sb"
Paragraph Standard (Medium) - p tag
Paragraph Small (Semi Bold) - p class="p-xsb"
Paragraph Small (Medium) - p class="p-xs"
Link XL - a class="p-xl" Link Large (Semi Bold) - a class="p-lb" Link Large (Medium) - a class="p-l" Link Standard (Semi Bold) - a class="p-sb" Link Standard (Medium) - a tag Link Small (Semi Bold) - a class="p-xsb" Link Small (Medium) - a class="p-xs"
Badges
div class="badge magenta-badge"
div class="badge celestial-badge"
div class="badge thistle-badge"
div class="badge timberwolf-badge"
div class="badge yellow-badge"
div class="badge forest-badge"
Small counter 10
Large counter 10
Buttons
Icons (render 'icons', icon: 'icon_name')
tree
flag
studio
muscle
community
calendar
workout
ar
tick
cross