Advance Building
QBuild Design System
Reworking the QBuild quoting tool onto the Advance brand — Iron & Quartz neutrals, Beacon used sparingly, and the lifecycle spine rebuilt with per-stage sub-statuses.
Dashboard Step stack Foundations Components Record · Light Record · Dark
Dashboard
The triage dashboard on the Advance system — KPI tiles with one Iron accent tile, and the Job Lifecycles panel with a compact row-spine per job. Beacon stays restrained: only the current node and the accent value.
3a Dashboard · Light
3b Dashboard · Dark
Record as a step stack
The tabs become a stack of build steps — Details → Quote → Proposal — each with a done ✓ / current / to-do marker and inline editing. The top spine is clickable nav. Two options below — try expanding or collapsing the steps.
2a Accordion — open what you need
2b Worksheet — everything visible at once
1a Foundations
Colour palette
Beacon
#F2CD13
Iron
#1F2323
Quartz
#FFFCF5
Stone
#343A3A
Golden
secondary
Electric
error · sparing
Sand
canvas / tint
Hairline
#E4DFD2 rules
Typography · Poppins
Statement
Heading
Abc 0123
Subheading style · Abc 0123
Body copy sits at a light weight with generous line height. Less is more — thin rules divide, type breathes, and colour stays minimal so Beacon reads as a true highlight.
List item with the square-dot device
Derived from the ADVANCE full stop
Brand devices
Corner chip
The angled cut from the logo, taken out of card corners.
Line + square dot
The spine connector.
Trapezoidal bar
The A's crossbar; doubles as quote marks.
The "A" mark
App icon & framing device.
1b Component kit
Buttons
Beacon marks the single next action; Iron carries everything else.
Status pills
Draft Proposal Sent Proposal Viewed Approved / Paid Overdue
QBuild Ref Q-1042 Ref chip — carries the thread across screens
Tabs
Quote Details
Update Quote
Proposal
Jobs
Documents
Lifecycle spine · with per-stage sub-status
Six macro stages stay fixed. The current stage drops a connected mini-rail showing exactly where the job sits inside it.
1c Quote / Job record · Light
1d Quote / Job record · Dark