Colors

Colors come in two layers. Primitives are the raw scales — 79 values across nine families. Semantic tokens name a role (--primary, --destructive, --sidebar-border) and point at a primitive, once for light mode and once for dark.

Only ever use the semantic tokens in application code. The primitives exist so the tokens have somewhere to point.

Tailwind's own palette is removed by --color-*: initial. bg-blue-500 and text-slate-900 do not resolve — the Nooxit blue and gray scales replace them.

Brand colors

Four colors carry the Nooxit brand, with Silver, black and white as the neutrals around them.

#fbfaf9 White

#ff5900 · PrimaryBlaze orange

#b7b5b3 · TertiarySilver

#004f2d · SecondaryDark spruce

#110f0e Black

#d2ff28 · BrandLime

#072ac8 · BrandBlue

These are brand colors, not interface colors. primary is warm black, not Blaze orange — the product UI stays neutral and lets status speak. Reach for a brand color on marketing surfaces, in charts (chart-1 is orange-500), and through the descriptive-*-brand tokens.

The brand sheet prints white as #F8F7F5. The live Figma variable base/white is #FBFAF9, which is what the code uses, and what is shown above. The older value also appears in the stale variables2json block on the Figma Readme page.

Primitives

Base

black#110f0e

white#fbfaf9

Gray

50#f4f2f0

100#efedeb

200#e0dedc

300#cdcbc9

400#b7b5b3

500#999795

600#7f7d7b

700#676563

800#494745

900#32302e

950#1c1b1a

Orange

50#fff2ee

100#fee7df

200#fed1c2

300#feb49b

400#fd8a62

500#ff5900

600#d24b0d

700#ab3c08

800#872d05

900#662003

950#4e1601

Red

50#fff5f4

100#fee6e4

200#fecfcb

300#feb0aa

400#fd837d

500#ee5c5a

600#d24142

700#b22a2f

800#91171f

900#710913

950#4e0309

Yellow

50#fdfbd7

100#f6f2af

200#f4e409

300#dbcd1d

400#bdb118

500#a29713

600#887f0e

700#6f6709

800#565005

900#413c03

950#302c07

Lime

50#eeffca

100#d2ff28

200#c5ef21

300#b2d91d

400#9abc18

500#84a213

600#6e880e

700#5a6e09

800#455605

900#334103

950#212b01

Green

50#e7fbee

100#dcf4e4

200#bce9cc

300#95dab0

400#6cc290

500#49aa75

600#2d915e

700#13794a

800#07623a

900#004f2d

950#02321b

Blue

50#f4f8ff

100#e4edfe

200#ccddfe

300#adc7fd

400#84aafd

500#5e8dfc

600#376cfb

700#1344f5

800#072ac8

900#041ca0

950#021072

Semantic tokens

Every row shows what the token resolves to in each mode and the Figma variable it came from. Three badges appear in this table:

added — not a Figma variable; added to fill a gap.
proposed — not in Figma at all; a value proposed here.
adjusted — in Figma, but the stored value was corrected. The kit's own value is shown underneath.

Base and surfaces

Token	Light	Dark	Figma
`--background` Default background of the page (<body />) and base surfaces.	base-white	base-black	background/main
`--foreground` Default text color on background.	base-black	base-white	foreground/main

Token	Light	Dark	Figma
`--card` Background for <Card />.	base-white	base-black	background/card
`--card-foreground` Text color on cards.	base-black	base-white	foreground/card
`--popover` Background for popovers such as <DropdownMenu />, <HoverCard />, <Popover />.	base-white	base-black	background/popover
`--popover-foreground` Text color in popovers.	base-black	base-white	foreground/popover

Primary and secondary

Token	Light	Dark	Figma
`--primary` Primary color, e.g. the default <Button />.	base-black	base-white	background/primary
`--primary-foreground` Text and icons on primary.	base-white	base-black	foreground/primary
`--hover-primary`adjusted Primary background on hover.	gray-800	gray-200	background/hover:primary kit: gray-900 / gray-100

Token	Light	Dark	Figma
`--secondary` Secondary color, e.g. <Button variant="secondary" />.	gray-100	gray-950	background/secondary
`--secondary-foreground` Text and icons on secondary.	base-black	base-white	foreground/secondary
`--hover-secondary` Secondary, outline and ghost backgrounds on hover.	gray-200	gray-800	background/hover:secondary

