# Governex UI Design System Rules

## Brand Identity
- **Platform**: Governex Compliance Solutions — Governance, Risk & Compliance (GRC) platform
- **Target Region**: Lesotho and Southern Africa
- **Tone**: Professional, trustworthy, modern, clean

## Colour Palette
- **Primary**: `#0B3C5D` (deep corporate blue) — used for buttons, headings, icons, active states
- **Dark**: `#1E2A38` (dark navy) — used for text, dark backgrounds (e.g. footer, industries section)
- **Accent**: `#328CC1` (lighter blue) — used sparingly for highlights
- **Success**: `#10B981` — confirmations, positive indicators
- **Warning**: `#F59E0B` — caution states
- **Danger / Error**: `#EF4444` — destructive actions, error messages
- **Backgrounds**: White (`#FFFFFF`), Light grey (`#F9FAFB` / `bg-gray-50`)
- **Borders**: `border-gray-100` or `border-gray-200` — very subtle

### Tailwind Colour Tokens (defined in tailwind.config.js)
```
primary-50 through primary-900 (shades of #0B3C5D)
dark-50 through dark-900 (shades of #1E2A38)
```

## Typography
- **Font Family**: `Inter` (loaded from Google Fonts)
- **Headings**: `font-bold`, `tracking-tight`, sizes from `text-lg` to `text-3xl` (never larger than `text-[42px]`)
- **Body text**: `text-[13px]` to `text-sm` — keep text small and refined
- **Labels**: `text-[12px] font-medium text-gray-500`
- **Section labels / eyebrow text**: `text-[11px] font-semibold uppercase tracking-widest text-primary`
- **NEVER** use oversized display text. Keep everything medium or small.

## Spacing & Layout
- **Generous white space**: Use `py-20 lg:py-28` for section padding, `gap-6` to `gap-8` between grid items
- **Max width**: `max-w-7xl mx-auto px-6 lg:px-8`
- **Avoid clutter**: Every section should breathe. No cramped layouts.
- **Auth pages**: Use split-panel layout (dark branded left panel + white form right panel) on desktop, single column on mobile

## Buttons
- **Border radius**: `rounded` (4px) — subtly rounded, NOT pill-shaped (`rounded-full`)
- **Primary button**: `bg-primary text-white text-[13px] font-semibold px-6 py-3 rounded hover:bg-primary-600 transition-all duration-200`
- **Secondary / outline button**: `border border-gray-200 text-gray-600 text-[13px] font-semibold px-6 py-3 rounded hover:border-primary hover:text-primary transition-all duration-200`
- **Disabled state**: `opacity-25` class overlay
- **Never** use `rounded-full` or `rounded-xl` on buttons

## Form Inputs
- **Style**: `text-[13px] border border-gray-200 rounded px-3.5 py-2.5 focus:border-primary focus:ring-1 focus:ring-primary/20 transition-colors`
- **Labels**: Above the input, `text-[12px] font-medium text-gray-500 mb-1.5`
- **Errors**: `text-[12px] text-red-500 mt-1.5`
- **No shadow** on inputs — flat, clean design

## Icons
- **Library**: `lucide-vue-next`
- **Default size**: `:size="16"` or `:size="18"` — keep icons small
- **Icon containers**: `w-10 h-10 bg-primary-50 rounded flex items-center justify-center` with `text-primary` icon colour
- **Active / hover icon containers**: swap to `bg-primary` with `text-white` icon

## Cards & Containers
- **Style**: `bg-white rounded-lg border border-gray-100 p-7` or `p-8`
- **Hover state**: `hover:border-primary/20 hover:shadow-md transition-all duration-300`
- **NO gradients**: Use flat solid colours only
- **NO glassmorphism**: No `backdrop-blur`, no `bg-white/80` transparency overlays
- **NO heavy shadows**: Use `shadow-sm` or `shadow-md` at most

## Animations & Transitions
- **Scroll reveal**: Intersection Observer with `opacity 0 → 1` and `translateY(20px → 0)` over `0.6s ease-out`
- **Hover transitions**: `transition-all duration-200` or `transition-colors duration-200`
- **Page transitions**: Use Vue `<transition>` with `duration-200` to `duration-300`
- **Keep animations subtle** — no flashy or distracting effects

## Section Structure Pattern
1. **Eyebrow label**: `text-[11px] font-semibold uppercase tracking-widest text-primary mb-3`
2. **Heading**: `text-2xl sm:text-3xl font-bold text-dark tracking-tight`
3. **Description**: `text-sm text-gray-500 leading-relaxed max-w-xl` (or `max-w-lg`)
4. **Content**: Grid or flex layout with appropriate spacing

## Auth Pages Layout
- **Desktop**: Split layout — left panel is `bg-dark` with brand messaging, right panel is white with the form
- **Mobile**: Single column, white background, form card centred
- **Logo**: Shield icon + "GOVERNEX" wordmark in the branded left panel
- **Form cards**: Clean white container, `border border-gray-100`, generous padding `p-8`
- **Links**: `text-[13px] text-primary hover:text-primary-600 transition-colors` — no underline by default

## Dark Sections (Footer, Industries)
- **Background**: `bg-dark` (#1E2A38)
- **Text**: White for headings, `text-gray-400` for body, `text-gray-500` for muted
- **Borders**: `border-white/10` or `border-white/5`
- **Cards / items**: `bg-white/5 border border-white/10 rounded`

## Navigation
- **Fixed top**: `fixed top-0 left-0 right-0 z-50`
- **Scroll state**: Transparent → `bg-white shadow-sm border-b border-gray-100` on scroll
- **Links**: `text-[13px] font-medium text-gray-500 hover:text-primary transition-colors`

## General Rules
1. Prioritise readability and clarity over decoration
2. Every element should have a purpose — no decorative noise
3. Use consistent spacing multiples (4px grid: 1, 1.5, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20)
4. All interactive elements need hover/focus states
5. Mobile-first responsive design
6. Use semantic HTML elements
7. All images should have descriptive alt text
