LHP LHP ERPDesign system · v1.0
Presenter guide Open demo

Design system HTML + CSS only

The building blocks behind every LHP ERP screen. Each section shows the live component and the classes to use. All styles live in assets/css/ — one file, app.css, imports the rest.

17 stylesheets · no JavaScript Mobile-first · 390 px → 1366 px+ Font: Inter, bundled locally

Page skeleton & rules

Every app page uses the same shell; only the content inside <main> changes
  • No scripts, no style blocks
    Interactions use links, radios, checkboxes, :target and <details>. Inline style only for chart values and widths, e.g. style="--v:62".
  • Body sets company and navigation
    <body class="co-ts" data-nav="proc-requests" data-tab=""> — theme colour, active menu item and active bottom tab.
  • Shell is generated
    Sidebar, top bar, bottom navigation and quick-actions sheet are filled between <!-- @shell:… --> markers by the build script.
  • One h1, labels on every input
    alt on images, aria-label on icon-only buttons, sentence-case labels.
Structure
body.co-ts[data-nav][data-tab]
 ├ input#nav-toggle · input#qa-toggle
 ├ i.st.st-1 … (state anchors)
 └ div.app
    ├ aside.sidebar + label.scrim
    ├ div.main
    │  ├ header.topbar
    │  └ main.content(.narrow)
    │     ├ .page-head · .alert · .kpis
    │     ├ .split / .grid-2 / .card …
    │     └ .modal · .toast (at the end)
    ├ nav.bottomnav (phones)
    └ div.qa-sheet (Create / + button)
Layout helpers: .split (2/3 + 1/3) · .split-even · .grid-2/3/4 · .kpis(.k3/.k5/.k6) · .stack · .section · .row

Colour tokens

Defined once in tokens.css · white UI with slate text

Neutrals

--text
--text-2
--text-3
--muted
--faint
--border-2
--surface-3
--surface-2
--bg

Semantic colours — base · soft · ink · line

TokenSwatchesUsed forExample
--green
Approved, paid, on track, passApproved
--amber
At risk, due soon, expiring ≤ 30 daysDue soon
--red
Rejected, overdue, expired, delayedOverdue
--blue
In progress, submitted, sentSent
--violet
Pending approval, waiting for someone1 of 2 approved
--teal
Inter-company, LHP Metals & GlassInter-company
--orange
Returned for changesReturned
--slate
Draft, neutral, closedDraft

Chart palette — use in this order

c1 bluec2 tealc3 amberc4 violetc5 redc6 slatec7 greenc8 pink

Company themes

One class on <body> swaps the brand tokens — the same components, three identities
TS
LHP Technical Services
.co-ts · blue #2563eb
PrimarySoftBrand badge
MG
LHP Metals & Glass
.co-mg · teal #0f766e
PrimarySoftBrand badge
G
LHP Group (partners)
.co-group · indigo #4f46e5
PrimarySoftBrand badge
Company marks inside content: TSTechnical Services MGMetals & Glass — .company-pill + .brand-mark.ts/.mg/.group

Typography

Inter · tabular numbers for amounts (.num)
Page titleh1 · 24 / 20 px · 700
Section titleh2 · 17 px
Card title.card-title h2 · 15 px
Body text for descriptions and table cells14 px · 400
Helper text, page subtitle.ph-sub · 13 px
Meta, hints, table headers.hint · 12 px
AED30,019.hero-num · 30 px
PR-TS-26-0142.code · document numbers
Amounts: AED 38,450 on screens, 38,450.00 on tax documents.

Spacing & shape

4-px grid · gutters 16 / 24 / 32 px by screen size
4.mt-4 .gap-4
8.mt-8 .gap-8
12.mt-12 .p-12
16.mt-16 .p-16 · card padding
24.mt-24 · grid gap on desktop
28–32.section · between blocks
radius 6 · 8 · 12 · 16 · 20 cards 12 px buttons 10 px pills 999 px
Show/hide by size: .hide-mobile · .show-mobile · .hide-desktop · .hide-tablet-down

Icons

