simone
add2176a6b
- offer editor: per-tier name input (mirrors public_name/internal_name) - offer list cards: show 3-tier services total + manual public price - shared PageHeader component, full-width layout across all admin pages - UI-RULES.md design conventions doc Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
69 lines
3.7 KiB
Markdown
69 lines
3.7 KiB
Markdown
# 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).
|