colors · brand & accentone teal accent; gold is scarce-decorative
Every component, every state
The visual companion to
DESIGN.md
— every component rendered from its tokens, labeled with its token
name, with full variant × state matrices. Built on the live
app.css; nothing hard-coded. Dark is the internal default; public-audit
components are shown in light.
Foundations
The raw tokens — color, type, spacing, radius, elevation.
colors · ink ladder
colors · surfaces & hairlinesdepth via surface ladder, not shadow
colors · stage.*lifecycle — 7 stages, always color + label
colors · score.*audit bands 0–39 / 40–69 / 70–100, always with the number
colors · stream.*email streams — kept visually distinct
colors · status.*success / warning / error / info
colors · light paletteused by the public Audit surface
typographyPoppins, one family, 400–700
spacing4px base
rounded6-step radius scale
elevationflat → overlay; shadow only on true floats
Buttons
Variants × states. Hover / pressed / focus are simulated with
token-based state classes.
button-*primary · secondary · tertiary · gold · destructive · iconbutton-primary · -hover · -pressed · -focus · -disabled
| variant | default | hover | pressed | focus | disabled |
|---|
button · sizes & loading
Inputs & Forms
Every field type and state. Labels are always visible — never
placeholder-as-label.
text-inputdefault · focused · error · disabledtext-input · -focused · -error
text-input
text-input-focused · ring primary-tint
Enter a valid email.
text-input-error
opacity 0.45
textarea · select
textarea
select
multi-selectchips inside a fieldmulti-select · category-chip
Dentist✕Orthodontist✕Cosmetic✕
checkbox · radio · toggleselection controls + their statescheckbox · radio · toggle
unchecked
checked
indeterminate
radio off
radio on
off
on
radio-cardselectable option cards (access type, link mode)radio-card · -selected
Administrative
Full access
Module access
Only selected modules
segmented-control · search · cadencesegmented-control · search-input · cadence-picker
/
form fieldlabel + control + helper / error
Stops at your target, or when the source runs out.
Badges & Pills
Color is always paired with a label or number — never color alone.
score-badgeall 3 bands + trend + nonescore-poor · -mid · -good
385481
81
—
stage-pillall 7 lifecycle stagesstage-prospect … -lost
stream-badge · status-dotstream-cold · -transactional · status-dot
ColdTransactional
HealthyWarningAction neededNot connected
category-chip · filter-chip · nav-badgecategory-chip · filter-chip · -active · nav-badge
DentistHealthcare ✕
Stage
Score 0–39 ✕
Data Display
Table states, pagination, bulk actions, saved views.
data-tableheader · row · hover · selected · skeletontable-header · table-row · -hover · -selected ·
skeleton-row
| Name | Stage | Score | Owner | |
|---|---|---|---|---|
| Default row | Audited | 38 | AK | |
| Hovered row | Prospect | — | — | |
| Selected row | Client | 78 | MA | |
pagination · saved-viewspagination-button · -active
Showing 20 of 240
bulk-action-barappears when rows are selectedbulk-action-bar
Cards
All share the surface-1 + hairline + xl-radius recipe; content
differs.
metric-cardwith delta + sparklinemetric-card
Open rate
41%
↑ 4.2%
vs last month
Bounce rate
2.1%
↓ 0.3%
business-card · template-card · campaign-cardbusiness-card · template-card · campaign-card
38High-priority
Acme Dental Clinic
acmedental.com
Cold
Cold outreach #1
integration-cardhealthy · expired · not-connectedintegration-card · status-dot
GA4· synced 2h ago
Healthy
Meta Ads· token expired
Reconnect
Call tracking
Not connected
audit-section-cardsection score barsaudit-section-card
Detail Surfaces
Drawer, tabs, activity timeline.
tab-barwith count badges + active underlinetab-bar · tab-active
activity-timeline-itemone icon per event typeactivity-timeline-item
drawerright-side overlay (header shown)drawer
Feedback
Toasts, banners, modal, progress, job log.
toastsuccess · error · infotoast
✓Stage changed to Client
!Report failed — GA4 token expired
i47 new leads added
bannerinfo · warning · goldbanner-info · -warning · -gold
progress-bar · job-logwith % + ETAprogress-bar · job-log
Collected 312 / 80062%
12:23+ Acme Dental · ★4.6 (210)
12:23dupe: Smile Co — already on spine
12:24blocked: CAPTCHA · rotating proxy
modal · confirm-dialogmodal · confirm-dialog
Remove this user?
They’ll lose access immediately. This can’t be undone.
Flow & Misc
Wizard, sequence, empty-state, avatar with hover-card.
wizard-stepdone · current · upcomingwizard-step · -active
✓Source
2Targeting
3Options
4Review
sequence-stepcampaign email step + wait connectorsequence-step
1
Step 1 · sends immediately
Cold outreach #1
⏱ wait 3 days
2
Step 2 · 3 days later
Cold follow-up #1
empty-stateempty-state
Find your first leads
Scrape a platform like Google Business Profile, or import a list you already have.
avatar · hover-cardsizes + owner hover-cardavatar · hover-card
MA
AK
PR
MA
Monica Arora
Admin · Owner
Auth
The only logged-out internal surface.
auth-cardlogin · inviteauth-card
or
Need access? Ask your admin.
You’ve been invited
Monica Arora invited you.
Access granted
LeadsAudits
Public Audit — light theme
The only light, mobile-first surface. Rendered in its own light scope.
public-audit-hero · -progress · -gatehero input · progress · score result · gated formpublic-audit-hero · -progress · -gate
Free website audit
See how your site stacks up.
Your score
38
POOR
Performance22
Get your full report
Added to DESIGN.md
Tokens this page required that weren't yet in the catalog — added, not
inlined.
button-pressedprimary-hover bg + 1px translateY
button-focus2px gold-bright ring
radio · radio-checked18px pill, primary dot when checked
radio-card · radio-card-selectedselectable option card (access type, link mode)
multi-selectchips-in-field, reuses category-chip
breadcrumbtop-bar path, ink-subtle → ink active
hover-cardowner hover popover on surface-raise + lg shadow