Stroke icons drawn with CSS masks — they take the text colour and work offline
160 icons
activity alert-circle alert-triangle archive arrow-down arrow-down-circle arrow-down-left arrow-left arrow-right arrow-up arrow-up-circle arrow-up-right award badge-check ban bank banknote bell blueprint book bot briefcase building calculator calendar calendar-check calendar-x camera car cart chart-bar chart-line check check-circle check-double cheque chevron-down chevron-left chevron-right chevron-up chevrons-up-down clipboard clipboard-check clipboard-list clock cloud coins copy credit-card database door download edit external eye eye-off factory file file-check file-plus file-text files filter flag flame folder forklift fuel funnel gantt gauge glass globe grid grid-3 hammer handshake hard-hat hash heart-pulse help history home id-card image inbox info kanban key layers layout link list list-checks lock log-in log-out mail map-pin menu message minus more more-v package paperclip pause pen percent phone pie plane play plug plus printer qr receipt refresh ruler save scan scissors search send settings share shield shield-check sitemap sliders smartphone sort sparkles stamp star store sun swap tag target timer tool trash trending-down trending-up truck upload user user-check user-minus user-plus users wallet warehouse whatsapp workflow x x-circle zap
<i class="i i-truck"></i> · sizes .i-sm 16 · .i-md 20 · .i-lg 24 · .i-xl 32 · icon tiles .ic-badge(.green/.amber/…)(.sm/.lg)

Buttons

One or two primary actions per page; extra actions go in a “More” dropdown

Variants

Primary Secondary Ghost Soft Approve Success soft Reject Danger soft WhatsApp Dark Disabled

Sizes, icons & groups

Large Default Small Extra small 6 DayWeekMonth
More
Actions
Export Excel Print
Archive

On phones every button grows to 44 px high for thumbs; buttons in .ph-actions, .modal-foot and .form-actions stretch to full width.

.btn + .btn-primary|secondary|ghost|soft|success|danger|… · .btn-lg|sm|xs · .btn-block · .icon-btn(.sm .bordered) · details.dropdown

Badges & status mapping

The same status always gets the same colour, in both companies
StatusBadge
DraftDraft
Pending approval · waitingPending approval
Approved · paid · completed · active · passPaid
Partial · due soon · at risk · on holdAt risk
Rejected · overdue · expired · failOverdue 7 days
In progress · submitted · sent · scheduledIn progress
Inter-company · Metals & GlassInter-company
Returned for changesReturned
Sizes & styles
SmallDefaultLargeOutlineBrandSolid3Pink
Related
INV-TS-26-0087LHP M&G8.2%3.1%0%4.2
Status dots & avatars
MPIPMDAKMR MR
Mohammed Rafiq
Site Foreman · TS-E004
.badge.green.dot · .sm .lg .outline .brand .solid-green · .code · .ribbon · .delta.up/.down · .avatar.a1…a8 (.xs–.xl)

Cards, stats & alerts

The dashboard vocabulary: KPI row, alert strip for the one urgent thing, cards with a clear head

Glass needed by 6 Oct. PR-TS-26-0142 needs your approval today or the handover moves to 3 Nov.
ReviewLater
Free cash · .highlight
AED30,019
of 312,600 in the bank
Sept income · .good
AED254,800
8.2%vs plan
Progress · .warn
62% of 66%
Overdue · .danger
AED46,046
2 invoices

Card title

.card-head › .card-title (icon tile + h2 + .sub)
View all
Client
Gulf Horizon Properties
Contract
AED 404,600
Handover
30 Oct 2026
.list › .list-item · .kv.cols-3 · .card-section · .card-foot
Work this period96,500.00
Advance recovery 10%−9,650.00
Retention 5%−4,825.00
VAT 5%4,101.25
TotalAED 86,126.25
Billed of AED 404,600230,900
57%
62%

.ring = share billed · .progress-row = work done

Insight · .insight

Used for AI tips and “why it matters” explanations.

Nothing waiting

Empty state · .empty — always say what to do next.

Default blue alert
.alert.green
.alert.red
.alert.violet
PDF
SD-GL-07 Rev B.pdf
1.2 MB28 Sep
 XLS
BOQ Meridian Rev 2.xlsx
86 KB30 Sep
site measurement.jpg
Flooring zone BFlooring2 OctGlass partitionGlass1 Oct+76

Forms

Prefilled so a demo submits in one click · 16 px inputs on phones so iOS does not zoom

Every control

.form-grid › .field (label + control + .hint)
Helper text · .hint
AED
TRN must have 15 digits
Generated automatically
Segmented (radio)
Checks & switch
Choice cards
Dropzone (camera on phones)
Auto code · OTP · signature
TS-26-021 auto-generated
Sign here

