HAVN member app

Design tokens

Source: HAVN Brand Guidelines (2025). Everything on this page is rendered through Tailwind utilities that resolve to src/styles/tokens.css. Items marked proposal are not in the brand guide.

Primitives

PDF p.13 primary, p.14 secondary grayscale

WhitePRIMARY

#FFFFFF

BlackPRIMARY

#000000

SagePRIMARY

#BACBD5

Cloud

#EDEFF7

Smoke

#D3D6E0

Steel

#BCBFCC

Space

#9DA2B3

Graphite

#6E7180

Arsenic

#40424D

Phantom

#1E1E24

Semantic colors

Components use only these. Primitives are not exposed to Tailwind.

surface

Page background

surface-sunken

Input wells, table headers, empty states

surface-muted

Selected rows, soft highlight (sage wash)

surface-inverse

Primary buttons, inverse panels

accent

Sage. Tags, selected, highlight. Black text only.

accent-soft

Sage wash for chips and callouts

border

Default 1px borders (Smoke)

border-strong

Emphasis borders (Steel)

divider

List row dividers (Cloud)

success-soft

Booking confirmed

warning-soft

Unverified account

danger-soft

Cancel, no-show, errors

Text on surface

fg (Black) 21:1

fg-muted (Graphite) 4.8:1

fg-subtle (Space) 2.5:1, decorative

accent-fg (Sage 700) 5.0:1

Text on inverse

fg-inverse (White) 21:1

accent (Sage) as text on black

Text on accent

fg-on-accent (Black) 12.6:1

White on sage fails (1.7:1)

Type scale

Söhne. PDF p.17 scale, extended with 14 and 12 for UI.

display
64px

Build here. Not alone.

Heading 1
Marketing only

h1
48px

Build here. Not alone.

Heading 2
Screen title, desktop

h2
32px

Build here. Not alone.

Subheader 1
Screen title, mobile. Section heads

h3
24px

Build here. Not alone.

Subheader 2
Card titles, class names

body-lg
18px

Build here. Not alone.

Paragraph 1
Lede, member body

body
16px

Build here. Not alone.

Paragraph 2
Default body, inputs

sm
14px

Build here. Not alone.

extension
Captions, table cells, meta

xs
12px

Build here. Not alone.

extension
Eyebrows, badges, table headers

Weights

Söhne cuts, PDF p.16

Light

Leicht · 300

Regular

Buch · 400

Medium

Kräftig · 500

Semibold

Halbfett · 600

Bold

Dreiviertelfett · 700

Spacing

4px base. Only these steps exist as utilities.

space-14

space-28

space-312

space-416

space-520

space-624

space-832

space-1040

space-1248

space-1664

space-2080

space-2496

Radius

Proposal. Tight, to match the hard-edged wordmark.

radius-xs · 2px

Badges, table chips

radius-sm · 4px

Staff buttons, inputs

radius-md · 8px

Member buttons, cards

radius-lg · 12px

Sheets, dialogs

radius-full

Avatars, pills

Elevation

Proposal. Flat by default. Shadow only on floating layers.

shadow-sm

Hover lift

shadow-md

Popovers, menus

shadow-lg

Dialogs, sheets

Control sizing

Member surfaces use md/lg. Staff shell uses sm/md (dense).

control-sm

Book · 32px

Staff table actions

control-md

Book · 40px

Default inputs and buttons

control-lg

Book · 48px

Member primary CTA

disabled

Full

Motion

Fast 120ms · Base 200ms · Slow 320ms. ease-out primary.

Base duration is used for realtime roster changes: an attendee leaving fades out over 200ms rather than disappearing, so members watching a class see the spot open up.