Brand
Buttons, links and accents, each with a Dark and a Light version.
--color-primary#3a5ae9
--color-primary-dark#1635c1
--color-primary-light#7f94f1
--color-secondary#e9c938
--color-secondary-dark#88720f
--color-secondary-light#f1dc7d
--color-tertiary#14b8a5
--color-tertiary-dark#0c7367
--color-tertiary-light#30e9d3
--color-accent#ff6b6b
--color-accent-dark#eb0000
--color-accent-light#ffb8b8
Text
Headings and body copy, for light and dark surfaces.
--color-heading-dark#121317
--color-heading-light#f9fafa
--color-body-dark#61636b
--color-body-light#afb0b6
Background
Section backgrounds.
--color-background-dark#121317
--color-background-darker#0b0c0e
--color-background-light#f1f1f4
--color-background-lighter#f6f7f8
Surface
Cards and containers on a background.
--color-surface-dark#24262d
--color-surface-darker#1b1c22
--color-surface-light#e8e9ed
--color-surface-lighter#fcfcfd
Border
Strokes and dividers.
--color-border-dark#2d2f39
--color-border-darker#22242b
--color-border-light#d2d3db
--color-border-lighter#dddee4
Status
Success, warning, error and info, with soft Light fills.
--color-success#177439
--color-success-light#d7fbe4
--color-warning#aa491b
--color-warning-light#fdf1c3
--color-error#af1a21
--color-error-light#fedede
--color-info#2147cd
--color-info-light#d6e7fc
Neutral
Neutral colors, shown without theme switching in this preview.
--color-neutral-white#ffffff
--color-neutral-lightgray#f0f0f0
--color-neutral-black#000000
--color-neutral-darkgray#1d1d1d
Effects
Transparent fills for overlays and glass.
--color-transparentrgba(0, 0, 0, 0)
--color-overlayrgb(0 0 0 / 40%)
--color-backdroprgb(0 0 0 / 65%)
--color-glassrgb(255 255 255 / 8%)
NextTypographyExplore typography variables and their default values.
