UI/UX Examples

Learn by example. These interactive demonstrations show correct brand implementation across common UI patterns, from simple forms to complex dashboards.

29 Examples
3 Industries
7 Critical Rules
100% Brand Compliant
📝

Login Form

simple

Basic form with proper typography, color contrast, and input styling

TYPO-001COLOR-001A11Y-001
📊

Dashboard Cards

medium

Data cards with icons, stats, and proper visual hierarchy

ICON-001LOGO-001COLOR-001
🎯

Application Header

complex

Full navigation header with logo, menu, search, and responsive design

LOGO-001LOGO-002LOGO-003
📋

Data Table

medium

Sortable data table with proper contrast and typography

A11Y-001TYPO-001
🪟

Modal Dialogs

medium

Accessible modals with proper focus management and color usage

COLOR-001A11Y-001
⚠️

Error & Loading States

simple

Success, error, warning, and loading states with proper icons and colors

COLOR-001ICON-001
🧭

Navigation Patterns

medium

Sidebar nav, breadcrumbs, tabs, and pagination patterns

ICON-001LOGO-001
📝

Form Elements

medium

Complete form element library with validation states

A11Y-001COLOR-001
♿

Accessibility Showcase

complex

Interactive demos of WCAG compliance and keyboard navigation

A11Y-001
⛔

Brand Violations

simple

Side-by-side examples of all 9 critical rule violations

LOGO-001LOGO-002LOGO-003COLOR-001ICON-001TYPO-001TYPO-002TYPO-003A11Y-001
Restricted Use - Requires Approval
✨

Enhanced Branding

restricted

Premium visual treatment for executive & high-impact scenarios only

LOGO-001LOGO-002COLOR-001ICON-001A11Y-001

Industry Application Examples

Real-world UI patterns for regulated industries. Each example includes Standard and Enhanced treatments.

⚖️

Legal Technology

6 examples

Case management, document review, e-discovery, and legal billing interfaces
🛡️

Anti-Money Laundering

6 examples

Transaction monitoring, alert triage, customer risk, and SAR filing workflows
📋

Compliance

6 examples

Regulatory calendars, policy management, audit trails, and control testing
View All Industry Examples →

Getting Started

1. Choose an Example

Browse examples by difficulty or the rules they demonstrate

2. See It Live

Interact with working components that follow brand guidelines

3. Copy the Code

Get copy-paste ready HTML/CSS for your own projects

4. Understand Why

Learn which critical rules apply and why they matter

Style
Theme