# WEBX Travel — design system

The admin SPA uses a small, consistent design system built around the WEBX brand
identity.

## Brand

- **Deep navy** (`navy-950…600`) — the sidebar, headings and brand ink.
- **Electric blue → cyan** gradient (`brand-500 → aqua-400`) — the logo mark,
  primary buttons and the active navigation state. Utility: `.brand-gradient`.
- **Logo** — a double-chevron mark (navy + blue gradient) plus the `web`**`x`**
  wordmark, drawn as inline SVG (`components/ui/Logo.vue`) so it stays crisp.
- **Type** — Inter (Google Fonts).

Tokens live in `resources/css/app.css` under Tailwind v4 `@theme`, so colors are
available as normal utilities (`bg-navy-900`, `text-brand-500`, …).

## Layout

`AppShell.vue` provides the app frame: a dark navy sidebar with icon navigation,
a sticky top bar (brand selector + user + logout), and a scrollable content
area. Views live in `resources/js/components/views/*` and are switched by a tiny
client router (`lib/ui.ts`).

## UI kit (`components/ui/`)

`UiButton`, `UiBadge`, `UiModal`, `StatCard`, `PageHeader`, `Icon` (stroke icon
set), `Logo`. Tables, forms and panels follow a shared card style
(`rounded-xl border border-navy-900/5 bg-white shadow-[var(--shadow-card)]`).

## Principles

- Every colour is a token; no hard-coded hex in components.
- Status is always a `UiBadge` with a semantic tone.
- Money and folios use a mono/emphasized style; balances are visually prominent.
- The UI reflects permissions (nav items and actions appear only when allowed),
  but the server still authorizes every action.