Incredible India Design System

Overview

The Incredible India design system is a cinematic, high-contrast travel portal built around a bold dark-mode aesthetic. The visual language is defined by its absolute black canvas ({colors.surface-soft}) which creates an immersive theater-like environment for showcasing India's vibrant destinations and cultural experiences. Against this void-like background, crisp white ({colors.body}) typography in Montserrat delivers editorial clarity while electric red ({colors.primary}) injects brand voltage into every critical interaction point — from vertical edge tabs to call-to-action buttons.

The system's dominant typographic move is its unapologetic use of heavy weights. Headlines command attention at {typography.display-lg} (44px, weight 700) or even heavier, while navigation and UI elements maintain confident semibold ({font-weight:600}) and bold ({font-weight:700}) treatments. There is no hesitation here — this is a brand that speaks with authority and energy. The shape language balances sharp rectangular containers (cards, inputs) with dramatically rounded elements (pill buttons at {rounded.pill}, circular avatars at {rounded.circle}, and those signature 150px-radius vertical tabs that hug the viewport edges).

Sub-systems visible in this design include the main navigation shell (persistent dark header with white utility icons), a hero/search subsystem occupying the full dark canvas, a content categorization system (bottom navigation with gold accent dividers), and a conversion-oriented edge-tab system (the fixed-position "Download App" and "Book Your Travel" vertical CTAs). Each subsystem maintains the core palette while introducing contextual accent colors — blues for informational headings ({colors.accent-blue}), gold for active category states ({colors.accent-gold}).

Key Characteristics:

