Style Guide & Documentation
PRIMARY LOGO
HEX #95C6B7
HEX #416482
PRIMARY WITH TEXT
SECONDARY - DARK BACKGROUNDS
TERTIARY - NO CIRCLE
GRAYSCALE
TYPOGRAPHY
Heading 1
Use case: page titles
Heading 2
Use case: section headings
Paragraph 1
Use case: main paragraph text
Paragraph 2
--> Use case: mobile text
Paragraph 3
--> Use case: apparatus/level button tags
Heading 3
Use case: sub titles, after heading 2
Heading 4
Use case: exercise categories on list pages, variation names.
Heading 5
Use case: modification, precautions, & contraindication titles
Heading 6 / HEADING 6
Use case: additional information; topic, direction/exercise change.
COLOUR PALETTE
PRIMARY
#ECF5F3
#96C6B7
#56A38C
#2C7D65
#0C5C44
#034230
#EBF5FF
#97AFC7
#527BA3
#406282
#14497D
#0B2D47
SECONDARY
#B5EAF0
#3AC0CF
#38929C
#0D5961
CALLS TO ACTION
#94C0E9
#ACE8DE
#B5EAF0
#1C77CB
#189682
#3AC0CF
#38939C
Use case:
BUTTONS & INTERACTIVE ELEMENTS
Active
Not Active
#31826A
Active
#369175
Not Active
Extension
In Movement
In Stabilization
Module 1 Readings
Foundation
Intro to the Spine
Module 1 Concepts
SPACING
Desktop
60 px
-
Space above page title (H1)
-
Space between sections
40 px
-
between sections of elements
30 px
-
between groups of text found in the same section
Mobile
20 px
10 px