--- name: jetixia-ui-design description: >- Applies the Jetixia wholesaler Admin / dashboard UI design system (shadcn + CSS variables, navy #223F80 primary, soft blue surfaces, dark mode, sidebar shell). Use when the user says JetixiaUIDesign, /JetixiaUIDesign, jetixia-ui-design, admin UI, wholesaler dashboard, Jetixia admin theme, dashboard cards/tables/modals, or asks to match the Jetixia admin design system (not Booking Desk hotel-search t12-brand). --- # JetixiaUIDesign **Admin / wholesaler dashboard** design system extracted from `jetxia-wholesaler-dashboard-main`. Token-driven (CSS variables + Tailwind), not hardcoded hotel-search hex. ## vs `jetixiastyle` | | **JetixiaUIDesign** (this skill) | **jetixiastyle** | |--|----------------------------------|------------------| | Surface | Admin dashboard, tables, modals, sidebar | Booking Desk OTA hotel-search | | Colors | CSS vars (`bg-primary`, `--background`) | Inline hex `#2E6699` / `#223F80` | | Page bg | Soft blue `#F6F9FD` (flat, themed) | Patterned gray `#ececec` + SVG tile | | Dark mode | Full light/dark + optional palettes | Avoid unless asked | Same brand navy (`#223F80`). Do **not** paste hotel-search patterned backgrounds into admin pages unless explicitly requested. ## When invoked 1. Prefer semantic Tailwind: `bg-background`, `text-foreground`, `bg-primary`, `border-border`, `shadow-jetixia-shd-1`. 2. Reuse existing `components/ui/*` (Button, Card, Dialog, Table, Badge, Tabs, Sidebar). 3. Match page chrome: sidebar + sticky header + padded scrollable main. 4. Minimal diff; extend local page patterns before inventing new wrappers. --- ## Stack - Next.js App Router, Tailwind v4 (`@import "tailwindcss"`), shadcn/ui + Base UI - Theme: `next-themes` (`.dark`) + `ThemeManager` → `theme-palettes.ts` - Font: **Stack Sans Text** as `--font-geist-sans` (aliases: Lato/Montserrat/Inter → same stack) - Icons: `lucide-react` --- ## Default brand tokens (light) Canonical source: `src/lib/theme-palettes.ts` + `:root` in `src/app/globals.css`. | Role | Token / hex | Use | |------|-------------|-----| | Primary (navy) | `--primary` `#223F80` | Buttons, active nav, focus ring | | Primary fg | `#FFFFFF` | On primary | | Page bg | `--background` `#F6F9FD` | Main content | | Ink | `--foreground` `#173058` | Headings/body | | Card | `#FFFFFF` | Surfaces | | Secondary | `#E9EFF8` / fg `#223F80` | Soft fills | | Muted | `#EDF2FA` / fg `#586B90` | Labels, zebra | | Accent | `#D6E1F2` / fg `#223F80` | Hover chips, sidebar accent | | Border / input | `#CED9EA` | Dividers, fields | | Ring | `#223F80` | Focus | | Destructive | `hsl(0 72% 51%)` | Errors, cancel | | Success | `hsl(152 69% 31%)` | Live/status | | Warning | `hsl(37 48% 42%)` | Warnings | | Chart 1–5 | `#223F80` → `#7798D4` | Blues scale | | Brand accent (docs/vouchers) | `#2E6699` | Legacy accent; prefer tokens in UI | **Soft shadow (palette):** ```css --shadow-soft: 0 1px 2px 0 rgb(34 63 128 / 0.04), 0 8px 24px -6px rgb(34 63 128 / 0.08); ``` ### Primary gradient ```css --primary-gradient: linear-gradient( 135deg, var(--primary) 0%, color-mix(in hsl, var(--primary) 78%, var(--chart-3)) 100% ); ``` Utility: `.btn-gradient` — `rounded-xl`, gradient fill, `shadow-jetixia-shd-1`, hover brightness + `shadow-jetixia-hovered`. --- ## Dark mode (default palette) Toggle via `next-themes` (`.dark` on ``). Defaults: | Role | Hex | |------|-----| | Background | `#0C1630` | | Foreground | `#F6F9FD` | | Card / popover | `#132548` | | Primary | `#4A73C0` | | Secondary / muted | `#173058` | | Muted fg | `#96A8CC` | | Accent | `#1F3A70` / fg `#D6E1F2` | | Border / input | `#264A85` | | Ring | `#7098D4` | | Sidebar | matches background | Shadows switch to black-tinted elevation (see `.dark` in `globals.css`). ### Optional accent palettes `PaletteName`: `default` | `green` | `orange` | `yellow` | `rose` | `blue` — override `--primary` / sidebar / ring only; **base surfaces stay Jetixia blue-gray**. Stored in `localStorage` key `theme-config`. Default for new work: **`default` navy**. --- ## Radius & spacing | Token | Value | |-------|-------| | `--radius` | `0.75rem` (12px) | | `--radius-sm` … `--radius-4xl` | `calc(var(--radius) * 0.6…2.6)` | | Common UI | `rounded-lg` controls, `rounded-xl` cards/modals, `rounded-2xl` feature shells, `rounded-full` pills | | Page padding | `px-4 pt-4 pb-20 sm:px-6 sm:pt-6 lg:px-8 lg:pt-8` | | Section gaps | `gap-5 sm:gap-6` (see `DASHBOARD_PAGE_SHELL`) | | Form grid | 12 cols, `--form-grid-gap: 1rem` | | Desktop grid meta | 12 cols, gutter 20px, margin 80px | --- ## Elevation (navy-tinted) Mapped to Tailwind `shadow-*` in `@theme inline`: | Utility | Feel | |---------|------| | `shadow-1` | Hairline | | `shadow-2` / `shadow-3` | Card / raised | | `shadow-jetixia-shd-1` | Default admin card/chip | | `shadow-jetixia-hovered` | Hover lift | | `shadow-select-shd` | Popovers / dropdowns | | `shadow-logo-g` | Inset logo tile | Prefer these over generic `shadow-lg` for brand consistency. --- ## Typography - UI font: Stack Sans Text (`--font-geist-sans`); mono: Geist Mono - Optional overrides: `--app-font-typography`, `--app-font-button` - Scale (token shorthand): 12/18, 14/21, 16/24, 20/30, 24/36, 32/48 — weights 400 / 600 / 700 - Page title: `text-2xl font-semibold tracking-tight text-primary sm:text-3xl` - Subtitle: `text-sm text-muted-foreground sm:text-base` - Sidebar labels: ~`13px`, medium when active - Breadcrumbs: `text-sm uppercase tracking-[0.14em] text-muted-foreground` - Detail labels: `text-sm font-semibold uppercase tracking-wide text-muted-foreground` --- ## Layout shell ``` ┌──────────┬─────────────────────────────┐ │ Sidebar │ sticky Header (blur card) │ │ collapsible ├──────────────────────────┤ │ │ main bg-background scroll │ │ │ padded children │ └──────────┴─────────────────────────────┘ ``` From `app/(dashboard)/layout.tsx`: - Outer: `flex h-screen overflow-hidden bg-muted/20` - Main: `flex-1 overflow-y-auto bg-background` + padding above - Header: `sticky top-0 z-30 border-b border-border/60 bg-card/85 backdrop-blur-xl` - Header grid (lg): breadcrumb/title | command search | notifications / theme / user ### Sidebar patterns - Active leaf: `bg-sidebar-primary/10 text-sidebar-primary shadow-jetixia-shd-1 ring-1 ring-sidebar-primary/15` - Active parent: soft gradient `from-sidebar-primary/14 via-sidebar-accent/50` + left rail `w-0.5 bg-sidebar-primary` - Icon tiles: `rounded-lg` / `rounded-xl`, active `bg-sidebar-primary/15` - Expand: `grid-rows` + opacity `duration-300 ease-out` - Footer brand card: gradient `from-sidebar-accent/40`, blur orb, logo in `bg-sidebar-primary shadow-logo-g` --- ## Component patterns ### Buttons (`components/ui/button.tsx`) - Variants: `default` (primary), `outline`, `secondary`, `ghost`, `destructive`, `link` - Sizes: `default` h-8, `sm` h-7, `lg` h-9, icon variants - Focus: `ring-2 ring-ring/50`, `rounded-lg` - CTAs on pages often `h-9`–`h-11` + `rounded-xl` via className override - Gradient CTA: `.btn-gradient` ### Inputs - `h-10 rounded-lg border-input`, focus `border-ring ring-2 ring-ring/50` - Placeholders: `text-muted-foreground` - Invalid: destructive border + ring ### Cards - shadcn Card: `rounded-xl bg-card`, hover → `shadow-jetixia-hovered` - Dashboard surface: `DASHBOARD_SURFACE_CARD` = `rounded-xl border border-border bg-card shadow-jetixia-shd-1` - Stat icon tile: `size-11 rounded-xl bg-primary/10 text-primary ring-1 ring-primary/15` - Feature cards: left accent bar `w-1` + `--primary-gradient`; header wash `color-mix(primary 9%, card)` - `.card-modern`: `rounded-3xl`, hover `-translate-y-0.5` ### Tables - Container scroll-x; header row border-b; rows `hover:bg-muted/50` - Dense admin tables: uppercase muted head labels, `tabular-nums` for money - Pay-now style: grid `grid-cols-12`, `bg-muted/20` head ### Badges / pills - Badge: `h-5 rounded-4xl`, variants default/secondary/destructive/outline - Count pills: `rounded-full bg-primary/10 px-3 py-1 text-sm font-semibold text-primary ring-1 ring-primary/15` - Status: `text-success` + `size-1.5 rounded-full bg-success` (live dot) ### Tabs - Default: muted pill list `rounded-lg p-[3px] bg-muted` - Premium section tabs: `UnderlineTabs` / `.underline-tabs-*` — gradient shell, active = `bg-card text-primary` chip ### Modals / dialogs - Overlay: `bg-black/10 backdrop-blur-xs`, zoom-in-95 - Content: `rounded-xl bg-card ring-1 ring-foreground/10` - Booking modals: accent rail + gradient header; footer muted→card gradient - Destructive flows: destructive-tinted header/rail - Prefer `DASHBOARD_MODAL_PANEL` / booking `*-modal-*` utility classes in `globals.css` ### Filters - Panel: `rounded-xl border border-border bg-card p-4 sm:p-5` - Collapse: grid-template-rows 0fr→1fr, ~320ms ease - Count chip on filter header (primary/10 ring) ### Page header recipe ``` kicker (muted) + live status h1 DASHBOARD_PAGE_TITLE subtitle DASHBOARD_PAGE_SUBTITLE [primary action button] ``` Shared constants: `src/app/(dashboard)/dashboard/dashboardPageUi.ts`. --- ## Motion | Pattern | Spec | |---------|------| | Color/shadow hover | `transition-all` / `transition-shadow` `duration-200`–`300` | | Sidebar expand | `duration-300 ease-out`, chevron `rotate-180` | | Filter collapse | 320ms rows / 280ms opacity | | Dialog | `duration-100` fade + zoom | | Card hover | slight lift + stronger shadow | | Progress bars | `duration-500 ease-out` | | Prefer | ease-out, low amplitude — no bounce/glow spam | `ThemeProvider` uses `disableTransitionOnChange` for theme flips. --- ## Do - Use CSS variables / semantic colors so light/dark + palettes work - Navy-tinted soft shadows (`shadow-jetixia-shd-1`) - Left accent rails + soft primary washes on important cards/modals - `rounded-xl` surfaces, `rounded-lg` controls - Lucide icons in `rounded-xl` primary/10 tiles - Match existing page header + toolbar patterns ## Do NOT - Apply Booking Desk patterned `#ececec` SVG background to admin (use `jetixiastyle` only for OTA search) - Hardcode purple/indigo AI defaults, gold, neon cyan - Flat pure-gray admin chrome (`gray-50` everywhere) — keep blue-tinted surfaces - Skip dark-mode tokens when adding new CSS variables - Invent a second design-system package; extend `globals.css` / `theme-palettes.ts` - Put business APIs in the frontend beyond existing admin patterns --- ## File pointers (admin repo) Primary path: `jetxia-wholesaler-dashboard-main` (or `… main 2`). | File | Role | |------|------| | `src/app/globals.css` | Tokens, gradients, component utilities | | `src/lib/theme-palettes.ts` | Light/dark + accent palettes | | `src/lib/theme.ts` | DOM apply + `theme-config` storage | | `src/components/theme-manager.tsx` | Sync next-themes ↔ palettes | | `src/app/layout.tsx` | Fonts, ThemeProvider | | `src/app/(dashboard)/layout.tsx` | Sidebar + header + main shell | | `src/components/layout/Sidebar.tsx` | Nav visual language | | `src/components/layout/DashboardHeader.tsx` | Top bar | | `src/app/(dashboard)/dashboard/dashboardPageUi.ts` | Page layout class constants | | `src/components/ui/*` | Button, Card, Input, Table, Dialog, Badge, Tabs, Sidebar | | `src/components/ui/underline-tabs.tsx` | Premium tab shell | | `src/components/voucher/dossierVoucherStyles.ts` | Print/PDF navy/`#2E6699` (document, not chrome) | --- ## Quick Tailwind cheat sheet ``` bg-background text-foreground bg-card border-border rounded-xl shadow-jetixia-shd-1 hover:shadow-jetixia-hovered bg-primary text-primary-foreground bg-primary/10 text-primary ring-1 ring-primary/15 bg-muted text-muted-foreground bg-secondary text-secondary-foreground text-success / text-destructive focus-visible:ring-2 focus-visible:ring-ring/50 shadow-select-shd /* menus */ btn-gradient /* class from globals */ ``` ## Agent checklist ``` JetixiaUIDesign: - [ ] Semantic tokens (not random hex) unless voucher/print legacy - [ ] Shell: sidebar + blurred header + padded main - [ ] Cards/modals: rounded-xl, border-border, jetixia shadows - [ ] Primary navy #223F80 (or palette primary); accent #2E6699 only if matching existing accents - [ ] Dark mode vars considered - [ ] Motion: 200–300ms ease-out, no flashy effects - [ ] Distinct from jetixiastyle hotel-search patterned bg ``` For full CSS variable dumps, read `globals.css` `:root` / `.dark` and `theme-palettes.ts` — do not duplicate every palette variant in new code; call `paletteToThemeVars`.