Color in Nakshora 1.0 follows one grammar: <utility>-<palette>-<shade>. text-blue-500, bg-slate-900, border-rose-200, from-indigo-400 — once you know one, you know them all.
The v1 palette families#
| Palette | Character | Start here |
|---|---|---|
neon-purple | Electric violet from the v1 neon family. | colors/neon-purple|neon-purple → |
neon-pink | Hot magenta glow of the v1 neon family. | colors/neon-pink|neon-pink → |
neon-cyan | The signature v1 accent — glowing aqua. | colors/neon-cyan|neon-cyan → |
neon-lime | Acid green energy from the v1 neon family. | colors/neon-lime|neon-lime → |
neon-orange | Burning amber from the v1 neon family. | colors/neon-orange|neon-orange → |
pastel-rose | Soft pink from the v1 pastel family. | colors/pastel-rose|pastel-rose → |
pastel-lavender | Dreamy violet from the v1 pastel family. | colors/pastel-lavender|pastel-lavender → |
pastel-mint | Fresh green from the v1 pastel family. | colors/pastel-mint|pastel-mint → |
pastel-peach | Warm apricot from the v1 pastel family. | colors/pastel-peach|pastel-peach → |
pastel-sky | Powder blue from the v1 pastel family. | colors/pastel-sky|pastel-sky → |
mono | The v1 neutral workhorse — inks and surfaces. | colors/mono|mono → |
minimal-ice | Icy near-white for minimalist sections. | colors/minimal-ice|minimal-ice → |
forest | Deep botanical green. | colors/forest|forest → |
earth | Clay and soil browns. | colors/earth|earth → |
ocean | Deep marine blue. | colors/ocean|ocean → |
sunset | Golden-hour orange. | colors/sunset|sunset → |
brutal-red | Aggressive flat red for brutalist layouts. | colors/brutal-red|brutal-red → |
brutal-yellow | Warning-tape yellow. | colors/brutal-yellow|brutal-yellow → |
brutal-blue | Unapologetic primary blue. | colors/brutal-blue|brutal-blue → |
Every shade has a job#
| Shade | Role |
|---|---|
50 | Lightest tint — page backgrounds, subtle fills, hover backgrounds for rows and list items. |
100 | Very light — section backgrounds, badges on light UI, tinted code blocks. |
200 | Light — borders on light themes, dividers with personality, chip backgrounds. |
300 | Soft — secondary borders, disabled states with color, placeholder decorations. |
400 | Medium-light — icons on dark surfaces, decorative accents, chart lines. |
500 | The primary step — buttons, links, brand fills, key interactive elements. |
600 | Hover step — hover states for 500 elements, or primary on very light UIs. |
700 | Active step — pressed states, emphasized text on light tinted backgrounds. |
800 | Dark — text on light palettes, headers in tinted sections, dark UI fills. |
900 | Very dark — deep section backgrounds, high-contrast text carriers. |
950 | Darkest — near-black tinted backgrounds, hero surfaces, footer tones. |
Where colors plug in#
Text colortext-<palette>-<shade> everywhere.Background colorbg-* with opacity modifiers.Border colorborder-*, divide-*, ring-*.Gradientsfrom-/via-/to- stops.
Accessibility#
Contrast is a property of *pairs*, not colors. The rule of thumb that keeps you WCAG AA: 50–400 shades carry dark text, 600–950 shades carry white text. Each palette page lists the flip point. See accessibility/color-contrast|Color contrast for measurements.
Tip. Opacity modifiers work on every color utility:
bg-blue-500/50, text-white/80, border-black/10 — not available in v1 (use the pre-blended pastel family instead).