Design System Evaluation

Infineo Design System Preview

Authoritative visual reference for reviewing design tokens, heading font-weight 500 typography, soft warm cream atmosphere with true glassmorphism, Infineo Blue metallic glass primary CTA hierarchy, and translucent soft gold secondary interactive system.

System Color Tokens

Active palette tokens for Light Mode categorized by functional action hierarchy and atmospheric role.

Atmospheric Canvas Colors (#FDF1DD Influence)
Base Canvas Ivory
#FFFDF8
Soft Warm Cream
#FFFBF2
Warm Amber Atmosphere
#FDF1DD
Warm Gold Glow
rgba(231, 184, 96, 0.08)
Surface & Glassmorphism Tokens
Light Glass Surface
rgba(255, 255, 255, 0.62)
Glass Matrix Panel
rgba(255, 255, 255, 0.55)
Glass Blue Tint
rgba(57, 97, 141, 0.06)
Glass Gold Tint
rgba(247, 218, 153, 0.25)
Primary Blue (Main CTA / Metallic Glass Hierarchy #276CB6)
Primary Metallic Blue
#276CB6
Hover Metallic Blue
#3B82D1
Blue Ambient Glow
rgba(39, 108, 182, 0.28)
Secondary Gold (Supporting CTA / Soft Translucent Glass)
Secondary Gold
#BE8C4A
Light Gold Accent
#E7B860
Soft Warm Cream
#F7DA99
Typography & Contrast Tokens
Primary Text (Dark Navy)
#112B47
Secondary Text (Blue)
#276CB6
Muted Text (Blue-Gray)
#5F7895
Taupe / Disabled
#917864
Semantic System Colors
Semantic Success (Green)
#2E7D46
Semantic Error (Red)
#C74545
Semantic Warning (Amber)
#BE8C4A
Semantic Info (Blue)
#276CB6
Border Tokens
Border Glass
rgba(255, 255, 255, 0.80)
Border Primary Blue
rgba(39, 108, 182, 0.16)
Border Gold
rgba(190, 140, 74, 0.35)
Shadow & Glow Tokens
Layered Glass Shadow
0 16px 40px rgba(57,97,141,0.06)
Metallic Blue Glow
0 8px 24px rgba(39,108,182,0.30)
Soft Gold Glow
0 8px 24px rgba(190,140,74,0.22)

Button State Matrix & Interactivity

Preserves exact Infineo website button shape, border-radius, padding, and layout metrics. Primary button features Infineo Blue (#276CB6) metallic glass with soft neumorphic depth, specular reflections, and subtle magical gold rim accents. Secondary button features translucent soft gold glass supporting actions.

Button Variant Default State Hover State Focus State Disabled State
Primary Blue
Secondary Gold
Outline
Ghost
Icon Button
🪄
Magical Transitions
300ms smooth easing with metallic blue & gold glow effects
🛡️
Consistent States
Uniform state behavior across all button variants
📐
Precise Metrics
Exact padding, radius & layout preserved from original
🎨
Metallic Glass Magic
Deep blue metallic CTA, translucent gold & cream harmony with glass depth

Typography Suite & Font Comparison

Heading evaluation comparing Cinzel vs. Alegreya using sentence "Timeless Indian Wisdom" with mandatory font-weight: 500. Alegreya Sans for body text, Satoshi for UI controls, and Fredoka for gamification.

Level
Cinzel (Serif, W: 500)
Alegreya (Warm Serif, W: 500)
HERO (42px)
Timeless Indian Wisdom
Timeless Indian Wisdom
H1 (32px)
Timeless Indian Wisdom
Timeless Indian Wisdom
H2 (26px)
Timeless Indian Wisdom
Timeless Indian Wisdom
H3 (22px)
Timeless Indian Wisdom
Timeless Indian Wisdom
H4 (18px)
Timeless Indian Wisdom
Timeless Indian Wisdom
H5 / H6 (15px)
Timeless Indian Wisdom
Timeless Indian Wisdom
Alegreya Sans — Body Text

Body Large (18px): Immersive storytelling designed to foster cultural pride.

Body Regular (15px): Standard paragraph text for documentation and component views.

Satoshi — UI Text & Controls
Form Input Label & Menu Link
Helper caption and system status text.
Fredoka — Decorative & Kids Badges
✨ Ramayana Quest Completed! 🏆 500 Wisdom Star Points

Representative Website UI Sections

Real web components recreated using design system tokens.

✨ Indian Stories for Kids

Timeless Indian Wisdom

Help your children discover courageous heritage tales, moral values, and interactive audio quests designed for modern families.

Gamified Quests

Interactive chapter challenges with instant feedback and reward badges.

Audio Bedtime Tales

Calming soundscapes narrated by professional voice artists for peaceful sleep.

Ad-Free Safety

Child-first environment with zero advertisements or unverified external links.

Starter Explorer

Free
Forever free access
  • Access 3 intro storybooks
  • Basic audio narration
MOST POPULAR

Family Unlimited

₹499 /mo
Billed annually at ₹5,988
  • Full access to all 50+ modules
  • Unlimited audio downloads
  • Up to 4 child profiles

School Patron

Custom
For institutions & centers
  • Classroom projector tools
  • Dedicated account coordinator

Accordion Dropdown (Design Exploration)

Visual evaluation of background surface, border treatment, glass depth, metallic highlights, and expand/collapse transitions.

Infineo is a learning platform designed to make learning more engaging, intuitive, and interactive.
The learning experience adapts based on the learner's progress, activity, and needs.
Yes. Progress, completed activities, and learning milestones can be viewed from the dashboard.
Your active and saved courses are available from the learning section of the platform.

Forms, Alerts, Interactive Components & Data Tables

Interactive form controls, feedback banners, dashboard metric cards, modals, tooltips, pagination, and data table.

Form Controls Suite

Enable Audio Autoplay

Semantic Feedback Alerts & Interactive Controls

Success: Story quest progress and child assessment saved successfully!
Error: Payment authorization failed. Please check payment method.
Warning: Subscription renewal due in 3 days. Action recommended.
Info: 12 new interactive Indian mythology audio quests are now available!
✓ Success State ✕ Error / Rejected ⚠ Warning / Pending ℹ Info / Notice
Hover for Tooltip Infineo Metallic Glass Active

Dashboard Metric Cards

Active Young Readers
14,290
+12.4% vs last month
Story Quests Completed
88.5%
92,400 Total Badges
Parent Trust Index
4.9 / 5.0
Verified Feedback

Active Student Roster & Module Status

Student / Child Name Current Module Quests Completed Status Badge
Aarav Sharma Ramayana Module 2 14 / 16 Quests Active Quest
Ananya Verma Panchatantra Wisdom 8 / 10 Quests In Review
Kabir Patel Mahabharata Heroes 20 / 20 Quests Completed
Showing 1 to 3 of 12 Student Roster Entries