Category Overview
Design System Dashboard
Welcome to the official Infineo Design System Portal. Internal brand guidelines and component documentation.
Internal Brand Guidelines
Color System
Complete, categorized Design System reference documenting all active Light Theme and Dark Theme color tokens, CSS variables, approved values, and usage guidelines.
Light Theme Tokens
Default high-contrast light mode design system tokens for daylight reading and executive dashboards.
Brand Colors
Imperial Obsidian
--color-infineo-black
#060C17
Core dark brand obsidian for deep contrast accents and footers.
Royal Gold
--color-infineo-gold
#C9944E
Primary brand gold accent for primary buttons and active indicators.
Heritage Navy
--color-infineo-blue
#1A3959
Heritage deep navy blue for primary headings and brand headers.
Light Gold Glow
--color-infineo-gold-light
#F0C86A
Warm light gold for subtle highlights, badges, and button gradients.
Vibrant Imperial Gold
--color-infineo-gold-vibrant
#E8B445
High-luminance gold for hero accents and secondary headings.
Parchment Cream
--color-infineo-cream
#FEF0D0
Warm parchment cream background fill for light component cards.
Background Colors
Primary Background
--bg-primary
#FFFCF4
Main application page canvas backdrop in Light Mode.
Secondary Background
--bg-secondary
#F2E6D2
Section containers, sidebar drawers, and grouped card wrappers.
Tertiary Background
--bg-tertiary
#EBD9B8
Nested containers, table header bars, and subtle panel fills.
Glass Backdrop
--bg-glass
rgba(255, 252, 244, 0.88)
Translucent glassmorphic header and sticky navbar background.
Modal Overlay
--bg-overlay
rgba(16, 43, 70, 0.35)
Semi-transparent dark backdrop overlay for open popups & modals.
Surface & Card Colors
Card Background
--bg-card
#FFFDF8
Primary background for content cards, widget blocks, and tables.
Surface Background
--bg-surface
#FCF7ED
Elevated container surfaces, tab panels, and active popovers.
Input Fill
--input-bg
#FFFDF8
Background fill for form text fields, select inputs, and textareas.
Heading Colors
Heading Primary
--heading-primary
#102B46
Hero title headers, H1 titles, and high-impact page headings.
Heading Secondary
--heading-secondary
#183B60
H2 section titles, feature card headers, and sidebar titles.
Heading Tertiary
--heading-tertiary
#2A517A
H3 subheadings, widget section headers, and tab title text.
Heading Quaternary
--heading-quaternary
#3A628C
H4 sub-titles, table headers, and minor component labels.
Body Text Colors
Text Primary
--text-primary
#314C68
Primary body text for optimal contrast and readability.
Text Secondary
--text-secondary
#6F5B45
Secondary paragraphs, feature descriptions, and subtitle notes.
Text Muted
--text-muted
#6F5B45
Muted meta info, footer copyright copy, and secondary tags.
Text Disabled
--text-disabled
#B69B7A
Disabled inputs, inactive button labels, and grayed-out options.
Text Inverse
--text-inverse
#FFFCF4
High-contrast light text used over dark backgrounds & buttons.
Caption Text
--caption
#90745A
Small helper captions, timestamps, and table footnote details.
Interactive Colors (Links, Buttons, Accent)
Primary Accent
--accent-primary
#C9944E
Main gold interactive accent for primary buttons and active tabs.
Accent Hover
--accent-hover
#B5803D
Darker gold shade triggered on button hover & active state.
Accent Soft
--accent-soft
#D29B3A
Soft amber gold for secondary pills, tags, and active outlines.
Accent Dark
--accent-dark
#9A6B2C
Deep bronze gold for eyebrow text tags and border highlights.
Link Color
--link
#39618D
Default blue hyperlink text color for embedded body links.
Link Hover
--link-hover
#C9944E
Gold hover state for text hyperlinks and interactive breadcrumbs.
Text Highlight
--text-highlight
#C9944E
Highlighted key terms, search matches, and metric callouts.
Badge Text
--text-badge
#9A6B2C
Deep bronze text color inside status badges & eyebrow chips.
Button Text
--text-button
#F8F1E7
High-contrast text color inside dark or gold action buttons.
Semantic Colors (Success, Error, Warning, Info)
Semantic Success
--success
#4FAE6A
Success notifications, completed quest badges, and online indicators.
Semantic Error
--error
#C75B5B
Error alerts, destructive action prompts, and form validation errors.
Semantic Warning
--warning
#D29B3A
Caution notifications, pending status chips, and system alerts.
Semantic Info
--info
#5A8BB8
Informational banner callouts, tooltip icons, and neutral badges.
Border & Divider Colors
Border Primary
--border-primary
rgba(111, 91, 69, 0.22)
Primary structural border for card containers and modal frames.
Border Secondary
--border-secondary
rgba(111, 91, 69, 0.12)
Subtle card outlines, section dividers, and table row borders.
Border Light
--border-light
rgba(111, 91, 69, 0.06)
Hairline quiet dividers and subtle list item separators.
Input Border
--input-border
#F2E6D2
Default border ring for input fields, textareas, and select menus.
Input Border Hover
--input-border-hover
rgba(201, 148, 78, 0.45)
Hover border ring trigger for interactive form controls.
Dark Theme Tokens
Sophisticated dark theme design system tokens using deep imperial obsidian canvas and vibrant gold accents.
Brand Colors
Imperial Obsidian
--color-infineo-black
#060C17
Core page canvas background for dark theme obsidian interface.
Royal Gold
--color-infineo-gold
#C9944E
Primary brand gold accent for buttons and interactive controls.
Vibrant Imperial Gold
--color-infineo-gold-vibrant
#E8B445
High-luminance gold for primary headers and glowing accents.
Light Gold Glow
--color-infineo-gold-light
#F0C86A
Luminous warm gold highlight for dark mode button hover glows.
Parchment Cream
--color-infineo-cream
#FEF0D0
Warm light cream contrast text & icon fills against dark surfaces.
Background Colors
Primary Background
--bg-primary
#060C17
Deep Imperial Obsidian main page background canvas in Dark Mode.
Secondary Background
--bg-secondary
#0B1526
Midnight Navy containers, sidebars, and grouped content panels.
Tertiary Background
--bg-tertiary
#0F1D33
Deep Ocean Blue nested containers and component inner fills.
Glass Backdrop
--bg-glass
rgba(8, 17, 33, 0.78)
Dark translucent glass navbar and floating header background.
Modal Overlay
--bg-overlay
rgba(4, 10, 20, 0.88)
Deep obsidian backdrop overlay for dark mode popups & modals.
Surface & Card Colors
Card Background
--bg-card
rgba(15, 29, 51, 0.82)
Translucent ocean card background for documentation & widget blocks.
Surface Background
--bg-surface
#0F1D33
Elevated dark ocean surfaces, dropdown menus, and popovers.
Input Fill
--input-bg
rgba(11, 21, 38, 0.90)
Background fill for form text inputs and select dropdowns in dark mode.
Heading Colors
Heading Primary
--heading-primary
#F7E5C1
Warm Champagne Ivory for main H1 page titles and hero headers.
Heading Secondary
--heading-secondary
#E8B445
Vibrant Imperial Gold for H2 section titles and component subheadings.
Body Text Colors
Text Primary
--text-primary
#F0DFBE
Soft Champagne Cream for main readable dark mode body copy.
Text Secondary
--text-secondary
#B8A785
Muted Sand Gold for secondary copy, feature descriptions, and notes.
Text Muted
--text-muted
#7E8F9E
Slate Grey for secondary metadata, captions, and footer links.
Text Inverse
--text-inverse
#060C17
Deep Imperial Obsidian text for elements placed over light gold badges.
Interactive Colors (Links, Buttons, Accent)
Primary Accent
--accent-primary
#C9944E
Royal Gold primary action accent for dark mode active elements.
Accent Hover
--accent-hover
#F4D078
Luminous Warm Gold trigger state for interactive buttons & cards.
Accent Soft
--accent-soft
#E8B445
Vibrant Imperial Gold for secondary badging and glowing active highlights.
Accent Dark
--accent-dark
#916429
Deep bronze accent tone for dark mode contrast outlines.
Link Color
--link
#F4D078
Luminous Gold default text link color for dark theme copy.
Link Hover
--link-hover
#E8B445
Vibrant Imperial Gold hover state for text links and breadcrumbs.
Semantic Colors (Success, Error, Warning, Info)
Semantic Success
--success
#2DE389
Electric Neon Emerald for success banners and positive status chips.
Semantic Error
--error
#FF5E62
Vibrant Coral Red for critical alerts, error banners, and warnings.
Semantic Warning
--warning
#FFAE33
Bright Amber Gold for caution notifications and pending alerts.
Semantic Info
--info
#38BDF8
Vibrant Sky Blue for informational callouts and tips in dark mode.
Border & Divider Colors
Border Primary
--border-primary
rgba(232, 180, 69, 0.28)
Gold-tinted structural border for dark mode cards & featured panels.
Border Secondary
--border-secondary
rgba(255, 255, 255, 0.10)
Translucent white border for card outlines and section dividers.
Border Light
--border-light
rgba(255, 255, 255, 0.05)
Hairline translucent white dividers and subtle list separators.
Input Border
--input-border
rgba(232, 180, 69, 0.22)
Soft gold border ring for dark mode form input controls.
Input Border Hover
--input-border-hover
rgba(244, 208, 120, 0.45)
Glowing gold hover ring trigger for interactive dark inputs.
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
INFINEO
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.
INFINEO
Home
Stories
Parent Dashboard
Pricing
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 |