Foundation

Color Palette

Nexus colors follow a strict three-tier structure. Switch tiers below to browse every token by name — Base primitives, the Semantic intent tokens that reference them, and the Component role tokens that reference Semantic.

Tier 1 — raw color primitives. Never referenced directly in components; always go through Semantic.

1. Brand / Primary Colors

Brand color, used across all interactive elements such as buttons, links, and inputs. It defines the overall feel of the product and can elicit emotion.

50
--color-brand-50#F3E9FDhsl(270, 83%, 95%)
100
--color-brand-100#E3CDFBhsl(269, 85%, 89%)
200
--color-brand-200#C494F7hsl(269, 86%, 77%)
300
--color-brand-300#A55BF2hsl(269, 85%, 65%)
400
--color-brand-400#8522EEhsl(269, 86%, 53%)
500
--color-brand-500#670FC4hsl(269, 86%, 41%)
600
--color-brand-600#580DA8hsl(269, 86%, 35%)
700
--color-brand-700#3A086Fhsl(269, 87%, 23%)
800
--color-brand-800#2B0652hsl(269, 86%, 17%)
900
--color-brand-900#240544hsl(270, 86%, 14%)

2. Error / Danger Colors

The alert palette is used across feelings of caution and negativity — error messages, destructive actions, and failure states.

50
--color-red-50#FFE0D6hsl(15, 100%, 92%)
100
--color-red-100#FFC2B8hsl(8, 100%, 86%)
200
--color-red-200#FFA296hsl(7, 100%, 79%)
300
--color-red-300#F28276hsl(6, 83%, 71%)
400
--color-red-400#DF6055hsl(5, 68%, 60%)
500
--color-red-500#D0342Chsl(3, 65%, 49%)
600
--color-red-600#B60000hsl(0, 100%, 36%)
700
--color-red-700#940000hsl(0, 100%, 29%)
800
--color-red-800#6F0000hsl(0, 100%, 22%)
900
--color-red-900#490000hsl(0, 100%, 14%)

3. Warning Colors

The warning palette signals caution and draws attention to states that should be reviewed before proceeding.

50
--color-yellow-50#FFF9E6hsl(46, 100%, 95%)
100
--color-yellow-100#FFECB2hsl(45, 100%, 85%)
200
--color-yellow-200#FFE28Dhsl(45, 100%, 78%)
300
--color-yellow-300#FFD559hsl(45, 100%, 67%)
400
--color-yellow-400#FFCD39hsl(45, 100%, 61%)
500
--color-yellow-500#FFC107hsl(45, 100%, 51%)
600
--color-yellow-600#E8B006hsl(45, 95%, 47%)
700
--color-yellow-700#B58905hsl(45, 95%, 36%)
800
--color-yellow-800#8C6A04hsl(45, 94%, 28%)
900
--color-yellow-900#6B5103hsl(45, 95%, 22%)

4. Success Colors

The success palette communicates positive outcomes, confirmations, and completed actions.

50
--color-green-50#D8FFE8hsl(145, 100%, 92%)
100
--color-green-100#B9E6CAhsl(143, 47%, 81%)
200
--color-green-200#96CEAChsl(144, 36%, 70%)
300
--color-green-300#74B58Fhsl(145, 31%, 58%)
400
--color-green-400#4F9E72hsl(147, 33%, 46%)
500
--color-green-500#198754hsl(152, 69%, 31%)
600
--color-green-600#006D37hsl(150, 100%, 21%)
700
--color-green-700#00531Fhsl(142, 100%, 16%)
800
--color-green-800#003908hsl(128, 100%, 11%)
900
--color-green-900#001F00hsl(120, 100%, 6%)

5. Information Colors

The information palette is used for informative, neutral-priority messaging and helper guidance.

50
--color-blue-50#E7F1FFhsl(215, 100%, 95%)
100
--color-blue-100#B4D2FEhsl(216, 97%, 85%)
200
--color-blue-200#90BCFEhsl(216, 98%, 78%)
300
--color-blue-300#5D9EFEhsl(216, 99%, 68%)
400
--color-blue-400#3D8BFDhsl(216, 98%, 62%)
500
--color-blue-500#0D6EFDhsl(216, 98%, 52%)
600
--color-blue-600#0C64E6hsl(216, 90%, 47%)
700
--color-blue-700#094EB4hsl(216, 90%, 37%)
800
--color-blue-800#073D8Bhsl(215, 90%, 29%)
900
--color-blue-900#052E6Ahsl(216, 91%, 22%)

6. Neutral Colors

Supporting secondary colors used across backgrounds, text, separators, and modals throughout the system.

50
--color-neutral-50#F2F6F9hsl(206, 37%, 96%)
100
--color-neutral-100#D7E2EEhsl(211, 40%, 89%)
200
--color-neutral-200#C2CEDChsl(212, 27%, 81%)
300
--color-neutral-300#ACBBCBhsl(211, 23%, 74%)
400
--color-neutral-400#97A8B9hsl(210, 20%, 66%)
500
--color-neutral-500#75889Chsl(211, 16%, 54%)
600
--color-neutral-600#556A7Fhsl(210, 20%, 42%)
700
--color-neutral-700#384C60hsl(210, 26%, 30%)
800
--color-neutral-800#1F3142hsl(209, 36%, 19%)
900
--color-neutral-900#081725hsl(209, 64%, 9%)

7. Generic Colors

Pure black and white. Use these freely across your designs.

50
--color-white#FFFFFFhsl(0, 0%, 100%)
75
--color-white-cream#FFFDF7hsl(50, 100%, 98%)
100
--color-black#000000hsl(0, 0%, 0%)

8. Dark Colors

Purple-tinted near-blacks used exclusively by the dark-mode Semantic remap for page backgrounds, surfaces, and neutral borders. Never reference these directly in UI — they reach components only through Semantic tokens.

600
--color-dark-600#3A3348hsl(260, 17%, 24%)
700
--color-dark-700#2E2739hsl(263, 19%, 19%)
800
--color-dark-800#211C2Ahsl(261, 20%, 14%)
900
--color-dark-900#17131Dhsl(264, 21%, 9%)
950
--color-dark-950#0E0C12hsl(260, 20%, 6%)