Layout
Composition principles
Use a responsive section structure, clear visual hierarchy, stable media proportions, and consistent spacing across mobile and desktop.
Material 3 / Published Template
Cosmos Interface
A space-themed interface that combines expansive visual depth, precise typography, and layered controls for an immersive digital experience.
Prompt reference v1Checking Prompt access...
Interaction
Behavior and access
Keep motion smooth and purposeful, preserve readable contrast and focus states, and avoid layout shifts while animated media loads.
Implementation
Engineering boundaries
React, TypeScript, Tailwind CSS, responsive WebP media, and accessible interaction states.
Design system
Material 3 token ledger
Google's current open design system for adaptive digital products.
Color roles
- model
- role-based color scheme
- requiredRoles
- surface, onSurface, primary, secondary, error
Typography
- approach
- display, headline, title, body, and label roles
- requirements
- responsive hierarchy, legible labels
Spacing
- approach
- adaptive layout rhythm
- baseUnitPx
- 4
Component rules
- touch
- Keep interactive targets large enough for touch input.
- navigation
- Choose navigation patterns according to window size and destination count.
Classification
Where this template fits
Continue reading
Related templates
Transform Data- AI
An AI data-transformation hero that presents complex processing as a clear, modern, and outcome-focused product experience.
Golden Portal- Digital Archive
A dark editorial digital archive that presents art and studio work through a cinematic gallery atmosphere and carefully paced navigation.
3D Story- Veldara
An immersive 3D world-building landing page for Veldara with layered scenes, product storytelling, and cinematic web motion.