Color palette
These are the color variables used in the framework. You can override them to match your own design system (see Customise for more information on how to override variables).
Common
| Variable name | Default value | |
|---|---|---|
$white
|
#ffffff
|
|
$black
|
#000a1e
|
Greys
| Variable name | Default value | |
|---|---|---|
$grey-90
|
#1A2335
|
|
$grey-80
|
#333B4B
|
|
$grey-70
|
#4D5462
|
|
$grey-60
|
#666C78
|
|
$grey-50
|
#7F848E
|
|
$grey-40
|
#999DA5
|
|
$grey-30
|
#B2B5BB
|
|
$grey-20
|
#CCCED2
|
|
$grey-10
|
#E5E6E8
|
|
$grey-5
|
#F2F3F4
|
Text
Text default
| Variable name | Default value | |
|---|---|---|
$text
|
$white
|
|
$text-alt
|
rgba($text, 0.5)
|
|
$text-disabled
|
rgba($text, 0.25)
|
Text contrast
| Variable name | Default value | |
|---|---|---|
$text-contrast
|
$black
|
|
$text-contrast-alt
|
rgba($text-contrast, 0.6)
|
|
$text-contrast-disabled
|
rgba($text-contrast, 0.3)
|
Brand
Primary
| Variable name | Default value | |
|---|---|---|
$primary
|
#00F3FF
|
|
$primary-light
|
mix(white, $primary, 70%)
|
|
$primary-dark
|
mix(white, $primary, 50%)
|
|
$primary-contrast
|
$text-contrast
|
Secondary
| Variable name | Default value | |
|---|---|---|
$secondary
|
#e7fc00
|
|
$secondary-light
|
mix(white, $secondary, 70%)
|
|
$secondary-dark
|
mix(white, $secondary, 50%)
|
|
$secondary-contrast
|
$text-contrast
|
Highlight
| Variable name | Default value | |
|---|---|---|
$highlight
|
#FF74E6
|
|
$highlight-light
|
mix(white, $highlight, 70%)
|
|
$highlight-dark
|
mix(white, $highlight, 50%)
|
|
$highlight-contrast
|
$text-contrast
|
Feedback
Success
| Variable name | Default value | |
|---|---|---|
$success
|
#27AE60
|
|
$success-light
|
mix(white, $success, 70%)
|
|
$success-dark
|
mix(white, $success, 50%)
|
|
$success-text
|
#155F34
|
|
$success-contrast
|
$text
|
Info
| Variable name | Default value | |
|---|---|---|
$info
|
#17A0CC
|
|
$info-light
|
mix(white, $info, 70%)
|
|
$info-dark
|
mix(white, $info, 50%)
|
|
$info-text
|
#0D5A72
|
|
$info-contrast
|
$text
|
Warning
| Variable name | Default value | |
|---|---|---|
$warning
|
#FFDC46
|
|
$warning-light
|
mix(white, $warning, 70%)
|
|
$warning-dark
|
mix(white, $warning, 50%)
|
|
$warning-text
|
#685400
|
|
$warning-contrast
|
$text-contrast
|
Error
| Variable name | Default value | |
|---|---|---|
$error
|
#EB5757
|
|
$error-light
|
mix(white, $error, 70%)
|
|
$error-dark
|
mix(white, $error, 50%)
|
|
$error-text
|
#9C1212
|
|
$error-contrast
|
$text
|
Background
| Variable name | Default value | |
|---|---|---|
$background-default
|
$black
|
|
$background-paper
|
$grey-90
|
Misc
| Variable name | Default value | |
|---|---|---|
$border-color
|
rgba($text, 0.2)
|
|
$hover
|
rgba($text, 0.12)
|
|
$overlay
|
rgba($text-contrast, 0.8)
|