Colour palette
Primary colours
Charcoal
#222222
rgb(34, 34, 34)
Light Grey
#555555
rgb(85, 85, 85)
White
#FFFFFF
rgb(255, 255, 255)
Secondary colours
Black
#111111
rgb(0, 0, 0)
Very Light Grey
#CCCCCC
rgb(204, 204, 204)
Accent colours
Dark Purple
#764DC1
rgb(118, 77, 193)
Light Purple
#AE81FF91
rgba(174, 129, 255, 0.57)
Dark Pink
#C8149C
rgb(200, 20, 156)
Magenta
#FF00FF
rgb(255, 0, 255)
Typography
Level 1 Heading
h1 {
- font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;;
- font-size: 3rem;
- font-weight: 600;
- line-height: 1.5;
- margin: 1.5rem 0;
}
Level 2 Heading
h2 {
- font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;;
- font-size: 1.5rem;
- font-weight: 600;
- line-height: 1.5;
- margin: 1.5rem 0;
}
Level 3 Heading
h3 {
- font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;;
- font-size: 1.25rem;
- font-weight: 400;
- line-height: 1.5;
- margin: 1.5rem 0 1.25rem 0;
}
Level 4 Heading
h4 {
- font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;;
- font-size: 1rem;
- font-weight: 600;
- line-height: 1.5;
- margin: 1rem 0;
}
Body text
p {
- font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;;
- font-size: 1rem;
- font-weight: 400;
- line-height: 1.5;
- margin-bottom: 1rem;
}
a {
- border-bottom: 3px solid $light-pink;
- transition: 0.3s ease-in-out;
}
a:hover {
- border-bottom: 3px solid $dark-pink;
}