• Dark-first canvas ({colors.surface-soft} — #000000) with white-on-black type hierarchy delivering maximum atmospheric immersion
• Electric red brand voltage ({colors.primary} — #ff000f) reserved exclusively for CTAs, edge-tabs, and active states
• Montserrat-only typeface spanning weight 400–800 across all roles, eliminating font-pairing complexity
• Vertical edge-action tabs ({component.side-tab-left}, {component.side-tab-right}) as signature conversion elements with extreme 150px border radius
• Pill-shaped interactive elements ({rounded.pill} — 150px) creating soft visual relief against angular card containers ({rounded.lg} — 15px)
• Gold accent ({colors.accent-gold}) deployed sparingly for active category indicators and premium feel moments
• Generous horizontal spacing ({spacing.section-xl} — 70px) creating cinematic breath between content zones
• Overlay transparency layers ({colors.overlay-light} at 35% opacity) for subtle depth without breaking the dark immersion

Colors

Brand & Accent

• Primary ({colors.primary} — #ff000f): The signature electric red used for all conversion-critical surfaces — vertical edge tabs ("Download App", "Book Your Travel"), primary CTA buttons, active navigation states, and section headlines requiring maximum visual urgency.
• Primary Hover ({colors.primary-hover} — #e6000d): Slightly darkened red for hover interactions on buttons and tabs.
• Primary Active ({colors.primary-active} — #cc000b): Pressed/depressed state for tactile feedback on primary-colored interactive elements.
• Accent Blue ({colors.accent-blue} — #3f63ad): Deep navy blue used for secondary informational headings (h2 level), links, and semantic trust indicators.
• Accent Sky ({colors.accent-sky} — #66b2e2): Lighter sky blue for link hover states and subtle informational highlights.
• Accent Gold ({colors.accent-gold} — #ffdb00): Vibrant amber-gold reserved exclusively for active category pill indicators and decorative dividers in the bottom navigation system.

Surface

• Canvas ({colors.canvas} — #e9ecef): Light gray baseline surface appearing in form contexts and lighter content sections; contrasts with the dominant dark mode.
• Surface Soft ({colors.surface-soft} — #000000): Pure black — the dominant immersive background for hero sections, navigation shell, and full-bleed content bands.
• Surface ({colors.surface} — #ffffff): Pure white used for elevated card containers, input backgrounds in light mode, and the hamburger menu button.
• Surface Elevated ({colors.surface-elevated} — #ffffff): White surface for modals, dropdowns, and floating panels requiring visual separation from underlying content.
• Surface Dark ({colors.surface-dark} — #000000): Black variant for dark-themed cards within potentially mixed-content layouts.
• Overlay Light ({colors.overlay-light} — rgba(255, 255, 255, 0.35)): 35%-opacity white overlay for badges, tags, and semi-transparent informational surfaces on dark backgrounds.
• Overlay Subtle ({colors.overlay-subtle} — rgba(255, 255, 255, 0.2)): 20%-opacity white for even more restrained depth layering.

Text

• Ink ({colors.ink} — #000000): Near-black for text on light surfaces (canvas, white cards).
• Body ({colors.body} — #ffffff): Pure white — the primary text color for all content rendered on dark surfaces.
• Body Dark ({colors.body-dark} — #212529): Very dark gray for body copy on light gray canvases where pure black would be too harsh.
• Muted ({colors.muted} — #202020): Dark charcoal for secondary text on light surfaces.
• On Primary ({colors.on-primary} — #ffffff): White text guaranteed to satisfy AA contrast against {colors.primary} red backgrounds.
• On Dark ({colors.on-dark} — #ffffff): White text for any dark-background context.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(255, 255, 255, 0.15)): Subtle white-at-15% borders for separating elements on dark surfaces without visual harshness.
• Border Light ({colors.border-light} — rgba(255, 255, 255, 0.1)): Even more subdued 10% white for minimal division.
• Input Background ({colors.input-bg} — #eaeaea): Light gray specifically for text input fields, providing sufficient contrast for entered text.

Semantic

• Link ({colors.link} — #3f63ad): Blue for clickable text references, matching {colors.accent-blue}.
• Link Active ({colors.link-active} — #66b2e2): Lighter blue for visited or hover link states.

Typography

Font Family

The entire Incredible India typeface system is built on Montserrat, a geometric sans-serif with exceptional legibility across weights 300–900. The font-face declarations load locally-hosted WOFF2/WOFF files with font-display: swap for performance, falling back to system sans-serif. Montserrat serves every role in the system — from massive 56px display headlines to 13px caption text — creating a unified, monolithic typographic voice that feels both authoritative and contemporary. No serif or script faces are used; the brand relies entirely on weight, size, and color contrast to establish hierarchy.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 56px | 800 | 1.15 | -0.02em | Hero-level impact headlines (rare, maximum emphasis) | | {typography.display-lg} | 44px | 700 | 1.2 | normal | Primary hero headlines, main page titles | | {typography.h3} | 26px | 700 | 1.2 | normal | Section headings in brand red | | {typography.h4} | 20px | 700 | 1.2 | normal | Card titles, sub-section headings | | {typography.title-md} | 18px | 700 | 1.3 | normal | Navigation items, medium-emphasis labels | | {typography.title-accent} | 18px | 700 | 1.3 | normal | Blue-tinted secondary headings | | {typography.body-md} | 16px | 400 | 1.5 | normal | Primary body copy, paragraphs | | {typography.body-sm} | 14px | 400 | 1.5 | normal | Secondary body text, metadata | | {typography.caption} | 13px | 400 | 1.4 | normal | Input placeholders, fine print | | {typography.button} | 14px | 600 | 1.25 | 0.02em | Button labels, CTA text | | {typography.nav-link} | 15px | 500 | 1.4 | 0.01em | Navigation menu items |

Principles

The Incredible India typography system trusts weight over size differentiation for establishing hierarchy within similar contexts. While the jump from body (16px) to display-lg (44px) is dramatic, adjacent levels often differ only in weight — {typography.body-md} at 400 versus {typography.title-md} at 700 at nearly the same size. This creates a dense, information-rich visual texture where boldness signals importance rather than sheer scale. The system embraces tight letter-spacing on buttons (0.02em) for a slightly expanded, premium feel, while display text receives slight negative tracking (-0.02em) for tighter, more impactful character clusters.

Color is deployed as a hierarchical signal alongside weight: section headings appear in {colors.primary} red or {colors.accent-blue} blue to distinguish them from neutral body text. Active states in the bottom category navigation switch from white to {colors.accent-gold} gold — a warm contrast against the cool dark canvas. The system avoids italics almost entirely; emphasis comes through weight and color, never oblique styling.

Note on Font Substitutions

Montserrat is available on Google Fonts (https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap), making substitution straightforward. For implementations loading from Google Fonts instead of the local WOFF2 files, define these CSS custom properties:

:root {
  --font-family-base: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

All typography tokens reference this variable via their fontFamily property. No proprietary fonts require licensing workarounds — Montserrat has an open SIL Open Font License.

Layout

Spacing System

• Base unit: 5px (implied from the 5px/10px/15px/20px progression).
• Tokens:
  • {spacing.xxs} (4px) — micro-adjustments, icon internal padding
  • {spacing.xs} (8px) — tight component internal gaps, icon-to-text spacing
  • {spacing.sm} (10px) — compact button padding, small element margins
  • {spacing.md} (12px) — input padding, label spacing
  • {spacing.base} (15px) — standard card internal padding, common gap
  • {spacing.lg} (16px) — nav item horizontal padding, grid gutters
  • {spacing.xl} (20px) — section-internal margins, larger button padding
  • {spacing.xxl} (25px) — major element separation
  • {spacing.section-sm} (30px) — most frequent section vertical padding
  • {spacing.section} (40px) — standard band-to-band spacing
  • {spacing.section-xl} (70px) — hero-level vertical breathing room
• Section padding (vertical): {spacing.section-xl} (70px) — used in hero band and major content transitions.
• Card internal padding: {spacing.base} (15px) per {component.card} specification.
• Gutters: {spacing.lg} (16px) between grid columns; wider {spacing.xxl} (25px) between distinct content blocks.

Grid & Container

• Max content width: 1440px for main content areas (extracted from container widths). Header spans 1920px max-width for full-bleed nav.
• Density choice: Cinematic/editorial — generous whitespace, large type, image-forward layout. Not marketplace-dense.
• Desktop grid behavior: Appears to use a flexible column system within the 1440px constraint. Navigation occupies approximately 508px width for the menu cluster.
• Hero column split: Asymmetric — text/content column on left (roughly 50-60%), visual/interactive zone on right. Full-bleed dark background unifies the space.

Whitespace Philosophy

This system practices generous, theatrical whitespace. The dark canvas consumes negative space aggressively, using vast black expanses ({colors.surface-soft}) to frame content as if projecting onto a cinema screen. Section padding reaches 70px vertically, and horizontal margins ensure content never feels cramped against viewport edges. This is not efficient-utility whitespace — it's atmospheric, immersive spacing designed to make each content block feel like a revealed moment.

Header Architecture

+--------------------------------------------------------------------------------------------------+
| [Incredible India]     Destinations v  Experiences v  Plan your trip v  Festivals & Events   [🌐 EN ▼] [♿] [🔍] [👤] [♡] [☰] |
+--------------------------------------------------------------------------------------------------+
  ^logo                 ^nav links (center-weighted)                              ^utilities right-aligned
  flush-left                                                                         hamburger is white box

The top nav ({component.top-nav}) sits on {colors.surface-soft} black at 72px height. Logo is white text ("Incredible India") in {typography.display-lg} weight. Navigation items are {typography.nav-link} white with dropdown carets. Right-side utilities include: language globe selector, accessibility icon, search icon, user profile icon, heart/favorites icon, and a white-filled hamburger menu button ({component.hamburger-menu}) providing high-contrast termination to the nav bar.

Hero Section

+--------------------------------------------------------------------------------------------------+
|                                                                                                  |
|                                                                                                  |
|  [Create an account]                        +----------------------------------------+           |
|  Hi, User name                             |                                        |           |
|                                             |      HERO VISUAL / SEARCH ZONE         |           |
|  [Search Input ____________________]       |      (Full dark canvas)                |           |
|                                             |                                        |           |
|  [Primary CTA]  [Secondary CTA]             +----------------------------------------+           |
|                                                                                                  |
|                                                                                                  |
+--------------------------------------------------------------------------------------------------+
  ^Text column (left)                          ^Visual column (right)
  White text on black                         Immersive dark content

The hero ({component.hero-band}) occupies the full viewport height with {colors.surface-soft} background. Left column carries the headline ({component.hero-headline}) in 44px white bold, subtext in 35%-opacity white, a prominent search input ({component.search-input-hero}) at 50px font size, and CTA button pair. Right column houses the main visual or interactive content area.

Bottom Category Navigation

+--------------------------------------------------------------------------------------------------+
|  India 360°   |   Adventure   |   Nature   |   Wildlife   |   Heritage   |   Spiritual    [<] [>] [👤] |
+--------------------------------------------------------------------------------------------------+
  ^category pills with gold dividers                                          ^nav arrows  ^avatar
  Active state = gold text                                                  (white icons)

Fixed to viewport bottom, the {component.bottom-nav} spans full width on black background. Categories are horizontal text pills ({component.category-pill}) separated by thin vertical gold dividers ({component.category-divider}). Active category switches to {colors.accent-gold}. Right side holds previous/next carousel arrows and a circular avatar ({component.avatar-circle}).

Edge Action Tabs (Signature Element)

+--+                                +--+
| D |                                | B |
| o |                                | o |
| w |                                | o |
| n |                                | k |
| l |                                |   |
| o |                                | Y |
| a |                                | o |
| d |                                | u |
|   |                                | r |
| A |                                | T |
| p |                                | r |
| p |                                | a |
|   |                                | v |
|   |                                | e |
|   |                                | l |
+--+                                +--+
 ^                                    ^
 side-tab-left                       side-tab-right
 (fixed left edge)                   (fixed right edge)
 (red bg, white text)               (red bg, white text)
 (vertical text, rotated)            (vertical text, rotated)

These {component.side-tab-left} and {component.side-tab-right} elements are the signature spatial innovation of this system. Fixed-position, vertically oriented tabs hug the left and right viewport edges. Bright red background ({colors.primary}), white text, 150px border radius on the outer corners, 20px vertical × 12px horizontal padding. Text runs bottom-to-top (left tab) or top-to-bottom (right tab). They remain visible during scroll, providing persistent conversion entry points without obstructing content.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, solid {colors.surface-soft} or {colors.surface} | Base canvas, nav bar, hero band | | 1 — Hairline | 1px {colors.hairline} border (white 15%) | Card outlines on dark, divider lines | | 2 — Soft raise | Subtle shadow {extensions.shadows.sm} equivalent | Cards on light surfaces | | 3 — Elevated | {extensions.shadows.md} — 0 2px 8px rgba(0,0,0,0.3) | Dropdowns, modals, floating panels | | 4 — Modal | {extensions.shadows.lg} — 0 8px 24px rgba(0,0,0,0.4) | Dialog boxes, fullscreen overlays |

The elevation philosophy here is color-block dominated, shadow-minimal. Because the primary canvas is pure black (#000000), traditional drop shadows (which are dark) would be invisible. Instead, the system creates depth through luminance layering: white cards ({colors.surface}) sitting on black backgrounds create inherent contrast-based elevation. When shadows do appear (on light-canvas contexts), they are neutral-toned and conservative. The {colors.overlay-light} and {colors.overlay-subtle} tokens provide an alternative depth mechanism — translucent white layers that suggest floating surfaces without shadow artifacts.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 5px | Subtle corner softening on small elements, input focus rings | | {rounded.DEFAULT} | 5px | Default radius for general components | | {rounded.md} | 15px | Standard card containers, content panels | | {rounded.lg} | 15px | Larger cards, feature boxes (same as md in practice) | | {rounded.xl} | 150px | Extreme rounding for pill-shaped inputs, edge-tab inner corners | | {rounded.pill} | 150px | Fully pill-shaped buttons, tag elements | | {rounded.circle} | 50% | Circular avatars, icon containers |

The shape vocabulary is deliberately bimodal: most containers use modest 5–15px rounding (professional, grounded), while interactive elements leap to 150px or full 50% circles (friendly, approachable, modern). This juxtaposition of "serious content shapes" vs. "playful interaction shapes" creates visual rhythm. The edge tabs are the ultimate expression — 150px radius on the outer corners making them appear to melt into the viewport edge, while inner corners remain sharp rectangles.

Photography Geometry

While the current screenshot shows primarily interface chrome, the design system accommodates photography through {component.card} containers with {rounded.lg} (15px) corners. Hero imagery likely bleeds full-width within the dark canvas without additional rounding (the black background absorbs image edges). Avatar images are constrained to {rounded.circle} (50%) for the user profile indicator. Aspect ratios for destination photography would logically follow 16:9 (hero banners) and 4:3 (card thumbnails) conventions typical of tourism portals.

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.

Navigation

{component.top-nav} — The persistent 72px-tall header bar anchoring the entire experience. Background {colors.surface-soft} (pure black), carrying the white "Incredible India" logotype ({component.logo-text}), navigation dropdown menus ({component.nav-link}), and right-side utility cluster. No visible border or shadow — it merges seamlessly with the hero's dark canvas below. Height is fixed at 72px to provide stable real estate for touch/click targets.

{component.nav-link} — Individual navigation menu items ("Destinations", "Experiences", "Plan your trip", "Festivals & Events"). Transparent background, white text at {typography.nav-link} (15px/500), with 8px horizontal and 16px vertical padding. Includes dropdown chevron indicator (implied by the "v" suffix in visible labels). On active/hover state, transitions to {component.nav-link-active} with {colors.primary} red text.

{component.nav-icon-btn} — Icon-only utility buttons in the header right cluster (search, profile, favorites). 40×40px touch target, transparent background, white icon color. These use FontAwesome glyphs (search magnifying glass, user silhouette, heart outline). Spacing between icons appears to be approximately 8–12px.

{component.lang-selector} — Language dropdown trigger showing "EN" with globe icon and dropdown arrow. Small text at {typography.body-sm} (14px), white on transparent, with compact 6px×12px padding. Likely opens a locale picker dropdown on click.

{component.hamburger-menu} — The rightmost nav element: a 48×48px square button with {colors.surface} (white) background and dark hamburger icon (three horizontal lines). This high-contrast inversion makes it visually terminal in the nav sequence — impossible to miss. Rounded corners at {rounded.DEFAULT} (5px).

Edge Action Tabs (Signature)

{component.side-tab-left} — Fixed-position vertical tab adhering to the left viewport edge reading "Download App" (text rotated 90 degrees counter-clockwise). Background {colors.primary} (electric red #ff000f), text {colors.on-primary} (white) at {typography.button} weight. Padding 20px vertical × 12px horizontal. Border radius {rounded.md} (15px) on all corners, but visually the outer edge appears to blend into the screen edge due to positioning. This is a primary conversion driver — always visible during scroll.

{component.side-tab-right} — Mirror of the left tab on the right viewport edge, reading "Book Your Travel". Identical styling: red background, white vertical text, 15px rounding. Together, these two elements frame the entire content area with persistent CTAs, creating a "bookend" conversion architecture unique to this design.

Hero & Search

{component.hero-band} — The full-viewport-height opening section. Background {colors.surface-soft} (black), padding {spacing.section-xl} (70px) vertical. Contains the primary headline, subheadline, search interface, and CTA buttons. This is the highest-real-estate zone in the system — designed for first-impression impact.

{component.hero-headline} — Main hero title (visible as "Create an account" in meta, typically destination-focused). White text ({colors.body}) at {typography.display-lg} (44px/700). No background — lives directly on the dark hero canvas. Line height 1.2 keeps multi-line headlines tight and impactful.

{component.hero-subhead} — Supporting descriptive text beneath the headline. Uses {colors.overlay-light} (white at 35% opacity) at {typography.body-md} (16px/400) to create visual hierarchy without competing with the headline. This reduced-opacity treatment is a key technique for managing information density on dark backgrounds.

{component.search-input-hero} — The prominent search field in the hero zone. Transparent background (letting the dark canvas show through), white text at an oversized 50px font size (significantly larger than any other input in the system — this is a "hero-scale" element). Padding includes 10% right margin for the search submit button/icon. Placeholder text would use {colors.overlay-light}.

{component.button-primary} — The primary call-to-action button. Background {colors.primary} (red), text {colors.on-primary} (white) at {typography.button} (14px/600). Rounded to {rounded.pill} (150px — fully pill-shaped), with generous 14px×32px padding creating a wide, tappable target. This button style is used for "Search", "Explore", "Plan Trip" and other conversion-critical actions. Active state documented as {component.button-primary-active} with darkened red ({colors.primary-active}).

{component.button-secondary} — Secondary CTA paired with the primary button. Transparent background with white text ({colors.body}) and a subtle border (likely {colors.hairline} — white at 15%). Same pill shape and dimensions as primary. Used for "Learn More", "View Gallery" or lower-commitment actions.

{component.button-ghost} — Minimal text-only button for tertiary actions. Transparent background, white text at nav-link weight. No border, no fill. Used for dismissive actions, "Skip", or helper links.

Cards & Containers

{component.card} — Standard content card for light-surface contexts. Background {colors.surface} (white), text {colors.ink} (black) at {typography.body-md}. Rounded {rounded.lg} (15px) with {spacing.base} (15px) internal padding. Would carry a subtle shadow or border on light canvases (though the extracted CSS shows no explicit shadow, implying flat or border-only treatment). Used for destination previews, event listings, feature highlights.

{component.card-dark} — Dark variant for cards embedded within dark canvas sections. Background {colors.surface-dark} (black), text {colors.body} (white). Same 15px radius and 15px padding as light card. Border would use {colors.hairline} (white 15%) to define edges against the dark surroundings. Used for testimonial quotes, stats callouts, or featured content within hero/dark bands.

{component.overlay-badge} — Small semi-transparent label overlaid on images or cards. Background {colors.overlay-light} (white 35%), white text at {typography.caption} (13px). Slight 5px rounding ({rounded.sm}), compact 6px×12px padding. Used for "Featured", "New", "Popular" tags.

Inputs & Forms

{component.text-input} — Standard text input for forms and search. Background {colors.input-bg} (#eaeaea light gray), black text ({colors.ink}) at {typography.caption} (13px — notably smaller than body text, giving inputs a subordinate visual role). Heavily rounded at {rounded.xl} (150px — pill-shaped input). Generous padding: 20px vertical × 60px right (for icon) × 20px left. This is the "search bar" aesthetic — friendly, modern, non-institutional.

{component.text-input-focus} — Focus state for text inputs. Maintains the light gray background and black text, but would acquire a focus ring (likely {colors.primary} red or {colors.accent-blue} blue, 2px offset) per the transition tokens detected in CSS. The extracted transitions include box-shadow 0.15s ease-in-out, confirming animated focus rings.

Bottom Navigation & Categories

{component.bottom-nav} — Fixed bottom navigation bar (80px tall). Black background ({colors.surface-soft}), white text ({colors.body}) at {typography.body-sm}. Contains horizontally-scrollable category pills, navigation arrows, and user avatar. Persists across scroll for always-available taxonomy access.

{component.category-pill} — Individual category label in the bottom nav ("India 360°", "Adventure", "Nature", "Wildlife", "Heritage", "Spiritual"). Transparent background, white text at {typography.body-sm} (14px/400). Padding 10px×20px creates comfortable tappable area. No border in default state — text floats cleanly on the dark bar.

{component.category-pill-active} — Active/selected category state. Text color shifts to {colors.accent-gold} (#ffdb00 amber), creating a warm luminous highlight against the dark background. This is the sole gold usage in the entire system — reserved exclusively for "you are here" indication.

{component.category-divider} — Thin vertical line separating category pills. Background {colors.accent-gold} (gold), 1px wide × 24px tall. These golden dividers create a subtle "beaded" visual rhythm along the category row, reinforcing the premium/exclusive feel of the active-state gold treatment.

{component.bottom-nav-arrow} — Left/right navigation arrows for scrolling through categories (or carousel content). 40×40px touch target, transparent background, white icon (chevron-left, chevron-right). Positioned at the right end of the bottom nav bar.

{component.avatar-circle} — User profile avatar at bottom-right of the nav bar. Circular ({rounded.circle} — 50%), 48px diameter, dark background with a user illustration/photo. Sits beside the nav arrows as a persistent account-access point.

Utility Components

{component.mute-button} — Small 32×32px mute/unmute control (visible as speaker-with-x icon in screenshot lower right). Transparent background, white icon. Used for video/audio content muting — positioned as a non-intrusive overlay control.

{component.section-heading} — Section title using brand red. Red text ({colors.primary}) at {typography.h3} (26px/700). Used for major content section openers where brand presence is desired.

{component.section-heading-blue} — Alternative section title in blue. Sky/navy blue text ({colors.accent-blue}) at {typography.title-accent} (18px/700). Used for informational or secondary section headers where red would be too aggressive.

{component.logo-text} — The "Incredible India" wordmark in the header. White text at {typography.display-lg} (44px/700), though the actual rendered size in the nav bar is scaled down proportionally to fit the 72px header height. The "India" portion features a red dot accent (the primary color appearing as a period or bindu detail).

Do's and Don'ts

Do

• Do reserve {colors.primary} red exclusively for conversion actions and active states. It loses impact if applied to decorative elements or non-CTA text. Let the dark canvas and white type carry informational content; red should always say "click me" or "look here."
• Do use {typography.display-lg} (44px/700) or heavier for all hero-level headlines. This system speaks confidently — underweighted headlines will feel tentative and off-brand. When in doubt, bump up one weight step.
• Do apply {rounded.pill} (150px) to all primary and secondary buttons. The pill shape is a core identifier of this design's interactive language. Sharp-cornered buttons will look foreign and institutional.
• Do maintain the 72px {component.top-nav} height with black background. The immersive dark-header-to-dark-hero continuity is essential to the cinematic effect. Introducing a contrasting header background breaks the theater.
• Do use {colors.overlay-light} (35% white) for subhead and supporting text on dark backgrounds. Pure white at body size competes with headlines; the opacity reduction creates clean hierarchy without adding new colors.
• Do implement both {component.side-tab-left} and {component.side-tab-right} as fixed-position elements. They are signature brand assets — omitting them removes a key differentiator. Ensure text is rotated 90 degrees and reads outward from the viewport edge.
• Do apply {colors.accent-gold} solely to the active category indicator. Gold is the rarest color in the palette — its exclusivity makes it powerful. Never use it for buttons, headlines, or body text.
• Do use Montserrat for every text element. No serif fallbacks for headings, no monospace for data. The monolithic typeface family is a deliberate simplification that ensures consistency.
• Do pad sections with {spacing.section-xl} (70px) vertically in hero and major transition zones. The airy, cinematic spacing is not wasted space — it's the visual "silence" that makes content pop against the black canvas.
• Do round card containers to {rounded.lg} (15px) and keep inputs at {rounded.xl} (150px). This bimodal radius pattern (moderate vs. extreme) is a rhythmic signature. Don't introduce intermediate radii like 8px or 25px.

Don't

• Don't place {colors.primary} red on any background other than white or very light gray. The on-primary token is white (#ffffff) for AA contrast. Red on dark backgrounds fails accessibility — if you need a colored CTA on a dark surface, use white with a red border or icon instead.
• Don't use font weights below 400 for body copy. Montserrat 300 (ExtraLight) exists in the loaded font-face set but the design system never deploys it for UI text. Lightweights reduce legibility against busy photographic backgrounds.
• Don't add gradients to the hero canvas or card backgrounds. This is a flat-color system. The depth comes from luminance contrast (white on black), not gradient washes. Gradients will fight with the bold, graphic intent.
• Don't expand the color palette beyond the documented 25+ tokens. The discipline of red/white/black + blue/gold accents is a strength. Introducing purples, greens, or teals for "pop" will dilute brand recognition.
• Don't make the edge tabs ({component.side-tab-left}/{component.side-tab-right}) dismissible or hide them on scroll. Their persistence is the point — they're always-there conversion anchors. If you must hide them on mobile (where they'd consume too much screen), replace with a floating action button, don't remove the concept entirely.
• Don't apply shadows to elements on {colors.surface-soft} (black) backgrounds. Black shadows on black are invisible. Use {colors.hairline} borders or {colors.overlay-light} background layers instead for separation.
• Don't use {typography.caption} (13px) for anything users must read comfortably. That size is reserved for input placeholders and legal disclaimers. Body copy should never fall below {typography.body-sm} (14px).
• Don't center-align body paragraphs in content cards. This system is left-aligned for all readability-critical text (the Montserrat geometric sans performs best with ragged-right edges). Center alignment is reserved for short CTAs and single-line labels.
• Don't implement hover states without transition animations. The CSS explicitly defines color 0.15s ease-in-out and background 0.2s transitions. Instant color snaps will feel broken compared to the smooth, professional motion language established in the source.
• Don't mix {colors.ink} (#000000) and {colors.body-dark} (#212529) arbitrarily. Use ink for headings and strong text on light surfaces; use body-dark for extended body copy where pure black causes eye fatigue. This distinction supports long-form reading comfort.

Motion & Animation

Transition Tokens

/* Core UI transitions extracted from live DOM */
--transition-default: all 0.15s ease-in-out;
--transition-colors: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
--transition-colors-shadow: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
--transition-background: background 0.2s ease;
--transition-transform: transform 0.5s linear;
--transition-generic: 0.3s ease;

The motion system operates at moderate expressiveness with a 150–200ms default duration. Color and background changes animate smoothly (ease-in-out) to prevent jarring flashes when hovering buttons or switching active states. Transform animations (for carousels, reveals) use longer 500ms durations with linear easing for predictable, mechanical movement. Focus ring animations include box-shadow in the transition chain for polished input interactions.

Keyframe Animations

• App-logo-spin — Continuous rotation (likely unused in production, legacy).
• spinner_Oiah / spinner-rotate / cmp-search__loading-indicator-spin — Loading indicator rotations for async operations (search submission, data fetching).
• goingRight / goingLeft — Horizontal translation for marquee or carousel sliding.
• goingUpDown — Vertical oscillation (possibly for scroll-hint indicators or decorative elements).
• rotateIcon / spin — Icon rotation states (dropdown chevrons expanding, refresh actions).
• fadeIn / yearCardFadeIn — Opacity fade-ins for content appearing on scroll or tab switch.
• dropFadeInUp / slideUp / slideDown — Combined opacity + transform reveals for dropdown menus and modal entrances.
• slide-left / focus-in-contract — Directional slides for panel transitions and focus-aware micro-interactions.
• progress-bar-stripes — Animated striped background for progress indicators.
• pulse-voice / voice-wave — Audio-related pulse animations (likely for accessibility voice-over features or media players).
• pastEventSpinner — Context-specific loader for historical/timeline content.

Interaction Patterns

• Button hover lift: Primary and secondary buttons likely gain subtle y-axis translation (-1px or -2px) combined with {colors.primary-hover} darkening on hover, reverting on release.
• Nav dropdown reveal: Clicking "Destinations ▾" triggers {slideDown} or {dropFadeInUp} animation on a dropdown panel with white/light background, appearing below the nav item with 200ms duration.
• Category pill switch: Tapping a bottom-nav category animates the text color transition from {colors.body} (white) to {colors.accent-gold} (gold) over 150ms, with the gold divider possibly scaling vertically.
• Edge-tab pulse: The vertical red tabs may employ a subtle {pulse-voice} or scale oscillation on page load to draw initial attention without being distracting.
• Carousel slide: Bottom nav arrows or swipe gestures trigger {goingLeft}/{goingRight} translations on a horizontal content track (500ms linear for smooth, continuous-feeling motion).
• Search input focus: Clicking the hero search field expands any collapsed state via {focus-in-contract}, displays a red or blue focus ring (animated via box-shadow 0.15s ease-in-out), and may shift accompanying elements.
• Mute toggle: The {component.mute-button} icon swaps between speaker and speaker-x using {rotateIcon} or crossfade, with {transition-colors} handling color state changes.
• Scroll-triggered fades: Content cards entering the viewport may invoke {fadeIn} or {yearCardFadeIn} for progressive revelation as the user scrolls through destination galleries.

Imagery Style

• Photographic dominance: This is a travel/tourism platform, so high-resolution destination photography is the primary visual medium — expected to occupy 60–80% of above-fold visual real estate in content sections.
• Cinema-scale treatment: Images are displayed at hero scale within the dark canvas, often bleeding full-width or full-viewport. The black background acts as natural matting, making photos feel like projected slides.
• Color saturation: Indian travel imagery naturally features vivid colors (festivals, textiles, landscapes, spices). The design's restrained UI palette (red/white/black) intentionally steps back to let photograph colors sing without competition.
• Dark-overlay integration: Photos placed behind text content likely receive a subtle dark gradient or {colors.overlay-subtle} wash to ensure white text remains legible without sacrificing image visibility.
• Cultural subject matter: Expected imagery includes architectural landmarks (Taj Mahal, forts, temples), natural wonders (Himalayas, backwaters, deserts), cultural events (Diwali, Holi, dance festivals), wildlife (tigers, elephants, birds), and culinary scenes.
• Aspect ratio variety: Hero banners at 16:9 or 2:1 widescreen; card thumbnails at 4:3 or 1:1 square; avatar circles at 1:1; panoramic strips for section dividers at 3:1 or greater.
• No illustrated UI elements: The interface itself is purely typographic and geometric — no illustrations, icons-as-illustrations, or decorative graphics in the chrome. Imagery is strictly photographic/content-driven.
• Avatar treatment: User profile images are cropped to circle ({rounded.circle}), likely with a subtle white or red border to separate from dark backgrounds.

Icon System

• Library: Font Awesome 4.7 (explicitly loaded via CDN: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css). Additionally, a custom fontello font-face is declared for brand-specific icons.
• Specific icons observed:
  • fa-search (magnifying glass) — search utility in nav bar
  • fa-user / fa-user-o (person silhouette) — profile/account access
  • fa-heart / fa-heart-o (heart outline) — favorites/wishlist
  • fa-bars (hamburger menu) — mobile/main menu trigger
  • fa-globe (world) — language selector
  • fa-wheelchair or accessibility icon — accessibility options
  • fa-chevron-down — dropdown indicators on nav items
  • fa-chevron-left / fa-chevron-right — carousel/category navigation arrows
  • fa-volume-up / fa-volume-mute — audio/mute control (visible as speaker-with-x)
  • Custom fontello icons may include the India map glyph visible in the language selector area
• Treatment: Icons use outline/stroke style predominantly (FontAwesome's -o variants where available), rendered in currentColor (inheriting from parent color property). Size varies by context: 16px for inline/text-companion icons, 20–24px for standalone nav utilities, 32px for the mute button, 40px for nav icon buttons.
• Alignment: Icons are center-aligned within their touch-target containers, with 4–8px spacing from accompanying text. Nav icons sit on the baseline of nav-link text or are vertically centered in their 40–48px button containers.

Recommended Frontend Stack

- Framework:      Next.js 14+ or Astro (SSR for tourism content SEO; static generation for landing pages)
- Styling:        CSS Modules or Tailwind CSS (custom config mapping tokens to utilities)
- Fonts:          Google Fonts (Montserrat wght@300..900) with `font-display: swap`; self-host WOFF2 for production
- Animation:      Framer Motion (for scroll-triggered reveals, layout transitions) + vanilla CSS transitions (for hover/focus states)
- Icons:          Font Awesome 5+ (upgrade from v4.7) or Lucide React (migrate away from FA dependency)
- Component lib:  Radix UI Primitives (for accessible dropdowns, dialogs) + custom components for edge-tabs

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column layout; edge tabs become floating action buttons; bottom nav becomes horizontally scrollable; hero search collapses to standard input size; hamburger menu becomes primary navigation entry point | | Tablet | 640px – 1024px | Two-column content grids; edge tabs may persist or convert to bottom-sheet drawers; nav links collapse into hamburger menu | | Desktop | 1024px – 1440px | Full layout as documented: persistent horizontal nav, edge tabs visible, multi-column content grids, 1440px max-width container | | Wide | > 1440px | Content centers in 1440px container with auto margins; edge tabs remain viewport-edge-fixed (not container-bound); nav may expand with additional utility links |

Touch Targets

• {component.button-primary}: ~60px height × variable width (pill shape with 14px×32px padding + text) — exceeds WCAG AAA 44×44px minimum
• {component.button-secondary}: Same dimensions as primary — exceeds minimum
• {component.text-input}: 60px height (20px padding × 2 + 13px text) — exceeds minimum
• {component.nav-icon-btn}: 40×40px — below AAA (44px), meets AA (24px). Consider increasing to 44px on mobile.
• {component.side-tab-left} / {component.side-tab-right}: Variable height (content-dependent) × ~44px wide — meets minimum on width; height depends on text length.
• {component.category-pill}: ~44px height (10px×2 padding + 14px text) × variable width — meets minimum
• {component.bottom-nav-arrow}: 40×40px — consider 44px upgrade for mobile touch compliance.
• {component.hamburger-menu}: 48×48px — exceeds minimum, excellent touch target.

Collapsing Strategy

• Navigation header: At tablet and below, the horizontal nav links ("Destinations", "Experiences", etc.) collapse into the {component.hamburger-menu} trigger. The header retains logo (scaled down), language selector, and critical icons (search, profile) but moves secondary icons (heart) into the menu drawer.
• Edge tabs: On mobile (< 640px), the vertical edge tabs ({component.side-tab-left}, {component.side-tab-right}) should convert to floating action buttons (FABS) positioned at bottom-left and bottom-right corners, above the bottom nav bar. This prevents consuming horizontal screen real estate on narrow viewports while preserving conversion entry points. Alternatively, they may slide out from the edges as mini-drawers on tap.
• Hero section: The asymmetric two-column layout (text left, visual right) collapses to single-column stacked on mobile: headline → subheadline → search → CTAs → visual. The search input scales down from 50px hero-size to standard {component.text-input} proportions (13–16px font).
• Bottom category nav: Remains fixed at bottom but becomes horizontally scrollable (overflow-x: auto with snap points) showing 2–3 categories at a time with swipe gesture support. The gold dividers ({component.category-divider}) remain between visible items.
• Content grids: Multi-column destination/event cards reflow to single-column on mobile with full-width cards, maintaining {rounded.lg} corners and {spacing.base} internal padding.
• Avatar and arrows: The bottom-right avatar and carousel arrows may consolidate — arrows could become half-width bottom-bar buttons, avatar could move into the header or become a tap-target on the bottom bar itself.

Image Behavior

• Hero imagery: On desktop, hero visuals (photography, illustrations) occupy the right 40–50% of the hero band at full viewport height. On mobile, these move below the text content at reduced height (50–60vh max) or become full-bleed background images behind the text with heavy dark overlay ({colors.overlay-subtle} or darker) for text legibility.
• Card thumbnails: Maintain 4:3 or 16:9 aspect ratio across breakpoints, scaling width to fill the single column. {rounded.lg} (15px) corners preserved. Consider lazy-loading with blur-up placeholder for perceived performance.
• Avatars: Remain circular ({rounded.circle}) at consistent 48px or reduce to 40px on mobile. Position may shift from bottom-nav to header on narrow screens.
• Logo: The "Incredible India" wordmark scales down proportionally within the 72px (desktop) → 56–64px (mobile) header height. The red dot/bindu detail must remain visible at all sizes.

Iteration Guide

1. Start with the dark canvas foundation. Set body { background-color: #000000; color: #ffffff; font-family: 'Montserrat', sans-serif; } immediately. Every component builds outward from this black base — if your prototype starts white, you're fighting the system.
2. Implement the top navigation first. Build {component.top-nav} at 72px height with black background, white Montserrat text, and the exact utility icon sequence (lang → accessibility → search → user → heart → hamburger-white-box). Get the spacing between icons feeling breathable (8–12px gaps). This nav is the "handle" users grab to understand the spatial model.
3. Wire up the edge tabs as fixed-position elements. These are the most distinctive components. Implement {component.side-tab-left} and {component.side-tab-right} with position: fixed; top: 50%; transform: translateY(-50%); (left/right respectively). Use writing-mode: vertical-rl or transform: rotate(-90deg) for the text orientation. Red background, white text, 15px radius. Test that they don't overlap content at 1440px viewport.
4. Build the hero band next. Full-viewport-height section (min-height: 100vh) with 70px vertical padding. Left column: {typography.display-lg} white headline → {typography.hero-subhead} (opacity 0.35 white) → 50px search input → {component.button-primary} + {component.button-secondary} pair. Right column: placeholder for visual content. Ensure the 72px nav doesn't overlap (account for it with padding-top: calc(70px + 72px) or similar).
5. Create the bottom category navigation. Fixed bottom bar (80px, black, z-index above content). Horizontal flex list of {component.category-pill} items separated by {component.category-divider} (1px × 24px gold vertical bars). Add left/right arrow buttons ({component.bottom-nav-arrow}) and avatar circle at far right. Make the active category render in {colors.accent-gold}.
6. Implement the card system. Build {component.card} (white bg, black text, 15px radius, 15px padding) and {component.card-dark} (black bg, white text, same radius/padding) as reusable templates. Populate with sample destination content to test typography hierarchy: {typography.h4} title (20px/700 black or white), {typography.body-md} description (16px/400), optional {component.overlay-badge} tag.
7. Add motion progressively. Apply the extracted CSS transitions: transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out to all buttons and interactive elements. Add transition: transform 0.5s linear to carousel tracks. Add transition: box-shadow 0.15s ease-in-out to inputs for focus-ring animation. Test that nothing feels sluggish (200ms max for color changes).
8. Responsive pass. At each breakpoint (640px, 1024px, 1440px), verify: nav collapses appropriately, edge tabs convert or reposition, hero stacks to single column, bottom nav scrolls horizontally, cards go single-column. Ensure touch targets meet 44×44px minimum on mobile (pad the 40px icons to 44px).
9. Accessibility audit. Check contrast ratios: {colors.primary} (#ff000f) on white passes AA for large text (buttons); verify {colors.body-dark} (#212529) on {colors.canvas} (#e9ecef) meets 4.5:1 for body text. Add aria-label to icon-only buttons. Ensure focus rings are visible (2px solid {colors.primary} or {colors.accent-blue} with 2px offset). Test keyboard navigation through the entire tab sequence.
10. Font setup. Load Montserrat from Google Fonts with display=swap: <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">. Define CSS custom properties mapping to every {typography.*} token so global weight/size adjustments propagate instantly. For production, download the specific weight files (400, 500, 600, 700, 800) and self-host to eliminate Google Fonts latency.

Known Gaps

• Hover state specifics: Per the no-hover policy, exact hover background color shifts, transform distances, and shadow elevations for buttons, nav links, and cards are not documented. Implementers should derive these from the {colors.primary-hover}/{colors.primary-active} tokens and the 150–200ms transition timing.
• Dropdown menu anatomy: The navigation dropdown panels (triggered by "Destinations ▾", "Experiences ▾", etc.) are not visible in the screenshot. Their internal structure (column count, link styling, background color — likely white or dark with white text), width, and shadow treatment must be designed following the card/component patterns.
• Search results state: The expanded/search-active state of the hero search interface, including autocomplete dropdown, result suggestions, and loading spinner (referenced by cmp-search__loading-indicator-spin keyframe), is not captured.
• Authenticated/user-logged-in surfaces: Dashboard, saved itineraries, booking management, and personalized recommendation interfaces are entirely absent from the screenshot. These may introduce new sub-systems (tables, calendars, payment forms) not covered by this spec.
• Loading/skeleton states: While spinner keyframes exist in the CSS, the specific skeleton screen patterns (shimmer gradients, placeholder card layouts) for asynchronous content loading are not depicted.
• Form validation states: Beyond {component.text-input-focus}, the error state (red border/icon, error message text in {colors.primary}?), disabled state (opacity reduction? gray background?), and success state for form inputs are not visually documented.
• Map integration: Tourism platforms typically include interactive maps (destination locators, itinerary planners). Map UI styling (pins, info windows, map controls) follows external library conventions (Google Maps, Mapbox) and is outside this design system's token scope.
• Footer section: The page footer (legal links, social media icons, copyright, sitemap) is not visible in the screenshot and may contain additional component patterns not captured here.
• Sub-brand or campaign palettes: Special landing pages for festivals (Diwali, Holi) or regional campaigns may introduce temporary accent colors (saffron, green, blue) beyond the core palette. These are not documented in the base system.
• Print stylesheet: No print-specific styles are detectable. A print version would need to invert the dark mode (white background, black text) and suppress interactive elements (edge tabs, bottom nav).