# Design System: iamcavalli Admin & Client Portal (v1.0) > "Minimalist Premium / Quiet Luxury" — the aesthetic that replaces the old > mixed token/hardcoded styling across ClientHub's admin area. First applied > to the Lead Pipeline page (Phase: Pipeline redesign); the tokens and > primitives documented here are the base for restyling every other section. ## Philosophy - **Quiet, not loud.** Elevation is nearly invisible (shadow opacity ≤ 0.02), borders are hairline, color is used sparingly and only to carry meaning (status, semantics) — never for decoration. - **Density with air.** Generous padding (`py-4 px-6` in tables, `p-4` in kanban columns) paired with small type (`text-xs`, `text-[11px]`) reads as premium rather than cramped. - **Numbers are monospace.** Prices, phone numbers, dates, counts — anything tabular/numeric — use `font-mono` and right-alignment so columns of digits line up. - **Dual-theme by construction.** Every surface is built from semantic tokens (`bg-card`, `text-muted-foreground`, `border-border`, …), never raw Tailwind palette classes (`bg-white`, `text-slate-900`, …) or hex literals. This is what makes dark mode "just work" without a parallel dark stylesheet. - **Motion is functional.** Transitions exist to explain state change (sidebar collapse, hover, drag) — `duration-200`–`duration-350`, `ease-[cubic-bezier(0.4,0,0.2,1)]` for the sidebar specifically. No decorative animation. ## Typography - **Sans**: Plus Jakarta Sans (weights 300–700), loaded via `next/font/google` as `--font-plus-jakarta-sans`, mapped to Tailwind's `--font-sans` in `@theme`. Used for all UI text. - **Mono**: Geist Mono, `--font-geist-mono` → `--font-mono`. Used for numeric data cells only (prices, phone numbers, counts, dates in tables). - **Scale conventions**: - Page title: `text-2xl font-semibold tracking-tight` - Page subtitle: `text-xs text-muted-foreground` - Table header cells: `text-[11px] font-semibold uppercase tracking-wider text-muted-foreground` - Table body: `text-sm` - Badge/pill label: `text-[10px]`–`text-xs font-semibold uppercase tracking-wide` ## Color Tokens Raw values live in `:root` (light) / `.dark` (dark) in `src/app/globals.css` and are mapped to Tailwind utilities via `@theme inline`. Components must consume the mapped utility, never the raw hex or a Tailwind palette shade. | Utility | Light | Dark | Usage | |---|---|---|---| | `bg-background` / `text-foreground` | `#ffffff` / `#1a1a1a` | `#0e1512` / `#f2f4f3` | Page canvas | | `bg-card` / `text-card-foreground` | `#ffffff` | `#131a16` | Cards, table, kanban cards, header bar | | `bg-muted` / `text-muted-foreground` | `#f9f9f9` / `#71717a` | `#171f1b` / `#9aa39e` | Subtle backgrounds, secondary text, kanban columns | | `bg-primary` / `text-primary-foreground` | `#1A463C` | `#3FA88C` | Primary actions, sidebar, active nav state | | `bg-accent` | `#DEF168` | `#DEF168` | Rare highlight accent (lime) | | `border-border` / `border-input` | `#e5e7eb` | `#26302b` | All hairline borders | | `ring-ring` | `#1A463C` | `#3FA88C` | Focus rings | | `bg-destructive` | `#ef4444` | `#f87171` | Destructive actions | **Sidebar exception**: the sidebar stays brand green `bg-[#1A463C]` in both themes (it is not a themed surface — it's the constant brand anchor). **Status/semantic colors** (lead stages, badges) use Tailwind's default palette (blue/purple/amber/orange/emerald/red) directly, each paired with an explicit `dark:` variant for legibility on dark surfaces — see `StatusBadge`. ## Elevation & Radius - `--radius: 0.5rem` (base) is wired into `@theme` as `--radius-lg` (`= --radius`) and `--radius-xl` (`= --radius + 0.25rem`), so `rounded-lg` / `rounded-xl` utilities resolve consistently off one token. - `--shadow-card: 0 4px 20px rgba(0,0,0,0.01)` → `shadow-card` utility. Default resting elevation for cards, table containers, kanban cards. - `--shadow-card-hover: 0 8px 30px rgba(0,0,0,0.02)` → `shadow-card-hover` utility. Applied on hover for interactive cards. ## Layout Conventions - **Table container**: `bg-card rounded-xl border border-border shadow-card overflow-hidden`. - **Table header row**: `bg-muted/50 border-b border-border text-[11px] uppercase tracking-wider text-muted-foreground`. - **Table body rows**: `py-4 px-6`, `divide-y divide-border`, `hover:bg-muted/40 transition-colors`. - **Kanban column**: `bg-muted/60 rounded-xl border border-border p-4`. - **Kanban card**: `bg-card rounded-lg border border-border shadow-sm hover:border-primary/30 hover:shadow-card-hover transition-all`. - **Page header**: title `text-2xl font-semibold tracking-tight text-foreground`, subtitle `text-xs text-muted-foreground mt-1`, primary action button `bg-primary text-primary-foreground hover:bg-primary/90`. ## Color/Class Migration Map (dual-theme principle) When restyling any surface, replace hardcoded classes with token utilities: | Old (hardcoded) | New (token) | |---|---| | `bg-white` | `bg-card` | | `bg-slate-50` / `bg-gray-50` | `bg-muted` | | `border-slate-100` / `border-slate-200` | `border-border` | | `text-slate-900` / `text-[#1a1a1a]` | `text-foreground` | | `text-slate-500` / `text-slate-400` / `text-[#71717a]` | `text-muted-foreground` | | `bg-brand-dark` / `text-[#1A463C]` (as action color) | `bg-primary` / `text-primary` | ## Motion - **Sidebar collapse**: `transition-[width] duration-350 ease-[cubic-bezier(0.4,0,0.2,1)]` on the `