BQT Presence design system
Light theme, brand-matched to barquecontech.com — navy #0d1b2a ink, gold #f1b621 primary actions (always dark-navy text on gold), Poppins (vendored). Every component below is the canonical instance — visual regressions show up here first.
Color tokens
Chart/status palette validated (CVD + contrast): productive #118a5e · neutral #df8a00 · unproductive #a01f5a · unknown/idle #6b7280 (deliberate neutral) · on-leave/offline #2563eb. Amber sits below 3:1 on white → always paired with visible labels + table views.
Type scale
Heading 1 — 27px/700
Heading 2 — 20px/600
Heading 3 — 16px/600
Body — 14px/400. A link.
Secondary — 12.5px.
Note — 11px muted.
Buttons & inputs
Chips, tabs & banners
Working Left Late Absent On leave
KPI stat tiles
Active hours
7h 37m
measured · 7-day trend
Arrived
09:41
first active (IST)
Productive (hint)
64%
app-name-only estimate
Table
| Member | Status | Active | Credited |
|---|---|---|---|
| asha@barquecontech.com | Working | 7h 37m | 8h 02m |
| dev@barquecontech.com | Absent | 0h | 0h |
Empty state — no members match.