Theming

NetFrame emits every design value as a CSS custom property on :root. Override any token to retheme without touching a Sass file or rebuilding anything.

Override the palette

/* your-theme.css */
:root {
  --nf-color-primary:   #bd00ff;  /* swap green for purple */
  --nf-color-secondary: #ff6b00;  /* orange instead of magenta */
}

Scope overrides to a class to support multiple themes on one page:

.theme-purple {
  --nf-color-primary: #bd00ff;
}

Color tokens

Token	Default Value	Usage
`--nf-color-bg`	`#000000`	Page background. True black.
`--nf-color-surface`	`#131313`	Primary surface.
`--nf-color-surface-lowest`	`#0e0e0e`	Deepest inset surface.
`--nf-color-surface-low`	`#1b1b1b`	Cards, panels.
`--nf-color-surface-container`	`#1f1f1f`	Container backgrounds.
`--nf-color-surface-high`	`#2a2a2a`	Elevated surfaces.
`--nf-color-surface-highest`	`#353535`	Top surface layer.
`--nf-color-primary`	`#00ff00`	Terminal Green. Primary actions.
`--nf-color-on-primary`	`#000000`	Text on primary.
`--nf-color-secondary`	`#ff69a4`	Hot Pink. Secondary actions.
`--nf-color-tertiary`	`#bc82ff`	UV Violet. Tertiary accents.
`--nf-color-error`	`#ffb4ab`	Error state.
`--nf-color-text`	`#e2e2e2`	Primary text.
`--nf-color-text-muted`	`#c8d6c0`	Secondary text.
`--nf-color-text-subtle`	`#a0b098`	Placeholder, labels.
`--nf-color-border`	`#3b4b35`	Default border.
`--nf-color-border-strong`	`#84967c`	Emphasis border.

Typography tokens

Token	Default Value	Usage
`--nf-font-display`	`'Space Grotesk', system-ui, sans-serif`	Headers — always UPPERCASE
`--nf-font-body`	`'JetBrains Mono', monospace`	Body text, inputs, UI
`--nf-font-label`	`'VT323', monospace`	Status strips, badges, lo-fi labels

Spacing tokens

Token	Default Value
`--nf-space-1`	`0.25rem (4px)`
`--nf-space-2`	`0.5rem (8px)`
`--nf-space-3`	`0.75rem (12px)`
`--nf-space-4`	`1rem (16px)`
`--nf-space-6`	`1.5rem (24px)`
`--nf-space-8`	`2rem (32px)`
`--nf-space-10`	`2.5rem (40px)`
`--nf-space-12`	`3rem (48px)`

Motion tokens

Token	Default Value	Usage
`--nf-duration-fast`	`80ms`	Micro-interactions
`--nf-duration-base`	`150ms`	Standard transitions
`--nf-duration-slow`	`250ms`	Enter/exit animations
`--nf-duration-crawl`	`600ms`	Spinners, sweeps
`--nf-ease-sharp`	`cubic-bezier(0.4, 0, 0.6, 1)`	Default UI transitions
`--nf-ease-out`	`cubic-bezier(0, 0, 0.2, 1)`	Exit animations
`--nf-ease-glitch`	`steps(4, end)`	Glitch keyframes