Theming
All visual decisions in nosible-ux are CSS custom properties — override any token to match your product without forking components.
The brand palette is fixed — use Neo Green sparingly (≤ 10% of any surface).
| Swatch | Token | Value | Role | Tailwind class |
|---|---|---|---|---|
| --c-obsidian | #0E0E10 | Primary dark background | bg-obsidian | |
| --c-slate-core | #1F1F23 | Elevated surface | bg-slatecore | |
| --c-neo-green | #26D07C | Brand accent (≤ 10% surface) | text-neogreen | |
| --c-critical | #FF3B3B | Critical / error state | text-critical | |
| --c-chromium-mist | #C8C8CC | Supporting / muted text | text-chromium | |
| --c-ghost-white | #EDEDED | Primary text on dark | text-ghost |
Four fonts cover every role. All four are loaded from Google Fonts. Tailwind utilities map through the font-display, font-heading, font-body, and font-mono classes.
| Role | Family | Weight | Size | Usage |
|---|---|---|---|---|
| Display (D1) | Orbitron | 400, 600 | 129px | Hero only |
| Heading (H1) | Space Grotesk | 400, 500 | 64px | Page titles |
| Heading (H2) | Space Grotesk | 400 | 32px | Section headings |
| Body | Inter | 400, 500 | 16px | Paragraphs, UI |
| Mono (M1) | Space Mono | 400 | 18px | Labels, data |
| Mono (M2) | Space Mono | 400 | 14px | Metadata, captions |
Layout spacing uses a 20px base unit — all values are multiples of 20px. Component internals (button height, padding) use a separate 4px control grid.
All transitions use cubic-bezier(0.2, 0, 0, 1) — the assertive ease from the brand bible. Duration ranges 120–240ms for UI interactions.
| Token | Value | Usage |
|---|---|---|
| --dur-micro | 80ms | Press / active feedback |
| --dur-fast | 120ms | Hover transitions |
| --dur-switch | 160ms | Toggle / Switch animation |
| --dur-med | 240ms | UI panel transitions |
| --dur-slow | 400ms | Scene transitions |
| --ease-assertive | cubic-bezier(0.2, 0, 0, 1) | All primary UI easing |
Override any token in your own CSS. Tokens cascade — overriding a root token affects every component that references it.
:root {
/* Change accent from Neo Green to Brand Orange */
--c-neo-green: #FF8C00;
--c-on-accent: #0E0E10;
/* Sharpen durations (defaults are 120 / 240 ms) */
--dur-fast: 80ms;
--dur-med: 160ms;
}