Appearance
Palette tokens
Last updated: 2026-11-06
Generated automatically from SCSS tokens.
Palette
| Token | Value |
|---|---|
| --dark-foreground | #FAFAFAEB |
| --dark-background-primary1 | #28357C |
| --dark-background-primary2 | #2853B4 |
| --dark-background-primary3 | #317987 |
| --dark-background-accent | #C51473 |
| --dark-background-success | #166735 |
| --dark-background-info | #0057B0 |
| --dark-background-warn | #9C3900 |
| --dark-background-error | #B6010B |
| --dark-background-critical | #8B64F4 |
| --dark-background-neutral | #7E7F81 |
| --light-background-primary1 | #D4D4EC |
| --light-background-primary2 | #C4D6FF |
| --light-background-primary3 | #D6EDF1 |
| --light-background-accent | #FCE3F1 |
| --light-background-success | #BDDECA |
| --light-background-info | #B8DAFC |
| --light-background-warn | #F4CEB8 |
| --light-background-error | #F9CACC |
| --light-background-critical | #ECE5FD |
| --light-background-neutral | #E9EAEA |
| --light-background-overlay | #FFFFFF6B |
| --light-foreground-primary1 | #2929A2 |
| --light-foreground-primary2 | #1B397C |
| --light-foreground-primary3 | #2D6F7E |
| --light-foreground-accent | #C9006E |
| --light-foreground-success | #0F4625 |
| --light-foreground-info | #003C79 |
| --light-foreground-warn | #6B2800 |
| --light-foreground-error | #800108 |
| --light-foreground-critical | #7040F1 |
| --light-foreground-neutral | #666769 |
| --base | #14171A |
| --title | #161616 |
| --text1 | #3A3A3A |
| --text2 | #656565 |
| --icon | #14171A7A |
| --icon-filter | invert(65%) sepia(6%) saturate(100%) hue-rotate(180deg) brightness(75%) contrast(85%) |
| --divider | #14171A5C |
| --stroke | #14171A29 |
| --selected-disabled-foreground | #14171ACC |
| --unselected-disabled-foreground | #14171AA3 |
| --contrast-foreground | #FAFAFAEB |
| --skeleton | #14171A14 |
| --surface-background | #F6F6F6 |
| --card | #FEFEFE |
| --card2 | #FAFAFA |
| --dialog | #FDFDFD |
| --selected-disabled-background | #14171A29 |
| --unselected-disabled-background | #14171A0A |
| --transparency | #14171AA3 |
| --skill1 | #7216D4 |
| --skill2 | #9E0592 |
| --skill3 | #2338D1 |
| --skill4 | #AF0E36 |
| --skill5 | #8936FF |
| --skill6 | #3A52FF |
| --skill7 | #DA46CF |
| --skill8 | #EA2354 |
| --skill9 | #3D1575 |
| --skill10 | #0F2099 |
| --skill11 | #690F62 |
| --skill12 | #721129 |
| --other-background-base | #FFFFFF |
| --other-background-event-date | #B8DAFC80 |
| --other-border-skill-card | #D9D9DA |
Palette Dark
| Token | Value |
|---|---|
| --dark-foreground | #FAFAFAEB |
| --dark-background-primary1 | #4C4CB2 |
| --dark-background-primary2 | #2853B4 |
| --dark-background-primary3 | #388A9B |
| --dark-background-accent | #E92B93 |
| --dark-background-success | #166735 |
| --dark-background-info | #0057B0 |
| --dark-background-warn | #9C3900 |
| --dark-background-error | #B6010B |
| --dark-background-critical | #8B64F4 |
| --dark-background-neutral | #7E7F81 |
| --light-background-primary1 | #000091 |
| --light-background-primary2 | #142A5B |
| --light-background-primary3 | #10272D |
| --light-background-accent | #4D002A |
| --light-background-success | #0B331B |
| --light-background-info | #002C59 |
| --light-background-warn | #4F1D00 |
| --light-background-error | #610006 |
| --light-background-critical | #271066 |
| --light-background-neutral | #222527 |
| --light-background-overlay | #0000006B |
| --light-foreground-primary1 | #2929A2 |
| --light-foreground-primary2 | #1B397C |
| --light-foreground-primary3 | #2D6F7E |
| --light-foreground-accent | #C9006E |
| --light-foreground-success | #0F4625 |
| --light-foreground-info | #003C79 |
| --light-foreground-warn | #6B2800 |
| --light-foreground-error | #800108 |
| --light-foreground-critical | #7040F1 |
| --light-foreground-neutral | #666769 |
| --base | #FAFAFA |
| --title | #FAFAFAEB |
| --text1 | #FAFAFACC |
| --text2 | #FAFAFAA3 |
| --icon | #FAFAFA7A |
| --icon-filter | invert(98%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(25%) |
| --divider | #FAFAFA5C |
| --stroke | #FAFAFA29 |
| --selected-disabled-foreground | #FAFAFACC |
| --unselected-disabled-foreground | #FAFAFAA3 |
| --contrast-foreground | #14171AEB |
| --skeleton | #FAFAFA14 |
| --surface-background | #202326 |
| --card | #14171A |
| --card2 | #25272B |
| --dialog | #14171A |
| --selected-disabled-background | #FAFAFA29 |
| --unselected-disabled-background | #FAFAFA0A |
| --transparency | #FAFAFAA3 |
| --other-background-base | #14171A |
Theme
You can customize the theme (PRIMARY, SECONDARY, TERTIARY) colors by modifying the corresponding SCSS variables directly in your root CSS.
| Token | Value |
|---|---|
| --color-primary-text | var(--dark-background-primary1) |
| --color-primary-bg | transparent |
| --color-primary-hover-bg | var(--light-background-primary1) |
| --color-primary-hover-text | var(--dark-background-primary1) |
| --color-primary-text-flat | var(--other-background-base) |
| --color-primary-bg-flat | var(--dark-background-primary1) |
| --color-secondary-text | var(--text1) |
| --color-secondary-bg | transparent |
| --color-secondary-hover-bg | var(--contrast-foreground) |
| --color-secondary-hover-text | var(--text1) |
| --color-secondary-text-flat | var(--text1) |
| --color-secondary-bg-flat | var(--light-background-neutral) |
| --color-tertiary-text | var(--other-background-base) |
| --color-tertiary-bg | transparent |
| --color-tertiary-hover-bg | var(--light-background-primary1) |
| --color-tertiary-hover-text | var(--dark-background-primary1) |
| --color-tertiary-text-flat | var(--dark-background-primary1) |
| --color-tertiary-bg-flat | var(--light-background-neutral) |