Colour

Every semantic colour token, in light and in dark, read from @nizivo/tokens at build time.

Components read only semantic colours (--nz-bg-*, --nz-text-*, --nz-icon-*, --nz-border-*, --nz-chart-*). Each one is a single light-dark() value declared once on :root, so it resolves in whichever theme scope it is used. Each swatch below is painted by the token itself inside a data-nz-theme="light" or "dark" scope; the values and primitive names come from @nizivo/tokens/dist/tokens.css. Text and icon colours are shown on --nz-bg-surface, except the on-* and inverse ones, which are shown on the background they are made for (--nz-text-on-brand on --nz-bg-brand).

Some values differ from the Figma file on purpose, to meet WCAG 2.2 AA contrast. They are listed with their reasons and expiry dates on Deviations from Figma.

Semantic colours

Backgrounds

Token	Light	Dark
`--nz-bg-accent`	`#c6e06a`lime/300	`#afd146`lime/400
`--nz-bg-accent-hover`	`#afd146`lime/400	`#c6e06a`lime/300
`--nz-bg-accent-pressed`	`#8db22b`lime/500	`#dcec9c`lime/200
`--nz-bg-accent-subtle`	`#f6fae8`lime/50	`#0a211a`green/950
`--nz-bg-brand`	`#1a573a`green/700	`#4c9e71`green/400
`--nz-bg-brand-hover`	`#15452f`green/800	`#79b993`green/300
`--nz-bg-brand-muted`	`#d3e8da`green/100	`#103324`green/900
`--nz-bg-brand-pressed`	`#103324`green/900	`#aad3b9`green/200
`--nz-bg-brand-subtle`	`#e9f3ec`green/50	`#0a211a`green/950
`--nz-bg-canvas`	`#f6f7f4`neutral/50	`#101311`neutral/950
`--nz-bg-code`	`#181b19`neutral/900	`#101311`neutral/950
`--nz-bg-code-elevated`	`#202421`neutral/850	`#202421`neutral/850
`--nz-bg-critical`	`#b93a23`red/600	`#b93a23`red/600
`--nz-bg-critical-hover`	`#8f2c1a`red/700	`#8f2c1a`red/700
`--nz-bg-critical-subtle`	`#fdf1ee`red/50	`#202421`neutral/850
`--nz-bg-disabled`	`#eef0ec`neutral/100	`#2b302c`neutral/800
`--nz-bg-hover`	`#f6f7f4`neutral/50	`#2b302c`neutral/800
`--nz-bg-info-subtle`	`#eef3fc`blue/50	`#202421`neutral/850
`--nz-bg-inverse`	`#181b19`neutral/900	`#fff`neutral/0
`--nz-bg-inverse-elevated`	`#202421`neutral/850	`#eef0ec`neutral/100
`--nz-bg-muted`	`#eef0ec`neutral/100	`#2b302c`neutral/800
`--nz-bg-pressed`	`#eef0ec`neutral/100	`#414741`neutral/700
`--nz-bg-scrim`	`rgb(24 27 25 / 0.32)`	`rgb(0 0 0 / 0.6)`
`--nz-bg-subtle`	`#fbfbf9`neutral/25	`#151816`neutral/925
`--nz-bg-success-subtle`	`#e9f3ec`green/50	`#0a211a`green/950
`--nz-bg-surface`	`#fff`neutral/0	`#181b19`neutral/900
`--nz-bg-surface-raised`	`#fff`neutral/0	`#202421`neutral/850
`--nz-bg-warning-subtle`	`#fdf6e6`amber/50	`#202421`neutral/850

Text

