Color
Neutral ramp + one accent per product, remapped by data-nx-product; status and chart palettes are fixed.
Tokens
--nx-ink--nx-slate-700--nx-slate-500--nx-slate-300--nx-hairline--nx-surface-2--nx-white--nx-paper--nx-accent-50--nx-accent-100--nx-accent-600--nx-accent-700--nx-on-accent--nx-success--nx-warning--nx-serious--nx-danger--nx-chart-1--nx-chart-2--nx-chart-3--nx-chart-4--nx-chart-5--nx-chart-6
Palette
Neutrals
Ink
--nx-inkSlate 700
--nx-slate-700Slate 500
--nx-slate-500Slate 300
--nx-slate-300Hairline
--nx-hairlineSurface-2
--nx-surface-2Surface
--nx-whitePaper
--nx-paperAccent ramps
ordNX 50
--nx-accent-50ordNX 100
--nx-accent-100ordNX 600 (signature)
--nx-accent-600ordNX 700
--nx-accent-700CheckNX 50
--nx-accent-50CheckNX 100
--nx-accent-100CheckNX 600 (signature)
--nx-accent-600CheckNX 700
--nx-accent-700PointNX 50
--nx-accent-50PointNX 100
--nx-accent-100PointNX 600 (signature)
--nx-accent-600PointNX 700
--nx-accent-700certNX 50 (standalone)
--nx-accent-50certNX 100 (standalone)
--nx-accent-100certNX 600 (signature, standalone)
--nx-accent-600certNX 700 (standalone)
--nx-accent-700DocLinQ 50
--nx-accent-50DocLinQ 100
--nx-accent-100DocLinQ 600 (signature)
--nx-accent-600DocLinQ 700
--nx-accent-700FirmNX 50
--nx-accent-50FirmNX 100
--nx-accent-100FirmNX 600 (signature)
--nx-accent-600FirmNX 700
--nx-accent-700Status
Success
--nx-successWarning
--nx-warningSerious
--nx-seriousDanger
--nx-dangerChart
Chart 1
--nx-chart-1Chart 2
--nx-chart-2Chart 3
--nx-chart-3Chart 4
--nx-chart-4Chart 5
--nx-chart-5Chart 6
--nx-chart-6Accessibility
- accent-600 is for fills/large graphics only; use accent-700 for text on accent-50/100 tints to clear WCAG AA.
- Status colour is always paired with an icon + label text — never colour alone.
Do / Don’t
- Do: Theme with one data-nx-product attribute and let tokens cascade.Don’t: Don't hard-code a hex value in a component — always go through --nx-*.