Colors
These are the color variables used in the framework.
Override variables
These are the default color style, which you can override them to match your own design system. See Usage for more information on how to override variables.
List of variables
Common
| Name | Value | |
|---|---|---|
$main | #FFFFFF | |
$contrast | #000A1E |
Grey
| Name | Value | |
|---|---|---|
$grey-90 | mix($contrast, $main, 90%) | |
$grey-80 | mix($contrast, $main, 80%) | |
$grey-70 | mix($contrast, $main, 70%) | |
$grey-60 | mix($contrast, $main, 60%) | |
$grey-50 | mix($contrast, $main, 50%) | |
$grey-40 | mix($contrast, $main, 40%) | |
$grey-30 | mix($contrast, $main, 30%) | |
$grey-20 | mix($contrast, $main, 20%) | |
$grey-10 | mix($contrast, $main, 10%) | |
$grey-5 | mix($contrast, $main, 5%) |
Background
| Name | Value | |
|---|---|---|
$background-default | $grey-5 | |
$background-paper | $main |
Text
| Name | Value | |
|---|---|---|
$text | $contrast | |
$text-alt | rgba($text, 0.5) | |
$text-disabled | rgba($text, 0.25) | |
$text-contrast | $main | |
$text-contrast-alt | rgba($text-contrast, 0.6) | |
$text-contrast-disabled | rgba($text-contrast, 0.3) |
Brand
| Name | Value | |
|---|---|---|
$primary | #3C6BF4 | |
$primary-light | mix($main, $primary, 70%) | |
$primary-dark | mix($contrast, $primary, 50%) | |
$primary-contrast | $text-contrast | |
$secondary | #9E6D04 | |
$secondary-light | mix($main, $secondary, 70%) | |
$secondary-dark | mix($contrast, $secondary, 50%) | |
$secondary-contrast | $text-contrast |
Status
| Name | Value | |
|---|---|---|
$success | #27AE60 | |
$success-light | mix($main, $success, 80%) | |
$success-dark | mix($contrast, $success, 60%) | |
$success-contrast | $text-contrast | |
$info | #17A0CC | |
$info-light | mix($main, $info, 80%) | |
$info-dark | mix($contrast, $info, 60%) | |
$info-contrast | $text-contrast | |
$warning | #FFDC46 | |
$warning-light | mix($main, $warning, 80%) | |
$warning-dark | mix($contrast, $warning, 60%) | |
$warning-contrast | $text | |
$error | #EB5757 | |
$error-light | mix($main, $error, 80%) | |
$error-dark | mix($contrast, $error, 60%) | |
$error-contrast | $text-contrast |
Border
| Name | Value | |
|---|---|---|
$border-color | rgba($text, 0.2) | |
$border | 1px solid $border-color | |
$border-color-contrast | rgba($text-contrast, 0.3) | |
$border-contrast | 1px solid $border-color-contrast |
Interaction
| Name | Value | |
|---|---|---|
$hover | rgba($text, 0.08) | |
$hover-contrast | rgba($text-contrast, 0.08) | |
$overlay | rgba($text-contrast, 0.8) | |
$overlay-contrast | rgba($text, 0.2) | |
$input-background | rgba($text, 0.05) |