Token	Light	Dark
`--nz-text-brand`	`#1a573a`green/700	`#79b993`green/300
`--nz-text-code`	`#f6f7f4`neutral/50	`#f6f7f4`neutral/50
`--nz-text-code-muted`	`#9ea59c`neutral/400	`#9ea59c`neutral/400
`--nz-text-critical`	`#b93a23`red/600	`#e47962`red/400
`--nz-text-disabled`	`#9ea59c`neutral/400	`#596058`neutral/600
`--nz-text-info`	`#2e58b0`blue/600	`#7098e0`blue/400
`--nz-text-inverse`	`#fff`neutral/0	`#181b19`neutral/900
`--nz-text-inverse-accent`	`#c6e06a`lime/300	`#1a573a`green/700
`--nz-text-on-accent`	`#0a211a`green/950	`#0a211a`green/950
`--nz-text-on-brand`	`#fff`neutral/0	`#0a211a`green/950
`--nz-text-on-critical`	`#fff`neutral/0	`#fff`neutral/0
`--nz-text-on-dark`	`#fff`neutral/0	`#fff`neutral/0
`--nz-text-primary`	`#181b19`neutral/900	`#f6f7f4`neutral/50
`--nz-text-secondary`	`#414741`neutral/700	`#cbd0c8`neutral/300
`--nz-text-success`	`#216c47`green/600	`#79b993`green/300
`--nz-text-tertiary`	`#596058`neutral/600	`#9ea59c`neutral/400
`--nz-text-warning`	`#7c560a`amber/700	`#d99a1b`amber/500

Icons

Token	Light	Dark
`--nz-icon-brand`	`#216c47`green/600	`#79b993`green/300
`--nz-icon-critical`	`#d6492f`red/500	`#e47962`red/400
`--nz-icon-info`	`#2e58b0`blue/600	`#7098e0`blue/400
`--nz-icon-inverse`	`#fff`neutral/0	`#181b19`neutral/900
`--nz-icon-primary`	`#2b302c`neutral/800	`#eef0ec`neutral/100
`--nz-icon-secondary`	`#747c73`neutral/500	`#9ea59c`neutral/400
`--nz-icon-success`	`#2e8358`green/500	`#79b993`green/300
`--nz-icon-warning`	`#b07b0e`amber/600	`#d99a1b`amber/500

Borders

Token	Light	Dark
`--nz-border-brand`	`#216c47`green/600	`#4c9e71`green/400
`--nz-border-control`	`#828a81`neutral/450	`#747c73`neutral/500
`--nz-border-control-hover`	`#747c73`neutral/500	`#9ea59c`neutral/400
`--nz-border-critical`	`#d6492f`red/500	`#d6492f`red/500
`--nz-border-default`	`#e2e5df`neutral/200	`#414741`neutral/700
`--nz-border-focus`	`#2e8358`green/500	`#79b993`green/300
`--nz-border-strong`	`#cbd0c8`neutral/300	`#596058`neutral/600
`--nz-border-subtle`	`#eef0ec`neutral/100	`#2b302c`neutral/800
`--nz-border-warning`	`#b07b0e`amber/600	`#d99a1b`amber/500

Charts

Token	Light	Dark
`--nz-chart-cat-1`	`#1a573a`green/700	`#1a7d4e`viz-green/600
`--nz-chart-cat-2`	`#6b8a1e`lime/600	`#88a02a`viz-lime/600
`--nz-chart-cat-3`	`#1689a8`viz-teal/500	`#3e9fc4`viz-teal/400
`--nz-chart-critical`	`#d6492f`red/500	`#d6492f`red/500
`--nz-chart-grid`	`#eef0ec`neutral/100	`#202421`neutral/850
`--nz-chart-negative`	`#d6492f`red/500	`#d6492f`red/500
`--nz-chart-neutral`	`#747c73`neutral/500	`#9ea59c`neutral/400
`--nz-chart-primary`	`#216c47`green/600	`#79b993`green/300
`--nz-chart-secondary`	`#4c9e71`green/400	`#2e8358`green/500
`--nz-chart-success`	`#2e8358`green/500	`#79b993`green/300
`--nz-chart-tertiary`	`#6b8a1e`lime/600	`#afd146`lime/400
`--nz-chart-track`	`#eef0ec`neutral/100	`#2b302c`neutral/800
`--nz-chart-warning`	`#b07b0e`amber/600	`#d99a1b`amber/500

Elevation colours

Token	Light	Dark
`--nz-elevation-highlight`	`transparent`	`transparent`
`--nz-elevation-ring`	`transparent`	`rgb(255 255 255 / 0.08)`

Primitive palette

The semantic colours point at these primitives (--nz-p-*). Primitives are private: they can change in any release, so never use them in your own CSS.

amber

50100500600700

blue

50100400500600700

green

2550100200300400500600700800900950

lime

50100200300400500600

neutral

02550100200300400450500600700800850900925950

red

50100400500600700

viz-green

500600

viz-lime

500600

viz-teal

400500

Semantic coloursCopy Anchor Link