THEMING

The CSS variable token system — how it works and how to customize it.

HOW IT WORKS

All design decisions are expressed as CSS custom properties in src/styles/globals.css. There are two layers:

@theme {}Tailwind v4 block — tokens that generate utility classes like text-teal, bg-void.

:root {}Semantic tokens — contextual roles like --background, --text-primary, --glow-teal.

COLOR PALETTE

--color-green#00ed3f

Primary accent — alive / active / online

--color-amber#ff8800

Warning / attention

--color-amber-light#ffa238

Soft amber highlight

--color-red#cc2200

Danger / critical / stop

--color-blue#4466cc

Info / navigation / system

--color-bone#E0D5BE

Primary text — warm off-white

--background#050505

Main background

--surface#0D0D0D

Panel / card background

--surface-raised#141414

Elevated elements, headers

--color-teal#6DC3BB

Retained legacy color

--color-pink#B53082

Retained legacy color

--color-orange#F2963A

Retained legacy color

--color-purple#381B57

Retained legacy color

CUSTOMIZING

Override any CSS variable after importing globals.css. Components automatically pick up your changes.

CSS

/* In your own CSS, after importing globals.css */
:root {
  /* Change the primary brand color */
  --color-pink: #FF0080;

  /* Adjust the background darkness */
  --background: #000000;

  /* Change the active border glow color */
  --border-active: #00FF80;
}

GLOW EFFECTS

CSS

/* Apply glow to any element */
.my-element {
  box-shadow: var(--glow-green);
  text-shadow: var(--text-glow-green);
}

/* Available glow values */
--glow-green   /* #00ed3f */
--glow-amber   /* #ff8800 */
--glow-red     /* #cc2200 */
--glow-blue    /* #4466cc */
--glow-teal    /* #6DC3BB — retained */
--glow-pink    /* #B53082 — retained */
--glow-orange  /* #F2963A — retained */

CORNER NOTCHES

CSS

/* Corner notch clip-path sizes */
--clip-corner-sm  /* 6px cut */
--clip-corner-md  /* 10px cut */
--clip-corner-lg  /* 16px cut */

/* Usage */
.my-panel {
  clip-path: var(--clip-corner-md);
}