Design system

One accent, used as a marker and never as type. Numbers in a width-variable mono so a table can be dense and a readout can be huge, in the same face.

v1 draft · Sep 2026

How to use this

The contract between design and build. Click any colour to copy its hex. Every screen in the prototype draws from these tokens and nothing else, which is why the A / B / C buttons in the bar below can re-theme the whole thing without touching a single screen.

Colour

A cool mineral ground rather than white or cream — it is looked at for eight hours under shop and warehouse lighting.

Floor

#EDEFEA

The page. Painted concrete, not paper.

Deck

#FFFFFF

Cards, tables, anything raised.

Sunk

#E0E3DC

Table headers, wells, inactive.

Ink

#14181A

Text, rules, primary buttons.

Panel

#1B2220

The instrument panel — till, commit gates.

Hi-vis

#CDE322

Marker only. Position, focus, active row.

Hi-vis never carries meaning by itself

It fails contrast as text and as a fill behind light type. A safety vest marks a person; it does not spell out what they do.

Post receipt৳3,204,120 Both unreadable

It marks where you are and what changed

A 3px bar, a focus halo, a selected row, the lit position on the chain rail. On the graphite panel it can also carry small type, because there it has the contrast.

Active position At the door

Positive

#1F6B4E

In stock, collected, accepted, over.

Warning

#C06A12

Low cover, short receipt, overdue.

Negative

#A93224

Out of stock, damaged, short drawer.

Muted

#8C938E

Labels, captions, anything secondary.

Type

Three faces, one job each.

DisplayArchivo · wdth 118 · 700

Distribution

InterfaceInstrument Sans · 400 / 500 / 600

Count what is in the cage. The note is reference, not a default.

ReadoutMartian Mono · wdth 100 · 600

৳32,380

TabularMartian Mono · wdth 87.5 · 500

CTN-STR-40 · 420 · ৳418 · 3.1 d

LabelInstrument Sans · 9.5px · 600 · .14em

Expected in drawer

Dense tabularMartian Mono · wdth 75 · 500

JAN FEB MAR APR MAY JUN JUL AUG SEP

Every number is mono with tabular figures. The width axis does the work a second family usually does: 75 keeps nine months of bars labelled, 112 makes change-due readable across a counter. Same face, so a column and a readout never look like different systems.

Structure

Tight and machined rather than soft.

Base unit4pxEvery spacing value is a multiple.

Radius3px6px on panels, 0 on table cells, 999px on pills. Never more.

Section head3px inkA solid bar, not a hairline — the one place weight is spent.

Focus2 + 5pxInk ring, hi-vis halo. Never removed.

States

Chips carry the state; colour alone never does.

MatchedShortHeld for QC At the doorDraft receipt On shiftOn leave

Hi-vis fills the one button that moves stock or money. Everything else is ink or an outline.

The components that carry the product

Four of these do not exist in a generic admin kit, and they are where the multi-tier model becomes visible.

Chain node

Warehouse

2,940

on hand

Store

274

Mirpur 10

On every back-office screen. Where the goods are, and where you are standing. The lit node is the tier this screen operates.

Commit gate

What posting will do

Stock+452 into Tejgaon DC, bins A-12 to A-14
CostAverage ৳412 → ৳418

Before anything irreversible. Never a bare button — what changes, where, and what cannot be undone.

Reason note

How the split was reached

Mirpur 10 takes the largest share — 119 units a day against 2.3 days of cover. It is the only store that runs out before Thursday.

Every suggested number states its reason in plain words. A recommendation that cannot explain itself is a guess.

Table row

Product	Free	Cover
Storage crate 40L	160	3.1 d
LED bulb 9W	184	6.8 d
Steel kettle 2L	60	11.4 d

Sunk header, hairline rows, no vertical rules. Numbers right, mono. Selection is a bar, not a fill.

Field

Counted ·

6 fewer than the note says was sent. Choose a reason before this can post.

Label above, help below, error replaces help. Required is marked on the label, not the control.

Empty state

No transfers waiting

Nothing is on the road to Mirpur 10. The next run from Tejgaon DC leaves at 14:00 and the cut-off is 13:15.

What the screen shows, why it is empty, and the one action that fills it. Never just an icon.