Skip to content

Abilian Design System

A design system for Abilian's business applications, built on Litestar and Jinja with plain CSS. It has 27 knobs; everything else is derived from them.

Ask most design systems for "less shadow" or "tighter" and there is no single place to answer — a few hundred independent values have to be edited in step. Here, one line does it:

one declaration on :root elements whose computed styling changes
--ads-space-scale: 1.25 361 of 501
--ads-radius-scale: 0 171 of 501
--ads-shadow-strength: 0 55 of 501
--ads-brand: #c2410c 29 of 501

Measured on the component gallery. The brand figure includes every hover, active, tint, wash, border and focus-ring shade, because all of them are color-mix() derivations of the one colour.

What you get

  • One stylesheet. 16 files reached through @import, 3,034 lines. No build step, no PostCSS, no node_modules, no runtime dependency.
  • A closed vocabulary. 27 knobs → 128 derived tokens → 256 classes. Anything not in the reference does not exist, and abilian-ds lint says so.
  • Both themes in one value. Every colour carries light and dark through light-dark(). There is no dark: variant anywhere, and so no second styling pass to forget.
  • Measured parity with Tabler. A harness compares 78 elements property by property against the real thing and reports 0 differences.
  • Accessibility with tests behind it, not intentions — contrast in both themes, reflow at 320px, 200% text-only zoom, keyboard traversal, pointer target size, and Windows high contrast, swept across 50 routes.

Thirty seconds

pip install abilian-ds
abilian-ds sync          # 17 files into static/css/ads/

<link rel="stylesheet" href="/static/css/ads/ads.css">

abilian-ds lint          # the contract

Then read Your first page.

Where to go

  • Getting started — install, adopt, and put a real page on screen.
  • Guides — theming, layout, shells, forms, accessibility.
  • Developers — how it is built, and how to extend it without breaking the contract.
  • Reference — every knob, token, class and command.

Who it is for

Teams building business applications — dense, form-heavy, table-heavy, long-lived — on a Python server that renders HTML. If you want a component library for a React SPA, this is the wrong tool. If you have five internal applications that should look like one product and none of them should carry a front-end build, it is the right one.