This page (brand-wizard-app/public/pearlhub_design_system.html) is the
canonical component library for every PearlHub dashboard. An audit of
16 live PearlHub pages found font sizes as small as 9px, the same card/badge/progress-bar
markup hand-duplicated with inline styles 30+ times, and no documented color tokens or
type scale. This file fixes that: one set of reusable components, one token system,
one place to copy from.
Rule going forward: new and edited PearlHub pages should copy a
component's CSS + markup from here, not re-derive ad hoc styles like
status_hub.html does. Every rule in this file uses
--font-size-t0 (12px) as its floor — nothing renders smaller.
Every component below is built only from these tokens. Nothing in this file uses a hardcoded color, font size, or spacing value outside this list.
| Token | Value | Use |
|---|---|---|
--acc | #b45309 | primary accent (hover/deep) |
--acc2 | #d97706 | secondary accent (default) |
--green | #4ade80 | done / healthy / positive |
--red | #f87171 | blocked / down / negative |
--warn | #f59e0b | degraded / caution |
--text-hi | high emphasis | titles, values |
--text-mid | mid emphasis | body copy |
--text-dim | low emphasis | meta, labels, timestamps |
| Token | Px | Use |
|---|---|---|
--font-size-t0 | 12px | badges, meta, code (floor) |
--font-size-t1 | 13px | buttons, secondary body |
--font-size-t2 | 14px | body copy |
--font-size-t3 | 16px | card titles |
--font-size-t4 | 18px | sub-headings |
--font-size-t5 | 20px | section headings |
--font-size-t6 | 34px | hero stat numbers |
| breakpoints | 480 / 900 / 1200px | mobile / tablet / desktop gallery |
Title + metric + status badge, with an optional link. Border-left color signals status at a glance; hover shifts border color and adds a soft shadow.
Pill-shaped, semantic color per state. Used standalone or inside a Status Card / Checklist Item / Action Card.
.progress is a
single linear fill; .progress--stacked renders discrete segments — e.g. the
six-layer manga acceptance taxonomy (ABSENT → PROVEN-AT-BAR) or a 7-layer breakdown.
A large number (t6, serif) with a label and an optional color-coded trend arrow.
Checkbox glyph + text, with an optional sub-label. The
--done state fills the glyph and strikes the text.
Colored dot + label + status text, for GPU/queue/service rows.
Heading + description + owner/deadline meta + a call-to-action
button. Use action-card__btn--ghost for a secondary action.
46/100 books renderable; composed layers block the rest of the catalog from shipping.
Open runbookFree-quota exception sunsets 2026-10-18 — schedule the re-review before then.
Add to calendarMonospace block for commands/snippets, with a visual-only copy affordance (no JS required to render correctly).