Skip to main content
Vouch— go to search

Vouch

Design system

Every primitive in the product, in every state, measured against the live theme. Contrast ratios below are read out of the DOM after paint — not asserted — so a token that fails in one mode cannot pass here in the other. Switch the theme above and the numbers re-measure.

Color

Six ramps and a semantic layer on top of them. The number in each swatch is its best contrast against white or ink; the pairings below are the ones components actually use.

Blue

Primary. Competence hue, deliberately low saturation.

0.0

50

—

0.0

100

—

0.0

200

—

0.0

300

—

0.0

400

—

0.0

500

—

0.0

600

—

0.0

700

—

0.0

800

—

0.0

900

—

0.0

950

—

Gold

Accent only — never a status color.

0.0

50

—

0.0

100

—

0.0

200

—

0.0

300

—

0.0

400

—

0.0

500

—

0.0

600

—

0.0

700

—

0.0

800

—

0.0

900

—

0.0

950

—

Green

Success.

0.0

50

—

0.0

100

—

0.0

200

—

0.0

300

—

0.0

400

—

0.0

500

—

0.0

600

—

0.0

700

—

0.0

800

—

0.0

900

—

0.0

950

—

Orange

Warning. Kept apart from gold by usage, not hue.

0.0

50

—

0.0

100

—

0.0

200

—

0.0

300

—

0.0

400

—

0.0

500

—

0.0

600

—

0.0

700

—

0.0

800

—

0.0

900

—

0.0

950

—

Red

Danger.

0.0

50

—

0.0

100

—

0.0

200

—

0.0

300

—

0.0

400

—

0.0

500

—

0.0

600

—

0.0

700

—

0.0

800

—

0.0

900

—

0.0

950

—

Neutral

Cool-tinted. Darkest step is #131820, never black.

0.0

50

—

0.0

100

—

0.0

200

—

0.0

300

—

0.0

400

—

0.0

500

—

0.0

600

—

0.0

700

—

0.0

800

—

0.0

900

—

0.0

950

—

Semantic pairings, measured

Aa

text on bg

needs 4.5:1 · body text

—fails AA
Aa

text on surface

needs 4.5:1 · body text

—fails AA
Aa

text on surface-2

needs 4.5:1 · body text

—fails AA
Aa

text-secondary on surface

needs 4.5:1 · body text

—fails AA
Aa

text-muted on surface

needs 4.5:1 · body text

—fails AA
Aa

text-muted on bg

needs 4.5:1 · body text

—fails AA
Aa

primary link on surface

needs 4.5:1 · body text

—fails AA
Aa

primary-fg on primary-fill

needs 4.5:1 · body text

—fails AA
Aa

primary-subtle pairing

needs 4.5:1 · body text

—fails AA
Aa

success-fg on success-fill

needs 4.5:1 · body text

—fails AA
Aa

success-text on subtle

needs 4.5:1 · body text

—fails AA
Aa

warning-fg on warning-fill

needs 4.5:1 · body text

—fails AA
Aa

warning-text on subtle

needs 4.5:1 · body text

—fails AA
Aa

danger-fg on danger-fill

needs 4.5:1 · body text

—fails AA
Aa

danger-text on subtle

needs 4.5:1 · body text

—fails AA
Aa

gold-fg on gold fill

needs 4.5:1 · body text

—fails AA
Aa

gold-text on surface

needs 4.5:1 · body text

—fails AA
Aa

gold-text on gold-subtle

needs 4.5:1 · body text

—fails AA
▮

border-strong on surface

needs 3:1 · large text / UI

—fails AA
▮

focus-ring on bg

needs 3:1 · large text / UI

—fails AA
▮

gold fill on surface (boundary)

needs 3:1 · large text / UI

—fails AA
MO

avatar tint 1

needs 4.5:1 · body text

—fails AA
DK

avatar tint 2

needs 4.5:1 · body text

—fails AA
RT

avatar tint 3

needs 4.5:1 · body text

—fails AA
PJ

avatar tint 4

needs 4.5:1 · body text

—fails AA
SN

avatar tint 5

needs 4.5:1 · body text

—fails AA
LW

avatar tint 6

needs 4.5:1 · body text

—fails AA

Type

Inter, variable. A real scale rather than ad-hoc sizes, with tracking tightening as size grows. Numbers that get compared use tabular figures.

text-6xl

Find the right agent

text-5xl

Find the right agent

