Lumina Design Guide
The ultimate reference for designing stunning Lumina interfaces. Learn about our core design principles, tokens, and components to build consistent experiences.
Typography
We primarily use **Inter** (via Google Fonts) for its clean, modern feel and excellent legibility across all screen sizes. Headers should be bold and impactful, while body text should maintain a comfortable line-height of 1.6.
Color System
Our color system is designed to be harmonious and accessible. We use a range of grays for text and surfaces, with indigo and violet as our primary accent colors.
Grid & Spacing
We use a base 4px/8px grid system. Most paddings and margins are multiples of 8 (e.g., 16, 24, 32, 48, 64).
- Section Padding: 64px to 128px
- Component Gap: 16px to 32px
- Container Width: Max 1280px (max-w-7xl)
Dark Mode Implementation
Dark mode isn't just about inverting colors. We use specific shades of black and charcoal to maintain depth and reduce eye strain.