Plain CSS classes for HTML pages, React components for larger apps. Dark and light, under four accents.
Every control below is a kit class. The workspace, the roles and the four services are made up for this page.
Accents work in dark and light mode. Your choice carries over to the changelog.
| Service | Status | Last deploy | |
|---|---|---|---|
| strategy-portal | Live | 4 Mar 2026 | |
| operating-model | Soon | No deploy yet | |
| reporting-api | Live | 27 Feb 2026 | |
| legacy-admin | Revoked | 11 Nov 2025 |
Five button variants and four sizes ship with the kit, so nothing on this card is a one-off.
Each of these is one answer the kit already gives, so an app does not have to give its own.
One body colour at every size. Rank comes from size and weight, never from fading a word.
A ladder of grounds, each edged by a hairline. The kit draws no shadows.
One ring on every control: a two-pixel band in your accent, a pixel off its edge. Nothing glows behind it.
A ten-step scale sets every gap and pad. There is no density mode to configure.
79 inline icons on one 24-pixel grid, drawn at a single stroke width.
The guidelines ship inside the package, so the reasoning arrives with the classes.
A public npm package. No access token and no registry scope to configure.
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 and replace the current styles.
1. Load it by adding <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 <html data-theme="light">. You may also set data-accent="phoenix|ocean|emerald".
2. Replace every hardcoded colour, spacing value, and radius with the kit's CSS variables:
--bg, --surface-2, --surface, --bg-elevated, --surface-3 (the elevation ladder,
from lowest to highest), --text, --dim, --border, --accent, --accent-strong,
--radius-*, --dur-*, and --ease. Do not use raw hex colours or px values for these.
Do not add shadows. A surface shows its elevation through its place on the ladder
and a 1px --border line. The --shadow-* variables are deprecated and resolve to none.
3. Restyle the app with the kit's classes instead of 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 as framework-agnostic HTML: use plain CSS, with no component library and no build step.
5. Change only the visual layer. Preserve all content and behaviour, then verify both dark and light themes.
Vocabulary: https://ui.apli.tech/assets/kit.css — examples: https://ui.apli.tech/storybook/Every rule above is written down, with the reason it was chosen and what it refuses.
Read the guidelines What changed