Hotelcilik · Design System

One language. Four palettes. Three apps.

Boutique hotel atmosphere meets modern SaaS clarity. Switch the palette to see every component reweight to the new brand — no rebuild, no flash.

01

Color

Tokens swap with the palette. Components reference vars, never hex.

Surfaces
bg
--ho-bg
surface
--ho-surface
surfaceAlt
--ho-surfaceAlt
line
--ho-line
Brand
primary
--ho-primary
primarySoft
--ho-primarySoft
accent
--ho-accent
accentSoft
--ho-accentSoft
Text
text
--ho-text
textMuted
--ho-textMuted
textSubtle
--ho-textSubtle
Status
success
--ho-success
warning
--ho-warning
danger
--ho-danger
info
--ho-info
Hex reference (Azure Bay): primary #0F4C5C · accent #6F561F · bg #FAF7F2
02

Typography

Inter Tight throughout. Tabular numerals for clocks, prices, room numbers.

Display
Calm, premium, hotel-grade.
44/600
H1
Calm, premium, hotel-grade.
32/600
H2
Calm, premium, hotel-grade.
24/600
H3
Calm, premium, hotel-grade.
20/600
Body L
Calm, premium, hotel-grade.
17/400
Body
Calm, premium, hotel-grade.
15/400
Body S
Calm, premium, hotel-grade.
13/400
Label
Active
11/600
Room 204
06:45
ho-num · tabular-nums
03

Spacing & shape

4px base scale. Radius from 4 (input) to 24 (hero card) to pill (chip).

Spacing scale
4
8
12
16
20
24
32
40
56
Radius
4
8
12
16
20
24
pill
04

Components

Buttons, chips, cards, inputs — same tokens, same behaviour, every palette.

Buttons · kinds × sizes
primary
secondary
soft
accent
danger
ghost
Chips · status & priority
NewAcceptedIn progressCompletedConfirmedEscalatedClosed
LowNormalHighUrgent
Card list · request row
Airport transfer
Tomorrow · 06:45 · Driver assigned
In progress
Avatars & icons
MD
AK
EA
EY
Initials · deterministic hue from name seed
home
list
grid
map
help
bell
concierge
bed
cutlery
wrench
medkit
leaf
car
clock
pin
phone
cal
qr
lock
globe
check
x
plus
arrow
send
edit