IDIGITALPRENEUR Design System

Overview

IDIGITALPRENEUR presents itself as India's fast-growing digital skills academy, and its visual language reflects that energy: a dark, authoritative navy navigation bar anchors the top of the page, giving way to an expansive white-canvas hero zone where the brand's personality truly emerges. The dominant mood is aspirational-playful — serious enough to promise career transformation, lively enough to feel accessible to a young, digitally-native audience.

The color philosophy centers on a striking contrast between {colors.signature-navy} (#0c2a37) used in the top navigation and lower Knowledge Packs band, and the bright {colors.accent-lime} (#bfff6e) that highlights the word "Skills" in the hero headline. This lime accent is the brand's voltage — it appears sparingly but memorably, drawing the eye to the core value proposition. A secondary signature color, {colors.signature-forest} (#00513f), anchors the statistics cards ("100+ Experienced Trainers", "300k+ Training Students") and the primary CTA button, creating a cohesive visual ecosystem where dark greens signal trust and action.

Typography is the system's most decisive element. Headlines use Graphik at weight 700 — bold, confident, geometric — while the hero display text reaches a dramatic 48px in Inter at weight 600. This is unusually large for body-adjacent display type, signaling that IDIGITALPRENEUR leads with impact. The type scale then drops efficiently through DM Sans for sub-headings (19.5px, weight 600) into Lato for body copy (16px, weight 400). The result is a three-family system where each face carries distinct semantic weight: Graphik = authority/headlines, Inter = hero-scale statements, Lato/DM Sans = readable content.

Shape language is defined by generous rounding. The tab controls in the Knowledge Packs section use {rounded.lg} (75px — essentially pill-shaped), while statistics cards sit at {rounded.md} (27.42px) and course cards at {rounded.DEFAULT} (19.5px). This creates a friendly, approachable surface language that softens the dark navy backgrounds. The only sharp-cornered elements are the floating application icons (Figma, Adobe Illustrator, Premiere Pro, etc.) that drift around the hero section — their crisp squares contrast intentionally with the rounded UI chrome.

Two distinct sub-systems are visible: the Hero/Editorial dialect (white canvas, lime accents, floating decorations, large Inter type) and the Knowledge Packs dialect (dark navy background, forest-green active tabs, card grid with multi-tone surfaces). These two zones could potentially serve as templates for other page types — the former for marketing/landing pages, the latter for product/course browsing surfaces.

Key Characteristics

• Primary brand voltage lives in {colors.accent-lime} highlights and {colors.signature-forest} CTAs, never in the pre-assigned {colors.primary} blue (which appears reserved for links/utility).
• Hero headlines use {typography.display-xl} at 48px/600 weight in Inter — this is the loudest type voice in the system.
• All tabbed navigation uses {rounded.lg} (75px) for fully pill-shaped containers.
• Statistics cards ({component.stat-card}, {component.stat-card-dark}) float with {shadows.md} elevation above the canvas.
• The Knowledge Packs band inverts to {colors.signature-navy-ink} background with {colors.body} text — a full dark-section treatment.
• Course cards cycle through three surface tones: {colors.signature-forest}, {colors.signature-sage}, and a lime variant (#d4ff7a).
• Floating app icons use Font Awesome with no background container — pure currentColor rendering.
• Spacing is notably fine-grained: unique values at 11px, 13px, 15px, 17px, 19px, 23px, 26px suggest manual tuning over a strict 4/8px grid.

Colors

Brand & Accent

• Primary ({colors.primary} — #0d6efd): Standard Bootstrap blue; appears in link text and utility elements, not as a dominant brand surface color.
• Primary Active ({colors.primary-active} — #0a58ca): Darker blue for pressed/active states on primary-blue elements.
• Primary Hover ({colors.primary-hover} — #2684ff): Lighter blue for hover states.
• Accent Lime ({colors.accent-lime} — #bfff6e): The signature highlight color — used exclusively for the "Skills." inline highlight in the hero headline. This is the brand's most memorable chromatic moment.
• Signature Forest ({colors.signature-forest} — #00513f): Deep teal-green used for the "Log In" CTA button, active tab indicator, statistics cards, and course card surfaces. Conveys growth/trust.
• Signature Forest Dark ({colors.signature-forest-dark} — #113440): Darker teal variant for elevated card surfaces or hover states on forest-colored elements.
• Signature Navy ({colors.signature-navy} — #0c2a37): The navigation bar background and primary dark-brand color — authoritative, professional.
• Signature Navy Deep ({colors.signature-navy-deep} — #10161e): Deepest navy — used for the Knowledge Packs section background and dark statistics card.
• Signature Navy Ink ({colors.signature-navy-ink} — #141c25): Near-black navy for maximum-contrast dark surfaces.
• Signature Teal Muted ({colors.signature-teal-muted} — #3a6ca5): Semi-transparent blue-teal at 50% opacity — used for overlay treatments.
• Signature Green Gray ({colors.signature-green-gray} — #cdd9d8): Muted sage-gray for subtle dividers or disabled surfaces.
• Signature Sage ({colors.signature-sage} — #e8eee2): Light sage green — used as a lighter alternative course card background.

Surface

• Canvas ({colors.canvas} — #ffffff): Pure white — the hero section and logo bar background.
• Surface Soft ({colors.surface-soft} — #fcfaf8): Warm off-white — subtle variation for secondary canvas areas.
• Surface Near White ({colors.surface-near-white} — #fdfdfd): Imperceptibly off-white — likely used for card inner backgrounds or input fields.
• Surface Neutral ({colors.surface-neutral} — #cdcdcd): Medium gray — used for the logo bar's grayscale brand marks.
• Surface Dark ({colors.surface-dark} — #202f3f): Dark blue-gray — used for search input backgrounds in dark contexts.

Text

• Ink ({colors.ink} — #212529): Near-black — the primary text color on light surfaces, used for headlines and body copy.
• Body ({colors.body} — #ffffff): Pure white — text on dark surfaces (nav bar, Knowledge Packs band, statistics cards).
• Body Dark ({colors.body-dark} — #202020): Very dark gray — alternative body text for slightly reduced contrast.
• Muted ({colors.muted} — #333333): Dark gray — secondary text, descriptions, less-important content.
• Muted Slate ({colors.muted-slate} — #2d3d4f): Blue-toned dark gray — used for text on dark-teal surfaces.
• On Primary ({colors.on-primary} — #ffffff): White text on {colors.primary} blue backgrounds — satisfies AA contrast.
• On Dark ({colors.on-dark} — #ffffff): White text on any dark surface (navy, forest, black).
• On Forest ({colors.on-forest} — #ffffff): White text on {colors.signature-forest} backgrounds.

Hairlines & Borders

• Hairline ({colors.hairline} — #dedede): Light gray — subtle dividers between elements.
• Border Inset ({colors.border-inset} — #dee2e6): Slightly warmer light gray — used for inset shadow borders (button press states).

Semantic

• Link ({colors.link} — #0d6efd): Blue — standard link color matching {colors.primary}.
• Error ({colors.error} — #dc3545): Red — form validation errors (Bootstrap default).
• Success ({colors.success} — #198754): Green — success states.
• Warning ({colors.warning} — #ffc107): Amber — warning/alert states.
• Info ({colors.info} — #0dcaf0): Cyan — informational messages.

Typography

Font Family

IDIGITALPRENEUR employs a three-typeface system with clear role separation:

1. Graphik (proprietary, self-hosted via WOFF2/WOFF/TTF) serves as the headline and title face. Available in Light (300), Regular (400), Medium (500), Semibold (600), and Bold (700) weights. This is a geometric sans-serif with excellent legibility at large sizes — it conveys modern professionalism without corporate sterility. Used for all h2-level headings, the "Knowledge Packs" section title, and navigation elements.

2. Inter (likely Google Fonts or self-hosted) handles hero-scale display text. The 48px hero headline ("Learn Digital Skills. Build a Life That Pays.") renders in Inter at weight 600. Inter's tall x-height and open apertures make it ideal for large-impact statements that must remain readable. Also appears in some label contexts.

3. Lato (Google Fonts) is the body copy workhorse. A humanist sans-serif with warm proportions, used for paragraph text, button labels, captions, and general UI text at 14–16px. Its slightly organic letterforms soften the geometric precision of Graphik.

4. DM Sans appears in a specialized role for sub-headings (the h3 level at 19.5px, weight 600) — likely chosen for its compact height in dense layouts.

5. SF Pro is referenced in font-face declarations (Regular, Medium, Bold, Black Italic) but appears minimally in the extracted data — likely reserved for iOS-specific views or fallback contexts.

The fallback stack throughout is sans-serif, ensuring graceful degradation.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 48px | 600 | 1.206 (57.88px) | normal | Hero headline — the largest text on the page | | {typography.display-lg} | 32px | 700 | 1.2 (38.4px) | normal | Section headings (h2) — "Knowledge Packs" | | {typography.title-md} | 32px | 700 | 1.2 (38.4px) | normal | Equivalent to display-lg for major titles | | {typography.title-sm} | 19.5px | 600 | 0.769 (15px) | normal | Sub-headings (h3) — compact bold | | {typography.body-md} | 16px | 400 | 1.5 | normal | Body copy, paragraphs, descriptions | | {typography.body-sm} | 14px | 400 | 1.5 | normal | Secondary body text, smaller paragraphs | | {typography.caption} | 13.5px | 400 | 1.4 | normal | Statistics card labels, small UI text | | {typography.button} | 15.55px | 400 | 1.4 | normal | Button labels, tab labels, nav links | | {typography.label} | 15px | 400 | 1.4 | normal | Small labels, utility text |

Principles

The typography system trusts size and weight to carry hierarchy, not color variation within text blocks. Headlines are uniformly {colors.ink} (or {colors.body} on dark surfaces) — the only exception being the {colors.accent-lime} inline highlight on "Skills.", which is a deliberate brand moment, not a structural hierarchy signal.

Weight choices are bolder than typical editorial systems: the hero sits at 600, section headings at 700, and even sub-headings reach 600. This is an assertive type voice — IDIGITALPRENEUR speaks loudly and confidently. There is no use of weight 300 (Light) in the extracted rendered text, despite Graphik Light being available in the font stack.

Letter-spacing remains normal (0) throughout — no tracking adjustments detected. The system does not use uppercase transformations or italic for emphasis in the visible screenshot; hierarchy is carried purely through scale and weight.

Line heights are relatively tight for display type (1.2–1.206) and comfortable for body (1.5). The {typography.title-sm} role has an unusually compressed line-height of 0.769, suggesting it's used in single-line contexts where vertical space is at a premium.

Note on Font Substitutes

Graphik is a commercial typeface from Commercial Type. For open-source reimplementations, substitute with Plus Jakarta Sans (Google Fonts) which shares Graphik's geometric skeleton and supports weights 400–700. Define as:

--font-graphik: 'Plus Jakarta Sans', 'Graphik', sans-serif;

Inter is freely available on Google Fonts — no substitution needed. Use:

--font-inter: 'Inter', sans-serif;

Lato is also on Google Fonts — use directly:

--font-lato: 'Lato', sans-serif;

DM Sans is on Google Fonts:

--font-dm-sans: 'DM Sans', sans-serif;

If Graphik files are unavailable, the closest visual match that maintains the geometric-bold headline identity would be Space Grotesk (weights 500–700) or Outfit.

Layout

Spacing System

• Base unit: No strict multiple — the system uses a fine-grained incremental scale with 1–3px steps between tokens, suggesting manual optical tuning rather than a mathematical grid.
• Tokens:
  • {spacing.xxs} (8px) — Tight internal padding, icon gaps
  • {spacing.xs} (10px) — Button vertical padding baseline
  • {spacing.sm} (11px) — Small gaps between related elements
  • {spacing.md} (13px) — Common internal gap
  • {spacing.lg} (15px) — Standard comfortable padding
  • {spacing.xl} (16px) — Button horizontal padding, card internal
  • {spacing.xxl} (17px) — Frequently occurring gap (highest count in extraction)
  • {spacing.section} (20px) — Section vertical rhythm
  • {spacing.wide} (23px) — Generous gaps between major blocks
  • {spacing.wider} (26px) — Large section separators
  • {spacing.container} (40px) — Major section padding (hero, knowledge band)
• Section padding (vertical): {spacing.container} (40px) — used in {component.hero-band} and {component.knowledge-band}.
• Card internal padding: Varies by card type — {component.stat-card} uses {spacing.lg} (15px), course cards use {spacing.xl} (16px).
• Gutters: The header constrains to 1440px max-width with fluid container behavior below.

Grid & Container

• Max content width: 1440px for the header/navigation; sections below appear to use fluid full-width containers with inner padding.
• Density choice: Editorial-airy in the hero (large 48px type, floating decorative elements, ample whitespace around the headline block); shifts to marketplace-dense in the Knowledge Packs section (tabbed navigation, card grid, compact information density).
• Desktop grid behavior: The hero uses a single-column centered text layout with absolutely-positioned floating icons scattered around it (no strict grid). The Knowledge Packs section uses a tab-controlled card carousel (Swiper-based) with horizontal scrolling. The logo bar uses a flex-row centered layout for brand mark display.
• Hero column split: Not a traditional two-column split — the hero is primarily a centered text column (~640px estimated) with decorative floating elements positioned absolutely around it. The stats cards appear to the right and left as floating elements, not in a structured grid column.

Whitespace Philosophy

IDIGITALPRENEUR embraces generous whitespace in its hero zone — the 48px headline breathes with significant surrounding space, and the floating app icons are positioned with intentional negative space between them. However, the system compresses aggressively in the Knowledge Packs section, where dark backgrounds and tightly-packed card grids create information density. This dual-mode approach (airy marketing → dense product) is common in edtech platforms that must inspire and inform.

Header Architecture

┌─────────────────────────────────────────────────────────────────┐
│ [Logo]          Home   Packages ▾   Contact us   [Log in] [Reg] │
│ IDIGITALPRENEUR                                              │
│ THE DIGITAL ACADEMY                                           │
└─────────────────────────────────────────────────────────────────┘
                                 ↑ max-width: 1440px, fluid container

Navigation uses a flush-left logo, center-spaced menu links, flush-right auth buttons pattern. The "Packages" item has a dropdown chevron (▾). Background is {colors.signature-navy} with {colors.body} text.

Hero Section

┌──────────────────────────────────────────────────────────────────┐
│                                                                  │
│     [icon]              Learn Digital ┌──────┐ Build a           │
│                          Skills.      │lime  │ Life That Pays.   │
│  [icon]      [icon]                                     ┌──────┐  │
│               Learn what matters, apply what works,    │stat  │  │
│               and build income that grows with you.    │card  │  │
│                                                                  │
│                    [Log in]  [Explore Courses]        [icon]     │
│                                                              [st│
│                                                             at c│
│                                                            ard] │
└──────────────────────────────────────────────────────────────────┘
         ↑ floating icons (Figma, AI, Pr, etc.)        ↑ floating stat cards

The hero is characterized by scattered decorative elements — app icons (Figma, Adobe Illustrator, Premiere Pro, After Effects, DaVinci Resolve) and statistics cards ("60+ Courses Rolling", "100+ Experienced Trainers", "300k+ Training Students") that appear to float around the central text column. These elements likely have subtle CSS animations (floatX, floatY keyframes detected).

Knowledge Packs Section

┌──────────────────────────────────────────────────────────────────┐
│  Knowledge Packs                                    ┌──────────┐  │
│  Choose your path, build in-demand skills...       │Digital ◄│  │
│                                                    │Courses 4│  │
│                                                    └──────────┘  │
│  ┌─────────┐  ┌─────────┐  ┌─────────┐            ┌──────────┐  │
│  │ Course  │  │ Course  │  │ Course  │            │Business ►│  │
│  │ Card 1  │  │ Card 2  │  │ Card 3  │            │Packages 6│  │
│  │(forest) │  │(sage)   │  │(lime)   │            └──────────┘  │
│  └─────────┘  └─────────┘  └─────────┘                             │
└──────────────────────────────────────────────────────────────────┘
  ↑ Dark navy background (#141c25)    ↑ Pill tabs, active = white bg
                                       ↑ Horizontal scrollable card row

This section inverts to a dark surface with pill-shaped tab navigation (active tab has white background with forest-green text) and a horizontally-scrolling card carousel. Cards alternate between three background tones for visual variety.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat | {shadows.none} (no shadow) | Base surfaces: canvas, nav bar background, flat buttons | | 1 — Hairline | Border-only, no shadow | Tab containers, input fields, outlined buttons | | 2 — Soft drop | {shadows.md} (0 10.5px 18.75px rgba(0,0,0,0.2)) | Floating statistics cards, elevated course cards | | 3 — Inset press | {shadows.inset-sm} (inset 0 3px 3px) | Button pressed/active states | | 4 — Glow ring | {shadows.ring} (0 0 0 4px rgba(60,153,110,0.5)) | Focus ring on back-to-top button (green glow) | | 5 — Ambient glow | {shadows.glow} (white 0 0 15px 15px) | Decorative glow effect behind certain elements |

Philosophy: IDIGITALPRENEUR uses a layered-elevation approach for floating decorative elements (statistics cards, app icons) while keeping structural components (nav, buttons, tabs) relatively flat. Shadows are neutral/warm-toned — no cool blue tints. The most distinctive depth cue is the green glow ring ({shadows.ring}) used for focus indication, which ties back to the forest-green brand color rather than using a generic blue focus ring.

Decorative Depth

Beyond functional elevation, the site employs floating-element decoration: app icons and statistics cards are positioned with absolute or fixed positioning and animated with floatX, floatY, floatDiag1, and floatDiag2 keyframes, creating a gentle parallax-like drifting motion. These elements cast {shadows.md} shadows to separate them from the canvas. Additionally, the {colors.signature-teal-muted} semi-transparent overlay (rgba(58,108,165,0.5)) suggests some sections may use color-overlay depth for image/text layering.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 8.77px | Small inner elements, the "Skills." highlight badge | | {rounded.DEFAULT} | 19.5px | Course cards, general content cards | | {rounded.md} | 27.42px | Statistics cards, larger content containers | | {rounded.lg} | 75px | Tab navigation pills, fully rounded buttons | | {rounded.xl} | 92.11px | Extra-rounded elements (swiper nav buttons, special CTAs) | | {rounded.full} | 9999px | Perfect circles — back-to-top button, avatar placeholders |

Photography Geometry

No significant photography detected in the above-fold screenshot. The imagery system relies on vector-style app icons (Adobe Creative Cloud suite, Figma, DaVinci Resolve) rendered as flat, square icons with subtle {shadows.md} elevation. These maintain sharp corners (no rounding) to contrast with the UI's rounded language. If photography exists on lower sections, expect it to use {rounded.DEFAULT} (19.5px) to match course card geometry.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-cta-active}, {component.tab-inactive}); add hover styling at implementation time per your stack's conventions.

Buttons & CTAs

{component.top-nav} — The fixed/sticky navigation bar spanning the full viewport width. Background {colors.signature-navy}, text {colors.body}, height 64px. Contains the IDIGITALPRENEUR logo (left), navigation links (center), and authentication buttons (right). Uses {typography.body-sm} for all text elements. Has a subtly rounded bottom edge (from the screenshot's capsule shape).

{component.button-login} — The "Log in" button in the top navigation. Background {colors.canvas}, text {colors.ink}, rounded {rounded.xl} (92px — very pill-like), padding 10px 24px. Appears as a white filled button against the dark nav. Pairs with {component.button-register}.

{component.button-register} — The "Register Now" button in the top navigation. Transparent background with a visible border (appears as outlined style in screenshot), text {colors.body}, rounded {rounded.xl}, same padding as login. The outline creates a "ghost button" aesthetic.

{component.button-primary-cta} — The "Log in" button in the hero section (distinct from nav login). Background {colors.signature-forest} (deep teal-green), text {colors.on-forest} (white), rounded {rounded.lg} (75px — pill), padding 11px 24px. This is the primary conversion button in the marketing context. Uses {typography.button}.

{component.button-secondary-cta} — The "Explore Courses" button paired with the primary CTA. Background {colors.surface-soft} (warm off-white), text {colors.ink}, rounded {rounded.lg} (75px), padding 11px 24px. Functions as a softer alternative action. May have a subtle border not fully captured in extraction.

{component.back-to-top} — A circular fixed-position button (appears on scroll based on JS detection). Background #080808 (near-black), text {colors.body} (white up-arrow ↑), rounded {rounded.full} (perfect circle), size 44px. Features a distinctive green glow ring ({shadows.ring}) for focus state — this is a brand-consistent accessibility detail using {colors.signature-forest}-derived glow.

Cards & Containers

{component.hero-band} — The full-width hero section container. Background {colors.canvas} (white), text {colors.ink}, uses {typography.display-xl} for the headline. Padding {spacing.container} (40px) vertical with {spacing.wide} (23px) horizontal. Houses the headline, subhead, CTA pair, and serves as the positioning context for floating icons and stat cards.

{component.hero-headline} — The main "Learn Digital Skills. Build a Life That Pays." text. Transparent background, {colors.ink} text, {typography.display-xl} (48px/600 Inter). Multi-line, center-aligned in the hero context.

{component.hero-accent-text} — The inline "Skills." highlight within the headline. Background {colors.accent-lime} (bright lime-green), text {colors.ink}, same typography as parent headline, rounded {rounded.sm} (8.77px), padded horizontally 8px. This is a signature brand moment — the only use of lime background in the entire system.

{component.hero-subhead} — The descriptive paragraph below the headline ("Learn what matters, apply what works..."). Transparent background, {colors.muted} text color, {typography.body-md} (16px Lato). Provides secondary context without competing with the headline.

{component.stat-card} — Floating statistics cards (e.g., "100+ Experienced Trainers", "300k+ Training Students"). Background {colors.signature-forest} (deep teal), text {colors.on-forest} (white), {typography.body-sm} for numbers and labels, rounded {rounded.md} (27.42px), padding {spacing.lg} (15px). Elevated with {shadows.md}. Contains a small colored dot trio (red/yellow/green) at top-left mimicking macOS window controls — a playful decorative touch suggesting "window into results."

{component.stat-card-dark} — Variant stat card (e.g., "60+ Courses Rolling") with darker background {colors.signature-navy-deep} (#101c25). Same structure and padding as {component.stat-card}. The darker surface creates visual variety when multiple stat cards appear together.

{component.logo-bar} — The "Latest News & Media Coverage" section. Background {colors.canvas}, text {colors.surface-neutral} (gray for grayscale logos), {typography.caption} for the section label, padding {spacing.section} vertically. Contains a horizontal flex row of media logos (YourStory, mid-day, Zee News, Zee Business, BW Businessworld, Outlook) rendered in desaturated gray.

{component.knowledge-band} — The dark section containing "Knowledge Packs" heading and tabbed navigation. Background {colors.signature-navy-ink} (#141c25 — near-black navy), text {colors.body} (white), {typography.display-lg} (32px/700 Graphik) for the heading. Padding {spacing.container} (40px) vertical. Marks a major sectional transition from marketing to product browsing.

{component.tab-active} — The active tab pill (e.g., "Digital Courses 4"). Background {colors.canvas} (white), text {colors.signature-forest} (teal-green indicating selection), {typography.button}, rounded {rounded.lg} (75px — fully pill), padding 8px 16px. The white-on-dark inversion makes it pop visually.

{component.tab-inactive} — Inactive tab pill (e.g., "Business Packages 6"). Background #7f7f7f (medium gray), text #dcdcdc (light gray — deliberately low contrast to de-emphasize), same typography and rounding as active tab. The muted appearance clearly communicates non-selection.

{component.tab-container} — The flex row wrapping the tab pills. Transparent background, contains both {component.tab-active} and {component.tab-inactive} children. Rounded {rounded.lg} to match its children.

{component.course-card} — Primary course card variant in the Knowledge Packs carousel. Background {colors.signature-forest} (deep teal), text {colors.on-forest} (white), {typography.body-md}, rounded {rounded.DEFAULT} (19.5px), padding {spacing.xl} (16px). Likely contains course title, description, and pricing information.

{component.course-card-light} — Lighter course card variant. Background {colors.signature-sage} (pale sage green), text {colors.ink} (dark), same typography and rounding. Creates visual rhythm when alternated with forest cards in the carousel.

{component.course-card-lime} — Brightest course card variant. Background #d4ff7a (yellow-green, lighter than {colors.accent-lime}), text {colors.ink}, same structure. The third tone in the card rotation system.

Navigation & Input

{component.nav-dropdown} — The "Packages" dropdown trigger in the top nav. Background {colors.canvas}, text {colors.ink}, {typography.button}, rounded {rounded.sm} (slight rounding), padding 16px 20px. Has a collapsed/expanded state managed by Bootstrap accordion classes.

{component.search-input} — Search field (likely in a context not fully visible in screenshot). Background {colors.surface-dark} (dark blue-gray #202f3f), text #eaeaea (light gray), {typography.caption} (13.5px), rounded {rounded.lg} (75px — pill-shaped input), padding 12px 21.75px. Designed for dark-surface contexts.

{component.swiper-prev-btn} — Carousel navigation arrow (previous button). Background #003e2a (very dark forest), text rgba(16,16,16,0.3) (very faint — disabled state appearance), rounded {rounded.xl} (92px — circular), size 44px. Uses Swiper library classes for carousel control.

{component.floating-icon} — Decorative app icons (Figma, Adobe Illustrator, Premiere Pro, After Effects, DaVinci Resolve, Cinema 4D, etc.) scattered around the hero. Transparent background, currentColor for the icon color (inherits from parent or set explicitly), size ~48px. Rendered via Font Awesome. Positioned absolutely with CSS animations (floatX, floatY, floatDiag1, floatDiag2) creating gentle drifting motion. Each icon has {shadows.md} elevation to lift it from the canvas.

Do's and Don'ts

Do

• Do use {colors.accent-lime} (#bfff6e) sparingly — reserve it for the single "Skills." highlight or one equivalent brand moment per page. Overuse dilutes its impact.
• Do apply {rounded.lg} (75px) to all tab navigation and primary CTA buttons — the pill shape is a core identifier of this system's friendly aesthetic.
• Do use {typography.display-xl} (48px/600 Inter) for hero-level headlines only — this is the maximum volume the type scale permits.
• Do pair dark sections ({colors.signature-navy-ink}, {colors.signature-navy}) with {colors.body} (white) text for maximum contrast and authority.
• Do elevate floating decorative elements (stats cards, app icons) with {shadows.md} to create layered depth against the canvas.
• Do rotate course card backgrounds across {colors.signature-forest}, {colors.signature-sage}, and the lime variant (#d4ff7a) to create visual rhythm in carousels.
• Do use the green glow ring ({shadows.ring}) for focus states on dark-surface interactive elements — it's more brand-appropriate than generic blue.
• Do keep the Knowledge Packs section densely packed with information — the shift from airy hero to dense product browsing is intentional.
• Do render media logos in {colors.surface-neutral} (gray) to avoid competing with primary content.
• Do use {typography.button} (15.55px) for all button and tab labels — consistency in interactive text sizing aids usability.

Don't

• Don't substitute {colors.primary} (blue #0d6efd) for {colors.signature-forest} (teal #00513f) on CTAs — the blue is for links/utilities, the forest green is for conversion actions.
• Don't use font weights below 400 for body text — the system starts at regular weight and goes bold, never light/thin.
• Don't apply {rounded.full} (perfect circles) to anything other than the back-to-top button or actual avatars — other elements use the specific radius scale.
• Don't place {colors.accent-lime} text on light backgrounds — it fails accessibility; always use it as a background behind dark text (as seen in the "Skills." highlight).
• Don't add gradients to the hero canvas — the {colors.canvas} is pure white (#ffffff); depth comes from floating elements, not background treatments.
• Don't mix Graphik and Inter at the same hierarchical level — Graphik owns headlines (32px+), Inter owns the 48px hero statement, Lato owns everything else.
• Don't use {colors.signature-teal-muted} (semi-transparent blue) as a solid fill — it's specifically an overlay/mask color at 50% opacity.
• Don't ignore the fine-grained spacing tokens ({spacing.sm}=11px, {spacing.md}=13px, {spacing.xxl}=17px) — this system was manually tuned, not grid-generated.
• Don't make tab inactive states high-contrast — the {component.tab-inactive} deliberately uses gray-on-gray (#7f7f7f background, #dcdcdc text) to subordinate unselected options.
• Don't remove the macOS-style window control dots (red/yellow/green) from statistics cards — they're part of the card's visual identity in this design.

Motion & Animation

Transition Tokens

/* Standard interactive transition — used on buttons, links, inputs */
--transition-base: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;

/* Opacity fade — used for tooltip/show-hide reveals */
--transition-opacity: opacity 0.15s linear;

/* Linear continuous motion — used for infinite scroll/marquee effects */
--transition-linear: 0.5s linear;

/* Ease-in entrance — used for dropdown/expansion reveals */
--transition-ease-in: 0.5s ease-in;

/* Generic fallback */
--transition-all: all 0.3s;

/* Transform-only transition — for floating icon movement */
--transition-transform: transform 4s linear;
--transform-short: transform 0.3s;

Keyframe Animations

• floatY — Vertical bobbing motion for floating app icons and statistics cards (gentle up/down oscillation).
• floatX — Horizontal drifting for side-positioned floating elements (left/right oscillation).
• floatXReverse — Counter-directional horizontal drift for visual variety among multiple floating items.
• floatDiag1 — Diagonal movement (down-right or up-left trajectory) for dynamic floating paths.
• floatDiag2 — Opposite diagonal trajectory to floatDiag1.
• scroll — Continuous linear scroll for marquee/logo-ticker effects (used in the media coverage logo bar).
• slidesrighttoleft — Horizontal slide transition for carousel/card movement (right-to-left direction).
• slideslefttoright — Reverse horizontal slide (left-to-right direction).
• shadowUpDown — Subtle shadow animation for depth pulsing on elevated elements.
• blink — Attention-drawing blink (likely for notification badges or status indicators).
• myAnimation — Custom/generic animation (purpose unclear from name alone).
• tabView — Tab content switch transition (fade or slide for tab panel changes).
• dash — SVG stroke-dash animation (likely for loading indicators or progress rings).
• fa-beat, fa-bounce, fa-fade, fa-beat-fade, fa-flip, fa-shake, fa-spin — Font Awesome icon animation presets (available but usage depends on specific icon implementations).

Interaction Patterns

• Floating icon parallax: App icons and statistics cards drift along randomized float trajectories (floatX/floatY/floatDiag combinations), creating a "particles in suspension" effect around the hero text. Motion is continuous and subtle (4s duration, linear timing).
• Logo ticker scroll: The media coverage logo bar uses scroll or slidesrighttoleft keyframes for continuous horizontal marquee motion, showcasing press mentions.
• Tab content switch: Knowledge Packs tab transitions use tabView animation (likely a crossfade or horizontal slide) when switching between "Digital Courses" and "Business Packages".
• Button press state: Interactive buttons transition background/color/border over 150ms (--transition-base) with ease-in-out timing.
• Back-to-top reveal: The circular ↑ button fades in/out based on scroll position (JS-controlled) with opacity 0.15s linear transition.
• Focus ring expansion: The green glow ring ({shadows.ring}) on the back-to-top button likely animates its box-shadow expansion on focus.
• Carousel swipe: Swiper-powered card carousel responds to touch/drag with momentum-based deceleration (library-managed, not custom CSS).
• Dropdown expand: The "Packages" nav dropdown uses Bootstrap's accordion collapse with height/opacity transitions.

Imagery Style

• Icon-driven decoration: The primary visual interest in the hero zone comes from application icons (Figma, Adobe Illustrator, Adobe Premiere Pro, Adobe After Effects, DaVinci Resolve, Cinema 4D, Apple Color Picker) rather than photography or illustration. These represent the "digital tools" students will learn.
• Flat vector style: Icons are rendered in their native flat, branded styles (Adobe's rainbow "Ai"/"Pr" logos, Figma's purple spiral, etc.) — not customized to match the site's color palette. They maintain their authentic brand identities.
• Elevated presentation: Each icon floats with {shadows.md} (medium drop shadow), lifting it ~10-18px from the canvas. This creates a layered collage aesthetic as if tools are scattered on a designer's desk.
• Statistics as imagery: The "60+ Courses", "100+ Trainers", "300k+ Students" cards function as data-visualization elements with their dark backgrounds, white text, and playful window-control dots. They're as much visual decoration as informational.
• Grayscale logo treatment: Media coverage logos (YourStory, mid-day, Zee News, etc.) are desaturated to {colors.surface-neutral} gray, ensuring they provide credibility without visual competition.
• No photography detected in above-fold content — if photography exists below (student testimonials, instructor headshots, course thumbnails), it would likely follow a clean, professional style consistent with the edtech category.
• Color-as-image: The lime highlight ({colors.accent-lime}) on "Skills." functions as a graphic element — a rectangular color block interrupting text flow, acting as a visual focal point equivalent to a thumbnail or icon.
• Card surface variety: The three-tone card system (forest/sage/lime) creates color-block imagery where the background color of each card carries visual weight equal to any potential thumbnail image.

Icon System

• Library: Font Awesome 6.6.0 (loaded from CDN: cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css). This is the sole icon library detected.
• Specific icons observed:
  • Figma (custom/SVG — not FA, appears to be an image or custom SVG)
  • Adobe Illustrator ("Ai" — likely custom brand SVG)
  • Adobe Premiere Pro ("Pr" — custom brand SVG)
  • Adobe After Effects (custom brand SVG)
  • DaVinci Resolve (custom brand SVG)
  • Cinema 4D / C4D (custom brand SVG)
  • Apple/Fruit icon (custom)
  • Up arrow (↑) — for back-to-top button
  • Chevron down (▾) — for "Packages" dropdown
  • Left/right carousel arrows (‹ ›) — for Swiper navigation
  • Window control dots (● ● ●) — red/yellow/green decorative on stat cards
• Treatment: Fill-style for brand-application icons (solid colored shapes); stroke-style not observed. Font Awesome icons (arrows, chevrons) render in currentColor. Sizes vary: app icons ~48px, UI icons (arrows, chevrons) ~15–16px.
• Alignment: App icons are freely positioned (absolute/fixed) with no alignment to text baseline — they float independently. UI icons (nav chevrons, carousel arrows) align with adjacent text or sit centered in their button containers.
• Custom vs. library: The prominent app icons (Adobe suite, Figma) are not Font Awesome — they're custom SVGs or images loaded separately. FA is used only for functional UI icons (arrows, indicators).

Recommended Frontend Stack

- Framework:      Next.js or vanilla HTML/Bootstrap (current site appears Bootstrap-based)
- Styling:        Bootstrap 5 custom SCSS + custom CSS (non-Tailwind; evidence: 
                  accordion classes, swiper classes, Bootstrap naming conventions)
- Fonts:          Self-hosted Graphik (WOFF2/WOFF/TTF from local /fonts/ path);
                  Google Fonts: Inter, Lato, DM Sans (via fonts.googleapis.com)
- Animation:      Custom CSS keyframes + Swiper.js for carousel + 
                  Bootstrap's built-in collapse/accordion transitions
- Icons:          Font Awesome 6.6.0 (CDN) + custom SVGs for app-brand icons
- Component lib:  Bootstrap 5 base components + Swiper.js for carousels
- Build tool:     Unknown (could be Gulp/Webpack/plain CSS pipeline given 
                  the font-face declarations and asset paths)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 576px | Single-column hero text; floating icons hidden or stacked; nav collapses to hamburger; carousel becomes touch-swipe only; tab pills may stack or scroll horizontally | | Tablet | 576px – 992px | Two-column potential for hero (text + illustration); nav may show abbreviated links; statistics cards reposition to grid | | Desktop | 992px – 1440px | Full layout as shown in screenshot; all floating icons visible; nav fully expanded; carousel shows 2-3 cards | | Wide | > 1440px | Header maxes at 1440px centering; hero and sections may increase padding; floating icons spread wider |

Touch Targets

• {component.button-primary-cta} and {component.button-secondary-cta}: Padding 11px × 24px plus ~44px estimated height meets WCAG AAA (44×44px minimum) for touch targets.
• {component.tab-active} / {component.tab-inactive}: Padding 8px × 16px with ~40px estimated height — may fall slightly short of 44px AAA; consider increasing vertical padding to 12px on mobile.
• {component.back-to-top}: 44px × 44px (explicit size) — exactly meets AAA minimum.
• {component.search-input}: Padding 12px × 21.75px with ~40px height — borderline for AAA; recommend min-height: 44px.
• {component.login-button} (nav): Padding 10px × 24px — should meet 44px total height with line-height.

Collapsing Strategy

• Navigation: The top nav ({component.top-nav}) likely converts to a hamburger menu on mobile (evidence: phonenavigation class detected in DOM). The "Phone Navigation" section suggests a dedicated mobile nav overlay.
• Hero columns: The single-column centered hero text remains single-column on mobile; floating icons either hide (to reduce clutter) or condense into a small cluster below the text.
• Statistics cards: The three floating stat cards ({component.stat-card}, {component.stat-card-dark}) likely stack vertically or collapse into a horizontal scroll row beneath the hero text on mobile.
• Knowledge Packs tabs: Pill tabs ({component.tab-active}, {component.tab-inactive}) may switch to a segmented control style or become horizontally scrollable if both tabs don't fit the viewport width.
• Course card carousel: Remains a horizontal-swipe carousel on mobile (Swiper.js handles touch natively), showing 1 card at a time instead of 2-3.
• Logo bar: Media logos likely become a horizontally scrolling marquee on mobile (the scroll/slidesrighttoleft animations support this) or truncate to 3-4 visible logos with "see more" affordance.
• Back-to-top button: Remains fixed-position on mobile; 44px size is appropriate for thumb access.

Image Behavior

• App icons (floating): On mobile, these decorative elements should hide via display: none or visibility: hidden to reduce cognitive load and preserve performance. They're non-essential decorative content.
• Statistics cards: If they contain no images (text-only as observed), they reflow cleanly as stacked text blocks. If thumbnails are added in production, they should use aspect-ratio: 16/9 or object-fit: cover with {rounded.DEFAULT}.
• Media logos: SVG or high-resolution PNG; on mobile, ensure they don't exceed 120px width individually to allow 2-3 logos visible simultaneously in the marquee.
• Course cards: If course thumbnails are added, use aspect-ratio: 16/10 with border-radius: {rounded.DEFAULT} and object-fit: cover. The three-tone background system may overlay a semi-transparent tint on thumbnails to maintain brand consistency.

Iteration Guide

1. Build the landing page using Bootstrap 5 as the base framework (evidence: accordion-button, nav-link, container-fluid classes in extracted DOM). Add Swiper.js for the course carousel and Font Awesome 6.6.0 for icons.

2. Extract every token from the YAML frontmatter via {section.token} paths. Define CSS custom properties for all colors, spacing, radii, and shadows at the :root level. Example: --color-primary: {colors.primary}; --radius-lg: {rounded.lg};.

3. Implement the font stack by hosting Graphik locally (WOFF2 format preferred) and loading Inter, Lato, and DM Sans from Google Fonts. Define --font-graphik, --font-inter, --font-lato, --font-dm-sans custom properties mapping to the correct family stacks.

4. Build components in this order: (a) Top navigation with dark navy background and pill auth buttons, (b) Hero band with centered 48px Inter headline and lime "Skills." highlight, (c) Floating icon positioning system with floatX/floatY keyframe animations, (d) Statistics cards with forest/dark backgrounds and window-control dots, (e) Logo bar with grayscale marqueed logos, (f) Knowledge Packs dark section with pill tabs and Swiper carousel, (g) Course cards in three-tone rotation.

5. Add state variants per your stack's conventions: the spec documents Default and Active/Pressed for buttons/tabs/inputs. Add :hover states using {colors.primary-hover}, slight background darkening, or subtle transform translateY(-1px) lifts. Add :disabled states with 0.6 opacity.

6. Variants live as separate frontmatter entries. When creating button-primary-hover, add it as a new top-level key in components: — never nest it under button-primary. Follow this pattern for all interactive elements.

7. Run npx @google/design.md lint DESIGN.md after any edits. Watch for broken-ref (typos in token paths), contrast-ratio (especially lime-on-white or gray-on-gray tab inactive states), and orphaned-tokens (defined but never referenced in prose).

8. When in doubt about emphasis: Use size increases before weight increases (the system already uses bold weights liberally). Prefer {colors.signature-forest} for conversion CTAs over {colors.primary} blue. Use {rounded.lg} (75px) for anything "button-like" — the pill shape is a strong brand signal.

9. Font substitution note: If you cannot license Graphik, substitute Plus Jakarta Sans (variable font, weights 400–700) for the closest visual match. Update the fontFamily values in the typography: frontmatter accordingly. Test that 32px/700 weight headlines still convey authority in the substitute.

10. Preserve the floating-animation system: The floatX, floatY, floatDiag1, floatDiag2 keyframes are essential to the hero's playful character. Implement them with animation: floatY 6s ease-in-out infinite (with staggered delays per icon: 0s, 1.5s, 3s, 4.5s). Keep translation distances small (±8–12px) to avoid nausea-inducing motion.

Known Gaps

• Hover state styling is not documented (per the no-hover policy). The screenshot captures only default/visible states. Hover styling for buttons (background darken, shadow increase), tabs (subtle background lighten), and cards (shadow elevation boost) must be designed at implementation time.
• Loading skeletons / pending states are not visible in the static screenshot. Course cards loading, carousel content fetching, and form submission states require new design decisions.
• Form validation states beyond focus are partially inferred. The {colors.error} (#dc3545) token exists (Bootstrap default), but error message typography, input border error treatment, and success/checkmark states are not captured.
• Dashboard / authenticated-user surfaces are not visible. Post-login interfaces (course player, student dashboard, certificate pages) may introduce new components, darker themes, or data-table patterns not represented here.
• Mobile navigation interaction is implied by the phonenavigation DOM class but not visually documented. The hamburger menu structure, slide-out panel design, and mobile nav typography are unknown.
• Pixel-exact values for pastel surfaces (especially the lime course card at #d4ff7a and accent lime at #bfff6e) were sampled from the screenshot's rendered output. Minor variation (±2-3 hex values) may occur due to compression and anti-aliasing.
• Carousel pagination / progress indicators are not visible in the screenshot. Swiper.js typically adds dot-pagination or progress bars — their styling (color, size, active state) must be designed anew.
• Footer component is not visible in the above-fold screenshot. Footer structure, links columns, newsletter signup, and legal text are absent from this specification.
• Accessibility focus-visible outlines beyond the back-to-top button's green ring are not documented. A comprehensive focus-visible system (outline offset, color per interactive element type) should be implemented following WCAG 2.4.11.
• Dark mode is not addressed. The extensions.mode is "light" and no dark-mode color tokens or toggle mechanism were detected. Given the navy-heavy existing palette, a formal "dark mode" may be unnecessary or may simply invert canvas/ink assignments.