PLAIO Metrics Selection - Variation A
A high-density dark-mode wizard interface designed for complex SaaS, fintech, or data analysis applications. It features an orange-accented palette, inter-based editorial typography with heavy letter-spacing on headers, and a dual-column layout for metric selection. The aesthetic is professional and utilitarian, utilizing subtle hover states, compact checkboxes, and a distinct primary/secondary information hierarchy. Suitable for forecasting tools, dashboard configuration screens, and multi-step technical setups.
Summary
A sophisticated dark-themed wizard interface (840x720px) using the Inter font family, featuring an orange primary accent (#e37400). The layout uses a fixed sidebar for navigation and a two-column main content area for density, with specific focus on compact data rows and tabular numeric inputs.
Style
The design system uses a strictly dark palette (Black-900: #151517, Gray-900: #212121) with a high-contrast orange primary color (#e37400). Typography relies on Inter, using font sizes ranging from 10px (xs) to 21px (xl). It emphasizes data density through 'uppercase tracking-widest' labels (10px, bold) and compact 1.5-unit vertical padding on list items. Micro-interactions include 300ms transitions on progress bars and subtle background shifts (hover:bg-gray-800/40) for row selection.
Layout & Structure
A fixed-size dialog (840x720px) divided into a 240px sidebar and a flexible content area. Includes a top-aligned 3px progress bar and a fixed footer for navigation actions.
Progress Bar
Sidebar Navigation
Content Header
Info Callout
Metrics Grid
Parameter Section
Footer Actions
Components
Interactive Metric Row
A checkbox row that toggles selection and primary status.
Special Notes
MUST: Use 'tabular-nums' for all numeric inputs to ensure alignment. MUST: Use 'tracking-widest' (0.1em) for all 10px uppercase labels. DO NOT: Use standard 16px body text; the maximum base text size is 14px to maintain data density. DO NOT: Use rounded corners larger than 8px for the main dialog or 4px for internal components.