Pick an accent — the whole page re-themes live. Same components, one data-accent attribute.
Dark or light — the accent rides on top. Your pick follows you to the topbar, footer and the changelog.
Buttons, tints, focus rings, gradients and glows — every accent-driven token recolours at once.
One package on the public npm registry — no token, no scope config. The same kit serves people and agents.
npm install @apliteni/apliteni-ui
import '@apliteni/apliteni-ui/css' import { button, card, topbar } from '@apliteni/apliteni-ui'
Adopt the apliteni-ui design system across this entire app, replacing the current styles.
1. Load it: add <link rel="stylesheet" href="https://ui.apli.tech/assets/kit.css">
(or: npm i @apliteni/apliteni-ui && import '@apliteni/apliteni-ui/css').
Set <html data-theme="dark"> (or "light"); optional data-accent="phoenix|ocean|emerald".
2. Replace every hardcoded colour, spacing, radius and shadow with the kit's CSS variables —
--bg, --surface, --surface-2, --text, --dim, --border, --accent, --accent-strong,
--radius-*, --shadow-*, --dur-*, --ease. No raw hex or px for these.
3. Re-skin with the kit's classes (not custom CSS):
buttons → .ui-btn + .ui-btn--primary|--secondary|--ghost|--danger (+ --sm|--lg)
inputs → .ui-input / .ui-select inside .ui-field with .ui-field__label
cards → .ui-card badges → .ui-badge--live|--soon|--info|--danger
tables → .ui-table--hover|--zebra|--dense toggles → .ui-seg / .ui-switch
nav / drawer / dropdown / callout / toast / code → the matching .ui-* classes
4. Keep the markup framework-agnostic HTML — plain CSS, no component lib or build step.
5. Change only the visual layer; preserve all content and behaviour. Verify dark AND light.
Vocabulary: https://ui.apli.tech/assets/kit.css — examples: https://ui.apli.tech/storybook/Not a swatch sheet — the real components, live on this page. Everything an internal Apliteni service needs to render its UI.
Four variants, three sizes, every state including busy.
Labelled fields, selects, textareas and switches.
Badges, callouts and toasts in fixed signal colours.
Segmented pills, switches and toggles.
Colour, type, spacing and radius as CSS variables.
One line set — 24×24, 1.7 stroke, currentColor. 69 glyphs in the Feather/Lucide house style, inline SVG with no runtime.
Token-driven effects — entrances, hover lifts, scroll reveals and skeleton loaders. Reads the brand motion vocabulary; reduced-motion safe.
Hoverable rows, status chips and right-aligned actions.
| Service | Status | |
|---|---|---|
| strategy-portal | Live | |
| operating-model | Soon | |
| legacy-admin | Revoked |