Line items · .items-table

Turns into cards on phones
ItemQtyRateAmount
384.00
500.00
Add line
Draft saved 10:31 AM · .form-actions(.sticky)Cancel

Tables

table.table.stacked — rows become cards below 768 px; every cell needs data-label
InvoiceClientTotal (AED)DueStatus
INV-TS-26-0087TS-26-014 · IPA-02
GH
Gulf Horizon Properties
Khalid Al Mansoori
104,679.7530 OctCertified
INV-TS-26-0084TS-26-017 · IPA-01 · tr.hl-red
UT
Urban Threads Trading
Neha Kapoor
40,446.0025 SepOverdue 7 days
INV-TS-26-0091TS-26-020 · advance 15%
SR
Spice Route Hospitality
Vikram Shetty
46,935.0015 OctPDC received
Total · 3 invoices192,060.75
td.primary = card title on phones · a.row-link makes the whole row clickable (hero records only) · tr.hl / .hl-red / .hl-green / .group-row · .num right-aligns amounts

Charts

Pure CSS and inline SVG — values set with CSS variables, no chart library

Grouped bars · .bars

TS income vs expenses, AED thousands
IncomeExpenses
320k240k160k80k0
Apr
May
Jun
Jul
Aug
Sep
.bars[style=--max] › .bar-col › .bar-set › .bar[style=--v] (.c2–.c8, .neg, .ghost)

Line & area · svg.linechart

Same data as a trend
IncomeExpenses
AprMayJunJulAugSep
.l1 .l2 .l3 lines · .a1 .a3 areas · .dash · .band for a warning zone · .chart-x labels

Horizontal bars · .hbars

Budget used per cost code, black mark = 75% of time
Glass & aluminium44,820
Flooring24,300
Gypsum subcontract33,200
Site overheads5,050
.hbar › .hb-label + .hb-track › .hb-fill[style=--v:PERCENT] + .hb-mark[style=--m] + .hb-val

Donut, stacked bar & sparkline

September income by source
254.8kAED
Progress billing190,700
Variations28,400
Small works35,700
Operational 124,700Project 118,600

Cash bridge · .bridge

From money in the bank to free cash — bars start at --s and are --w wide (percent)
Cash in bank & hand312,600
Salaries, rent & accommodation−134,200
Supplier & subcontractor bills−125,301
VAT, visas & PRO−23,080
Free cash30,019

Gantt & kanban

Schedules and stage boards — both scroll sideways on phones

Activity
21 Sep28 Sep5 Oct12 Oct
5Gypsum & ceiling
90% · 7 days late
6Flooring
60% · plan 75%
7Glass partitions (M&G)
30% · at risk
9Joinery & pantry
Elite Joinery · starts today
DoneOwn teamSubcontractorAt riskLateBaselineMilestone (glass delivery 6 Oct)Today
.gantt[style=--days;--today] · .g-bar[style=--s;--d;--p] with .done .late .risk .sub .mg .future · .g-base baseline · .g-ms milestone
Estimation2
AED 495,000
Al Fajr Auto ShowroomRM
Showroom glass facade & office
BOQ due 6 Oct
L-TS-26-081310,000
Nova ClinicsRM
Fit-out of 2nd branch
L-TS-26-083185,000
Quotation sent4
AED 505,200
Skyline Co-workingRM
6 glass meeting pods
Presentation 7 Oct
Q-TS-26-062142,000
Royal Bites RestaurantRM
Kitchen & dining fit-out
Q-TS-26-058236,000
Add
Negotiation2
AED 877,000
Meridian ConsultantsHot
Office fit-out, Prism Tower L7
60%Decision 10 Oct
Q-TS-26-061 Rev 2465,000
Won2
AED 540,000 · last 30 days
Spice Route HospitalityWon
Restaurant fit-out, JLT
TS-26-020298,000

.kanban › .kb-col(.won .lost) › .kb-head + .kb-sum + .kb-cards › a.kb-card(.hot .warm .intercompany)

Timeline, stepper & flow

Approval chains, document lifecycles and process diagrams

Approval timeline · ol.timeline

