Colours & tokens

Two layers: the full Untitled UI colour ramps, Nexus-branded, and the shadcn semantic tokens mapped on top — which flip with the theme. Browse everything in the searchable token reference below.

Colour ramps

Steps 25–950. These are the fixed source values; the semantic tokens below derive from them and flip with the mode and brand.

Brand (navy)
25
50
100
200
300
400
500
600
700
800
900
950
Accent (yellow)
25
50
100
200
300
400
500
600
700
800
900
Gray (neutral)
25
50
100
200
300
400
500
600
700
800
900
950
Error (red)
25
50
100
200
300
400
500
600
700
800
900
950
Warning (yellow)
25
50
100
200
300
400
500
600
700
800
900
950
Success (green)
25
50
100
200
300
400
500
600
700
800
900
950

Token reference

Every design token, generated from the theme CSS. Search by name, Tailwind utility or value; filter by category. Each row shows a live preview (rendered in the current theme), the authored light and dark values, and which brand themes override it. Click the copy icon to grab the var() reference.

406 tokens

PreviewTokenValueTheme overrides
--color-accent-100
bg-accent-100
lightrgb(253 241 125)
embergraphiteoceanultraviolet
--color-accent-200
bg-accent-200
lightrgb(252 235 85)
embergraphiteoceanultraviolet
--color-accent-25
bg-accent-25
lightrgb(255 253 232)
embergraphiteoceanultraviolet
--color-accent-300
bg-accent-300
lightrgb(253 224 51)
embergraphiteoceanultraviolet
--color-accent-400
bg-accent-400
lightrgb(247 236 51)
embergraphiteoceanultraviolet
--color-accent-50
bg-accent-50
lightrgb(254 248 184)
embergraphiteoceanultraviolet
--color-accent-500
bg-accent-500
lightrgb(224 212 32)
embergraphiteoceanultraviolet
--color-accent-600
bg-accent-600
lightrgb(184 172 16)
embergraphiteoceanultraviolet
--color-accent-700
bg-accent-700
lightrgb(138 127 10)
embergraphiteoceanultraviolet
--color-accent-800
bg-accent-800
lightrgb(90 84 5)
embergraphiteoceanultraviolet
--color-accent-900
bg-accent-900
lightrgb(46 43 2)
embergraphiteoceanultraviolet
--color-blue-100
bg-blue-100
light#d1e9ff
—
--color-blue-200
bg-blue-200
light#b2ddff
—
--color-blue-25
bg-blue-25
light#f5faff
—
--color-blue-300
bg-blue-300
light#84caff
—
--color-blue-400
bg-blue-400
light#53b1fd
—
--color-blue-50
bg-blue-50
light#eff8ff
—
--color-blue-500
bg-blue-500
light#2e90fa
—
--color-blue-600
bg-blue-600
light#1570ef
—
--color-blue-700
bg-blue-700
light#175cd3
—
--color-blue-800
bg-blue-800
light#1849a9
—
--color-blue-900
bg-blue-900
light#194185
—
--color-blue-950
bg-blue-950
light#102a56
—
--color-brand-100
bg-brand-100
lightrgb(221 223 233)
emberevergreengraphiteoceanultraviolet
--color-brand-200
bg-brand-200
lightrgb(180 183 212)
emberevergreengraphiteoceanultraviolet
--color-brand-25
bg-brand-25
lightrgb(248 249 252)
emberevergreengraphiteoceanultraviolet
--color-brand-300
bg-brand-300
lightrgb(132 136 182)
emberevergreengraphiteoceanultraviolet
--color-brand-400
bg-brand-400
lightrgb(85 88 160)
emberevergreengraphiteoceanultraviolet
--color-brand-50
bg-brand-50
lightrgb(241 242 249)
emberevergreengraphiteoceanultraviolet
--color-brand-500
bg-brand-500
lightrgb(42 45 120)
emberevergreengraphiteoceanultraviolet
--color-brand-600
bg-brand-600
lightrgb(18 21 65)
emberevergreengraphiteoceanultraviolet
--color-brand-700
bg-brand-700
lightrgb(14 16 52)
emberevergreengraphiteoceanultraviolet
--color-brand-800
bg-brand-800
lightrgb(10 12 40)
emberevergreengraphiteoceanultraviolet
--color-brand-900
bg-brand-900
lightrgb(6 8 28)
emberevergreengraphiteoceanultraviolet
--color-brand-950
bg-brand-950
lightrgb(3 4 14)
emberevergreengraphiteoceanultraviolet
--color-green-100
bg-green-100
light#dcfae6
—
--color-green-200
bg-green-200
light#abefc6
—
--color-green-25
bg-green-25
light#f6fef9
—
--color-green-300
bg-green-300
light#75e0a7
—
--color-green-400
bg-green-400
light#47cd89
—
--color-green-50
bg-green-50
light#ecfdf3
—
--color-green-500
bg-green-500
light#17b26a
—
--color-green-600
bg-green-600
light#079455
—
--color-green-700
bg-green-700
light#067647
—
--color-green-800
bg-green-800
light#085d3a
—
--color-green-900
bg-green-900
light#074d31
—
--color-green-950
bg-green-950
light#053321
—
--color-neutral-100
bg-neutral-100
light#f2f4f7
nexus-midnightnexus-sandnexus-slate
--color-neutral-200
bg-neutral-200
light#eaecf0
nexus-midnightnexus-sandnexus-slate
--color-neutral-25
bg-neutral-25
light#fcfcfd
nexus-midnightnexus-sandnexus-slate
--color-neutral-300
bg-neutral-300
light#d0d5dd
nexus-midnightnexus-sandnexus-slate
--color-neutral-400
bg-neutral-400
light#98a2b3
nexus-midnightnexus-sandnexus-slate
--color-neutral-50
bg-neutral-50
light#f9fafb
nexus-midnightnexus-sandnexus-slate
--color-neutral-500
bg-neutral-500
light#667085
nexus-midnightnexus-sandnexus-slate
--color-neutral-600
bg-neutral-600
light#475467
nexus-midnightnexus-sandnexus-slate
--color-neutral-700
bg-neutral-700
light#344054
nexus-midnightnexus-sandnexus-slate
--color-neutral-800
bg-neutral-800
light#1d2939
nexus-midnightnexus-sandnexus-slate
--color-neutral-900
bg-neutral-900
light#101828
nexus-midnightnexus-sandnexus-slate
--color-neutral-950
bg-neutral-950
light#0c111d
nexus-midnightnexus-sandnexus-slate
--color-red-100
bg-red-100
light#fee4e2
—
--color-red-200
bg-red-200
light#fecdca
—
--color-red-25
bg-red-25
light#fffbfa
—
--color-red-300
bg-red-300
light#fda29b
—
--color-red-400
bg-red-400
light#f97066
—
--color-red-50
bg-red-50
light#fef3f2
—
--color-red-500
bg-red-500
light#f04438
—
--color-red-600
bg-red-600
light#d92d20
—
--color-red-700
bg-red-700
light#b42318
—
--color-red-800
bg-red-800
light#912018
—
--color-red-900
bg-red-900
light#7a271a
—
--color-red-950
bg-red-950
light#55160c
—
--color-yellow-100
bg-yellow-100
light#fef0c7
—
--color-yellow-200
bg-yellow-200
light#fedf89
—
--color-yellow-25
bg-yellow-25
light#fffcf5
—
--color-yellow-300
bg-yellow-300
light#fec84b
—
--color-yellow-400
bg-yellow-400
light#fdb022
—
--color-yellow-50
bg-yellow-50
light#fffaeb
—
--color-yellow-500
bg-yellow-500
light#f79009
—
--color-yellow-600
bg-yellow-600
light#dc6803
—
--color-yellow-700
bg-yellow-700
light#b54708
—
--color-yellow-800
bg-yellow-800
light#93370d
—
--color-yellow-900
bg-yellow-900
light#7a2e0e
—
--color-yellow-950
bg-yellow-950
light#4e1d09
—
--color-alpha-black
bg-alpha-black
lightrgb(0 0 0)darkrgb(255 255 255)
—
--color-alpha-white
bg-alpha-white
lightrgb(255 255 255)darkrgb(12 14 18)
—
--color-avatar-styles-bg-neutral
bg-avatar-styles-bg-neutral
lightvar(--color-neutral-200)
—
--color-bg-active
bg-bg-active
lightvar(--color-neutral-50)darkvar(--color-neutral-800)
—
--color-bg-brand-primary
bg-bg-brand-primary
lightvar(--color-brand-50)darkvar(--color-brand-600)
—
--color-bg-brand-primary_alt
bg-bg-brand-primary_alt
lightvar(--color-brand-50)darkvar(--color-bg-secondary)
—
--color-bg-brand-secondary
bg-bg-brand-secondary
lightvar(--color-brand-100)darkvar(--color-brand-600)
—
--color-bg-brand-section
bg-bg-brand-section
lightvar(--color-brand-800)darkvar(--color-bg-secondary)
—
--color-bg-brand-section_subtle
bg-bg-brand-section_subtle
lightvar(--color-brand-700)darkvar(--color-bg-primary)
—
--color-bg-brand-solid
bg-bg-brand-solid
lightvar(--color-brand-600)darkvar(--color-accent-400)
embergraphiteoceanultraviolet
--color-bg-brand-solid_hover
bg-bg-brand-solid_hover
lightvar(--color-brand-700)darkvar(--color-accent-500)
embergraphiteoceanultraviolet
--color-bg-error-primary
bg-bg-error-primary
lightvar(--color-red-50)darkvar(--color-red-950)
—
--color-bg-error-secondary
bg-bg-error-secondary
lightvar(--color-red-100)darkvar(--color-red-600)
—
--color-bg-error-solid
bg-bg-error-solid
lightvar(--color-red-600)
—
--color-bg-error-solid_hover
bg-bg-error-solid_hover
lightvar(--color-red-700)darkvar(--color-red-500)
—
--color-bg-overlay
bg-bg-overlay
lightvar(--color-neutral-950)darkvar(--color-neutral-800)
—
--color-bg-primary
bg-bg-primary
lightvar(--color-white)darkvar(--color-neutral-950)
—
--color-bg-primary_alt
bg-bg-primary_alt
lightvar(--color-white)darkvar(--color-bg-secondary)
—
--color-bg-primary_hover
bg-bg-primary_hover
lightvar(--color-neutral-50)darkvar(--color-neutral-900)
—
--color-bg-primary-solid
bg-bg-primary-solid
lightvar(--color-neutral-950)darkvar(--color-bg-secondary)
—
--color-bg-quaternary
bg-bg-quaternary
lightvar(--color-neutral-200)darkvar(--color-neutral-700)
—
--color-bg-secondary
bg-bg-secondary
lightvar(--color-neutral-50)darkvar(--color-neutral-900)
—
--color-bg-secondary_alt
bg-bg-secondary_alt
lightvar(--color-neutral-50)darkvar(--color-bg-primary)
—
--color-bg-secondary_hover
bg-bg-secondary_hover
lightvar(--color-neutral-100)darkvar(--color-neutral-800)
—
--color-bg-secondary-solid
bg-bg-secondary-solid
lightvar(--color-neutral-600)
—
--color-bg-success-primary
bg-bg-success-primary
lightvar(--color-green-50)darkvar(--color-green-950)
—
--color-bg-success-secondary
bg-bg-success-secondary
lightvar(--color-green-100)darkvar(--color-green-600)
—
--color-bg-success-solid
bg-bg-success-solid
lightvar(--color-green-600)
—
--color-bg-tertiary
bg-bg-tertiary
lightvar(--color-neutral-100)darkvar(--color-neutral-800)
—
--color-bg-warning-primary
bg-bg-warning-primary
lightvar(--color-yellow-50)darkvar(--color-yellow-950)
—
--color-bg-warning-secondary
bg-bg-warning-secondary
lightvar(--color-yellow-100)darkvar(--color-yellow-600)
—
--color-bg-warning-solid
bg-bg-warning-solid
lightvar(--color-yellow-600)
—
--color-black
bg-black
lightrgb(0 0 0)
—
--color-border-brand
border-border-brand
lightvar(--color-brand-500)darkvar(--color-brand-400)
—
--color-border-brand_alt
border-border-brand_alt
lightvar(--color-brand-600)darkvar(--color-neutral-700)
—
--color-border-error
border-border-error
lightvar(--color-red-500)darkvar(--color-red-400)
—
--color-border-error_subtle
border-border-error_subtle
lightvar(--color-red-300)darkvar(--color-red-500)
—
--color-border-primary
border-border-primary
lightvar(--color-neutral-300)darkvar(--color-neutral-700)
—
--color-border-secondary
border-border-secondary
lightvar(--color-neutral-200)darkvar(--color-neutral-800)
—
--color-border-secondary_alt
border-border-secondary_alt
lightrgb(0 0 0 / 0.1)darkvar(--color-neutral-800)
—
--color-border-tertiary
border-border-tertiary
lightvar(--color-neutral-100)darkvar(--color-neutral-800)
—
--color-featured-icon-light-fg-brand
bg-featured-icon-light-fg-brand
lightvar(--color-brand-600)darkvar(--color-brand-200)
—
--color-featured-icon-light-fg-error
bg-featured-icon-light-fg-error
lightvar(--color-red-600)darkvar(--color-red-200)
—
--color-featured-icon-light-fg-gray
bg-featured-icon-light-fg-gray
lightvar(--color-neutral-500)darkvar(--color-neutral-200)
—
--color-featured-icon-light-fg-success
bg-featured-icon-light-fg-success
lightvar(--color-green-600)darkvar(--color-green-200)
—
--color-featured-icon-light-fg-warning
bg-featured-icon-light-fg-warning
lightvar(--color-yellow-600)darkvar(--color-yellow-200)
—
--color-fg-brand-primary
text-fg-brand-primary
lightvar(--color-brand-600)darkvar(--color-brand-300)
—
--color-fg-brand-primary_alt
text-fg-brand-primary_alt
lightvar(--color-fg-brand-primary)darkvar(--color-neutral-300)
—
--color-fg-brand-secondary
text-fg-brand-secondary
lightvar(--color-brand-500)darkvar(--color-brand-300)
—
--color-fg-brand-secondary_alt
text-fg-brand-secondary_alt
lightvar(--color-fg-brand-secondary)darkvar(--color-neutral-600)
—
--color-fg-brand-secondary_hover
text-fg-brand-secondary_hover
lightvar(--color-brand-600)darkvar(--color-neutral-500)
—
--color-fg-error-primary
text-fg-error-primary
lightvar(--color-red-600)darkvar(--color-red-500)
—
--color-fg-error-secondary
text-fg-error-secondary
lightvar(--color-red-500)darkvar(--color-red-400)
—
--color-fg-on-brand-solid
text-fg-on-brand-solid
lightvar(--color-white)darkvar(--color-brand-600)
embergraphiteoceanultraviolet
--color-fg-primary
text-fg-primary
lightvar(--color-neutral-900)darkvar(--color-white)
—
--color-fg-quaternary
text-fg-quaternary
lightvar(--color-neutral-400)darkvar(--color-neutral-600)
—
--color-fg-quaternary_hover
text-fg-quaternary_hover
lightvar(--color-neutral-500)
—
--color-fg-secondary
text-fg-secondary
lightvar(--color-neutral-700)darkvar(--color-neutral-300)
—
--color-fg-secondary_hover
text-fg-secondary_hover
lightvar(--color-neutral-800)darkvar(--color-neutral-200)
—
--color-fg-success-primary
text-fg-success-primary
lightvar(--color-green-600)darkvar(--color-green-500)
—
--color-fg-success-secondary
text-fg-success-secondary
lightvar(--color-green-500)darkvar(--color-green-400)
—
--color-fg-tertiary
text-fg-tertiary
lightvar(--color-neutral-600)darkvar(--color-neutral-400)
—
--color-fg-tertiary_hover
text-fg-tertiary_hover
lightvar(--color-neutral-700)darkvar(--color-neutral-300)
—
--color-fg-warning-primary
text-fg-warning-primary
lightvar(--color-yellow-600)darkvar(--color-yellow-500)
—
--color-fg-warning-secondary
text-fg-warning-secondary
lightvar(--color-yellow-500)darkvar(--color-yellow-400)
—
--color-fg-white
text-fg-white
lightvar(--color-white)
—
--color-focus-ring
ring-focus-ring
lightvar(--color-brand-500)darkvar(--color-brand-300)
emberevergreengraphiteoceanultraviolet
--color-focus-ring-error
ring-focus-ring-error
lightvar(--color-red-500)
—
--color-footer-button-fg
bg-footer-button-fg
lightvar(--color-brand-200)darkvar(--color-neutral-300)
—
--color-footer-button-fg_hover
bg-footer-button-fg_hover
lightvar(--color-white)darkvar(--color-neutral-100)
—
--color-icon-fg-brand
bg-icon-fg-brand
lightvar(--color-brand-600)darkvar(--color-neutral-400)
—
--color-icon-fg-brand_on-brand
bg-icon-fg-brand_on-brand
lightvar(--color-brand-200)darkvar(--color-neutral-400)
—
--color-screen-mockup-border
bg-screen-mockup-border
lightvar(--color-neutral-900)darkvar(--color-neutral-700)
—
--color-slider-handle-bg
bg-slider-handle-bg
lightvar(--color-white)darkvar(--color-bg-brand-solid)
—
--color-slider-handle-border
bg-slider-handle-border
lightvar(--color-brand-600)darkvar(--color-bg-primary)
—
--color-text-brand-primary
text-text-brand-primary
lightvar(--color-brand-900)darkvar(--color-neutral-50)
—
--color-text-brand-secondary
text-text-brand-secondary
lightvar(--color-brand-700)darkvar(--color-brand-300)
—
--color-text-brand-secondary_hover
text-text-brand-secondary_hover
lightvar(--color-brand-800)darkvar(--color-brand-200)
—
--color-text-brand-tertiary
text-text-brand-tertiary
lightvar(--color-brand-600)darkvar(--color-brand-300)
—
--color-text-brand-tertiary_alt
text-text-brand-tertiary_alt
lightvar(--color-brand-600)darkvar(--color-neutral-50)
—
--color-text-editor-icon-fg
text-text-editor-icon-fg
lightvar(--color-neutral-400)
—
--color-text-editor-icon-fg_active
text-text-editor-icon-fg_active
lightvar(--color-neutral-500)darkvar(--color-white)
—
--color-text-error-primary
text-text-error-primary
lightvar(--color-red-600)darkvar(--color-red-400)
—
--color-text-error-primary_hover
text-text-error-primary_hover
lightvar(--color-red-700)darkvar(--color-red-300)
—
--color-text-on-brand-solid
text-text-on-brand-solid
lightvar(--color-white)darkvar(--color-brand-600)
embergraphiteoceanultraviolet
--color-text-placeholder
text-text-placeholder
lightvar(--color-neutral-500)
—
--color-text-primary
text-text-primary
lightvar(--color-neutral-900)darkvar(--color-neutral-50)
—
--color-text-primary_on-brand
text-text-primary_on-brand
lightvar(--color-white)darkvar(--color-neutral-50)
—
--color-text-quaternary
text-text-quaternary
lightvar(--color-neutral-500)
—
--color-text-quaternary_on-brand
text-text-quaternary_on-brand
lightvar(--color-brand-300)darkvar(--color-neutral-400)
—
--color-text-secondary
text-text-secondary
lightvar(--color-neutral-700)darkvar(--color-neutral-300)
—
--color-text-secondary_hover
text-text-secondary_hover
lightvar(--color-neutral-800)darkvar(--color-neutral-200)
—
--color-text-secondary_on-brand
text-text-secondary_on-brand
lightvar(--color-brand-200)darkvar(--color-neutral-300)
—
--color-text-success-primary
text-text-success-primary
lightvar(--color-green-600)darkvar(--color-green-400)
—
--color-text-tertiary
text-text-tertiary
lightvar(--color-neutral-600)darkvar(--color-neutral-400)
—
--color-text-tertiary_hover
text-text-tertiary_hover
lightvar(--color-neutral-700)darkvar(--color-neutral-300)
—
--color-text-tertiary_on-brand
text-text-tertiary_on-brand
lightvar(--color-brand-200)darkvar(--color-neutral-400)
—
--color-text-warning-primary
text-text-warning-primary
lightvar(--color-yellow-600)darkvar(--color-yellow-400)
—
--color-text-white
text-text-white
lightvar(--color-white)
—
--color-toggle-border
bg-toggle-border
lightvar(--color-neutral-300)darkvar(--color-transparent)
—
--color-toggle-slim-border_pressed
bg-toggle-slim-border_pressed
lightvar(--color-bg-brand-solid)darkvar(--color-transparent)
—
--color-toggle-slim-border_pressed-hover
bg-toggle-slim-border_pressed-hover
lightvar(--color-bg-brand-solid_hover)darkvar(--color-transparent)
—
--color-tooltip-supporting-text
bg-tooltip-supporting-text
lightvar(--color-neutral-300)
—
--color-transparent
bg-transparent
lightrgb(0 0 0 / 0)
—
--color-utility-amber-100
bg-utility-amber-100
lightvar(--color-amber-100)darkvar(--color-amber-900)
—
--color-utility-amber-200
bg-utility-amber-200
lightvar(--color-amber-200)darkvar(--color-amber-800)
—
--color-utility-amber-300
bg-utility-amber-300
lightvar(--color-amber-300)darkvar(--color-amber-700)
—
--color-utility-amber-400
bg-utility-amber-400
lightvar(--color-amber-400)darkvar(--color-amber-600)
—
--color-utility-amber-50
bg-utility-amber-50
lightvar(--color-amber-50)darkvar(--color-amber-950)
—
--color-utility-amber-500
bg-utility-amber-500
lightvar(--color-amber-500)
—
--color-utility-amber-600
bg-utility-amber-600
lightvar(--color-amber-600)darkvar(--color-amber-400)
—
--color-utility-amber-700
bg-utility-amber-700
lightvar(--color-amber-700)darkvar(--color-amber-300)
—
--color-utility-blue-100
bg-utility-blue-100
lightvar(--color-blue-100)darkvar(--color-blue-900)
—
--color-utility-blue-200
bg-utility-blue-200
lightvar(--color-blue-200)darkvar(--color-blue-800)
—
--color-utility-blue-300
bg-utility-blue-300
lightvar(--color-blue-300)darkvar(--color-blue-700)
—
--color-utility-blue-400
bg-utility-blue-400
lightvar(--color-blue-400)darkvar(--color-blue-600)
—
--color-utility-blue-50
bg-utility-blue-50
lightvar(--color-blue-50)darkvar(--color-blue-950)
—
--color-utility-blue-500
bg-utility-blue-500
lightvar(--color-blue-500)
—
--color-utility-blue-600
bg-utility-blue-600
lightvar(--color-blue-600)darkvar(--color-blue-400)
—
--color-utility-blue-700
bg-utility-blue-700
lightvar(--color-blue-700)darkvar(--color-blue-300)
—
--color-utility-brand-100
bg-utility-brand-100
lightvar(--color-brand-100)darkvar(--color-brand-900)
—
--color-utility-brand-100_alt
bg-utility-brand-100_alt
lightvar(--color-brand-100)darkvar(--color-utility-neutral-100)
—
--color-utility-brand-200
bg-utility-brand-200
lightvar(--color-brand-200)darkvar(--color-brand-800)
—
--color-utility-brand-200_alt
bg-utility-brand-200_alt
lightvar(--color-brand-200)darkvar(--color-utility-neutral-200)
—
--color-utility-brand-300
bg-utility-brand-300
lightvar(--color-brand-300)darkvar(--color-brand-700)
—
--color-utility-brand-300_alt
bg-utility-brand-300_alt
lightvar(--color-brand-300)darkvar(--color-utility-neutral-300)
—
--color-utility-brand-400
bg-utility-brand-400
lightvar(--color-brand-400)darkvar(--color-brand-600)
—
--color-utility-brand-400_alt
bg-utility-brand-400_alt
lightvar(--color-brand-400)darkvar(--color-utility-neutral-400)
—
--color-utility-brand-50
bg-utility-brand-50
lightvar(--color-brand-50)darkvar(--color-brand-950)
—
--color-utility-brand-50_alt
bg-utility-brand-50_alt
lightvar(--color-brand-50)darkvar(--color-utility-neutral-50)
—
--color-utility-brand-500
bg-utility-brand-500
lightvar(--color-brand-500)
—
--color-utility-brand-500_alt
bg-utility-brand-500_alt
lightvar(--color-brand-500)darkvar(--color-utility-neutral-500)
—
--color-utility-brand-600
bg-utility-brand-600
lightvar(--color-brand-600)darkvar(--color-brand-400)
—
--color-utility-brand-600_alt
bg-utility-brand-600_alt
lightvar(--color-brand-600)darkvar(--color-utility-neutral-600)
—
--color-utility-brand-700
bg-utility-brand-700
lightvar(--color-brand-700)darkvar(--color-brand-300)
—
--color-utility-brand-700_alt
bg-utility-brand-700_alt
lightvar(--color-brand-700)darkvar(--color-utility-neutral-700)
—
--color-utility-brand-800
bg-utility-brand-800
lightvar(--color-brand-800)darkvar(--color-brand-200)
—
--color-utility-brand-800_alt
bg-utility-brand-800_alt
lightvar(--color-brand-800)darkvar(--color-utility-neutral-800)
—
--color-utility-brand-900
bg-utility-brand-900
lightvar(--color-brand-900)darkvar(--color-brand-100)
—
--color-utility-brand-900_alt
bg-utility-brand-900_alt
lightvar(--color-brand-900)darkvar(--color-utility-neutral-900)
—
--color-utility-emerald-100
bg-utility-emerald-100
lightvar(--color-emerald-100)darkvar(--color-emerald-900)
—
--color-utility-emerald-200
bg-utility-emerald-200
lightvar(--color-emerald-200)darkvar(--color-emerald-800)
—
--color-utility-emerald-300
bg-utility-emerald-300
lightvar(--color-emerald-300)darkvar(--color-emerald-700)
—
--color-utility-emerald-400
bg-utility-emerald-400
lightvar(--color-emerald-400)darkvar(--color-emerald-600)
—
--color-utility-emerald-50
bg-utility-emerald-50
lightvar(--color-emerald-50)darkvar(--color-emerald-950)
—
--color-utility-emerald-500
bg-utility-emerald-500
lightvar(--color-emerald-500)
—
--color-utility-emerald-600
bg-utility-emerald-600
lightvar(--color-emerald-600)darkvar(--color-emerald-400)
—
--color-utility-emerald-700
bg-utility-emerald-700
lightvar(--color-emerald-700)darkvar(--color-emerald-300)
—
--color-utility-fuchsia-100
bg-utility-fuchsia-100
lightvar(--color-fuchsia-100)darkvar(--color-fuchsia-900)
—
--color-utility-fuchsia-200
bg-utility-fuchsia-200
lightvar(--color-fuchsia-200)darkvar(--color-fuchsia-800)
—
--color-utility-fuchsia-300
bg-utility-fuchsia-300
lightvar(--color-fuchsia-300)darkvar(--color-fuchsia-700)
—
--color-utility-fuchsia-400
bg-utility-fuchsia-400
lightvar(--color-fuchsia-400)darkvar(--color-fuchsia-600)
—
--color-utility-fuchsia-50
bg-utility-fuchsia-50
lightvar(--color-fuchsia-50)darkvar(--color-fuchsia-950)
—
--color-utility-fuchsia-500
bg-utility-fuchsia-500
lightvar(--color-fuchsia-500)
—
--color-utility-fuchsia-600
bg-utility-fuchsia-600
lightvar(--color-fuchsia-600)darkvar(--color-fuchsia-400)
—
--color-utility-fuchsia-700
bg-utility-fuchsia-700
lightvar(--color-fuchsia-700)darkvar(--color-fuchsia-300)
—
--color-utility-green-100
bg-utility-green-100
lightvar(--color-green-100)darkvar(--color-green-900)
—
--color-utility-green-200
bg-utility-green-200
lightvar(--color-green-200)darkvar(--color-green-800)
—
--color-utility-green-300
bg-utility-green-300
lightvar(--color-green-300)darkvar(--color-green-700)
—
--color-utility-green-400
bg-utility-green-400
lightvar(--color-green-400)darkvar(--color-green-600)
—
--color-utility-green-50
bg-utility-green-50
lightvar(--color-green-50)darkvar(--color-green-950)
—
--color-utility-green-500
bg-utility-green-500
lightvar(--color-green-500)
—
--color-utility-green-600
bg-utility-green-600
lightvar(--color-green-600)darkvar(--color-green-400)
—
--color-utility-green-700
bg-utility-green-700
lightvar(--color-green-700)darkvar(--color-green-300)
—
--color-utility-indigo-100
bg-utility-indigo-100
lightvar(--color-indigo-100)darkvar(--color-indigo-900)
—
--color-utility-indigo-200
bg-utility-indigo-200
lightvar(--color-indigo-200)darkvar(--color-indigo-800)
—
--color-utility-indigo-300
bg-utility-indigo-300
lightvar(--color-indigo-300)darkvar(--color-indigo-700)
—
--color-utility-indigo-400
bg-utility-indigo-400
lightvar(--color-indigo-400)darkvar(--color-indigo-600)
—
--color-utility-indigo-50
bg-utility-indigo-50
lightvar(--color-indigo-50)darkvar(--color-indigo-950)
—
--color-utility-indigo-500
bg-utility-indigo-500
lightvar(--color-indigo-500)
—
--color-utility-indigo-600
bg-utility-indigo-600
lightvar(--color-indigo-600)darkvar(--color-indigo-400)
—
--color-utility-indigo-700
bg-utility-indigo-700
lightvar(--color-indigo-700)darkvar(--color-indigo-300)
—
--color-utility-neutral-100
bg-utility-neutral-100
lightvar(--color-neutral-100)darkvar(--color-neutral-800)
—
--color-utility-neutral-200
bg-utility-neutral-200
lightvar(--color-neutral-200)darkvar(--color-neutral-700)
—
--color-utility-neutral-300
bg-utility-neutral-300
lightvar(--color-neutral-300)darkvar(--color-neutral-700)
—
--color-utility-neutral-400
bg-utility-neutral-400
lightvar(--color-neutral-400)darkvar(--color-neutral-600)
—
--color-utility-neutral-50
bg-utility-neutral-50
lightvar(--color-neutral-50)darkvar(--color-neutral-900)
—
--color-utility-neutral-500
bg-utility-neutral-500
lightvar(--color-neutral-500)
—
--color-utility-neutral-600
bg-utility-neutral-600
lightvar(--color-neutral-600)darkvar(--color-neutral-400)
—
--color-utility-neutral-700
bg-utility-neutral-700
lightvar(--color-neutral-700)darkvar(--color-neutral-300)
—
--color-utility-neutral-800
bg-utility-neutral-800
lightvar(--color-neutral-800)darkvar(--color-neutral-200)
—
--color-utility-neutral-900
bg-utility-neutral-900
lightvar(--color-neutral-900)darkvar(--color-neutral-100)
—
--color-utility-orange-100
bg-utility-orange-100
lightvar(--color-orange-100)darkvar(--color-orange-900)
—
--color-utility-orange-200
bg-utility-orange-200
lightvar(--color-orange-200)darkvar(--color-orange-800)
—
--color-utility-orange-300
bg-utility-orange-300
lightvar(--color-orange-300)darkvar(--color-orange-700)
—
--color-utility-orange-400
bg-utility-orange-400
lightvar(--color-orange-400)darkvar(--color-orange-600)
—
--color-utility-orange-50
bg-utility-orange-50
lightvar(--color-orange-50)darkvar(--color-orange-950)
—
--color-utility-orange-500
bg-utility-orange-500
lightvar(--color-orange-500)
—
--color-utility-orange-600
bg-utility-orange-600
lightvar(--color-orange-600)darkvar(--color-orange-400)
—
--color-utility-orange-700
bg-utility-orange-700
lightvar(--color-orange-700)darkvar(--color-orange-300)
—
--color-utility-pink-100
bg-utility-pink-100
lightvar(--color-pink-100)darkvar(--color-pink-900)
—
--color-utility-pink-200
bg-utility-pink-200
lightvar(--color-pink-200)darkvar(--color-pink-800)
—
--color-utility-pink-300
bg-utility-pink-300
lightvar(--color-pink-300)darkvar(--color-pink-700)
—
--color-utility-pink-400
bg-utility-pink-400
lightvar(--color-pink-400)darkvar(--color-pink-600)
—
--color-utility-pink-50
bg-utility-pink-50
lightvar(--color-pink-50)darkvar(--color-pink-950)
—
--color-utility-pink-500
bg-utility-pink-500
lightvar(--color-pink-500)
—
--color-utility-pink-600
bg-utility-pink-600
lightvar(--color-pink-600)darkvar(--color-pink-400)
—
--color-utility-pink-700
bg-utility-pink-700
lightvar(--color-pink-700)darkvar(--color-pink-300)
—
--color-utility-purple-100
bg-utility-purple-100
lightvar(--color-purple-100)darkvar(--color-purple-900)
—
--color-utility-purple-200
bg-utility-purple-200
lightvar(--color-purple-200)darkvar(--color-purple-800)
—
--color-utility-purple-300
bg-utility-purple-300
lightvar(--color-purple-300)darkvar(--color-purple-700)
—
--color-utility-purple-400
bg-utility-purple-400
lightvar(--color-purple-400)darkvar(--color-purple-600)
—
--color-utility-purple-50
bg-utility-purple-50
lightvar(--color-purple-50)darkvar(--color-purple-950)
—
--color-utility-purple-500
bg-utility-purple-500
lightvar(--color-purple-500)
—
--color-utility-purple-600
bg-utility-purple-600
lightvar(--color-purple-600)darkvar(--color-purple-400)
—
--color-utility-purple-700
bg-utility-purple-700
lightvar(--color-purple-700)darkvar(--color-purple-300)
—
--color-utility-red-100
bg-utility-red-100
lightvar(--color-red-100)darkvar(--color-red-900)
—
--color-utility-red-200
bg-utility-red-200
lightvar(--color-red-200)darkvar(--color-red-800)
—
--color-utility-red-300
bg-utility-red-300
lightvar(--color-red-300)darkvar(--color-red-700)
—
--color-utility-red-400
bg-utility-red-400
lightvar(--color-red-400)darkvar(--color-red-600)
—
--color-utility-red-50
bg-utility-red-50
lightvar(--color-red-50)darkvar(--color-red-950)
—
--color-utility-red-500
bg-utility-red-500
lightvar(--color-red-500)
—
--color-utility-red-600
bg-utility-red-600
lightvar(--color-red-600)darkvar(--color-red-400)
—
--color-utility-red-700
bg-utility-red-700
lightvar(--color-red-700)darkvar(--color-red-300)
—
--color-utility-sky-100
bg-utility-sky-100
lightvar(--color-sky-100)darkvar(--color-sky-900)
—
--color-utility-sky-200
bg-utility-sky-200
lightvar(--color-sky-200)darkvar(--color-sky-800)
—
--color-utility-sky-300
bg-utility-sky-300
lightvar(--color-sky-300)darkvar(--color-sky-700)
—
--color-utility-sky-400
bg-utility-sky-400
lightvar(--color-sky-400)darkvar(--color-sky-600)
—
--color-utility-sky-50
bg-utility-sky-50
lightvar(--color-sky-50)darkvar(--color-sky-950)
—
--color-utility-sky-500
bg-utility-sky-500
lightvar(--color-sky-500)
—
--color-utility-sky-600
bg-utility-sky-600
lightvar(--color-sky-600)darkvar(--color-sky-400)
—
--color-utility-sky-700
bg-utility-sky-700
lightvar(--color-sky-700)darkvar(--color-sky-300)
—
--color-utility-slate-100
bg-utility-slate-100
lightvar(--color-slate-100)darkvar(--color-slate-900)
—
--color-utility-slate-200
bg-utility-slate-200
lightvar(--color-slate-200)darkvar(--color-slate-800)
—
--color-utility-slate-300
bg-utility-slate-300
lightvar(--color-slate-300)darkvar(--color-slate-700)
—
--color-utility-slate-400
bg-utility-slate-400
lightvar(--color-slate-400)darkvar(--color-slate-600)
—
--color-utility-slate-50
bg-utility-slate-50
lightvar(--color-slate-50)darkvar(--color-slate-950)
—
--color-utility-slate-500
bg-utility-slate-500
lightvar(--color-slate-500)
—
--color-utility-slate-600
bg-utility-slate-600
lightvar(--color-slate-600)darkvar(--color-slate-400)
—
--color-utility-slate-700
bg-utility-slate-700
lightvar(--color-slate-700)darkvar(--color-slate-300)
—
--color-utility-yellow-100
bg-utility-yellow-100
lightvar(--color-yellow-100)darkvar(--color-yellow-900)
—
--color-utility-yellow-200
bg-utility-yellow-200
lightvar(--color-yellow-200)darkvar(--color-yellow-800)
—
--color-utility-yellow-300
bg-utility-yellow-300
lightvar(--color-yellow-300)darkvar(--color-yellow-700)
—
--color-utility-yellow-400
bg-utility-yellow-400
lightvar(--color-yellow-400)darkvar(--color-yellow-600)
—
--color-utility-yellow-50
bg-utility-yellow-50
lightvar(--color-yellow-50)darkvar(--color-yellow-950)
—
--color-utility-yellow-500
bg-utility-yellow-500
lightvar(--color-yellow-500)
—
--color-utility-yellow-600
bg-utility-yellow-600
lightvar(--color-yellow-600)darkvar(--color-yellow-400)
—
--color-utility-yellow-700
bg-utility-yellow-700
lightvar(--color-yellow-700)darkvar(--color-yellow-300)
—
--color-white
bg-white
lightrgb(255 255 255)
—
--accent
bg-accent
lightvar(--color-bg-secondary)darkvar(--color-bg-tertiary)
—
--accent-foreground
bg-accent-foreground
lightvar(--color-text-secondary)darkvar(--color-text-secondary_hover)
—
--background
bg-background
lightvar(--color-bg-primary)
—
--border
border-border
lightvar(--color-border-secondary)
—
--breakpoint-xs
light600px
—
--breakpoint-xxs
light320px
—
--card
bg-card
lightvar(--color-bg-primary)darkvar(--color-bg-secondary)
—
--card-foreground
bg-card-foreground
lightvar(--color-text-primary)
—
--chart-1
bg-chart-1
lightvar(--color-brand-600)darkvar(--color-accent-400)
—
--chart-2
bg-chart-2
lightvar(--color-accent-400)darkvar(--color-brand-300)
—
--chart-3
bg-chart-3
lightvar(--color-blue-500)darkvar(--color-blue-400)
—
--chart-4
bg-chart-4
lightvar(--color-green-500)darkvar(--color-green-400)
—
--chart-5
bg-chart-5
lightvar(--color-yellow-500)darkvar(--color-yellow-400)
—
--destructive
bg-destructive
lightvar(--color-bg-error-solid)darkvar(--color-fg-error-primary)
—
--destructive-foreground
bg-destructive-foreground
lightvar(--color-white)
—
--foreground
bg-foreground
lightvar(--color-text-primary)
—
--input
border-input
lightvar(--color-border-primary)
—
--max-width-container
light1280px
—
--muted
bg-muted
lightvar(--color-bg-secondary)
—
--muted-foreground
bg-muted-foreground
lightvar(--color-text-quaternary)darkvar(--color-text-tertiary)
—
--popover
bg-popover
lightvar(--color-bg-primary)darkvar(--color-bg-secondary)
—
--popover-foreground
bg-popover-foreground
lightvar(--color-text-primary)
—
--primary
bg-primary
lightvar(--color-bg-brand-solid)
—
--primary-foreground
bg-primary-foreground
lightvar(--color-text-on-brand-solid)
—
--ring
ring-ring
lightvar(--color-focus-ring)darkvar(--color-bg-brand-solid)
—
--secondary
bg-secondary
lightvar(--color-bg-secondary)darkvar(--color-bg-tertiary)
—
--secondary-foreground
bg-secondary-foreground
lightvar(--color-text-secondary)darkvar(--color-text-secondary_hover)
—
--sidebar
bg-sidebar
lightvar(--color-bg-secondary)
—
--sidebar-accent
bg-sidebar-accent
lightvar(--color-bg-quaternary)darkvar(--color-bg-active)
—
--sidebar-accent-foreground
bg-sidebar-accent-foreground
lightvar(--color-text-primary)
—
--sidebar-border
bg-sidebar-border
lightvar(--color-border-secondary)
—
--sidebar-foreground
bg-sidebar-foreground
lightvar(--color-text-secondary)
—
--sidebar-primary
bg-sidebar-primary
lightvar(--color-bg-brand-solid)
—
--sidebar-primary-foreground
bg-sidebar-primary-foreground
lightvar(--color-text-on-brand-solid)
—
--sidebar-ring
bg-sidebar-ring
lightvar(--color-focus-ring)darkvar(--color-bg-brand-solid)
—
--shadow-2xl
light0px 24px 48px -12px rgba(16, 24, 40, 0.18), 0px 4px 4px -2px rgba(16, 24, 40, 0.04)
—
--shadow-3xl
light0px 32px 64px -12px rgba(16, 24, 40, 0.14), 0px 5px 5px -2.5px rgba(16, 24, 40, 0.04)
—
--shadow-lg
light0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 2px 2px -1px rgba(16, 24, 40, 0.04)
—
--shadow-md
light0px 4px 6px -1px rgba(16, 24, 40, 0.08), 0px 2px 4px -2px rgba(16, 24, 40, 0.06)
—
--shadow-skeuomorphic
light0px 0px 0px 1px rgba(16, 24, 40, 0.18) inset, 0px -2px 0px 0px rgba(16, 24, 40, 0.05) inset
—
--shadow-sm
light0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px -1px rgba(16, 24, 40, 0.1)
—
--shadow-xl
light0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 3px 3px -1.5px rgba(16, 24, 40, 0.04)
—
--shadow-xs
light0px 1px 2px rgba(16, 24, 40, 0.05)
—
--shadow-xs-skeuomorphic
lightvar(--shadow-skeuomorphic), var(--shadow-xs)
—
--radius
light0.5rem
—
--radius-2xl
light1rem
—
--radius-3xl
light1.5rem
—
--radius-DEFAULT
light0.25rem
—
--radius-full
light9999px
—
--radius-lg
light0.5rem
—
--radius-md
light0.375rem
—
--radius-none
light0px
—
--radius-sm
light0.25rem
—
--radius-xl
light0.75rem
—
--radius-xs
light0.125rem
—
Aa
--font-display
lightvar(--font-inter, "Inter"), -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
—
Aa
--font-mono
light"JetBrains Mono", ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
—
Aa
--font-sans
lightvar(--font-inter, "Inter"), -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
—
Aa
--text-display-2xl
lightcalc(var(--spacing) * 18)
—
Aa
--text-display-2xl--letter-spacing
light-1.44px
—
Aa
--text-display-2xl--line-height
lightcalc(var(--spacing) * 22.5)
—
Aa
--text-display-lg
lightcalc(var(--spacing) * 12)
—
Aa
--text-display-lg--letter-spacing
light-0.96px
—
Aa
--text-display-lg--line-height
lightcalc(var(--spacing) * 15)
—
Aa
--text-display-md
lightcalc(var(--spacing) * 9)
—
Aa
--text-display-md--letter-spacing
light-0.72px
—
Aa
--text-display-md--line-height
lightcalc(var(--spacing) * 11)
—
Aa
--text-display-sm
lightcalc(var(--spacing) * 7.5)
—
Aa
--text-display-sm--line-height
lightcalc(var(--spacing) * 9.5)
—
Aa
--text-display-xl
lightcalc(var(--spacing) * 15)
—
Aa
--text-display-xl--letter-spacing
light-1.2px
—
Aa
--text-display-xl--line-height
lightcalc(var(--spacing) * 18)
—
Aa
--text-display-xs
lightcalc(var(--spacing) * 6)
—
Aa
--text-display-xs--line-height
lightcalc(var(--spacing) * 8)
—
Aa
--text-lg
lightcalc(var(--spacing) * 4.5)
—
Aa
--text-lg--line-height
lightcalc(var(--spacing) * 7)
—
Aa
--text-md
lightcalc(var(--spacing) * 4)
—
Aa
--text-md--line-height
lightcalc(var(--spacing) * 6)
—
Aa
--text-sm
lightcalc(var(--spacing) * 3.5)
—
Aa
--text-sm--line-height
lightcalc(var(--spacing) * 5)
—
Aa
--text-xl
lightcalc(var(--spacing) * 5)
—
Aa
--text-xl--line-height
lightcalc(var(--spacing) * 7.5)
—
Aa
--text-xs
lightcalc(var(--spacing) * 3)
—
Aa
--text-xs--line-height
lightcalc(var(--spacing) * 4.5)
—