A design-forward look at UX, layout, and visual systems for a decentralized perpetuals trading experience.
Designing Hyperliquid requires balancing clarity for fast traders with the trust signals needed for decentralized finance. The interface must communicate complex derivatives information—leverage, margin, funding rates—while remaining visually calm. Priorities: high information density, predictable interactions, clear visual hierarchy, and micro-interactions that reduce cognitive load during volatile markets.
Use a three-column trading canvas: market overview (left), order blotter & chart (center), and positions/portfolio (right). Center the price chart and order controls to make decision flows single-step. Provide collapsible panels for advanced controls so novice users aren’t overwhelmed but power users can access fine-grained parameters quickly.
Adopt a neutral sans-serif (e.g., Inter) for legibility. Use a typographic scale with clear weight differences: large, bold for price and position size; medium for controls; small muted for helper copy. Maintain consistent vertical rhythm—24px base line—so that dense data tables remain scannable.
Favor a restrained dark palette with a single vivid accent for primary actions and price movement. Use greens/reds only for P&L; avoid noisy gradients in data-heavy areas. Subtle glassmorphism for cards improves depth without distraction. Ensure color contrast meets WCAG AA for text and data visualization elements.
Charts should support overlays relevant to perpetuals: funding rate bands, margin cushion, liquidation horizons, and VWAP. Provide toggleable indicators, and lightweight in-chart annotations for open positions. Use sparklines inside order rows for quick market context.
Primary order controls must be grouped and tiered: a simple buy/sell with size input for quick entries, and an Advanced toggle revealing limit, reduce-only, post-only, and custom leverage sliders. Use keyboard shortcuts for market/limit toggles and quick size presets. Provide confirmation to prevent accidental large market orders with a clear, tactile step that explains estimated slippage and fee impact.
On mobile, switch to a stacked layout: price chart on top, order controls mid, and portfolio bottom. Simplify interactions with large touch targets and quick action buttons (25%, 50%, 100% size presets). Implement a persistent mini-chart in the header so traders retain market context when scrolling.
Microcopy must be explicit: explain funding calculations, liquidation mechanics, and how insurance funds work. Use progressive disclosure—show simple explanations first with Learn More links to deeper documentation. Visual trust markers (audits, verifications, and active TVL) should be visible in the dashboard header.
Use subtle motion for confirmations, order fills, and margin changes. Animations should be short (120–220ms) and never obscure important numeric changes. Toasts and toasts with action links help the user recover from failed transactions or partial fills.