Pulse — Design Output, Measured
Dark navy analytics dashboard with amber accents: sticky glass nav, hero, a 4-up grid of stat cards with SVG sparklines, plus a featured big-number card with a bar sparkline.
Summary
A dark, premium analytics dashboard ('Pulse — Design Analytics') on a deep navy canvas with warm amber accents and cream text. A sticky glass top nav sits above a hero band, a 4-up row of stat cards with SVG area sparklines, and a secondary row pairing one featured wide card (big number + bar sparkline) with two stacked stat cards. Grain texture, soft radial glows, and amber hairline sheens give it a refined, data-product feel.
Style
Dark fintech/analytics aesthetic: near-black navy base (#06101f) with layered navy card gradients (#13294d -> #0b1f3a -> #0a1c34), warm amber (#f0b429) as the single accent, cream (#f6f1e7) text at varying opacities, and green/red (#34d399 / #f87171) reserved strictly for positive/negative deltas. Inter typeface across the board with extrabold (800) numerics in tabular-nums, hairline white borders (border-white/10), subtle radial grain, amber glow ring, and 1px gradient sheen lines along card tops.
Layout & Structure
Single centered column, max-width ~72rem (max-w-6xl), 1.5rem horizontal padding. Vertical order: sticky glass nav -> hero/section-head band -> 4-column primary stat-card grid -> secondary 3-column grid (featured wide card spanning 2 cols + a stacked pair) -> hairline footer. Fully responsive: stat grid reflows 1 -> 2 -> 4 columns; secondary grid reflows 1 -> 3 columns; hero stacks vertically below sm.
Sticky glass nav
Hero / section head
Primary stat-card grid
Secondary grid: featured wide card
Secondary grid: stacked pair
Footer
Special Notes
Single-accent discipline is the core move: amber (#f0b429) is the only brand color; green/red are strictly semantic (up/down), never decorative. Numerals always use tabular-nums for alignment. Depth comes from layered ambient radial glows + dotted grain, not heavy shadows. Card backgrounds are a fixed 'card-sheen' gradient, not flat fills. Icons are Lucide via Iconify; typeface is Inter (400-900). Note the design uses 'dir: up/down' to drive color, not the sign of the number, so a falling 'time to ship' is still green (good) and a rising 'credit burn rate' is red (bad).