Skip to content
quorum

Design system · Forest

Tokens and components shared by every page and app screen. Photography carries the warmth; the interface stays neutral and calm. Rendered from @quorum/design-tokens (tokens.css, components.css), which the site and the desk both import.

Color

White
#FFFFFF · --qds-white
Page background
Surface
#F4F4F1 · --qds-surface
Bands, app background, inset tiles
Border
#E5E4DF · --qds-border
Card borders, dividers
Input border
#C9C8C1 · --qds-input-border
Form fields
Ink
#1C1D1A · --qds-ink
Headlines, body, secondary buttons
Body
#3E403A · --qds-body-text
Long-form copy
Secondary
#5C5E57 · --qds-secondary
Labels, supporting text
Muted
#6F716A · --qds-muted
Example-data notes
Forest
#1D5A45 · --qds-forest
Primary action, brand, done states
Forest dark
#14412F · --qds-forest-dark
Hover, text on tint
Forest tint
#E4EFE9 · --qds-forest-tint
Selected chips, ready banners
On forest
#BFDCCF · --qds-on-forest
Eyebrows on forest bands
Attention
#B7791F · --qds-attention
Current step dot
Attention tint
#FCEFD9 · --qds-attention-tint
Due-soon and contract flags
Attention text
#6B4510 · --qds-attention-text
Text on attention tint
Error
#B42318 · --qds-error
Errors only

On white: ink 16.9:1 · secondary #5C5E57 6.6:1 · muted #6F716A 5.0:1 · forest 7.9:1 · white on forest 7.9:1 · #6B4510 on #FCEFD9 7.6:1.

Type · Figtree

Tell us about your meeting. Display · clamp(34px, 4.4cqi, 64px) · 700 · −4%
How we are paid H2 · clamp(26px, 3cqi, 44px) · 700
We call the venues H3 · 20–24px · 700
The Larkspur Inn H4 · 17–18px · 700
Any commission a venue pays is shown to you. Lead · clamp(17px, 1.5cqi, 21px) · 500
We read every contract before you sign it. Body · 16px/1.6 · 400
Board retreat UI · 14–15px · 600
City or region Label · 12–13px · 600
$179 / night · 24 guests Figure · 15–17px · 700 · tabular

Display sizes are fluid: clamp(min, cqi, max). Tabular figures everywhere for dates, rates and headcounts.

Spacing

s-1 4px
s-2 8px
s-3 12px
s-4 16px
s-5 20px
s-6 24px
s-7 32px
s-8 48px
s-9 64px
s-10 96px

Gutter clamp(20px, 4cqi, 56px) · sections clamp(64px, 9cqi, 120px).

Radius

sm · 6px
md · 10px
field · 14px
card · 20px
band · 24px
pill · 999px

Elevation

Flat · 1px border. Default cards.
Soft · 0 8px 30px rgba(28,29,26,.08). Previews.
Float · 0 12px 40px rgba(28,29,26,.16). Request bar over photos.

Buttons

DEFAULTHOVERFOCUSPRESSEDDISABLED
Primary
Secondary
On forest
Text link How we're paid How we're paid How we're paid How we're paid

Form fields

We'll send your shortlist here. Check the address.

Chips and status

SINGLE
MULTI
STATUS Planner's pick Shortlist due today Lowest rate To confirm
TIMELINE Done Now Next

Content components

Photo placeholder · exact shot described
Shortlist venue cardPick
Group rate
$179
Attrition
70%
CONTRACT NOTE
Attrition, clause 7. What it means, in plain English, and what we asked for.
REQUEST BAR
Where
City
Guests
How many
Tell us about your event

Venue names, rates and terms on this page are example data.

App states

Your planner is calling venues for you.

7 venues contacted, 4 have sent rates. Your shortlist is due Thu, Oct 8 (example). There's nothing you need to do.

Request received. No shortlist yet.

A planner will reach out within one business day. Your shortlist follows within 3 business days, and we'll email you when it's here.

Review your request