Color palette
This article presents several color palettes used in the design system, including base, accent, and semantic variations. These palettes ensure consistent theming, support for dark and light modes, and flexibility for customization.
Neutral
50
var(--x-neutral-50)
var(--x-neutral-50)
100
var(--x-neutral-100)
var(--x-neutral-100)
200
var(--x-neutral-200)
var(--x-neutral-200)
300
var(--x-neutral-300)
var(--x-neutral-300)
400
var(--x-neutral-400)
var(--x-neutral-400)
500
var(--x-neutral-500)
var(--x-neutral-500)
600
var(--x-neutral-600)
var(--x-neutral-600)
700
var(--x-neutral-700)
var(--x-neutral-700)
800
var(--x-neutral-800)
var(--x-neutral-800)
900
var(--x-neutral-900)
var(--x-neutral-900)
950
var(--x-neutral-950)
var(--x-neutral-950)
Main
50
var(--x-main-50)
var(--x-main-50)
100
var(--x-main-100)
var(--x-main-100)
200
var(--x-main-200)
var(--x-main-200)
300
var(--x-main-300)
var(--x-main-300)
400
var(--x-main-400)
var(--x-main-400)
500
var(--x-main-500)
var(--x-main-500)
600
var(--x-main-600)
var(--x-main-600)
700
var(--x-main-700)
var(--x-main-700)
800
var(--x-main-800)
var(--x-main-800)
900
var(--x-main-900)
var(--x-main-900)
950
var(--x-main-950)
var(--x-main-950)
Success
50
var(--x-success-50)
var(--x-success-50)
100
var(--x-success-100)
var(--x-success-100)
200
var(--x-success-200)
var(--x-success-200)
300
var(--x-success-300)
var(--x-success-300)
400
var(--x-success-400)
var(--x-success-400)
500
var(--x-success-500)
var(--x-success-500)
600
var(--x-success-600)
var(--x-success-600)
700
var(--x-success-700)
var(--x-success-700)
800
var(--x-success-800)
var(--x-success-800)
900
var(--x-success-900)
var(--x-success-900)
950
var(--x-success-950)
var(--x-success-950)
Warn
50
var(--x-warn-50)
var(--x-warn-50)
100
var(--x-warn-100)
var(--x-warn-100)
200
var(--x-warn-200)
var(--x-warn-200)
300
var(--x-warn-300)
var(--x-warn-300)
400
var(--x-warn-400)
var(--x-warn-400)
500
var(--x-warn-500)
var(--x-warn-500)
600
var(--x-warn-600)
var(--x-warn-600)
700
var(--x-warn-700)
var(--x-warn-700)
800
var(--x-warn-800)
var(--x-warn-800)
900
var(--x-warn-900)
var(--x-warn-900)
950
var(--x-warn-950)
var(--x-warn-950)
Error
50
var(--x-error-50)
var(--x-error-50)
100
var(--x-error-100)
var(--x-error-100)
200
var(--x-error-200)
var(--x-error-200)
300
var(--x-error-300)
var(--x-error-300)
400
var(--x-error-400)
var(--x-error-400)
500
var(--x-error-500)
var(--x-error-500)
600
var(--x-error-600)
var(--x-error-600)
700
var(--x-error-700)
var(--x-error-700)
800
var(--x-error-800)
var(--x-error-800)
900
var(--x-error-900)
var(--x-error-900)
950
var(--x-error-950)
var(--x-error-950)