Muted and accent

Token	Light	Dark	Figma
`--muted` Muted backgrounds such as <TabsList />, <Skeleton /> and <Switch />.	gray-50	gray-950	background/muted
`--muted-foreground` Secondary text: descriptions, placeholders, captions.	gray-600	gray-400	foreground/muted
`--bg-muted-40`adjusted Translucent muted surface (muted at 40%). Figma stores base-white/base-black at 40%, which is invisible on the page background; the value follows the Figma code syntax (muted/.4) instead.	gray-50 40%	gray-950 40%	background/bg-muted-40 kit: base-white@40 / base-black@40
`--bg-muted-50`adjusted Translucent muted surface (muted at 50%), e.g. table row hover and table footer. Figma stores base-white/base-black at 50%, which is invisible on the page background; the value follows the Figma code syntax (muted/.5) instead.	gray-50 50%	gray-950 50%	background/bg-muted-50 kit: base-white@50 / base-black@50

Token	Light	Dark	Figma
`--accent` Accent surface for hover and active states on menu items, select items, etc.	orange-100	orange-950	background/accent
`--accent-foreground` Text and icons on accent.	orange-950	orange-100	foreground/accent
`--bg-accent-50`adjusted Translucent accent surface (accent at 50%), e.g. an open <NavigationMenuTrigger />. Figma stores base-white/base-black at 50%; the value follows the Figma code syntax (accent/.5) instead.	orange-100 50%	orange-950 50%	background/bg-accent-50 kit: base-white@50 / base-black@50

bg-muted-40, bg-muted-50 and bg-accent-50 are stored in Figma as base-white or base-black at 40–50%, which is invisible against the page background. The Figma code syntax for those same variables reads muted/.4 and accent/.5, so the code follows the syntax and the kit's raw value is recorded alongside it.

Status

Token	Light	Dark	Figma
`--destructive` Destructive actions, e.g. <Button destructive />.	red-600	red-500	background/destructive
`--destructive-foreground` Text and icons on destructive.	red-50	red-950	foreground/destructive
`--hover-destructive`adjusted Destructive background on hover.	red-400	red-400	background/hover:destructive kit: red-500 / red-800
`--destructive-muted` Subtle destructive surface.	red-100	red-950	background/destructive-muted
`--destructive-muted-foreground` Destructive text on neutral or muted surfaces.	red-950	red-100	foreground/destructive-muted
`--bg-destructive-10`adjusted Translucent destructive surface (10%).	red-600 10%	red-500 10%	background/bg-destructive-10 kit: red-600@10 / red-900@10
`--hover-destructive-20`adjusted Translucent destructive surface on hover (20%).	red-600 20%	red-500 20%	background/hover:destructive-20 kit: red-600@20 / red-900@20

Token	Light	Dark	Figma
`--success` Positive state.	green-600	green-400	background/success
`--success-foreground` Text and icons on success.	green-50	green-950	foreground/success
`--hover-success` Success background on hover. (Figma variable is spelled "hover:succes".)	green-700	green-500	background/hover:succes
`--success-muted` Subtle success surface.	green-100	green-950	background/success-muted
`--success-muted-foreground` Text on the subtle success surface.	green-950	green-50	foreground/success-muted

Token	Light	Dark	Figma
`--warning` Warning state.	yellow-400	yellow-200	background/warning
`--warning-foreground` Text and icons on warning.	yellow-50	yellow-950	foreground/warning
`--warning-muted` Subtle warning surface.	yellow-100	yellow-800	background/warning-muted
`--warning-muted-foreground` Text on the subtle warning surface.	yellow-950	yellow-100	foreground/warning-muted

Descriptive

These carry meaning in product surfaces — categories, tags, brand moments — rather than state.

Token	Light	Dark	Figma
`--descriptive-lime` Lime tag / highlight surface.	lime-50	lime-900	background/descriptive-lime
`--descriptive-lime-foreground` Text on descriptive-lime.	lime-950	lime-50	foreground/descriptive-lime
`--descriptive-blue` Blue tag / highlight surface.	blue-100	blue-950	background/descriptive-blue
`--descriptive-blue-foreground` Text on descriptive-blue.	blue-950	blue-100	foreground/descriptive-blue
`--descriptive-lime-brand` Brand lime surface.	lime-200	lime-100	background/descriptive-lime-brand
`--descriptive-lime-brand-foreground` Text on descriptive-lime-brand.	lime-950	lime-950	foreground/descriptive-lime-brand
`--descriptive-blue-brand` Brand blue surface.	blue-800	blue-600	background/descriptive-blue-brand
`--descriptive-blue-brand-foreground` Text on descriptive-blue-brand.	blue-50	blue-50	foreground/descriptive-blue-brand
`--descriptive-orange-brand` Brand orange surface (e.g. the logo tile).	orange-500	orange-400	background/descriptive-orange-brand
`--descriptive-orange-brand-foreground` Text on descriptive-orange-brand.	orange-50	orange-950	foreground/descriptive-orange-brand

