Twenty design variations for the ODILO Learning Experience Platform, implementing the Gemini UI adaptation spec with grounded sources, mode-switching, and progressive disclosure patterns.
Bold split-screen design. Light side for content, dark side for AI chat. Central glowing divider, Clash Display typography.
Heavy animation focus with animated background lines, word reveal effects, card sweep animations. Unbounded display font for drama.
Google-inspired minimalism with subtle creativity. Rail navigation, search-first UX, restrained color palette. Maximum clarity, zero noise.
Learning skills as cosmic nodes in 3D space. Deep space aesthetic with nebula gradients, particle stars, and constellation-like connections. Space Mono + Exo 2.
Learning topics as stars forming educational constellations. Star chart aesthetic with coordinate grid and related topic connections. IBM Plex Mono + Source Sans.
Course catalog visualized as DNA double-helix of knowledge. Biotech/organic aesthetic with translucent cards and progress tracking. Outfit + DM Sans.
Unlockable achievements in a 3D trophy case. Gaming aesthetic with rarity tiers (Common to Legendary), metallic shine effects, and XP rewards. Rajdhani + Inter.
Multimedia resources flowing in dynamic wave patterns. Fluid ocean aesthetic with animated wave lines and resource type colors. Plus Jakarta Sans + JetBrains Mono.
Frosted glass panels with animated gradient orbs. Translucent layered surfaces, backdrop blur effects. Outfit + Plus Jakarta Sans typography.
ODILO's "Netflix/Spotify of education" vision realized. Dark immersive UI, billboard hero, horizontal content rows, hover cards with progress bars.
True to ODILO's corporate identity. Green/teal gradient hero, clean white backgrounds, professional card layouts, Inter typography.
Clean Swiss typography meets brutalist grid. Bold black/white contrast, IBM Plex Mono accents, hard edges, no decoration.
Japanese bento box inspired asymmetric grid layout. DM Sans + JetBrains Mono. Clean dark surface with organized content blocks.
Raw, exposed structure with high contrast. Bold typography using Space Mono and Bebas Neue. Sharp edges, no decoration - pure function.
Soft gradients and flowing shapes. Earthy tones with sage, terracotta, and cream. Fraunces serif paired with Source Sans for warmth.
Magazine/newspaper layout with typography hierarchy. Playfair Display headlines, clean grid, sophisticated restraint. Content-first design.
Vibrant gradients, overlapping elements, bold animations. Gallery-style micro-cards with hover expansion. Syne font for personality.
Neon accents on deep void backgrounds. Animated grid, cyan/magenta glow effects. Orbitron font for that 80s sci-fi aesthetic.
Full MD3 implementation with proper color tokens, elevation, motion easing, and shape system. Tonal surfaces, FABs, and side sheets.
Interactive 3D periodic table with five layout modes: table, sphere, helix, grid, and wave. CSS 3D transforms with anime.js animations and pointer-following rotation.