Refined Legal Professional Litigation Suite
A sophisticated, editorial-inspired legal litigation suite designed for professional attorneys and law firms. It features a high-contrast dark-mode sidebar, a neutral-light document management interface, and a focus on high-readability serif typography for legal documents. The aesthetic balances authoritative navy (#0a0a0a) and professional teal (#4e9eb8) with a structured, multi-pane layout. It is optimized for legal operations, fintech compliance, and document-heavy SaaS platforms requiring a 'hand-crafted' editorial feel rather than a generic grid-based UI.
Summary
An editorial-grade legal professional interface featuring a three-pane layout, sophisticated serif-sans typography pairing, and a curated navy-teal color palette with significant whitespace for focus.
Style
The style emphasizes a 'hand-crafted' professional look. It pairs 'Plus Jakarta Sans' (weights 400-800) for UI/navigation with 'Crimson Pro' (weights 400-700) for legal document body text. Colors revolve around Deep Navy (#0a0a0a), Teal (#4e9eb8), and light grays (#f8f8f8, #bababa). Document reading areas use a 1.35 line-height for a natural reading rhythm. Micro-interactions are subtle, using 0.2s transitions on borders and text colors.
Layout & Structure
A fixed-height, overflow-hidden three-pane layout. The left sidebar is dark and narrow; the center content area contains a secondary document list panel and a primary document viewer; the right panel is a research and AI analysis hub.
Main Navigation Sidebar
Global Header
Document Inventory Panel
Document Viewer Hub
Intelligence & Analysis Sidebar
Components
The 'Paper' Viewport
A high-fidelity document previewer that mimics legal paper.
Citation Link
Styled hyperlink for legal case law within documents.
Status Badge (Legal)
Small, authoritative badge for document status.
Special Notes
MUST: Maintain the 1.35 line-height for all 'Crimson Pro' serif blocks to ensure legal readability. MUST: Use sharp 1px borders (#bababa) between all panels to maintain the 'architectural' feel. DO NOT: Use rounded corners (keep borders 0px or very subtle). DO NOT: Use soft drop shadows; use borders for definition. DO NOT: Over-saturate; the only color should be Teal (#4e9eb8) and Navy (#0a0a0a).