"Concierge" Design System

Direction: a modern hotel reception, not a generic SaaS dashboard. Three principles: a calm neutral base, punctual warmth (orange = gesture, never large surfaces), one voice per space (landing = spectacular, back-office = silent and precise, client space = in between).

Source of truth for tokens: src/styles.css. This document describes the conventions; do not bypass them with hardcoded values.

Colors

Brand (do not move)

Token	Light	Dark	Role
primary / lagoon	#E67E22	#F0954D	Actions, active bar, accents
foreground / sea-ink	#1A2B4C	#E4ECF8	Text, sidebar
background	#F4F6F9	#0C1420	Page background
card	#ffffff	#101927	Surfaces
muted-foreground	#5A6985	#9DADC4	Secondary text
border	#DCE3EC	#22314A	Borders

--color-sea-ink / --color-lagoon / --color-palm are frozen (sidebar identity); the others follow the theme. Use semantic utilities (bg-card, text-muted-foreground…) — never bg-[#hex] in a component.

Semantic statuses

A soft background + solid text pair, valid in both themes:

Variant	Utilities	Meaning
success	bg-success-bg text-success	paid, ready, active, validated
warning	bg-warning-bg text-warning	in progress, pending, due soon
info	bg-info-bg text-info	submitted, sent, reserved
danger	bg-danger-bg text-danger	cancelled, refused, unpaid, late
neutral	bg-neutral-bg text-neutral	withdrawn, archived, draft

Via <Badge variant="…"> (components/ui/badge.tsx); the old bg-[#hex] text-white maps are banned.

Typography

• Manrope everywhere (body, tables, forms).
• Fraunces (display-title): reserved for display titles in client-facing spaces (landing, client-space home). Not in the back-office.

Scale:

Element	Classes
Page title (h1)	text-2xl font-semibold
Section subtitle	text-base font-semibold
Body / table	text-sm
Meta / caption	text-xs
Card title	text-sm font-semibold

No font-bold or text-3xl in the back-office.

Spacing & radii

• Tailwind 4px grid.
• Page: w-full space-y-6 p-4 sm:p-6.
• Filter bar: rounded-lg border border-border bg-card p-4.
• Cards: p-5 (actions) / p-6 via CardHeader/CardContent.
• Radii: rounded-lg (10px) = default everywhere; rounded-xl = client-facing cards; rounded-2xl = auth surfaces only; rounded-full = badges, avatars.
• Shadows: shadow-sm for list cards, shadow-lg for modals. No colored shadows in the back-office.

Components

Need	Component
Standard page	PageHeader (breadcrumb + title + description + actions)
Status	<Badge variant> — status → variant map inside the module
Table	TableShell / DataTable / DataTableHead / Th / Tr / Td
Empty state	EmptyState (icon + title + description + action)
Modal	Dialog + DialogContent/Header/Footer/Title/Description
Confirmation	ConfirmDialog (rebuilt on ui/dialog)
Field	InputField (label + icon + error)

Table header: bg-muted/60 + text-muted-foreground — never a full bg-sea-ink. Rows: border-t border-border + hover:bg-accent/40; fully clickable row = stretched link (relative on <tr>, after:absolute after:inset-0 on the anchor) and actions cell in relative z-10.

Interactive states

• Hover: hover:bg-accent/40 (rows, items), hover:text-foreground, hover:underline (inline links).
• Focus: focus-visible:ring-[3px] focus-visible:ring-ring/50 (provided by Button/Input/Select — do not remove).
• Active: sliding bg-lagoon bar (client navbar), bg-lagoon/15
  • left bar (sidebar), decoration-lagoon underline (mobile menu).
• Disabled: disabled:opacity-50 + disabled:pointer-events-none.

Breakpoints

sm 640 · md 768 · lg 1024 · xl 1280. Conventions:

• Back-office sidebar: visible lg+, drawer below.
• Client navbar: labeled row xl+, hamburger below.
• Containers: max-w-7xl (client space, landing), full width with padding in the back-office.

Animations

• Back-office: silence. No permanent background animation; a single static halo in AppBackground.
• Micro-interactions: transition-colors / transition-all 150–300 ms, ease-out. Page entries: light fade (animate-in fade-in), no continuous motion under data.
• Landing: SplitText, BorderGlow, floating logo allowed (showcase).
• Always respect prefers-reduced-motion (motion-safe:).