Design system — Waymeet

Logo

A voice ripple inside a document: the conversation becoming the work. The mark sits on the warm ink background and is always gold — never recolored, never outlined, never on white without its ink plate.

MARK · 96PX

waymeet WORDMARK · FRAUNCES, LOWERCASE

SCALES · 56 / 38 (NAV) / 24 (FAVICON)

Color

Two neutral scales and three accents. The rule that holds the system together: an accent is a meaning, not a decoration.

--ink-0#0B0A08 · page

--ink-1#121009 · panel base

--ink-2#191610 · panel top

--ink-3#221E15 · raised

--paper#EDE8DB · headings

--paper-2#C9C2AE · body

--paper-dim#A29A83 · secondary

--faint#6E6753 · labels

--gold / --gold-hi#E0B15E · the money

--phosphor#8FE6B0 · the agents

--coral#F0876C · the challenge

Gold = economics

Prices, receipts, payroll, CTAs, and the italic second line of every headline. If it costs or earns money, it's gold.

Phosphor = agents

Agent activity, completed work, "done" states, live indicators of the workforce. If an agent did it, it's phosphor.

Coral = challenge

The Devil's Advocate, the live-recording dot, warnings, the payroll alarm. If it pushes back, it's coral.

Typography

Three faces, three jobs. The signature gesture: the second line of every major heading switches to Fraunces italic in gold — one repeatable move, used with total consistency.

DISPLAY-XL · FRAUNCES 480
CLAMP(2.6REM → 5.4REM)Does the work.

DISPLAY-LG · FRAUNCES 480The meeting that builds itself.

LEDE · INSTRUMENT SANS
CLAMP(1.05REM → 1.3REM)While you talk, a small workforce of AI specialists figures out what the conversation needs — and produces it.

BODY · INSTRUMENT SANS 17PXBy the time the meeting ends, the deliverables already exist. The follow-ups are scheduled. The summary is in inboxes.

EYEBROW · PLEX MONO .72REM
TRACKING .28EMActive participation

DATA · PLEX MONOAI $1.42 · PAYROLL $1,840 · 47 MIN

Components

Every component below is live — hover, click, and drag them. They're the same classes the site uses, straight from assets/main.css.

Buttons

.btn-gold · .btn-ghost · .btn-sm

Start free → Request a live demo Request a demo Secondary small

Badges & chips

.badge-usa · .chip · .forged (dashed = ephemeral)

MADE IN THE USA · FORT LAUDERDALE, FLORIDA Cap Table Math Verifier ⚡ forging specialist: Venue Lighting Brief Drafter

Cards

.card — add .tilt for the 3D hover (pointer devices only)

They propose ideas

The Concierge offers options the room hasn't considered — before anyone asks.

They run the counter-argument

The Devil's Advocate builds the strongest opposing case while there's still time to change course.

The receipt

.receipt — the brand's signature object; perforated edges, always mono

WAYMEET

— MEETING RECEIPT —

Design critique52 min

AI total$1.18

Payroll in the room$1,260

Forms

.form-panel · .field · .form-grid — forms compose a prefilled email via data-mailto

Text field

Select

Billing toggle & stats

.bill-toggle · .stat-num with data-count for the count-up

$0B

count-up triggers on scroll

Motion

One easing curve everywhere — a soft spring. Reveals stagger with per-element delays. Set pieces start only when visible, and everything collapses to simple fades under prefers-reduced-motion.

--ease-out · CUBIC-BEZIER(0.16, 1, 0.3, 1)

Hover this box — reveals, hovers, and the sim all ride this curve.

--ease-in-out · CUBIC-BEZIER(0.65, 0, 0.35, 1)

Ambient drift — the aurora orbs and the scroll cue.

Voice

The copy rules do as much branding as the pixels.

Specific beats spectacular

"Under two dollars," not "low cost." "Before you leave the room," not "instantly." Numbers are real and verifiable or they don't ship.

No hype vocabulary

The 2024-AI-startup lexicon is banned wholesale. If a sentence could appear on any other AI site, rewrite it until it couldn't.

Short sentences, "you"

The voice is a senior operator explaining how something works to a peer. Long sentences only when they carry real weight.