Boostio Business OS

UI kit

Every shared Business OS component, rendered live on the Boostio tokens.

Sample data
Color tokens
violet 500 pink 500 orange 500 orange 700 navy ink text muted border success warning error

Chart series use the CVD-validated order --chart-1 violet → --chart-2 pink → --chart-3 deep orange (#B33008 — the 500-step orange sits too close to pink for colorblind-safe adjacency). Status colors are reserved for status and always ship with a label. Muted body text uses --text-3 #667090; brand muted #9AA0B4 is decorative only.

Type & numbers

Plus Jakarta Sans 800 — page titles

Plus Jakarta Sans 700 — card titles

Inter 400 — body copy at 16px with relaxed line height for dense screens.

Muted text · ₹1,23,456 · 19 Jul 2026 · 14:05 — numbers always tabular-nums (brand rule).

Buttons

The gradient .btn--primary is the ONE gradient element allowed per screen (this specimen owns this page's budget). When the budget is spent, use .btn--solid.

Status badges & chips
Active Past due Churn risk Open Paused Surge · ₹1,999/mo Admin Staff Sample data
KPI cards
MRR · excl GST ₹29,587 ▲ +₹807 vs June
Past due 2 ▲ ₹4,718 at risk Delta color = direction × whether up is good.
Active customers 14 ▲ +2 in July of 18 total
Avg. resolution 4.1 d — flat vs June Zero-change deltas stay neutral.
Chart cards

Columns — AdminOS.chart.columns

Single series → one hue. Hover or Tab into a column for its value; the latest column is direct-labelled.

Solid hairline grid · rounded data-ends · hidden table twin for screen readers.

Line — AdminOS.chart.line

2px line, 10% area wash, crosshair + tooltip snapping to the nearest point.

New sign-ups per week — sample series.

Part-to-whole — AdminOS.chart.hstack

One horizontal stacked bar with 2px surface gaps; identity carried by the legend, never color alone.

Data table — sortable · filterable · paginated · CSV

new AdminOS.DataTable(el, cfg) — click a header to sort (aria-sort), search and filter combine, Export CSV downloads the current filtered view, and the row action opens the detail drawer. Staff sessions would only ever receive their assigned rows (server-side scoping).

Drawer, modal & confirm

Overlays trap focus, close on Esc / scrim click, and return focus to the opener. AdminOS.confirm(cfg) resolves a Promise — no window.confirm anywhere.

Toasts
Forms

Helper text uses --text-3 (AA-safe muted).

This field explains exactly what to fix.

Prices exclude GST (18%).

Search field
Segmented control
Switch — e.g. a role permission
Audit-log entries

    AdminOS.renderAudit(el, entries) — icon by kind (payment / customer / ticket / role / note / login), relative + absolute time. Server-side, every admin mutation appends a row.

    Empty state & access denied

    No matching customers

    Clear a filter or two, or search by @handle instead.

    Admin access needed

    This area is limited to Admin. Ask Mayank to change your role if you need it for your work.

    Boostio Business OS UI kit · internal reference · back to Business Health