Design System & UI
Design Philosophy
ComplianceCheck is a professional, high-trust tool for compliance teams. The UI must convey clarity, precision, and governance. It should feel authoritative without being intimidating — compliance work is serious, and the interface should reflect that.
Aesthetic: Clean, minimal, professional. Think regulated industry (finance, pharma) meets modern SaaS. Typography-driven, generous whitespace, subtle shadows, data-forward (tables and lists are primary UI components).
Color Palette
| Color | Hex | Use Case |
|---|---|---|
| Primary Navy | #0F2A4A | Headers, navigation, primary buttons, key data emphasis |
| Off-White Surface | #F7F5F1 | Page background, subtle section dividers |
| Gold Accent | #B8922A | Status badges, CTAs, highlights, approval indicators |
| Text Primary | #111111 | Body text, headings, critical data |
| Text Secondary | #4A4A4A | Descriptive text, metadata, table cells |
| Text Tertiary | #6B7280 | Hints, labels, less important context |
| Success Green | #10B981 | Passed checks, approved status, positive indicators |
| Warning Red | #EF4444 | Failed checks, critical findings, errors |
| Border/Divider | #E5E1DB | Table borders, card separators, subtle lines |
Typography
| Element | Font Family | Size | Weight | Use |
|---|---|---|---|---|
| Display (H1) | Playfair Display | 2.5rem | 700 | Page titles |
| Heading 2 (H2) | Playfair Display | 2rem | 700 | Section titles |
| Heading 3 (H3) | Playfair Display | 1.5rem | 700 | Subsection titles, card headers |
| Body Text | Inter | 1rem | 400 | Paragraphs, descriptions |
| Small Text | Inter | 0.875rem | 400 | Metadata, labels, hints |
| Code/Monospace | Courier New | 0.9rem | 400 | Code snippets, IDs, technical values |
Spacing Scale
All spacing based on 8px base unit:
- 4px = 0.5 units (ultra-tight, rare)
- 8px = 1 unit (padding within components)
- 12px = 1.5 units (component margins)
- 16px = 2 units (standard padding, gaps)
- 24px = 3 units (section margins)
- 32px = 4 units (large spacing, major sections)
- 48px = 6 units (page-level spacing)
Components
Buttons
- Primary: Navy background, white text, gold hover. Used for main actions (Upload, Submit, Approve)
- Secondary: Border only, navy text. Used for non-destructive actions (Cancel, Review)
- Disabled: Gray background, gray text. Used for unavailable actions
- Danger: Red background, white text. Used for destructive actions (Delete, Reject)
Cards
- White background, subtle 1px border in #E5E1DB
- 8px border radius
- 8px box-shadow: 0 1px 3px rgba(0,0,0,0.08)
- 16px padding
- Used for: project summary, audit status, finding groups
Tables
- Header: Navy background (#0F2A4A), white text, 16px padding, bold labels
- Rows: Alternating white / light gray (#FAFAF8) backgrounds
- Hover: Slightly darker gray (#F0EDE5) on row hover
- Borders: 1px #E5E1DB between rows, no vertical lines (cleaner)
- Used for: findings list, project inventory, audit history, user roles
Badges
- Draft: Light gray background, secondary text. Status: pending, not started
- Pending: Gold background, white text. Status: in progress, waiting for action
- Active: Green background, white text. Status: approved, in use, passed
- Failed: Red background, white text. Status: blocked, error, rejected
Forms
- Label above input (not placeholder)
- Input height: 44px (thumb-friendly)
- Border: 1px #E5E1DB, navy focus state
- Placeholder text in #6B7280 (tertiary)
- Error state: red border + error message below
- Used for: login, project creation, upload forms
Status Indicators
- Compliance Score: Large numeric display (e.g., "85%"), gold/green if passing, red if critical
- Audit Status: Badge + timestamp (e.g., "Active · Started 2 days ago")
- Finding Severity: Color-coded (Critical=Red, High=Orange, Medium=Yellow, Low=Blue)
- Approval Chain: Visual checkmark/pending/rejected icons in timeline
Page Layouts
Dashboard (Auditor)
Layout: Sidebar nav + main content
- Top bar: User profile, logout, notifications (future)
- Left sidebar: Navigation to projects, audits, settings
- Main content: List of projects with audit status, quick actions (New Project, Upload Artifacts)
- Card grid: Each project as a card showing name, methodology, last audit date, compliance score
Audit Detail View
Layout: Horizontal tabs + findings table
- Tabs: Overview | Artifacts | Findings | History
- Overview: Quick stats (compliance score, finding count, approval status)
- Artifacts: Table of uploaded documents
- Findings: Sortable, filterable table of all findings
- History: Timeline of audit events (uploaded, reviewed, approved)
Finding Review
Layout: Two-column (finding detail + document preview)
- Left: Finding details (category, severity, description, location in artifact)
- Right: Snippet of artifact showing where issue was found
- Bottom: Auditor action buttons (Valid, Needs Clarification, Disagree)
Approval View (Manager)
Layout: Audit summary + approval form
- Audit summary: Project, auditor, date, compliance score
- Findings summary: Count by severity, key issues listed
- Approval form: Checkbox to confirm review, signature field, comments, submit
Responsive Design
- Desktop (1200px+): Full sidebar nav, multi-column layouts, expanded tables
- Tablet (768px-1199px): Collapsible sidebar, single-column layouts, responsive tables
- Mobile (< 768px): Mobile nav menu, stacked cards, simplified tables (show key columns only)
Primary use case: Desktop and tablet (compliance team at workstations). Mobile is secondary but should not break.