ORBIT | Interactive Solar System Explorer
ORBIT is a cinematic, dark-mode design system optimized for immersive storytelling, educational platforms, and high-end data visualization. Characterized by a 'Space Tech' aesthetic, it features deep space blacks (#050505), vibrant accent colors like Mars Orange (#ff4d00), and sophisticated glassmorphism. The layout utilizes an editorial approach with oversized typography (Cabinet Grotesk), a 12-column grid, and a persistent vertical navigation sidebar. Design elements include star-field backgrounds, interactive 3D-simulated planet visuals with atmosphere glows, and metadata-rich status bars. Suitable for aerospace, fintech dashboards, luxury brands, and interactive science applications.
Summary
A sophisticated, high-contrast dark space explorer UI featuring a 12-column layout split between an information-dense panel and a large-scale interactive visual. It employs glassmorphism, editorial typography, and subtle micro-interactions like mouse-tracking and orbital floating animations.
Style
The style is a blend of brutalist typography and futuristic glassmorphism. It uses 'Cabinet Grotesk' for bold, uppercase headings and 'Satoshi' for clean, legible body text. The primary palette is Space Black (#050505) with high-intensity accent colors (#ff4d00). Visual depth is achieved through radial gradients, star-field textures, and blurred atmosphere glows (80px blur). Animations are fluid and organic, utilizing 8-second 'orbit-float' cycles and 3D rotation based on mouse coordinates.
Layout & Structure
A tri-modal layout consisting of a thin vertical sidebar (96px), a main 12-column content area, and a slim bottom status bar (56px). The main content is split 5:7 between info and visuals.
Vertical Sidebar Navigation
Info Panel (Left Section)
Planet Visualizer (Right Section)
Bottom Status Bar
Components
Glass Stat Card
Semi-transparent data container with hover lift effect.
Interactive Planet Sphere
CSS/JS simulated 3D sphere with atmospheric lighting.
Social Proof Stack
Overlapping user avatars with interest count.