Files

T

simone add2176a6b feat: tier names + per-tier prices on offer cards, unified admin UI

- 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>

2026-06-26 16:58:18 +02:00

3.7 KiB

Raw Blame History

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).

3.7 KiB Raw Blame History Unescape Escape