Book a demo ↗
LEARNTIVA / VISUAL IDENTITY / 01

A curious
kind of identity.

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.

LearnTiva open book with three rays of understanding
Download vector logo ↓ Download icon ↓
01 / THE MARK

A book. A spark. A beginning.

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.

02 / THE COLOR PALETTE

Optimism, with a little depth.

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 ↓
03 / TYPOGRAPHY & UI

Clear thoughts. A human voice.

Your own kind of brilliant.

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.

04 / ORIGINAL IMAGE DIRECTION

Make the abstract feel tangible.

Sculptural book and ascending steps

Tactile book sculpture, lavender arch and ascending lime steps. A metaphor for a personal learning path.

Download hero artwork ↓

Both images were generated for this design using the built-in image-generation tool. The student is illustrative, not a customer or testimonial.

Download the original image prompts ↓

05 / THE REFERENCE STUDY

Four references. One original direction.

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.

Motion

Reference for responsive interaction feedback, expressive transitions and transform-based movement. Applied as subtle native CSS animation with a reduced-motion alternative.

motion.dev ↗

UI UX Pro Max

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 ↗

21st

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 ↗

Supahero

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 ↗
06 / PRODUCT BOUNDARIES

A design ready to develop further.

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.