Enterprise Invoice Editor (Split View)
Enterprise Invoice Editor style guide featuring a high-contrast split-screen layout. It uses a premium dark-themed form editor on the left and a professional light-themed document preview on the right. Key characteristics include editorial typography (Cabinet Grotesk & Satoshi), sophisticated neutral scales with amber accents (#fcd34d), and glassmorphism-inspired container styles. Ideal for fintech, SaaS dashboards, and professional billing software where clarity and premium aesthetics are paramount. Includes detail-oriented components like auto-calculating totals, tiered item rows, and high-fidelity invoice templates.
Summary
A sophisticated, split-screen enterprise UI for document creation. It balances a dark-mode data entry interface with a light-mode high-fidelity preview, utilizing premium typography and subtle depth through inset shadows and gradients.
Style
Premium enterprise aesthetic blending dark-mode productivity with light-mode fidelity. Features Cabinet Grotesk for high-impact display headers and Satoshi for legible body text. The palette centers on neutral grays (#0a0a0a, #fafafa) with amber-300 (#fcd34d) as the primary action color. Design elements include 24px/16px rounded corners, 1px subtle borders (white/10 for dark, neutral-200 for light), and soft-depth shadows.
Layout & Structure
A top-down layout within a 1440px container, featuring a fixed-width header and a 12-column grid that splits into 5/7 or 6/6 proportions for editor/preview interactions.
Header Bar
Left Form Editor
Right Invoice Preview
Components
Interactive Item Card
A nested data-entry card for invoice line items.
Summary Total Block
High-contrast summary section for final financial figures.