Styleguide
Colours
-
Primary
- Variable
--color-primary- Utility classes
.u-color-primary, .u-bg-primary
-
Primary dark
- Variable
--color-primary-dark- Utility classes
.u-color-primary-dark, .u-bg-primary-dark
-
Primary light
- Variable
--color-primary-light- Utility classes
.u-color-primary-light, .u-bg-primary-light
-
Dark
- Variable
--color-dark- Utility classes
.u-color-dark, .u-bg-dark
-
Grey
- Variable
--color-grey- Utility classes
.u-bg-grey
-
Light
- Variable
--color-light- Utility classes
.u-color-light, .u-bg-light
Spacing
XXS : 2px
- Variable
--spacing-xxs- Utility classes
.u-mt-xxs, .u-mb-xxs, .u-m-xxs
XS : 6px
- Variable
--spacing-xs- Utility classes
.u-mt-xs, .u-mb-xs, .u-m-xs
SM : 12px
- Variable
--spacing-sm- Utility classes
.u-mt-sm, .u-mb-sm, .u-m-sm
MD : 20px
- Variable
--spacing-md- Utility classes
.u-mt-md, .u-mb-md, .u-m-md
LG : 30px
- Variable
--spacing-lg- Utility classes
.u-mt-lg, .u-mb-lg, .u-m-lg
XL : 60px
- Variable
--spacing-xl- Utility classes
.u-mt-xl, .u-mb-xl, .u-m-xl
Fonts
Body
System stack
Titles
h1, h2 : Noto Serif bold
h3, h4, h5, h6 : Noto Serif regular
Text size
Small text : 1.2rem / 12px
- Variable
--text-sm- Utility classes
.u-text-sm
Normal text : 1.6rem / 16px
- Variable
--text-md- Utility classes
.u-text-md
Large text : 2.5rem / 25px
- Variable
--text-lg- Utility classes
.u-text-lg
Extra large text : 3.5rem / 35px
- Variable
--text-xl- Utility classes
.u-text-xl
Max size text : 5rem / 50px
- Variable
--text-xxl- Utility classes
.u-text-xxl