Category Overview

Design System Dashboard

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

Internal Brand Guidelines

Color System

Official color system reference detailing core brand personality, swatches, surface tokens, border styles, and theme palettes.

Brand Personality
Brand Color HEX Value Brand Personality Statement
Regal Gold #C9944E / #E8B445 Represents heritage wisdom, warmth, and prestige.
Imperial Navy #060C17 / #0B1526 Represents trust, focus, and cosmic storytelling.
Parchment Ivory #FAF5E8 Represents manuscript authenticity and comfortable reading.
Brand & Primary Palette
Accent Primary
--accent-primary | #C9944E
Accent Hover
--accent-hover | #F4D078
Accent Soft
--accent-soft | #E8B445
Accent Dark
--accent-dark | #916429
Surface & Background Colors
Background Primary
--bg-primary | #060C17
Background Secondary
--bg-secondary | #0B1526
Background Tertiary
--bg-tertiary | #0F1D33
Card Background
--bg-card | rgba(15,29,51,0.82)
Glass Background
--bg-glass | rgba(8,17,33,0.78)
Overlay Background
--bg-overlay | rgba(4,10,20,0.88)
Text Colors
Heading Primary
--heading-primary | #F7E5C1
Heading Secondary
--heading-secondary | #E8B445
Text Primary
--text-primary | #F0DFBE
Text Secondary
--text-secondary | #B8A785
Text Muted
--text-muted | #7E8F9E
Text Inverse
--text-inverse | #060C17
Light Theme Swatches
Background
--bg-primary | #FAF5E8
Surface
--bg-secondary | #F3E7CF
Card
--bg-card | #FFFFFF
Text
--text-primary | #11253E
Border
--border-primary | rgba(13,27,46,0.18)
Accent
--accent-primary | #B88034
Dark Theme Swatches
Background
--bg-primary | #060C17
Surface
--bg-secondary | #0B1526
Card
--bg-card | rgba(15,29,51,0.82)
Text
--text-primary | #F0DFBE
Border
--border-primary | rgba(232,180,69,0.28)
Accent
--accent-primary | #C9944E
Border Colors
Border Primary
--border-primary | rgba(232, 180, 69, 0.28)
Border Secondary
--border-secondary | rgba(255, 255, 255, 0.10)
Border Light
--border-light | rgba(255, 255, 255, 0.05)
Input Border
--input-border | rgba(232, 180, 69, 0.22)
Input Hover Border
--input-border-hover | rgba(244, 208, 120, 0.45)
Input Focus Border
--input-border-focus | #F4D078
Semantic Feedback Colors
Success
--success | #2DE389
Error
--error | #FF5E62
Warning
--warning | #FFAE33
Info
--info | #38BDF8
Typography Architecture

Typography

Font hierarchy and explicit heading samples using curated Google Fonts (`Cinzel`, `Nunito`, `Poppins`, `Fredoka`).

Explicit Heading Samples & Type Scale
HEADING 1 (H1) — 'Cinzel', serif | Weight: 900 Black | Size: 42px - 56px
I am Heading 1 (H1) — Timeless Indian Wisdom
HEADING 2 (H2) — 'Cinzel', serif | Weight: 900 Black | Size: 32px - 48px
I am Heading 2 (H2) — Gamified Story Modules & Adventures
HEADING 3 (H3) — 'Cinzel', serif | Weight: 800 Bold | Size: 24px - 28px
I am Heading 3 (H3) — Ramayana Quest Module 1
SUBTITLE / LEAD — 'Poppins', sans-serif | Weight: 550 Medium | Size: 18px - 20px
I am Subtitle / Lead Paragraph — Interactive storytelling designed for young minds.
BODY TEXT — 'Nunito', sans-serif | Weight: 500 Regular / 600 SemiBold | Size: 16px - 18px
I am Body Text — Used for paragraphs, card content, navigation links, and form labels.
EYEBROW / BADGE LABEL — 'Poppins', sans-serif | Weight: 700 Bold | Size: 12px - 13px
I AM EYEBROW / BADGE LABEL — INDIAN STORIES FOR KIDS
DECORATIVE ACCENT — 'Fredoka', cursive | Weight: 400 Regular | Size: 22px - 24px
I am Decorative Accent Text — Playful Bedtime Stories & Badges ✨
Iconography System

Iconography

Clean vector SVG icons designed for 16px, 20px, and 24px grid alignment with consistent 2px stroke weights.

Vector Icon Reference Library
Rating Star
Storybook
Sparkles
WhatsApp Call
Heart Pulse
Checkmark
Component Library

UI Components

Reusable component patterns including buttons, form inputs, glassmorphic cards, and hero banners.

Button Library
Primary Gold CTA
Pill Shimmer
Secondary Outline
🇮🇳 +91
Micro-Interactions & Motion

Interaction

Motion physics, interactive hover states, glass shatter transitions, and shimmer glare sweeps.

Shimmer Glare Animation

The .login-btn pill utilizes a linear glare sweep migrating from left: -100% to left: 160% on hover.