
Tactile book sculpture, lavender arch and ascending lime steps. A metaphor for a personal learning path.
Download hero artwork ↓Warm, thoughtful and full of possibility. A visual language built around the moment a difficult idea finally clicks. For LearnTiva, the adaptive AI learning agent for every student.
Two open pages form a shared upward point. Three short rays above them represent understanding. The lime symbol sits inside a soft square in ink, paired with a compact Manrope wordmark. The downloadable SVG uses outlined letters, so it stays consistent without installed fonts. Keep clear space equal to half the symbol’s width; use the icon alone below 120px wordmark width. This is an original design concept, not a trademark clearance.
Coral carries the brand. Ink gives it clarity. Lavender brings curiosity, while lime marks a positive next step. Pale lavender keeps longer lessons easy to read. Click a swatch to copy its exact value.
Download CSS color tokens ↓Headlines: Manrope 600, tight spacing and generous scale. Body and controls: DM Sans 400–700. Both families are included locally. Georgia italic gives a few key phrases an editorial, human feel. Use 8px spacing increments, 8–16px corners and fine ink borders. Save large typography for the hero; keep instructions clear and concise.
Buttons lift slightly on hover. Floating hero annotations move slowly. All animation respects reduced-motion settings. Subject tabs support arrow keys, dialogs return focus to their trigger, and feedback uses live announcements. Use ink text on light brand colors; never rely on color alone for correctness.

Tactile book sculpture, lavender arch and ascending lime steps. A metaphor for a personal learning path.
Download hero artwork ↓
A quiet moment of understanding, with natural light and a lavender-and-coral setting.
Download editorial image ↓Both images were generated for this design using the built-in image-generation tool. The student is illustrative, not a customer or testimonial.
The supplied websites informed interaction, visual hierarchy and the design process. Their branding, copy and components have not been copied. The implementation uses local HTML, CSS and JavaScript; it does not require a paid component subscription.
Reference for responsive interaction feedback, expressive transitions and transform-based movement. Applied as subtle native CSS animation with a reduced-motion alternative.
motion.dev ↗Reference for a consistent set of color and typography tokens, education-oriented tactile forms, visible focus, hover feedback and responsive layouts. The supplied site identifies itself as an unofficial translation site.
ui-ux-pro-max-skill.com ↗Reference for the range of marketing sections and UI patterns: navigation, buttons, cards, tabs and footers. These patterns were interpreted as a custom learning preview.
21st.dev ↗Reference for hero composition: a decisive headline, a clear primary action and one memorable visual. Applied as an editorial split layout with original artwork.
supahero.io ↗Provided facts: Startup: LearnTiva. Domain: learntiva.com. Adaptive AI tutoring that analyzes performance, knowledge gaps, pace and understanding to personalize lessons, exercises, revision schedules and learning paths.
Design assumptions: A student-first voice and illustrative mathematics, science and language lessons. Age ranges, supported curricula, launch timing, pricing, data handling and outcomes require product confirmation. This website is a presentation and interactive prototype, with no live AI, account creation or student-data collection.