# Sarva Foam ERP — Design system
## 1. Who this is for
**Sarva Foam Industries Ltd**, Bhopal (MP). India's largest recycler of
polyurethane foam trims into **rebonded foam** — ~15,000 MT a year, roughly 15
lakh mattresses diverted from landfill, four manufacturing units including a new
plant at Hosur. The product goes back to the people it came from: Sheela Foam
(Sleepwell), Kurl-on and Duroflex, as mattress cores and carpet underlay. Binder
chemistry is imported; finished goods are exported.
This is a **B2B industrial business measured in kilograms**. Trims are bought by
weight at unverifiable quality. Foam is sold by **density** — D80 through D150
kg/m³ — and density determines the BOM, the yield standard, the price, the QC
specification and how much fits on a truck. Every screen in this system is, at
bottom, a record of something weighed.
## 2. The buyer and the register
Two registers, in one system, deliberately different:
| | Brand register | Product register |
| --- | --- | --- |
| Where | `index.html`, sign-in, printed documents | 180 working screens |
| Voice | Committed, photographic, confident | Restrained, dense, quiet |
| Colour | Sarva red present as identity | Red **only** means stop |
| Dials | `VARIANCE 6 / MOTION 4 / DENSITY 4` | `VARIANCE 2 / MOTION 2 / DENSITY 7` |
The dashboard does not look like the landing page. That is correct and
intentional; it is stated here so it is not read as inconsistency.
## 3. Incumbents
What this buyer is compared against, and what they are replacing:
| Product | Where it shows up |
| --- | --- |
| **SAP Business One** | The aspiration and the price ceiling |
| **Oracle NetSuite** | The "proper ERP" reference |
| **Ramco ERP** | The Indian manufacturing incumbent |
| **Odoo Manufacturing** | The cheap modular alternative |
| **Tally Prime** (+ Marg / BUSY) | What accounting actually runs on today |
| **Excel + WhatsApp** | What the plant floor actually runs on today |
The last row matters most. The system we are replacing is a shift in-charge
photographing a paper batch card. The bar is not "prettier than SAP" — it is
"faster than the paper, and it does not lose the number."
## 4. The anti-reflex decision
Checked at both altitudes, per the craft standard.
**First-order — rejected.** Queried for "manufacturing ERP operations dashboard
industrial", `ui-ux-pro-max` returned primary `#64748B`, CTA `#F97316`,
background `#F8FAFC`, Fira Code + Fira Sans. Industrial grey and safety orange,
a mono display face, a data-dense card grid. That is the guess anyone could make
from the category name alone. Discarded — the database is a research input, never
an authority.
**Second-order — also rejected.** "Manufacturing that isn't grey-and-orange"
lands, reliably, on **forest green and amber sustainability** — and for a
*recycler* that reflex is close to irresistible. It is also, precisely, the
`Blind Curtain POC` already in this workspace (`#2F592D` + `#D18E35`). Equally
rejected: the dark ops-console with neon accents, and corporate navy.
**The scene that decided it.** *06:40 at the Hosur unit. The night shift's
rebonded blocks are coming out of the steam curing chambers and the air above
them is still moving. High-bay LED is fighting low orange light through the roof
vents. A planner in a cotton shirt is at a wall-mounted terminal, deciding which
of four units takes the 32-tonne Sleepwell order before the 08:00 handover.*
That scene forces the answers. **Glare and daylight force a high-contrast light
interface** — a dark console would be unreadable on that wall at that hour, and
"dark because tools look serious dark" is not a reason. **Steam, wet steel and
cold water force the hue.**
## 5. The decisions
| Decision | Value |
| --- | --- |
| **Colour strategy** | **Restrained** — tinted neutrals plus a petrol accent on under 10% of the surface. One drenched band, once, on the landing page. |
| **Primary** | `oklch(0.42 0.072 196)` — deep petrol. Steam, steel, the paint on a weighbridge. |
| **Ground** | `oklch(0.930 0.008 196)` — a toned surface, not white. Panels sit above it at `0.985`. Hierarchy comes from **tone**, never from shadow. |
| **Sarva red** | Identity register only. Inside the product **red means rejected, overdue or failed, and nothing else.** The mark stays red because the mark is red; nothing else borrows it. |
| **Density ramp** | A six-step sequential ramp on the brand hue for D80 → D150. Sequential because density is *ordered*; using categorical colours for an ordered scale is a data-visualisation error. |
| **Semantics** | Success 152 · Warning 72 · Danger 25 · Info 275. States only, never decoration, always paired with an icon or a label. |
| **Form archetype** | **Ledger.** Ruled, tabular, records. This is a weights-and-measures business: batch records, stock ledgers, weighbridge slips, packing lists, bills of lading. |
| **Nav archetype** | **Module rail + contextual panel + right drawer.** The rail is the access model made visible — see `MODULES.md` §1. |
| **Landing archetype** | Masthead photograph → the claim → **all 13 workspaces enterable in the first fold** → one-order-across-five-teams trace → the figures → honest footer. |
## 6. The six form decisions
Every one is a token. Nothing in `components.css` hardcodes any of them.
| # | Decision | Token | Value | Why |
| --- | --- | --- | --- | --- |
| 1 | Shape | `--r-ctl` `--r-card` `--r-lg` | `2px` `3px` `5px` | Ledger. Status chips are **square tags**, not pills — they read as stamps on a batch record, which is what they replace. |
| 2 | Border weight | `--bw` `--bw-strong` | `1px` `1.5px` | Never heavier. A 3px rule is the crude reading of "industrial" and it makes a dense screen unusable. |
| 3 | Elevation | `--elev-card` `--elev-pop` | `none` · `0 2px 6px` | **Hairline only.** Panels are bounded, never floated. Shadow is reserved for things that genuinely overlay: drawer, menu, modal, toast. |
| 4 | Density | `--h-ctl` `--h-row` `--pad-card` | `36px` `34px` `16px` | Dense but survivable across an eight-hour shift. Shop-floor surfaces (`iw-barcode`, `pr-*` stage screens) opt into a 44px `.t-lg` variant for gloved hands. |
| 5 | Dividers | `--cell-rule` `--row-rule` | ruled grid inside tables; whitespace between panels | A ruled grid is what a ledger is. Outside the table, nothing is ruled. |
| 6 | Heading case | `--case-head` | `uppercase`, 11–12px / 500 / +0.06em | Applied to **panel headers, table `
` and field labels only** — the convention of the documents this ERP replaces: the BMR, the GRN, the packing list. Page `h1`/`h2` and all marketing headings stay sentence case. This is a document convention, not capitals everywhere. |
## 7. Type
Two families. Both self-hosted as local `.woff2`; 78KB total.
**Display — `Barlow Condensed`** (500 / 600 / 700). A condensed grotesk with a
signage lineage. It is the voice of the weighbridge slip and the packing list,
and practically it fits long field labels into narrow ledger columns without
truncation — `NET WEIGHT AFTER MOISTURE DEDUCTION` has to sit above a number in
a 140px column.
**Body, UI and data — `Atkinson Hyperlegible Next`** (variable 400–700, tabular
figures on). Chosen from the scene rather than from taste: operators read
twelve-character batch codes off a wall-mounted terminal under glare, and this
face was designed to disambiguate `I l 1` and `0 O`. A misread lot number in a
traceability system is not a cosmetic failure — it is a recall.
There is **no third family**. Batch codes use the body face with tabular figures
and slightly loosened tracking rather than a mono, because the disambiguation
argument already holds and a mono file would buy nothing.
## 8. Divergence
`scripts/divergence.py` scores twelve weighted form dimensions against every
other project in the workspace; the floor is 0.34. The nearest neighbour is
**`Blind Curtain POC`**, the only other manufacturing/MRP build. Distance is
earned on **form**, not hue — hue is 2 of 17 and could never carry it.
| Dimension | Blind Curtain | Sarva | Defensible because |
| --- | --- | --- | --- |
| `--r-card` | 12px | **3px** | Ledger archetype |
| Elevation | 5-step blur ramp | **flat, hairline only** | Panels are bounded records, not floating cards |
| Display | IBM Plex Sans | **Barlow Condensed** | Condensed fits ledger columns |
| Body | IBM Plex Sans | **Atkinson Hyperlegible Next** | Glyph disambiguation for batch codes |
| Nav | `sidebar + tabbar + topbar` | **`rail + drawer`** | The rail *is* the access model |
| Heading case | normal | **uppercase (labels)** | BMR / GRN document convention |
| Ground | near-white | **toned, L 0.930** | Tone carries hierarchy in place of shadow |
| Hue | 143 forest | 196 petrol | Rejects the recycler-green reflex |
Every row is a decision made *for this client*. None of them was made to move a
number, and none of them is louder than what it replaces.
> **Gate mechanics.** `divergence.py` compares a folder against its *siblings*.
> This build lives at `Sarva ERP/html/`, which has none, so the gate would pass
> vacuously. Before the Phase-4 review the five fingerprint inputs are copied to
> a scratch folder alongside the other projects, scored against all 26, and the
> scratch folder deleted. No existing project is written to.
## 9. Bans — enforced in this build
- No emoji as icons; one icon family, one stroke weight, one 24×24 sprite.
- No gradient text, no glassmorphism, no glow, no purple-blue gradient.
- No side-stripe borders — no coloured `border-left` over 1px as an accent.
- No three-equal-cards row as the answer to a section.
- No tiny uppercase tracked eyebrow above every marketing section. Uppercase is a
**product-register document convention** here, confined to labels and `
`.
- No numbered section markers as scaffolding.
- No cream, sand, paper, linen or ivory body background, and no token named for
one. The ground is tinted toward the brand's own hue.
- No shadow doing a border's job. No radius above 5px on a container.
- No dark mode — the brief does not ask for one and a half-done dark mode in a
data-dense product reads as a bug.
- No `alert()`. No `href="#"`. No lorem. No `TODO`. No dead link.
- No stock handshake, lightbulb, or people pointing at a laptop. Photography is
the actual material: trim bales, foam texture, curing chambers, racking.
## 10. Accessibility floor
- `--ink` on `--bg` ≥ 7:1. `--muted` on `--bg` ≥ 4.5:1. **Placeholders use
`--muted`, never lighter** — the muted-grey placeholder is the single most
common contrast failure and it is banned here.
- Colour is never the only signal: every status tag carries an icon and a word.
- Touch targets ≥ 44px on shop-floor surfaces; ≥ 32px with adequate spacing in
the dense ledger register, which is keyboard-and-mouse.
- Visible focus ring on everything; tab order follows visual order.
- Every table is a real `