Core

Variables & tokens

Every color, space, radius and font in the framework is a design token (--ng-*). Customizing means overriding variables, never rewriting CSS.

Components never hardcode a value: they read the tokens. That makes Nexigrid brandable and theme-aware — change a token in :root and the effect propagates everywhere, in light and dark.

How it works: L1 → L2

Each color has a few base knobs (L1) — -bg, -text, -border — from which all the variants are derived at runtime (L2) (-hover, -active, -focus, -outline, -soft, -disabled, -dark, -light, -ring) via relative color syntax.

The practical upshot: to rebrand a color you only change just --ng-<color>-bg — every derivative recomputes itself, no recompile.

brand.css

:root {
    --ng-primary-bg: #7c3aed;
}

The 12 derivatives (-hover, -soft, -outline…) of primary follow the new -bg automatically.

Colors

Semantic

--ng-primary

--ng-secondary

--ng-success

--ng-info

--ng-warning

--ng-danger

--ng-mute

Extended

--ng-blue

--ng-blue-sky

--ng-green

--ng-lime

--ng-aguagreen

--ng-indigo

--ng-purple

--ng-purple-heart

--ng-cyan

--ng-magenta

--ng-yellow

Per-color derivatives (suffixes)

--ng-<color>-bg --ng-<color>-text --ng-<color>-border --ng-<color>-hover --ng-<color>-active --ng-<color>-focus --ng-<color>-outline --ng-<color>-soft --ng-<color>-disabled --ng-<color>-dark --ng-<color>-light --ng-<color>-ring

Spacing

Shared t-shirt scale (gap, gutter ng-gutter-{xs…xl}, layout). Global default --ng-gap: 1.5rem.

`0`	0
`xs`	.25rem
`sm`	.5rem
`md`	1rem
`lg`	1.5rem
`xl`	2rem

Radius

T-shirt scale; --ng-radius is the master. Components target a step via fallback-at-use: var(--ng-<c>-radius, var(--ng-radius-md)). Never hardcode an off-scale radius.

`--ng-radius-0`	0
`--ng-radius`	0.1875rem · 3px (master)
`--ng-radius-sm`	0.3125rem · 5px
`--ng-radius-md`	0.5rem · 8px
`--ng-radius-lg`	0.75rem · 12px
`--ng-radius-xl`	1rem · 16px
`--ng-radius-pill`	999px

Border

L1 tokens for borders and dividers. Components point here via fallback: var(--ng-<c>-border, var(--ng-border)).

--ng-border-width --ng-border-color --ng-border --ng-color-border

Surface & theme

A semantic set of surfaces and neutrals that themes flip with [data-theme]. Components read only these — never hardcoded surface hex — so a theme changes everything without touching the brand colors.

--ng-surface --ng-surface-sunken --ng-fill --ng-text --ng-text-muted --ng-text-on-fill --ng-hover-tint --ng-backdrop --ng-body-background

Typography

Base font and size. The text size scale (fs-2xs … fs-6xl) is documented in Typography.

--ng-font-base --ng-font-heading --ng-font-mono --ng-font-code --ng-font-size