Coaching Sheba Design System

Overview

Coaching Sheba presents a dark-first SaaS product identity built for the Bengali coaching education market. The visual system lives in deep slate territory — {colors.surface-soft} (#0f172a) serves as the primary canvas, with lighter slate elevations ({colors.surface-strong}, {colors.surface-elevated}) creating layered depth without abandoning the nocturnal mood. Brand voltage arrives through a vibrant indigo-to-pink gradient that animates across CTAs, headline accents, and decorative orbital elements, injecting energy into an otherwise restrained palette.

The typographic voice is unapologetically bold — Poppins at weight 800 commands the hero headline ({typography.display-xl}), while body copy settles into a readable 18px/400 rhythm that feels spacious on dark ground. This contrast between extra-bold display weights and medium-weight UI text creates clear hierarchy without resorting to size alone. The system trusts color differentiation for secondary emphasis: section subtitles render in {colors.muted}, while accent headings shift toward {colors.primary-pale} lavender.

Shape language balances rounded approachability with technical precision. Cards employ {rounded.lg} (20px) radii with glassmorphism treatments — semi-transparent white backgrounds at 6% opacity paired with subtle white borders and backdrop-blur effects. Buttons default to {rounded.sm} (8px), feeling compact and actionable. The floating WhatsApp button uses {rounded.pill} for its perfectly circular form, making it instantly recognizable as a persistent utility.

Two sub-systems emerge: the hero dialect (gradient text, floating illustration, animated CTA pair, decorative gradient orbs) and the feature-grid dialect (glass cards in three-column layout with hover-scale interactions). The navigation operates as a third micro-system — fixed, blurred, with a subtle bottom border in {colors.hairline}.

Key Characteristics:

• Dark-mode-first canvas at {colors.surface-soft} with {colors.ink} white text for maximum contrast
• Gradient brand expression spanning pink → indigo → blue, applied to primary CTAs and headline accents
• Extra-bold Poppins headlines (weight 800) at 48px defining the hero voice
• Glassmorphism card pattern: {colors.glass} background, {rounded.lg} corners, hover shadow glow
• Expressive animation layer with float, fade-up, zoom-in, and gradient-shift keyframes
• Spacing anchored at 24px ({spacing.xl}) with generous 128px hero top-padding
• Indigo-based semantic tokens ({colors.primary}, {colors.primary-light}, {colors.primary-pale}) for interactive elements
• Tailwind CSS utility foundation enabling rapid component composition
• Bengali-language content requiring proper Unicode rendering in Poppins

Colors

Brand & Accent

• Primary Indigo ({colors.primary} — #6366f1): The core brand color used on solid primary buttons, link text, and focus ring accents. Carries the highest saturation in the palette.
• Primary Light ({colors.primary-light} — #818cf8): Secondary brand tone for outlined button borders, nav link hovers, and sub-heading accents. Softer than primary but clearly within the indigo family.
• Primary Pale ({colors.primary-pale} — #a5b4fc): Tertiary brand shade for muted accent text, h4-style headings, and low-emphasis branding moments. Approaches lavender.
• Gradient Start Pink ({colors.accent-gradient-start} — #ec4899): Left terminus of the hero CTA gradient, introducing warm voltage into the otherwise cool palette.
• Gradient Mid Indigo ({colors.gradient-mid} — #6366f1): Center point of gradient transitions, aligning with {colors.primary}.
• Gradient End Blue ({colors.gradient-end} — #3b82f6): Right terminus of gradients, pulling toward trustworthy blue.
• Signature Gold ({colors.signature-gold} — #facc15): Accent color for highlight elements like emoji bulbs and warning states. High-visibility yellow against dark grounds.

Surface

• Canvas ({colors.canvas} — #ffffff): Reserved for inverted-context elements (login screens, modals). Not the primary page background in this dark theme.
• Surface Soft ({colors.surface-soft} — #0f172a): The dominant page background — deep slate-900. Used on hero band, body sections, and nav backdrop.
• Surface Strong ({colors.surface-strong} — #1e293b): Elevated surface for footer bands and card-adjacent areas. Slightly lighter than soft.
• Surface Elevated ({colors.surface-elevated — #1f2937): Gray-800 tier for dropdowns or secondary panels when needed.
• Surface Deep ({colors.surface-deep} — #020617): Near-black slate-950 for maximum contrast zones or overlay backdrops.
• Glass ({colors.glass} — rgba(255, 255, 255, 0.06)): Semi-transparent white at 6% opacity. The signature card background creating glassmorphism effect.
• Glass Border ({colors.glass-border} — rgba(255, 255, 255, 0.1)): Subtle white border at 10% opacity outlining glass surfaces.

Text

• Ink ({colors.ink} — #ffffff): Pure white for headlines, primary button labels, and highest-emphasis text. Must pass AAA on dark surfaces.
• Body ({colors.body} — #e2e8f0): Slate-200 for body paragraphs and extended reading content. Softer than pure white to reduce eye strain.
• Muted ({colors.muted} — #9ca3af): Gray-400 for captions, nav links, placeholder text, and secondary information.
• Muted Strong ({colors.muted-strong} — #d1d5db): Gray-300 for hover states on muted elements and close buttons.
• On Primary ({colors.on-primary} — #ffffff): White text rendered atop colored button backgrounds (gradient, solid indigo).
• On Dark ({colors.on-dark} — #ffffff): White text on dark non-primary surfaces (WhatsApp button).
• On Surface ({colors.on-surface} — #ffffff): Default light text for glass-card content.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(255, 255, 255, 0.08)): Barely-visible white divider at 8% opacity. Used on nav bottom border and subtle separators.
• Border Subtle ({colors.border-subtle} — rgba(129, 140, 248, 0.7)): Indigo-tinted border at 70% opacity for the Login outline button, signaling interactivity.
• Border Strong ({colors.border-strong} — rgba(255, 255, 255, 0.15)): More visible white border at 15% opacity for emphasized outlines.

Semantic

• Success ({colors.success} — #34d399): Emerald-400 for positive status indicators.
• Success Background ({colors.success-bg} — rgba(52, 211, 153, 0.1)): Success tinted background at 10% for badges and status chips.
• Success Strong ({colors.success-strong} — rgba(22, 163, 74, 0.2)): Deeper green tint for elevated success surfaces.
• Error ({colors.error} — #ef4444): Red-500 for destructive actions and error states.
• Warning ({colors.warning} — #facc15): Yellow-400 matching {colors.signature-gold} for caution indicators.
• Info ({colors.info} — #6366f1): Aligned with primary indigo for informational callouts.
• Link ({colors.link} — #818cf8): Indigo-400 for inline links, matching {colors.primary-light}.
• Link Active ({colors.link-active} — #a5b4fc): Indigo-300 for visited or active link states.
• WhatsApp Green ({colors.whatsapp-green} — #25d366): Official WhatsApp brand green for the floating action button.

Typography

Font Family

The entire system runs on Poppins, a geometric sans-serif designed by Indian Type Foundry with excellent Bengali/Devanagari support — critical for this product's target market. The font stack declares "Poppins, sans-serif", falling back to system sans-serifs if Google Fonts fails to load. Poppins' geometric construction (circular bowls, monoline strokes) pairs naturally with the system's rounded corner vocabulary and gradient brand expressions. A single font family serves all roles from display to caption, with weight doing the heavy lifting of hierarchy.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 48px | 800 | 48px | 1.2px | Hero H1 headline (Bengali) | | {typography.display-lg} | 48px | 800 | 48px | 1.2px | Alternate display (identical spec) | | {typography.title-md} | 30px | 700 | 36px | 0 | Section headings (H2), feature grid titles | | {typography.title-sm} | 20px | 700 | 28px | 0 | Card titles, H3 headings in accent color | | {typography.title-sm-accent} | 20px | 700 | 28px | 0 | H4 variant with lighter purple | | {typography.body-md} | 18px | 400 | 28px | 0 | Body paragraphs, descriptions | | {typography.body-sm} | 14px | 500 | ~1.4 | 0 | Small labels, metadata | | {typography.caption} | 14px | 400 | 1.5 | 0 | Section subtitles, help text | | {typography.button} | 14px | 600 | 1.25 | 0 | Nav buttons, small CTAs | | {typography.button-lg} | 18px | 500 | ~1.35 | 0 | Hero CTA buttons | | {typography.nav-link} | 14px | 500 | 1.4 | 0 | Navigation menu items |

Principles

The typography system's defining move is weight-as-hierarchy. While size differentiates display (48px) from title (30px) from body (18px), the jump from 400 (body) to 700–800 (headings) creates the strongest perceptual separation. The 48px display role uses weight 800 (extrabold) — a deliberate choice that signals confidence and modernity in the SaaS category. Notably, letter-spacing tightens slightly to 1.2px at display size to prevent the bold glyphs from feeling too loose.

Color carries significant hierarchical weight alongside type. Headlines render in {colors.ink} (pure white), body in {colors.body} (slate-200), and auxiliary text in {colors.muted} (gray-400). Accent headings (H3/H4) shift into the {colors.primary-pale} / {colors.primary-light} range, creating a second axis of emphasis through hue rather than size alone. The gradient-text class applies a linear gradient from pink through indigo to blue on select headings, making them focal points without increasing their physical size.

Uppercase is absent from this system — Bengali script has no case, and even English UI elements remain sentence-case. Italics are not observed in the extracted styles. The system trusts size, weight, color, and position to create clarity.

Note on Font Substitutes

Poppins is available via Google Fonts at https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap. No substitution is needed for implementation — load this single URL and reference "Poppins, sans-serif" throughout. For offline or restricted environments, Nunito (Google Fonts) offers similar geometric proportions with good Bengali coverage, though x-height and numeral designs differ. Define CSS variables --font-sans: 'Poppins', sans-serif; for easy swapping.

Layout

Spacing System

• Base unit: 4px ({spacing.xxs}), with 8px ({spacing.xs}) as the practical operational increment.
• Tokens: {spacing.xxs} (4px) for micro-gaps; {spacing.xs} (8px) for icon-text gaps; {spacing.sm} (12px) for compact internal padding; {spacing.md} (16px) for standard padding; {spacing.lg} (20px) for button padding and card internal spacing; {spacing.xl} (24px) for element stacking — the most frequently occurring value; {spacing.xx l} (28px) for paragraph spacing; {spacing.section-xl} (32px) for section-internal margins; {spacing.section} (80px) for vertical section breaks; {spacing.hero-top} (128px) for heroic top clearance accounting for fixed nav.
• Section padding (vertical): {spacing.section} (80px) — used between major content bands (hero → features → footer).
• Card internal padding: {spacing.lg} (20px) horizontal and vertical on {component.glass-card} and {component.feature-card}, with responsive bump to 24px at sm+ breakpoints.
• Gutters: Container uses px-6 (24px) horizontal padding internally; grid gaps run {spacing.xl} (24px) between feature cards, scaling to 32px at md+.

Grid & Container

• Max content width: 1440px ({spacing.container-max}) — explicitly set on <section> and <header> elements via inline width.
• Density choice: editorial-heroic — the hero uses a 2-column grid (text left, illustration right) with generous whitespace; the features section uses a 3-column card grid that collapses responsively.
• Desktop grid behavior: .grid-cols-2 on hero (50/50 split), .grid-cols-3 on feature grid, .max-w-6xl (1152px) inner constraint for content vs .max-w-7xl (1280px) for wider sections.
• Hero column split: Text column contains headline + paragraph + CTA pair stacked vertically with space-y-6 (24px); illustration column holds the character illustration centered with floating UI chrome elements.

Whitespace Philosophy

This is an airy dark-mode system. The deep slate background absorbs light, making whitespace feel expansive rather than empty. Vertical rhythm is generous — 128px top padding on hero, 80px between sections, 28px between body paragraphs. Horizontal breathing room comes from the 1440px max-width constraining content on wide viewports. The glassmorphism cards embrace negative space internally with 20-24px padding, preventing the dark-ground aesthetic from feeling cramped.

Header Architecture

┌─────────────────────────────────────────────────────────────────┐
│ [Logo]     Home  Features  How It Works  Pricing  ...   [Demo] [Login] │
│             ←—————— nav links (gap-6 / 24px) ————→        ↑ pills      │
└─────────────────────────────────────────────────────────────────┘
  ↑ fixed, z-50, backdrop-blur-xl, bg-slate-900/70, border-b     │
  └────────────────── max-w-7xl, px-6, flex, justify-between ─────┘

Navigation is fixed-position with backdrop-blur-xl and a semi-transparent {colors.surface-soft} background at 70% opacity. A subtle {colors.hairline} bottom border separates it from scrolling content. Logo sits flush-left, navigation links center (hidden below md: breakpoint), and CTA buttons (Request Demo + Login) sit flush-right. Mobile replaces the nav with a hamburger toggle.

Hero Section

┌─────────────────────────────────────────────────────────────────┐
│  ┌─────────────────────┬───────────────────────────────────┐   │
│  │ 💡 স্মার্ট কোচিং... │      [Illustration: 3 characters   │   │
│  │                     │       with floating UI elements]    │   │
│  │ Body paragraph      │       ┌───┐  ┌──────┐  ┌─────┐    │   │
│  │ in muted gray       │       │📞│  │📱💬│  │✉️   │    │   │
│  │                     │       └───┘  └──────┘  └─────┘    │   │
│  │ [🚀 Request Demo] [📲 Install App]                       │   │
│  └─────────────────────┴───────────────────────────────────┘   │
│  ○ gradient orb (top-left)                    ○ gradient orb   │
│                                               (bottom-right)   │
└─────────────────────────────────────────────────────────────────┘
  ↑ bg-gradient-to-b from-slate-900/60 to-slate-700              │
  ↑ pt-32 pb-20, overflow-hidden, relative                        │
  └──────────────── max-w-6xl, grid-cols-2, gap-10 ───────────────┘

The hero employs a two-column asymmetric layout with the text block left-aligned (centered on mobile) and illustration right-aligned. Two large decorative gradient orbs (360×360px, rounded-full) positioned absolutely outside the content area create ambient color bleed — one top-left (pink→indigo), one bottom-right (indigo→blue). These orbs use bg-gradient-to-r with the brand gradient tokens and sit behind content at lower z-index.

Features Grid Section

┌─────────────────────────────────────────────────────────────────┐
│           আমাদের বৈশিষ্ট্যসমূহ                        │
│     subtitle text in muted                                  │
│                                                              │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐                   │
│  │ Glass    │  │ Glass    │  │ Glass    │                   │
│  │ Card 1   │  │ Card 2   │  │ Card 3   │                   │
│  │          │  │          │  │          │                   │
│  └──────────┘  └──────────┘  └──────────┘                   │
│                                                              │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐                   │
│  │ Glass    │  │ Glass    │  │ Glass    │                   │
│  │ Card 4   │  │ Card 5   │  │ Card 6   │                   │
│  └──────────┘  └──────────┘  └──────────┘                   │
└─────────────────────────────────────────────────────────────────┘
  ↑ bg-gradient-to-b from-slate-900/60 to-slate-800            │
  ↑ grid-cols-1 sm:grid-cols-2 lg:grid-cols-3, gap-6 md:gap-8  │

Feature cards use a responsive 1→2→3 column grid with glassmorphism treatment. Each card gets hover:scale-[1.03] transform and a custom indigo glow shadow on hover ({extensions.shadows.glow}). Cards contain icon, title, and description text stacked vertically.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, {colors.surface-soft} background | Page body, hero band base | | 1 — Hairline | {colors.hairline} bottom border | Fixed navigation bar | | 2 — Glass | {colors.glass} bg + {colors.glass-border} + backdrop-blur | Feature cards, glass panels | | 3 — Soft drop | {extensions.shadows.md} (0 4px 6px) | Standard buttons, input fields | | 4 — Elevated | {extensions.shadows.lg} (0 10px 15px) | Dropdowns, primary CTA buttons | | 5 — Modal | {extensions.shadows.xl} (0 20px 25px) | Modals, mega-dropdowns | | Glow | Custom {extensions.shadows.glow} (0 0 25px indigo) | Hover state on glass cards | | Focus | {extensions.shadows.focus-ring} (blue ring + indigo spread) | Keyboard focus rings |

The elevation philosophy is layered-dark: rather than lightening surfaces to indicate height (as in Material Design's light-mode z-axis), this system adds shadow depth and glass translucency against the constant dark canvas. The glassmorphism cards represent the signature elevation technique — they feel "above" the background through blur and transparency without changing their base color temperature.

Shadows are cool-toned and subtle, using black at low opacity (5–10%) to avoid muddy brown casts on the slate background. The glow shadow breaks this rule intentionally, injecting indigo color into the hover state to create a neon-edge effect that reinforces brand presence.

Decorative Depth

Beyond functional elevation, the system employs gradient orbs as decorative depth elements. Two 360px circular gradients (pink→indigo and indigo→blue) sit at extreme corners of the hero, bleeding color into the background gradient (from-slate-900/60 to-slate-700). These are purely atmospheric — they establish brand presence without competing with foreground content. The hero background itself is a vertical gradient transitioning from transparent-dark to slightly lighter slate, creating a subtle "floor" effect beneath the illustration.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 8px | Buttons (primary, secondary, outline), small interactive elements | | {rounded.DEFAULT} | 12px | Default radius (general purpose) | | {rounded.md} | 16px | Icon circles, badge containers, medium panels | | {rounded.lg} | 20px | Feature cards, glass panels, large content containers | | {rounded.xl} | 24px | Large cards, modals, image containers | | {rounded.pill} | 9999px | WhatsApp FAB, badges, tag pills | | {rounded.full} | 9999px | Decorative orbs, avatars, circular elements |

The radius vocabulary is curated and compact — seven values covering sharp (8px) through fully round. The system avoids sub-4px radii entirely, maintaining a friendly, approachable feel even on small buttons. The dominance of {rounded.lg} (20px) on cards gives the interface its characteristic "soft UI" personality against the dark ground.

Photography Geometry

The site employs flat vector illustration rather than photography. The hero illustration depicts three stylized characters in a browser-chrome frame, rendered in a friendly flat style with simple shading. Floating UI elements (phone icon, message bubble, email card, globe card) surround the characters at slight rotations, suggesting interactivity. All illustrative elements use {rounded.md} (16px) or {rounded.lg} (20px) corner rounding. No photographic imagery was detected in the above-fold content.

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-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary-gradient} — The flagship call-to-action appearing in the navigation bar ("🎬 Request Demo"). Background uses a linear gradient from {colors.accent-gradient-start} (pink) through {colors.gradient-mid} (indigo) to {colors.gradient-end} (blue). Text renders in {colors.on-primary} white at {typography.button} (14px/600). Rounded {rounded.sm} (8px) with padding 8px 20px. Carries {extensions.shadows.lg} elevation and an animate-float keyframe for gentle vertical bobbing. On hover (inferred from classes), scales to 1.05 with enhanced shadow.

{component.button-secondary-outline} — The "🔐 Login" button in the nav. Transparent background with {colors.border-subtle} (indigo-40% border) at 1px. Text in {colors.primary-pale} lavender at {typography.button} weight. Same {rounded.sm} and padding as primary. Uses {extensions.shadows.md} elevation. Hover state (per classes) shifts text to white and background to indigo-30%.

{component.button-primary-solid} — The hero's main conversion button ("🚀 Request Demo"). Solid {colors.primary}-adjacent background at #4f46e5 (slightly darker than {colors.primary}). Text in white at {typography.button-lg} (18px/500) — noticeably larger than nav buttons. Padding 12px 32px for more click area. Rounded {rounded.sm}. Includes hover:scale-105 transform and transition-all. Shadow at {extensions.shadows.md} level.

{component.button-whatsapp} — Persistent floating action button in the bottom-right viewport corner. Circular ({rounded.pill} / 56×56px) with {colors.whatsapp-green} background. Contains the WhatsApp icon in white. Uses {extensions.shadows.whatsapp} for high-contrast lift off the dark page. Fixed positioning with z-index elevation ensuring it stays above all content.

{component.close-button} — Dismissive action (observed in modal/context). Transparent background, {colors.muted} text (gray-400), 24×24px size. Hover shifts to red-400 per class annotation. No border, no radius — minimal footprint.

{component.mobile-menu-button} — Hamburger toggle for mobile navigation. Transparent background, {colors.muted-strong} text (gray-300), 24×24px size. Reveals/hides mobile nav panel.

Cards & Containers

{component.glass-card} — The foundational surface component for feature displays. Background {colors.glass} (white at 6% opacity) with implicit backdrop-blur (class name .glass includes this). Border of {colors.glass-border} (white at 10%). Text color {colors.ink} white. Typography {typography.body-md} for content. Rounded {rounded.lg} (20px). Padding 20px 24px (responsive to sm:p-6). On hover: scale-[1.03] transform plus {extensions.shadows.glow} (indigo shadow bloom) creating a neon-edge effect. Transition duration 300ms (duration-300).

{component.feature-card} — Specialized glass card variant for the features grid. Identical specs to {component.glass-card} but semantically named for the three-column feature layout. Each card typically contains an {component.icon-circle}, title in {typography.title-sm}, and description body text.

{component.icon-circle} — Icon container sitting atop feature cards. {colors.glass} background, {colors.primary-light} (indigo-300) icon color, {rounded.md} (16px), 48×48px fixed size. Houses Lucide icons representing each feature.

{component.badge} — Status indicator chip. {colors.success-bg} (emerald-10%) background with {colors.success} text. Fully rounded ({rounded.pill}). Compact padding 4px 12px. Used for "active", "available", or version tags.

Navigation

{component.top-nav} — Fixed header bar spanning full viewport width. Background {colors.surface-soft} at 70% opacity with backdrop-blur-xl for frosted-glass effect over scrolling content. Bottom border {colors.hairline}. Height approximately 72px (py-4 + content). Text color {colors.muted} for links. Contains logo, nav links, and CTA buttons in a flex row with justify-between.

{component.nav-link} — Individual navigation menu item. Transparent background, {colors.muted} text at {typography.nav-link} (14px/500). Padding 8px 0 vertically with gap-6 (24px) horizontal spacing between items. Hidden below md: breakpoint; replaced by mobile menu.

Bands & Sections

{component.hero-band} — The primary above-fold section. Background {colors.surface-soft} with a vertical gradient overlay (from-slate-900/60 to-slate-700) adding subtle lightening toward the bottom. Text {colors.ink} white. Typography {typography.display-xl} for the headline. Generous padding: 128px top (clearing fixed nav), 80px bottom. Contains the two-column grid with decorative gradient orbs as children.

{component.footer-band} — Page footer surface. Background {colors.surface-strong} (slate-800) — slightly lighter than hero to suggest "grounding." Text {colors.muted} gray-400 at {typography.body-sm}. Padding {spacing.xl} (24px) vertical. Contains copyright, links, and utility information.

{component.section-header} — Reusable section title element. Transparent background, {colors.ink} white text at {typography.title-md} (30px/700). Supports gradient-text variant where applicable (features section uses .gradient-text class for pink→indigo→blue fill). Padding-bottom {spacing.lg} (20px) separating from content below.

{component.section-subheader} — Descriptive text beneath section headers. {colors.muted} gray-400 at {typography.caption} (14px/400). Provides context for the section below.

Decorative

{component.decorative-orb} — Ambient gradient circle positioned absolutely in hero corners. Transparent logical background (the gradient IS the visual). Fully rounded ({rounded.full}). Size 360×360px. Uses bg-gradient-to-r with brand gradient colors. Low z-index placing it behind content. Creates atmospheric color bleed without competing for attention.

Do's and Don'ts

Do

• Do use {typography.display-xl} at weight 800 for all hero headlines — the extra-bold weight is the system's primary voice signal.
• Do apply the pink→indigo→blue gradient to primary CTAs using {colors.accent-gradient-start}, {colors.gradient-mid}, and {colors.gradient-end} — this tricolor gradient is the brand's visual signature.
• Do use {colors.glass} backgrounds with {rounded.lg} corners for all content cards — glassmorphism is the standard surface treatment, not solid fills.
• Do maintain {spacing.xl} (24px) as your baseline stacking unit between related elements — it's the most frequent spacing value for a reason.
• Do render body text in {colors.body} (slate-200) rather than pure white — the softer gray reduces eye strain during extended reading on dark backgrounds.
• Do add hover:scale-[1.03] and {extensions.shadows.glow} to glass cards on hover — the subtle lift + indigo bloom is the expected interaction response.
• Do keep the fixed nav at {colors.surface-soft} with 70% opacity and backdrop-blur-xl — this frosted-glass treatment is essential for spatial orientation while scrolling.
• Do use {rounded.sm} (8px) for all button variants — consistency here keeps the interactive vocabulary compact and recognizable.
• Do include the decorative gradient orbs in hero implementations — they provide essential brand atmosphere even though they're non-interactive.
• Do set max-width to {spacing.container-max} (1440px) on major sections — this prevents line lengths from becoming unreadable on ultra-wide displays.

Don't

• Don't use {colors.canvas} (white) as a page background in dark mode — it's reserved only for inverted contexts like login modals; the primary canvas is {colors.surface-soft}.
• Don't apply weight greater than 600 to body text — {typography.body-md} at weight 400 is correct; bold body text fights the headline hierarchy.
• Don't substitute {colors.link} (indigo-400) for {colors.primary} (indigo-500) on buttons — the lighter shade is specifically for text links and outline borders.
• Don't use border-radius below {rounded.sm} (8px) on any element — the system's minimum is 8px, maintaining approachability even on small controls.
• Don't place white text directly on {colors.surface-deep} (near-black) without testing contrast for smaller sizes — reserve that surface for large display text only.
• Don't remove the overflow-hidden from the hero band — the decorative orbs extend beyond the content area and must be clipped.
• Don't use solid shadows with warm tints — all shadows in this system are cool black at low opacity (5–10%) to complement the slate palette.
• Don't stack more than two elevation levels in a single view — the dark background makes excessive layering visually noisy; prefer glassmorphism over shadow stacking.
• Don't apply gradient text to more than one heading per section — the effect loses impact when overused; reserve it for the primary {component.section-header}.
• Don't implement hover states without transform — the system expects scale changes (1.03–1.05x) on interactive elements as part of the feedback loop.

Motion & Animation

Transition Tokens

--transition-base: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-colors: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), text-decoration-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transform-only: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--card-hover: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--scroll-reveal: transform 0.4s, filter 0.4s;
--slow-fade: 0.5s cubic-bezier(0, 0, 0.2, 1);
--very-slow: 0.8s ease;

The extracted CSS reveals a comprehensive transition system centered on 150ms with the cubic-bezier(0.4, 0, 0.2, 1) ease (Tailwind's standard ease-in-out). Color, background, border, and shadow properties share this timing. Transform-only transitions (scale, translate) use the same curve. Card hover states extend to 300ms for the combined scale + shadow glow effect. Scroll-triggered animations use 400ms for smoother perceived motion. The slow-fade (500ms) and very-slow (800ms) tokens likely apply to entrance animations and decorative orb movement.

Keyframe Animations

• fade-up — Core scroll-triggered entrance: opacity 0→1 with translateY(30px)→0. Applied to hero text blocks and feature cards with staggered delays (delay-1, show class triggers via IntersectionObserver).
• float / float-slow / float-fast — Gentle vertical oscillation for the nav CTA button ("🎬 Request Demo") and potentially decorative elements. Creates "alive" feeling on static elements.
• zoom-in / zoomIn — Scale from 0.9/0.95 to 1.0 with opacity fade for card entrances.
• fadeIn / fade-in-up — Opacity-only or opacity+translate variants for subtle reveals.
• gradientShift / gradientMove / gradientFlow — Background-position animation on gradient elements (likely the gradient orbs or gradient-text headings), creating a shifting-color effect.
• spin — Standard rotation (likely for loading states).
• ping — Ripple/pulse effect (notification dots).
• pulse — Scale pulse (attention-drawing).
• bounce / bounce-slow — Vertical bounce for playful moments.
• typing — Typewriter cursor effect (possibly for a demo simulation).
• slide — Horizontal or vertical translation for panel reveals.
• ribbonPulseRed / ribbonPulseGold — Colored pulse animations for promotional ribbons or badges.

Interaction Patterns

• Scroll-triggered fade-up: Elements with .fade-up class start invisible and translated downward; a JavaScript IntersectionObserver (detected in <script> block) adds .show class triggering the animation when scrolled into view. Staggered delays (delay-1) sequence child elements.
• Hover scale on cards: Glass cards grow to 1.03× scale with an indigo glow shadow appearing, creating a "lift + illuminate" effect that feels premium.
• Hover scale on buttons: Primary buttons scale to 1.05× on hover with shadow enhancement — more aggressive than cards to signal primary action.
• Floating CTA: The nav "Request Demo" button continuously animates with animate-float, drawing attention without being intrusive.
• Focus rings: Interactive elements gain a blue/indigo focus ring ({extensions.shadows.focus-ring}) on keyboard navigation, critical for accessibility on dark backgrounds.
• Nav backdrop blur: The fixed header gains increased frosted-glass intensity (or simply reveals it) as user scrolls, maintaining context.
• Gradient orb ambient motion: Decorative hero orbs may exhibit slow gradient-position animation (gradientMove) for subtle living-background effect.
• WhatsApp FAB: The green floating button likely has a subtle pulse or bounce to encourage engagement.

Imagery Style

• Illustration style: Flat vector with friendly, approachable character design. Three diverse figures (two women, one man) in casual clothing stand within a browser-chrome frame, suggesting the product is web-based software.
• Color palette of illustrations: Warm, saturated skin tones and clothing colors (coral/terracotta shirt, cyan shirt, yellow top) that pop against the dark UI background. Characters have minimal shading — mostly flat fills with subtle shadow beneath feet.
• UI chrome in illustrations: Floating interface elements (phone icon in teal square, yellow notification bar, email card in white, globe card in coral) surround the characters, suggesting features. These mini-UI elements use {rounded.md} to {rounded.lg} corners matching the real component system.
• No photography detected: The entire above-fold relies on vector art and CSS-rendered elements (gradients, glass cards, orbs). This keeps file sizes small and ensures crisp rendering at any density.
• Emoji integration: Real Unicode emojis (💡, 🎬, 🔐, 🚀, 📲) are used inline with text, particularly in buttons and the headline bulb icon. This adds warmth and cultural accessibility for the Bengali audience.
• Background imagery: Purely CSS-driven — linear gradients, radial gradient orbs, and glassmorphism panels. No raster backgrounds.
• Iconography within illustrations: Simplified representations of phone, messaging, email, and web — echoing the Lucide icons used elsewhere in the UI.

Icon System

• Library: Lucide (detected via Tailwind icon class patterns and iconLibs analysis). Lucide provides the clean, consistent line-weight iconography visible throughout.
• Specific icons observed:
  • Phone/handset icon (teal square, near character's head)
  • Message/chat bubble (yellow, above character)
  • Email/envelope (white card, right side)
  • Globe/web (coral card, left side)
  • Menu/hamburger (mobile nav toggle)
  • Close/X (dismissive action)
  • Rocket (Request Demo button prefix)
  • Film clapperboard (nav Demo button prefix)
  • Lock (Login button prefix)
  • WhatsApp logo (FAB)
  • Light bulb (headline emoji prefix)
• Treatment: Icons use currentColor inheritance, rendering in the text color of their parent. Stroke-based (Lucide's default) with consistent 1.5–2px stroke weight. Some icons sit inside colored square containers ({component.icon-circle} style) with contrasting icon colors (teal icon on teal-bg square, etc.).
• Size alignment: Standalone icons (nav, buttons) render at 16–20px matching adjacent text height. Card icons reside in 48×48px {component.icon-circle} containers with the icon itself at 24px. Illustration chrome icons are larger (~40–48px) as part of the artwork.

Recommended Frontend Stack

- Framework:      Next.js 14+ (App Router) or Remix — SSR-friendly for Bengali SEO
- Styling:        Tailwind CSS v3.4+ (utility-first, confirmed by class patterns)
- Fonts:          Google Fonts: Poppins wght@400;500;600;700;800 (single URL import)
- Animation:      Tailwind-built-in animations + custom keyframes (fadeUp, float, gradientShift)
- Icons:          Lucide React (@lucide/react) or inline SVG
- Component lib:  Custom components (no shadcn/Radix detected — hand-rolled with Tailwind)
- State:         React useState / useIntersectionObserver for scroll animations
- i18n:          No framework needed (single-language Bengali), but ensure UTF-8 charset

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px (default) | Single-column layout, hamburger nav, stacked hero, full-width cards | | Tablet (sm) | ≥ 640px | 2-column feature grid, card padding increases to 24px | | Desktop (md) | ≥ 768px | Full horizontal nav appears, hero splits to 2-column grid, 3-col feature grid | | Wide (lg) | ≥ 1024px | Max container widths engage, larger gaps (gap-8), orb sizes increase to 360px | | Ultra-wide (xl) | ≥ 1280px | 1440px container max-width constrains content, generous side gutters |

Touch Targets

• {component.button-primary-gradient} (nav CTA): ~36px height × ~120px width (padding 8px 20px + text) — meets WCAG AA 44×44px minimum.
• {component.button-primary-solid} (hero CTA): ~48px height × ~176px width (padding 12px 32px + 18px text) — comfortably exceeds minimum.
• {component.button-secondary-outline} (Login): Same dimensions as primary-gradient — adequate.
• {component.button-whatsapp} (FAB): 56×56px circle — well above minimum, easy thumb reach.
• {component.mobile-menu-button} (hamburger): 24×24px — below 44px recommendation. Consider increasing hit area with invisible padding for mobile usability.
• {component.glass-card} (feature card): Full-width tap target on mobile, multi-line height — excellent.

Collapsing Strategy

• Navigation: Below md: (768px), the horizontal <nav> with gap-6 links hides (hidden md:flex) and is replaced by a hamburger button (flex md:hidden) toggling a mobile menu panel. The mobile menu likely overlays or pushes down with a backdrop.
• Hero columns: The .grid.md:grid-cols-2 splits into single-column on mobile, stacking text above illustration. Text centers (text-center md:text-left) and illustration moves below with top margin (mt-8 md:mt-0).
• Feature grid: Progresses from grid-cols-1 (mobile) → sm:grid-cols-2 (tablet) → lg:grid-cols-3 (desktop). Gap scales from gap-6 (24px) to md:gap-8 (32px).
• CTA buttons: Hero CTA pair stacks vertically on mobile (implied by flex direction), side-by-side on desktop.
• Decorative orbs: Reduce from 360px to 260px on small screens (w-[260px] sm:w-[360px]), repositioning closer to content edges to avoid wasting mobile viewport space.
• Section padding: Hero top padding reduces from 128px on desktop (accounting for 72px fixed nav) to a smaller value on mobile via media query (detected in inline <style> block).

Image Behavior

• Hero illustration: Maintains aspect ratio within its grid column, scaling down proportionally on mobile. The illustration column gets mt-8 top margin on mobile to separate it from the text block above.
• Floating UI elements (in illustration): These are part of the SVG/vector asset and scale with it — no independent responsive behavior.
• Gradient orbs: Scale down from 360px to 260px below sm: breakpoint, maintaining their absolute positioning relative to the hero section.
• No raster images detected: All visuals are CSS or vector, so no srcSet or art-direction concerns apply.

Iteration Guide

1. Initialize with Next.js + Tailwind CSS — the extracted classes map 1:1 to Tailwind utilities. Configure tailwind.config.js with custom colors from the {colors} block, extending the theme.colors object. Add custom animations (fadeUp, float, gradientShift) to theme.extend.keyframes.

2. Load Poppins from Google Fonts — add the single <link> tag to your document <head> or use next/font/google in Next.js with subsets: ['bengali', 'latin'] to support both scripts. Set CSS variable --font-sans: 'Poppins', sans-serif and apply to body.

3. Implement the fixed nav first — it establishes the z-index context, backdrop-blur behavior, and global header height (72px) that all subsequent sections must account for. Use {component.top-nav} specs exactly: fixed top-0 w-full z-50 backdrop-blur-xl bg-slate-900/70 border-b border-white/5.

4. Build the hero band with gradient orbs — implement the two-column grid, then layer the decorative orbs as absolute-positioned children with negative coordinates and z-0 (content at z-20). The orbs use bg-gradient-to-r from-pink-500 via-indigo-500 to-blue-500 with opacity-30 or similar for subtlety.

5. Create the glass-card component as a reusable primitive — define a .glass CSS class (or Tailwind @layer components directive) with background: rgba(255,255,255,0.06), backdrop-filter: blur(12px), border: 1px solid rgba(255,255,255,0.1), and @apply rounded-2xl p-6 transition-all duration-300. All {component.feature-card} instances extend this base.

6. Implement scroll-triggered animations via IntersectionObserver — create a reusable useScrollReveal hook or vanilla JS function that adds .show to .fade-up elements when they enter the viewport. Apply delay-1, delay-2 etc. classes for staggered sequencing on card grids.

7. Apply the gradient-text utility to section headings that need it — use background: linear-gradient(90deg, #ec4899, #6366f1, #3b82f6) with -webkit-background-clip: text and -webkit-text-fill-color: transparent. Limit to one per section.

8. Add the WhatsApp FAB last — position fixed bottom-6 right-6 z-50 with {colors.whatsapp-green} background, 56px diameter, and a subtle pulse animation. Ensure it doesn't overlap critical footer content on short pages.

9. Test contrast ratios rigorously — dark modes hide contrast issues. Verify {colors.muted} (gray-400, ~4.5:1 on slate-900) passes AA for body text, and {colors.body} (slate-200, ~12:1) easily passes AAA. Check {colors.primary-pale} (lavender) against dark surfaces for heading use.

10. Validate on real Bengali content — ensure Poppins renders Bengali ligatures and numerals correctly. Test line-height at {typography.body-md} (28px) with Bengali script — it may need adjustment since Bengali conjuncts (যুক্তাক্ষর) can be taller than Latin ascenders.

Known Gaps

• Hover state styling: Per the no-hover policy, specific hover color/shadow values for buttons and cards are inferred from Tailwind class names (hover:bg-indigo-500/30, hover:scale-105, hover:text-white) but not empirically verified from static extraction.
• Loading/skeleton states: No loading spinner, skeleton shimmer, or pending-state styles were detected. These need design decisions for data-fetching moments (e.g., dashboard views post-login).
• Form validation states: Beyond the detected focus ring, error/red states for form inputs (required field, invalid email format) are not present in the above-fold markup.
• Authenticated/dashboard surfaces: The screenshot shows only the marketing landing page. Internal app surfaces (dashboard, student lists, payment screens) may use different density, layout, or component variants not captured here.
• Mobile menu panel design: The hamburger toggle exists, but the expanded mobile menu's layout (overlay vs push, animation, link styling) is not visible in the desktop-focused screenshot.
• Exact glass-blur pixel value: The backdrop-blur-xl Tailwind class maps to approximately blur(24px), but the precise pixel value for the frosted effect should be verified against the intended design.
• Gradient orb opacity levels: The decorative orbs' exact opacity (estimated 20–40%) and whether they animate (gradientMove) is inferred from class naming conventions, not direct observation.
• Bengali numeral vs Latin numeral preference: The extracted text shows Latin digits in code (font sizes, counts) but the visible UI uses Bengali script. Numeral style preference for prices, dates, and phone numbers is undetermined.
• Accessibility focus-visible styles: Beyond the detected focus ring shadow, outline-offset, and high-contrast mode adjustments for the dark theme are not explicitly styled in the extracted CSS.
• Print stylesheet: No @media print rules detected. Dark backgrounds consume heavy ink; a print override to white background with dark text would be needed for invoice/report printing features.