Designed to be read at noon.
The Fair Chair design system covers tokens, type and components for a seating product that guests use in full sun, under an umbrella and after dark. One source of truth feeds three surfaces: iPhone, a walk-up kiosk and an iPad console.
Principles
Three rules that settle most design arguments on this project before they start.
Legible in full sun
Primary text sits above 14:1 contrast on every light surface. Sunlight mode drops tints, thickens chair outlines to 2.5 px and never relies on hue alone.
Shade is data
Every chair carries a forecast for the whole day. The map, the detail strip and the filters all read from the same model, so they always agree.
Quiet luxury
A serif for moments of arrival, a sans for everything you act on. Brass appears only on the tiers guests pay more for.
Color
The palette is drawn from a pool deck at midday: salt-white stone, deep harbor water, lagoon tile and brass fittings. Contrast figures are calculated live from each hex value.
Three modes, one set of variables
Typography
Bodoni Moda brings the hotel-lobby voice, and only at 22 px and larger. Hanken Grotesk carries the interface, with even-width numerals so times, prices and countdowns never jitter.
Bodoni ModaDisplay. Chair names, headlines and passes. Medium 500, tracking −1 to −3%.
Hanken GroteskInterface. Light 300 for timers, 500 to 800 for labels and actions, tabular figures on.
Space, shape and touch
Spacing and radii are built on a 4 pt base. Touch targets scale with how far away the hand is and how wet it's likely to be.
Spacing
Radius
Minimum touch target
iPhone
Kiosk
Keypad
The chair node
This is the smallest component and the most important one. It has three tiers and five guest states, and each one is readable at arm's length in direct sun. State is shown by fill and weight, not by color alone.
Components
Each component below is the live one used in the screens and prototype, not a picture of it. Try them.
Buttons
Pressed states scale to 98%. Loading keeps the label so the action never changes its name midway.
Filters and badges
The segmented filter dims non-matching chairs to 20% instead of hiding them, so guests keep their bearings.
Time slot picker
Price sits on the same line as the time, so there is no surprise at checkout.
Sun and shade forecast
Amber for sun and slate for shade differ in lightness as well as hue. The marker shows the current time.
Session countdown
Pass
The pass works three ways: an NFC tap on the chair tag, a QR code for attendants, and Apple Wallet.
Feedback
Check in within 8 minutes or it goes back to other guests.
Toasts use the same verb as the button that triggered them: Upgrade produces "Moved to", Extend produces "Extended to".
Kiosk keypad, night mode
104 px keys with a 14 px gutter. Wet fingers and sunglasses are part of the brief.
Auto layout spec: time slot
- Component
- Slot
- Direction
- Horizontal, space between
- Padding
- 0 16, kiosk 0 22
- Height
- Hug, min 58 (kiosk 76)
- Variants
- state = default, selected, disabled
- Sizes
- size = mobile, kiosk
- Tokens
- radius/md, border/default, action/tint
Iconography
A custom 24 px set with 1.8 px strokes and rounded joins. Icons sit inside a 24 px bounding box and scale to 2.2 px strokes on the kiosk.