Horizon UI Template Library

7 design themes for enterprise trading applications. The consolidated Horizon theme is the production-ready direction — start there. Themes A-F are the design exploration that informed it.

Horizon Production

The consolidated product theme. Shared shell architecture (zero duplication), role-adaptive dashboard, keyboard-first quick entry, AG Grid with P&L, position ladder with WACOG, trade lifecycle golden path, and every pattern from the design exploration — unified into one coherent product.

16 pages Shared shell.js/css Role selector Golden Path AG Grid + P&L WACOG Keyboard-first

→

Phase 1 — Visual Design Themes

Horizon Pro

Clean Enterprise

Indigo accent, shadow cards, wide sidebar, comfortable spacing. Linear/Vercel inspired.

11 pages • AG Grid • Dark/Light

◆ HORIZON

Trading Terminal

Emerald accent, monospace-heavy, icon sidebar, compact. Bloomberg inspired.

11 pages • AG Grid • Dark/Light

Meridian Glass

Premium Glass

Violet gradients, backdrop-blur glass, Plus Jakarta Sans, spacious. Raycast/Arc inspired.

12 pages • AG Grid • Dark/Light

Phase 2 — Advanced Interaction Patterns

Multi-level menus, keyboard-first design, front/back office workflows, AG Grid inline editing, cascading forms

◆ FRONT OFFICE

Front Office Workspace

NEW

Quick trade entry (keyboard B/S + Tab + Enter), AG Grid blotter with context menu, position ladder drill-down, keyboard shortcuts.

7 pages • AG Grid • Keyboard-first

Back Office Hub

Back Office Operations

NEW

AG Grid inline status editing + bulk approve, cascading nomination form, contract wizard, side-by-side reconciliation, audit log.

10 pages • AG Grid inline edit • Workflows

Recommended

Unified ETRM

NEW

Role selector (Trader/Ops/Manager), BOTH quick entry AND full forms, dense blotter AND comfortable invoices, cascading forms, everything.

11 pages • Role-adaptive • Full patterns

Specialist Variations

Focused explorations pushing one dimension to its extreme. Built on the Horizon shell.

8 keystrokes Trade captured in 8 seconds

Trader Speed

Maximum keyboard efficiency. Auto-completing counterparty, pre-filled defaults, keystroke counter on screen.

0 manual calculations Every number calculated + locked

Ops Accuracy

Invoice where every number is system-calculated with source tracing. Override requires reason + second approver.

The Pitch 15-minute guided demo narrative

Demo Narrative

Marketing-quality walkthrough for the CTO meeting. Hero, stats, scroll-through sections, "Request a Pilot" CTA.

6 semantic channels + WCAG

Color & Feedback

Status palette, data freshness indicators, severity escalation, P&L intensity encoding, toast gallery, form validation states.

Welcome to Horizon 7-step guided tour + contextual help

Guided Tour

Working 7-step product tour with spotlight cutouts, keyboard nav, localStorage persistence, and contextual "?" help icons.

Design Comparison

Attribute	A	B	C	D	E	F
Audience	General	General	General	Front Office	Back Office	Both
Accent	Indigo	Emerald	Violet	Cyan/Teal	Blue	Indigo+Violet
Density	Comfortable	Compact	Spacious	Ultra-compact	Comfortable	Adaptive
Menu	Single-level	Single-level	Single-level	Multi-level	Multi-level + badges	Multi-level + roles
Quick Entry	-	-	-	✓	-	✓
Inline Grid Edit	-	-	-	-	✓	✓
Cascading Forms	-	-	-	-	✓	✓
Contract Wizard	-	-	-	-	✓	-
Reconciliation	-	-	-	-	✓	✓
Role Selector	-	-	-	-	-	✓
Keyboard Shortcuts	Toggle only	Toggle only	Toggle only	Full system	Cmd+K	Full system
Drill-Down	-	-	-	✓	-	✓

Give Feedback

Found something that could be better? Have a suggestion? Open an issue.

Leave Feedback View All Issues

Analysis Documents

Phase 1: Agency Round 1 — Discovery & Audit Phase 1: Agency Round 2 — Design System Phase 1: Agency Round 3 — Final Spec Phase 1: Implementation Plan