Colors
The semantic color tokens every component paints with, in light and dark.
Components never name a color. They name a role (bg-surface, text-text-secondary,
bg-danger-soft) and the theme decides the value. That is what makes dark mode, a forced-light
region and any future theme work without touching a component. The lint step rejects palette
colors (bg-red-500) and arbitrary colors (text-[#fff]) in library code.
The values below are read from packages/ui/src/styles/theme.css when the site builds. Swatches
follow the theme toggle.
Surfaces and lines
| Token | Light | Dark | Use |
|---|---|---|---|
--backgroundbg-background | #f4f6f8 | #0e0e12 | The page canvas behind every surface. |
--surfacebg-surface, bg-card, bg-popover | #ffffff | #18181f | Raised surfaces: cards, popovers, dialogs, inputs. |
--surface-mutedbg-surface-muted, bg-muted, bg-secondary, bg-accent | #e8edf1 | #26262f | Recessed areas, hover and selected rows, secondary buttons. |
--borderborder-border, border-border-subtle | #e2e8ec | #2a2a33 | Dividers and the default border of every component. |
--border-strongborder-border-strong | #c9d2da | #3a3a46 | Borders that must read on a muted surface. |
--inputborder-input | #c9d2da | #3a3a46 | The border of form controls. |
Stack surfaces from the canvas up: bg-background for the page, bg-surface for cards and
overlays on it, bg-surface-muted for recessed or hovered areas inside a surface.
Text
| Token | Light | Dark | Use |
|---|---|---|---|
--foregroundtext-foreground, text-text-primary | #1a2530 | #eceff1 | Headings, values, primary text. |
--text-secondarytext-text-secondary | #4a5462 | #a8acb3 | Labels, descriptions, body copy next to a value. |
--text-mutedtext-muted-foreground, text-text-muted | #5c6c7c | #8b95a1 | Hints, placeholders, metadata, disabled text. |
--text-on-darktext-text-on-dark | #fcfcfc | #fcfcfc | Text on the topbar and other dark bands. |
Use three steps at most on one surface: text-foreground for what the user reads first,
text-text-secondary for labels and descriptions, text-muted-foreground for metadata.
Brand and primary
| Token | Light | Dark | Use |
|---|---|---|---|
--primarybg-primary, text-primary, border-primary | #1f5b85 | #4a9dd4 | The primary action and the selected state. |
--primary-foregroundtext-primary-foreground | #ffffff | #0f1620 | Text on a primary fill. |
--primary-hoverbg-primary-hover | #15466a | #6fb1dd | Hover state of a primary fill. |
--primary-activebg-primary-active | #0f3f5e | #92c4e7 | Pressed state of a primary fill. |
--primary-softbg-primary-soft | #dceef7 | #1b3a4f | Tinted background for selected navigation and soft badges. |
--primary-soft-foregroundtext-primary-soft-foreground | #15466a | #92c4e7 | Text on primary-soft. |
--linktext-link | #246b9c | #6fb1dd | Inline links. |
--link-hovertext-link-hover | #1f5b85 | #92c4e7 | Hovered links. |
--focus-ringring-ring, outline-ring | #1f5b85 | #4a9dd4 | Keyboard focus indicator. |
--brand-marktext-brand-mark | #1f5b85 | #ffffff | The brand marks and brand icons: blue in light, white in dark. |
--brand-accenttext-brand-accent, bg-brand-accent | #acdffe | #acdffe | The light brand blue. Decorative use only. |
Status
Four status families, each with a solid color, a soft background and a foreground that reaches
WCAG 4.5:1 on the soft background. Badges, banners and toasts use them through the tone prop.
| Token | Light | Dark | Use |
|---|---|---|---|
--successtext-success, bg-success | #15803d | #22c55e | Completed, healthy, resolved. |
--success-softbg-success-soft | #dcfce7 | #052e16 | Background of a success badge or banner. |
--success-soft-foregroundtext-success-soft-foreground | #166534 | #86efac | Text on success-soft. |
--warningtext-warning, bg-warning | #b45309 | #d97706 | Needs attention, pending, degraded. |
--warning-softbg-warning-soft | #fef3c7 | #451a03 | Background of a warning badge or banner. |
--warning-soft-foregroundtext-warning-soft-foreground | #92400e | #fbbf24 | Text on warning-soft. |
--dangertext-danger, bg-danger, text-destructive | #dc2626 | #ef4444 | Failed, destructive, error. |
--danger-softbg-danger-soft | #fee2e2 | #450a0a | Background of a danger badge or banner. |
--danger-soft-foregroundtext-danger-soft-foreground | #b91c1c | #f87171 | Text on danger-soft. |
--infotext-info, bg-info | #1f5b85 | #4a9dd4 | Neutral information, new, processing. |
--info-softbg-info-soft | #e0f2fe | #1b3a4f | Background of an info badge or banner. |
--info-soft-foregroundtext-info-soft-foreground | #075985 | #7dd3fc | Text on info-soft. |
Severity
The severity scale is shared by every Zenox security product. The -fg tokens are the hue that
stays readable as text on the surface: the darker one in light, the brighter one in dark. Always
pair a severity color with its label.
| Token | Light | Dark | Use |
|---|---|---|---|
--severity-criticalbg-sev-critical | #dc2626 | #ef4444 | Critical severity fill. |
--severity-highbg-sev-high | #ea580c | #f97316 | High severity fill. |
--severity-mediumbg-sev-medium | #f59e0b | #fbbf24 | Medium severity fill. |
--severity-lowbg-sev-low | #3b82f6 | #60a5fa | Low severity fill. |
--severity-infobg-sev-info, text-sev-info | #6b7280 | #94a3b8 | Unknown or informational severity. |
--severity-critical-fgtext-sev-critical-fg | #b91c1c | #ef4444 | Critical severity as text on the surface. |
--severity-high-fgtext-sev-high-fg | #c2410c | #f97316 | High severity as text on the surface. |
--severity-medium-fgtext-sev-medium-fg | #b45309 | #fbbf24 | Medium severity as text on the surface. |
--severity-low-fgtext-sev-low-fg | #1d4ed8 | #60a5fa | Low severity as text on the surface. |
--severity-critical-soft-foregroundtext-sev-critical-soft-fg | #b91c1c | #f87171 | Critical severity as text on its soft badge. |
--severity-high-soft-foregroundtext-sev-high-soft-fg | #9a3412 | #f97316 | High severity as text on its soft badge. |
--severity-medium-soft-foregroundtext-sev-medium-soft-fg | #92400e | #fbbf24 | Medium severity as text on its soft badge. |
--severity-low-soft-foregroundtext-sev-low-soft-fg | #1d4ed8 | #60a5fa | Low severity as text on its soft badge. |
--severity-info-soft-foregroundtext-sev-info-soft-fg | #4a5462 | #94a3b8 | Unknown severity as text on its soft badge. |
Topbar
| Token | Light | Dark | Use |
|---|---|---|---|
--topbarbg-topbar | #2c3a47 | #1f2a33 | The dark band at the top of every app shell. |
--topbar-fgtext-topbar-fg | #fcfcfc | #fcfcfc | Text and icons on the topbar. |
--topbar-mutedtext-topbar-muted | #9fb0bd | #9fb0bd | Secondary text on the topbar. |
Charts
A categorical palette for data visualization, in series order. It has no purple or pink by
design. Pass the variables to Recharts through the chart config: color: "var(--chart-1)".
| Token | Light | Dark | Use |
|---|---|---|---|
--chart-1var(--chart-1) | #1f5b85 | #4a9dd4 | First series: the brand blue. |
--chart-2var(--chart-2) | #16a34a | #22c55e | Second series: green. |
--chart-3var(--chart-3) | #ea580c | #f97316 | Third series: orange. |
--chart-4var(--chart-4) | #6b7280 | #94a3b8 | Fourth series: neutral. |
--chart-5var(--chart-5) | #4796cb | #acdffe | Fifth series: light blue. |
--chart-linevar(--chart-line) | #dc2626 | #ef4444 | Threshold and reference lines. |
Aliases
Several roles answer to two names. The shadcn names (bg-card, bg-muted,
text-muted-foreground, text-destructive) are what upstream components are written against;
the Zenox names (bg-surface, bg-surface-muted, text-text-muted, text-danger) came from
the platform. Both resolve to the same value. In new code, prefer the shadcn name where one
exists and the Zenox name for roles shadcn does not have (text-text-secondary,
border-border-strong, the status, severity and topbar families).