# UI Rules — ClientHub admin

Derived from the live codebase (`src/app/globals.css`, design system usage across admin pages).
These are the rules to follow for any new or modified admin page.

---

## Brand palette

All colours must be written as **hex literals** — no Tailwind semantic tokens (`text-foreground`, `bg-muted`, etc.) in admin UI. Semantic tokens are defined in `globals.css` but mixing hex and tokens creates inconsistency.

| Role              | Hex         | Usage example                           |
|-------------------|-------------|-----------------------------------------|
| Primary           | `#1A463C`   | Primary buttons, active states, accents |
| Primary hover     | `#163a31`   | Hover on primary buttons                |
| Accent            | `#DEF168`   | Brand highlights (use sparingly)        |
| Foreground        | `#1a1a1a`   | Body text, headings                     |
| Muted text        | `#71717a`   | Secondary text, labels, meta            |
| Border            | `#e5e7eb`   | Card borders, table dividers, inputs    |
| Background muted  | `#f9f9f9`   | Table header rows, card hover bg        |
| White             | `#ffffff`   | Card / panel backgrounds                |
| Destructive       | `#dc2626`   | Delete/archive actions, error text      |

---

## Typographic scale

| Level              | Classes                                      |
|--------------------|----------------------------------------------|
| Page title (h1)    | `text-2xl font-bold text-[#1a1a1a]`         |
| Section heading    | `text-base font-semibold text-[#1a1a1a]`    |
| Subsection (h3)    | `text-sm font-bold text-[#71717a] uppercase tracking-wider` |
| Body               | `text-sm text-[#1a1a1a]`                    |
| Secondary/label    | `text-xs text-[#71717a]`                    |
| Numeric values     | always add `tabular-nums`                   |

---

## Layout

- **Page wrapper:** `<div className="space-y-6">` — uniform vertical rhythm, full-width.
- **Page header:** always use `<PageHeader>` from `src/components/admin/PageHeader.tsx` — never hand-roll the title + action row.
- **No width constraints on list pages:** do not add `max-w-*` or `mx-auto` to the page root. Width is controlled by the sidebar layout (`src/app/admin/layout.tsx`).
- **Detail/form pages** (e.g. OfferEditorClient) may keep their own `max-w-4xl mx-auto` — this rule applies to list/overview pages only.
- **Cards:** `rounded-lg border border-[#e5e7eb] bg-white p-4`; hover: `hover:shadow-[0_4px_12px_rgba(0,0,0,0.08)]`.
- **Tables:** `bg-white rounded-xl border border-[#e5e7eb] overflow-hidden`; thead `bg-[#f9f9f9] border-b border-[#e5e7eb]`; row divider `border-b border-[#e5e7eb]`.

---

## Interaction

- Clickable elements: `cursor-pointer`
- Colour transitions: `transition-colors duration-150`
- Focus ring: `focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1A463C]/30`
- Minimum touch target on buttons: 44 × 44 px (use `py-2 px-4` minimum or `h-10`)
- Primary CTA: `bg-[#1A463C] text-white hover:bg-[#163a31] transition-colors`
- Secondary/ghost CTA: `border border-[#e5e7eb] text-[#1a1a1a] hover:bg-[#f9f9f9] transition-colors`
- Destructive action: `text-[#dc2626] hover:bg-red-50 transition-colors`

---

## Anti-patterns (do not do these)

- **No emoji as UI icons** — use Lucide React icons instead.
- **No mixed semantic tokens and hex** — pick hex throughout any given page/component.
- **No per-page `max-w-*` on list pages** — layout width is the sidebar shell's responsibility.
- **No hand-rolled page header divs** — always use `<PageHeader>` to keep title size/weight/colour uniform.
- **No inline `style={{}}` for colours that have a Tailwind class** — reserve `style` for dynamic values only (e.g. progress bar width percentages).