text-4xl

Find the right agent

text-3xl

Find the right agent

text-2xl

Find the right agent

text-xl

Find the right agent

text-lg

Find the right agent

text-base

A referral reflects on you. Judge the person.

text-sm

A referral reflects on you. Judge the person.

text-xs

A referral reflects on you. Judge the person.

text-2xs

Self-reported

Tabular figures

Volume, price and ratings must align in a column.

Proportional: $1,180,000 · $999,000 · 4.9Tabular: $1,180,000 · $999,000 · 4.9

Buttons

One large saturated fill per view — that is the restraint the research asks for. `secondary` is the default answer for everything else.

Variants

Sizes

With icons

Disabled

Loading

Stays focusable and keeps its width; aria-busy is set.

Full width

Icon buttons

Every one carries a required accessible name.

Icon button sizes

Text inputs

Field owns the label, hint and error, and wires aria-describedby, aria-invalid and required into whatever control it wraps. Controls used bare still work.

As it appears on your license.

Percentage of the commission on the far end.

Locked while your license is being verified.

sm · md · lg

0/600

What a referring agent needs to know about you.

Determines which specialties you can pick.

Selection controls

Checkbox, Radio and Switch each keep a real native input under the drawn control, so arrow keys, form submission and screen-reader semantics are the platform's, not an imitation.

Specialties

Multi-select. Counts show matching agents.

Property focus
Referral settings

Segmented control

Small / full width

Disabled

Range slider

Two independent thumbs, each its own role=slider with live aria bounds. They cannot cross, and Home/End respect the other thumb rather than jumping past it.

Years licensed

Both thumbs are keyboard operable. Try arrows, PageUp/PageDown, Home/End.

Average sale price

Commits on release — last committed: $250K–$3M

Disabled
Fractional step

step 0.1 — no floating-point drift.

Badges, chips, cards, avatars

Status never rides on color alone — every tone carries an icon or a word as well.

Badges

Solo agentCRSStatus: Accepting referralsStatus: Slow to respondStatus: Not acceptingTop producer2–4 unitsSmall

Chips — toggle

aria-pressed plus a heavier border, not just a fill.

Chips — removable

Two targets: reopen the filter, or remove it.

Default card

Decorative hairline. Not clickable, so a 1.5:1 border is fine.

Interactive card

border-strong, because the outline is now a UI boundary.

Selected card

Border plus an inset ring.

Marisol Ochoa

Cardinal & Vale Realty · Austin, TX

Accepting
Luxury & estateWaterfrontCorporate relocation

Avatar sizes

Deterministic tint from the agent id.

Avatar tints

Six pairings, each contrast-verified.

Avatar extras

Star rating

SPEC §10: Zillow has no public API for third-party apps, so every rating in this product is typed in by the agent. The disclosure is a real control, not a footnote, and it links out so the number can be checked.

Display

One role=img with a spelled-out label.

Check on Zillow(opens in a new tab)Check on Zillow(opens in a new tab)

Sizes

Compact

hideDisclosure for map pins and dense rows — pair it with the disclosure elsewhere on the screen.

Check on Zillow(opens in a new tab)

Interactive

Real radios: arrow keys work, and each star's name is a phrase.

You are entering this yourself. It will be shown as self-reported until verification exists.

Interactive — disabled

Loading, progress, empty, toast

A blank div is never a state. Every one of these announces itself to a screen reader.

Spinner

Loading

Skeleton

Skeleton list — the results-list loading state

Loading agents

Progress

Profile strength62%

Add a video pitch to reach Strong.

OnboardingStep 3 of 8
Profile strength82%
Over limit100%
CelebrationComplete
Working

No agents in this area

Try zooming out, or clearing a filter or two.

Nothing to review

You have made a call on every agent in this search. Nicely done.

Could not load the map

The basemap did not respond. Your filters are still saved.

Empty state sizes

Small

Medium

Large

Toast

Errors go to an assertive region; everything else is polite. Hovering pauses the timer.

Overlays

Modal and Drawer trap focus, lock scroll, close on Escape and return focus to the trigger. None of them uses a native <dialog>, so a tooltip or popover opened inside one still renders above it.

Modal

Drawer

Tooltip

Describes the trigger; never replaces its name.

Popover

Non-modal: the page behind stays live. Tab out to dismiss.

Dropdown menu

Arrow keys, Home/End, typeahead, roving tabindex.