Borders and inputs

Token	Light	Dark	Figma
`--border` Default border color.	gray-200	gray-900	border/border
`--border-muted-40` Muted border, e.g. toast action buttons.	gray-600 40%	gray-400 40%	border/border-muted-40
`--border-destructive-50`adjusted Outline of destructive elements such as buttons or alerts. The name announces the 50% opacity the Figma value was missing.	red-600 50%	red-900 50%	border/border-destructive-50 kit: red-200 / red-900
`--input` Border color of inputs such as <Input />, <Select />, <Textarea />.	gray-200	gray-900	background/input
`--ring` Focus ring color (Figma code syntax: --focus).	gray-200	gray-800	border/ring

Token	Light	Dark	Figma
`--sidebar-background` Sidebar background.	gray-50	gray-950	sidebar/background/main
`--sidebar-foreground` Sidebar text and icons.	base-black	base-white	sidebar/foreground/main
`--sidebar-foreground-70` Secondary symbols in the sidebar (group labels).	base-black 70%	base-white 70%	sidebar/foreground/foreground-70
`--sidebar-primary`added Sidebar primary surface (same values as primary).	base-black	base-white	—
`--sidebar-primary-foreground`added Text and icons on sidebar-primary (same values as primary-foreground).	base-white	base-black	—
`--sidebar-accent` Sidebar hover and active surfaces.	orange-100	orange-950	sidebar/background/accent
`--sidebar-accent-foreground` Text and icons on sidebar-accent.	orange-950	orange-100	sidebar/foreground/accent
`--sidebar-border` Sidebar borders.	gray-100	gray-900	sidebar/border/border/border
`--sidebar-ring` Sidebar focus ring.	gray-200	gray-800	sidebar/border/border/ring

Charts

Token	Light	Dark	Figma
`--chart-1`proposed Chart series 1.	orange-500	orange-600	—
`--chart-2`proposed Chart series 2.	green-800	green-500	—
`--chart-3`proposed Chart series 3.	yellow-600	yellow-700	—
`--chart-4`proposed Chart series 4.	blue-500	blue-500	—
`--chart-5`proposed Chart series 5.	lime-600	lime-500	—

The five chart tokens are proposed. The Figma kit only shows single-series charts painted in primary, so this palette was chosen here: orange, green, yellow, blue, lime. Red is deliberately excluded so it stays reserved for destructive states. The order was checked for colour-vision separation against both the light and dark chart surfaces.

Using the tokens

Each token is reachable through the Tailwind utility that matches its role:

<div className="bg-background text-foreground" />
<div className="bg-primary text-primary-foreground hover:bg-hover-primary" />
<div className="border border-border bg-muted-50" />
<p className="text-muted-foreground" />

The translucent tokens are registered in a single Tailwind namespace each, so they exist as exactly one utility: bg-muted-40, bg-muted-50, bg-accent-50, bg-destructive-10, border-muted-40 and border-destructive-50. Those names are identical to the ones in the Figma kit, so a spec and its implementation read the same.

Brand colorsCopy Anchor Link

PrimitivesCopy Anchor Link

BaseCopy Anchor Link

GrayCopy Anchor Link

OrangeCopy Anchor Link

RedCopy Anchor Link

YellowCopy Anchor Link

LimeCopy Anchor Link

GreenCopy Anchor Link

BlueCopy Anchor Link

Semantic tokensCopy Anchor Link

Base and surfacesCopy Anchor Link

Primary and secondaryCopy Anchor Link

Muted and accentCopy Anchor Link

StatusCopy Anchor Link

DescriptiveCopy Anchor Link

Borders and inputsCopy Anchor Link

SidebarCopy Anchor Link

ChartsCopy Anchor Link

Using the tokensCopy Anchor Link

On this page