Design systemv0.1

SipnStay Design System

Tokens, type, and components.

Airbnb-inspired visual language, adapted legally for SipnStay. Restraint over decoration. One brand color. Soft radii. Mobile-first.

Brand color

Brand

--brand

#E55B4C

Brand Hover

--brand-hover

#C8412F

Brand Active

--brand-active

#A8331F

Brand Disabled

--brand-disabled

#F6CDC7

Surfaces

Canvas

--background

#FFFFFF

Surface Soft

--muted

#F7F7F7

Surface Strong

--accent

#F2F2F2

Text

Ink

--ink

#222222

Body

--body

#3F3F3F

Muted

--muted-foreground

#6A6A6A

Muted Soft

--muted-soft

#929292

Borders

Hairline

--hairline

#DDDDDD

Hairline Soft

--hairline-soft

#EBEBEB

Border Strong

--border-strong

#C1C1C1

Semantic

Success

--success

#008A05

Warning

--warning

#C68B4A

Info

--info

#428BFF

Destructive

--destructive

#C13515

Typography

Font: Geist (free, geometric-humanist — closest to Airbnb Cereal which we cannot legally use).

display-xl

28px / 700

Welcome before you arrive.

display-lg

22px / 500

Drinks & welcome extras

display-md

21px / 700

Section heading

display-sm

20px / 600

Sub-section

title-md

16px / 600

Strong label

title-sm

16px / 500

Standard label

body-md

16px / 400

Crisp local wines, pastries from the corner bakery, fresh produce — ready when you walk in.

body-sm

14px / 400

Secondary body copy.

caption

14px / 500

Metadata

caption-sm

13px / 400

Legal / fine print

Spacing

Base unit 4px.

xxs

2px

4px

8px

12px

base

16px

24px

32px

2xl

48px

section

64px

Border radius

xs · 4px

sm · 8px

md · 14px

lg · 20px

xl · 32px

full · full

Elevation

Flat by default. One shadow tier used on hover, dropdowns, modals.

Flat (default)

No shadow

Lifted

shadow-lift

Buttons

Variants

Sizes

CTA (storefront)

48px tall pill = Airbnb-style primary CTA pattern.

Inputs

Name

Arrival date

Notes

Badges & status pills

NewPreparingCompletedCancelledPaidPending

Product card

Repeating unit on the storefront. 1:1 image, 14px radius, flat by default.

Best seller

Côtes de Provence Rosé

Local Provençal rosé · 750ml

€18

Popular

Welcome breakfast basket

Croissants, fruit, juice · serves 2

€32

Cheese & charcuterie board

Local selection · serves 4

€45

Order card (host dashboard)

Order #1042

Sarah Müller · arrives 24 May · 3 items

New

1× Côtes de Provence Rosé€18.00

1× Welcome breakfast basket€32.00

1× Cheese & charcuterie board€45.00

Subtotal€95.00

SipnStay commission (15%)−€14.25

Your earnings€80.75

SipnStay