Infineo Design System Preview
Authoritative visual reference for reviewing finalized design tokens, heading font-weight 500 typography, subtle premium metallic gold buttons, interactive component states, and live theme switching.
Approved Color Tokens
Active palette tokens for the selected theme mode.
Button State Matrix & Interactivity
Preserves exact Infineo website button shape, border-radius, padding, and layout metrics. Primary button features premium darker gold hover physics with 300ms smooth transition.
Button Sizes (Large, Medium, Small)
| Button Variant | Default State | Hover State | Focus State | Disabled State |
|---|---|---|---|---|
| Primary Gold | ||||
| Secondary | ||||
| Outline | ||||
| Ghost | ||||
| Icon Button |
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.
Body Large (18px): Immersive storytelling designed to foster cultural pride.
Body Regular (15px): Standard paragraph text for documentation and component views.
Representative Website UI Sections
Real web components recreated using design system tokens.
INFINEO
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
- Access 3 intro storybooks
- Basic audio narration
Family Unlimited
- Full access to all 50+ modules
- Unlimited audio downloads
- Up to 4 child profiles
School Patron
- Classroom projector tools
- Dedicated account coordinator
Forms, Alerts, Interactive Components & Data Tables
Interactive form controls, feedback banners, dashboard metric cards, modals, tooltips, pagination, and data table.
Form Controls Suite
Feedback Alerts & Interactive Controls
Dashboard Metric Cards
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 |