Category Overview

Design System Dashboard

Welcome to the official Infineo Design System Portal. Internal brand guidelines and component documentation.

Internal Brand Guidelines

Color System

Direct 1:1 reference documenting all finalized Light Theme and Dark Theme color tokens currently active in the Design System Preview.

Finalized Light Theme Tokens
Semantic Success
--success | #4FAE6A
Semantic Error
--error | #C75B5B
Semantic Warning
--warning | #D29B3A
Semantic Info
--info | #5A8BB8
Primary Background
--bg-primary | #FFFCF4
Secondary Background
--bg-secondary | #F2E6D2
Card Background
--bg-card | #FFFDF8
Surface Background
--bg-surface | #FCF7ED
Heading Primary
--heading-primary | #102B46
Heading Secondary
--heading-secondary | #183B60
Heading Tertiary
--heading-tertiary | #2A517A
Heading Quaternary
--heading-quaternary | #3A628C
Primary Text
--text-primary | #314C68
Secondary Text
--text-secondary | #6F5B45
Disabled Text
--text-disabled | #B69B7A
Highlight Text
--text-highlight | #C9944E
Badge Text
--text-badge | #9A6B2C
Button Text
--text-button | #F8F1E7
Caption Text
--caption | #90745A
Link Color
--link | #39618D
Primary Accent
--accent-primary | #C9944E
Finalized Dark Theme Tokens
Primary Background
--bg-primary | #060C17
Secondary Background
--bg-secondary | #0B1526
Tertiary Background
--bg-tertiary | #0F1D33
Card Background
--bg-card | rgba(15,29,51,0.88)
Heading Primary
--heading-primary | #F7E5C1
Heading Secondary
--heading-secondary | #E8B445
Text Primary
--text-primary | #F0DFBE
Text Secondary
--text-secondary | #B8A785
Primary Accent
--accent-primary | #C9944E
Typography Architecture

Typography System

Direct 1:1 documentation of finalized font roles, weights, and complete type hierarchy as defined in the Design System Preview.

Design System Font Roles
Headings (Serif / Warm Serif)
Cinzel & Alegreya
Font Weight: 500 (Medium) across all levels
Body Text (Humanist Sans)
Alegreya Sans
Used for paragraphs, card text, and narrative content
Supporting & UI Controls
Satoshi (Poppins)
Used for navigation, form labels, buttons, and inputs
Decorative & Gamification
Fredoka
Used for stickers, quest rewards, and kids badges
Complete Type Hierarchy
HERO TITLE — 'Cinzel' / 'Alegreya' | Weight: 500 | Size: 38px - 42px | Line-height: 1.15
Timeless Indian Wisdom
HEADING 1 (H1) — 'Cinzel' / 'Alegreya' | Weight: 500 | Size: 30px - 32px | Line-height: 1.2
Gamified Story Modules & Heroic Adventures
HEADING 2 (H2) — 'Cinzel' / 'Alegreya' | Weight: 500 | Size: 24px - 26px | Line-height: 1.25
Explore Ramayana & Panchatantra Quest Chapters
HEADING 3 (H3) — 'Cinzel' / 'Alegreya' | Weight: 500 | Size: 20px - 22px | Line-height: 1.3
Interactive Bedtime Narratives & Audio Quests
HEADING 4 (H4) — 'Cinzel' / 'Alegreya' | Weight: 500 | Size: 17px - 18px | Line-height: 1.35
Starter Explorer & Family Unlimited Subscription Plans
HEADING 5 / HEADING 6 — 'Cinzel' / 'Alegreya' | Weight: 500 | Size: 14px - 15px | Line-height: 1.4
Module Status Metrics & Section Sub-titles
BODY LARGE — 'Alegreya Sans' | Weight: 400 Regular / 500 Medium | Size: 18px | Line-height: 1.6
Immersive storytelling designed to foster cultural pride, moral courage, and authentic Indian wisdom for modern families.
BODY REGULAR — 'Alegreya Sans' | Weight: 400 Regular | Size: 15px | Line-height: 1.6
Standard body copy used for documentation, feature descriptions, table contents, and storybook summary paragraphs.
CAPTION — 'Satoshi' (Poppins) | Weight: 400 Regular / 500 Medium | Size: 12px - 13px | Line-height: 1.4
System timestamps, secondary helper notes, and table footer pagination counters.
UI LABEL — 'Satoshi' (Poppins) | Weight: 600 SemiBold | Size: 13px | Line-height: 1.2
Parent Account Name & Phone Number Field Label
BUTTON TEXT — 'Satoshi' (Poppins) | Weight: 700 Bold | Size: 13px | Uppercase | Letter-spacing: 1px
START FREE TRIAL ✨  |  EXPLORE STORY MODULES  |  READ GUIDELINES
LINK TEXT — 'Satoshi' (Poppins) | Weight: 600 SemiBold | Size: 14px | Color: var(--link)
View Brand Guidelines →  |  Token Specifications  |  GitHub Repository
Iconography System

Iconography System

Complete vector SVG icon reference library with standardized 16px, 20px, and 24px grid alignment, 2px stroke weights, and consistent bounding boxes across all application surfaces.

Grid Alignment & Sizing Standards
Small Scale (16px)
Badge & Inline Icons
Used inside compact badges, table indicators, and inline metadata chips.
Medium Scale (20px)
Buttons & Navigation
Standard size for primary buttons, sidebar links, and form field icons.
Large Scale (24px)
Feature Cards & Headers
Used in hero banners, card headers, and feature highlight blocks.
Categorized Vector Icon Library
Navigation & Layout Icons
Dashboard
Color System
Typography
Iconography
Components
Live Preview
Actions & Status Icons
Success Check
Info Warning
Alert Warning
Error Octagon
Rating Star
WhatsApp Call

Representative Website UI Sections

Real web components recreated using design system tokens.

Logo INFINEO
Home Stories Parent Dashboard Pricing
✨ 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

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

Feedback Alerts & Interactive Controls

Success: Story quest progress saved successfully!
Warning: Subscription renewal due in 3 days.
Hover for Tooltip Infineo Design Tokens v1.0 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

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