.done .current .rejected .info .warn
  1. Requested by Mohammed Rafiq
    1 Oct, 4:12 PM · mobile app · Bay View Tower
  2. Approved by Investor Partner
    1 Oct, 7:15 PM · mobile app
    “Approved — confirm M&G delivery date”
  3. Managing Partner — waiting for you
    Rule: over AED 5,000 needs both partners
  4. LPO-TS-26-121 to LHP Metals & Glass
    Created automatically

Stepper · ol.stepper

.done .current .blocked · scrolls on phones
  1. Requested1 Oct
  2. Partner 11 Oct
  3. 3Partner 2today
  4. 4LPO
  5. 5Delivered
  6. 6Paid

Checklist · ul.checklist

.done .warn .blocked
  • Fire extinguishers serviced
    28 Sep
  • Evacuation plan
    Due before 8 Oct inspection
  • Partner documents
    Waiting for signatures

Process flow · .flow

Vertical on phones, horizontal from 900 px · .flow-node(.done .current .ts .mg)
Step 1 · TSPurchase requestSite foreman
Step 2Partners approveApp or WhatsApp
Step 3 · TSLPOAutomatic
Step 4 · M&GSales orderAutomatic

Tabs, filters, dropdowns & accordions

All work with plain HTML — try them

In-page tabs · .rtabs

Radio inputs + labels + panels, matched by order (max 8)

Panel 1 — personal details, job and emergency contact.

Panel 2 — passport, visa, Emirates ID and certificates with expiry badges.

Panel 3 — leave history with out and back dates; annual balance 24 days.

.rtab-list.pills-style — board view

List view

Link tabs between pages: nav.tabs › a.tab(.active) · pills: .pills › a.pill(.active)

Filter chips · .filter-scope

Chip k shows rows whose data-f contains k
  • PR-TS-26-0143 · tile adhesive
    Pending
  • PR-TS-26-0141 · silicone
    Approved
  • PR-TS-26-0144 · generator rental
    Pending
  • PR-TS-26-0140 · vinyl flooring
    Approved
Accordion · details.acc
Collapsed content such as archived employees, older reports or template previews.

Modals, toasts & state anchors

How “clicking Approve” changes a page without JavaScript
1 · Modal

A link to #m-name opens div.modal#m-name through :target. href="#close" closes it. A bottom sheet on phones, centred dialog on desktop.

2 · State anchors

Empty <i id="approved" class="st st-1"> before the page content. Visiting page.html#approved shows .on-1 elements and hides .off-1 ones (states 1–6).

PendingSavedNeeds attention← changes with the state
3 · Toast

A .toast inside an .on-N element appears in that state and fades after 6 seconds. Variants .info .warn .err.

Show successShow warningReset
Cross-page flows: a form with action="list.html#submitted" lands on the list page in its “submitted” state. Never reuse a state id as a modal id on the same page.

Documents (A4)

Tax invoices, LPOs, quotations, payslips and delivery notes — print with Ctrl/Cmd + P and the app shell disappears

LHP
LHP Technical Services LLC
Warehouse 14, Al Quoz Industrial Area 3, Dubai
TRN 100 4567 8912 3003 · +971 4 321 7788

Tax invoice

INV-TS-26-0087
Date
25 Sep 2026
Due
30 Oct 2026
Project
TS-26-014
Client LPO
GHP/LPO/2026/0418
Bill to
Gulf Horizon Properties LLCAttn: Khalid Al Mansoori, Facilities Director
Project
Office fit-out, Level 12 Bay View TowerBusiness Bay, Dubai · IPA-02 certified 30 Sep
DescriptionAmount (AED)
Work this period (IPA-02, to 55%)96,500.00
VO-02 additional glass partition, Meeting Room 318,600.00
Less advance recovery 10%−9,650.00
Less retention 5%−5,755.00
Net99,695.00
VAT 5%4,984.75
TotalAED 104,679.75
LHP Technical Services LLC · Emirates NBD IBAN AE07 0260 0010 1234 5674 521

.doc-wrap › article.doc with .doc-head, .doc-meta, .doc-parties, table.doc-table, .doc-sum, .doc-words, .doc-notes, .doc-sign, .doc-stamp, .doc-foot · toolbar above: .doc-toolbar

LHP ERP design system · October 2026 · built for LHP Technical Services & LHP Metals & Glass Presenter guide
Saved — this is a toast
Shown because the address ends with #ds-saved. It hides itself after 6 seconds.
Warning toast · .toast.warn
Use for “done, but check this” messages, e.g. a rejected request.