# Design System Inspiration of IndiaNIC

## 1. Visual Theme & Atmosphere

IndiaNIC's interface is enterprise software craftsmanship in confident corporate dress — a 27-year-old development studio's digital storefront where every pixel must telegraph reliability without feeling stale. The design rests on a clean white canvas (`#ffffff`) anchored by a near-black ink (`#252A33`) that's warmer and softer than pure black, giving body copy the gravity of a printed annual report rather than the harshness of a terminal.

The signature move is the **vermilion red brand accent** (`#F13C31`) — a saturated, high-energy red that appears almost exclusively on primary CTAs, link arrows, and the loader ring. It is rationed deliberately: 90% of the page is white, charcoal, and slate, and then a single red button or arrow does all the heavy lifting. This restraint is what separates IndiaNIC's red from a generic "agency red" — it functions as a punctuation mark, not a wallpaper. A complementary warm orange (`#FF9653`) shows up sparingly in gradients, illustrations, and statistical highlights, providing a softer second voice to the primary red.

Typography is **Poppins throughout** — geometric, slightly rounded, friendly without being childish. Headlines run heavy (weights 600–800) with fluid `clamp()` sizing so a hero headline scales from a phone-friendly 32px up to a billboard 56px. Body copy sits at a comfortable 16px / 1.6 line-height. The result feels like a confident enterprise site that has read a few design books — disciplined hierarchy, rationed color, and a quiet trust in white space to do the heavy lifting.

**Key Characteristics:**
- Pure white (`#ffffff`) canvas with a warm-charcoal (`#252A33`) ink
- Vermilion red (`#F13C31`) used as a rationed primary accent — never as a background
- Warm orange (`#FF9653`) as a secondary accent for gradients and illustration
- Poppins as the single font family — no serif/sans split
- Heavy weights (600–800) on headlines with fluid `clamp()` sizing
- Generous whitespace in 1140px-max containers
- Pill-shaped CTAs (radius up to 50px) with subtle `translateY(-1px)` hover lift
- Sticky top nav with horizontal dropdowns and a single red CTA button

## 2. Color Palette & Roles

### Primary
- **Vermilion Red** (`#F13C31`): The single most important color in the system. Reserved for primary CTA buttons, the loader ring, link arrows, and the highest-signal moments. Never used as a section background.
- **Charcoal Ink** (`#252A33`): The primary text color and dark surface. A warm, slightly blue-leaning near-black that's softer on the eye than `#000`. Used for headlines, body copy, footer backgrounds, and dark-theme surfaces.
- **Slate Gray** (`#8B969F`): Tertiary text, captions, metadata, muted icons, and form helper text — a cool neutral that recedes against white.

### Secondary & Accent
- **Warm Orange** (`#FF9653`): A softer, sunnier counterpart to the brand red. Used in gradients, statistical highlights, illustrative accents, and to warm up otherwise monochrome compositions.
- **Coral Tint** (`#FFE3D6`): A pale peach used for soft callout backgrounds, AI-section badges, and the bottom-left "Begin a quick discussion" sticky widget.
- **Success Green** (`#22C55E`): Toast notifications and success states.
- **Info Blue** (`#3B82F6`): Form focus rings and informational toasts — the only cool accent in the system.
- **Warning Amber** (`#F59E0B`): Warning toasts and pending states.

### Surface & Background
- **Pure White** (`#ffffff`): The dominant page background — it carries the airy, enterprise feel.
- **Mist** (`#F8FAFC`): The lightest off-white surface for alternating section backgrounds and card surfaces.
- **Pale Slate** (`#F1F5F9`): Slightly more present off-white for sidebar fills, callout containers, and code blocks.
- **Border Slate** (`#E2E8F0`): The standard light-theme border — visible but never assertive.
- **Charcoal Ink** (`#252A33`): Doubles as the dark-theme surface for the footer, dark feature bands, and case-study hero overlays.
- **Deep Ink** (`#0C0C0C`): The darkest surface, used sparingly for video overlays and full-bleed dark sections.

### Neutrals & Text
- **Charcoal Ink** (`#252A33`): Primary text on light surfaces, body headlines.
- **Graphite** (`#475569`): Secondary body text — a touch lighter than the primary ink, used for paragraphs after a headline.
- **Slate Gray** (`#8B969F`): Tertiary metadata, captions, breadcrumbs.
- **Mist Text** (`#CBD5E1`): Disabled text and the lightest decorative type.
- **White Soft** (`#F8FAFC`): Text on dark surfaces (footer, dark hero overlays) — never pure white.

### Semantic & Borders
- **Border Slate** (`#E2E8F0`): Standard light borders, card outlines, table dividers.
- **Border Mist** (`#F1F5F9`): The softest separator for nested content.
- **Border Dark** (`#1E232B`): Borders on dark surfaces (footer columns, dark cards).
- **Focus Ring** (`#F13C31` at 25% opacity): The focus halo on interactive elements — built from the brand red.

### Gradient System
- **Sunrise Gradient**: `linear-gradient(135deg, #F13C31 0%, #FF9653 100%)` — the only gradient that appears with any frequency, used on hero accent panels, AI-service callouts, and statistic chips. It earns its place because both stops are already brand colors.
- **Mist Gradient**: `linear-gradient(180deg, #ffffff 0%, #F8FAFC 100%)` — a near-invisible vertical fade behind hero sections to create gentle depth without competing with content.

## 3. Typography Rules

### Font Family
- **Display / Body / UI**: `Poppins`, with fallback: `system-ui, -apple-system, "Segoe UI", Roboto, sans-serif`
- **Code**: `JetBrains Mono`, with fallback: `SFMono-Regular, Menlo, Monaco, Consolas, monospace`

*Note: Poppins is loaded via WOFF2/WOFF for weights 400, 500, 600, 700, and 800. The single-family approach is intentional — it removes the need for serif/sans pairing and lets weight do the work.*

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Display / Hero | Poppins | clamp(32px, 5vw, 56px) | 800 | 1.20 | -0.02em | Hero headline, max impact |
| Section Heading H2 | Poppins | clamp(28px, 4vw, 42px) | 700 | 1.30 | -0.015em | Major section anchors |
| Sub-heading H3 | Poppins | clamp(24px, 3vw, 32px) | 700 | 1.35 | -0.01em | Card group titles |
| Card Title H4 | Poppins | clamp(20px, 2.5vw, 24px) | 600 | 1.40 | normal | Service card titles |
| Eyebrow Label H5 | Poppins | clamp(18px, 2vw, 20px) | 600 | 1.45 | normal | Mini headings, list anchors |
| Caption Heading H6 | Poppins | clamp(16px, 2vw, 20px) | 600 | 1.50 | normal | Smallest heading scale |
| Body Large | Poppins | 18px | 400 | 1.60 | normal | Hero subheadlines, intros |
| Body Standard | Poppins | 16px (14px mobile) | 400 | 1.60 | normal | Default paragraph text |
| Body Small | Poppins | 14px | 400 | 1.55 | normal | Compact descriptions |
| Caption | Poppins | 13px | 500 | 1.50 | 0.2px | Metadata, timestamps |
| Eyebrow / Overline | Poppins | 12px | 600 | 1.40 | 1.5px (UPPERCASE) | Section labels above headings |
| Button Label | Poppins | 15px | 600 | 1.00 | 0.3px | All button text |
| Code | JetBrains Mono | 14px | 400 | 1.60 | -0.2px | Inline code, terminal |

### Principles
- **One family, weight as hierarchy**: Poppins handles every text role from hero headline to footer caption. Hierarchy comes from weight (400 → 600 → 700 → 800) and size, not font switching.
- **Heavy headlines**: Display copy lives at weight 800 and section headings at 700. The geometric letterforms of Poppins need that weight to feel authoritative; lighter weights read as marketing template.
- **Tight headline tracking**: Headings use slightly negative letter-spacing (-0.01em to -0.02em) to tighten the geometry and stop heavy weights from feeling balloony.
- **Generous body line-height**: Body copy uses 1.60 line-height — enterprise-readable but never cramped.
- **Eyebrow uppercase, tracked**: 12px uppercase eyebrow labels with 1.5px letter-spacing sit above section headings as a structural marker, often colored Vermilion Red.
- **Fluid `clamp()` sizing**: Every heading uses `clamp(min, vw, max)` so the type scale breathes with the viewport instead of stepping at breakpoints.

## 4. Component Stylings

### Buttons

**Brand Pill (Primary CTA)**
- Background: Vermilion Red (`#F13C31`)
- Text: Pure White (`#ffffff`)
- Padding: 14px 28px
- Radius: 50px (full pill)
- Font: Poppins 15px, weight 600
- Shadow: `0 4px 12px rgba(241,60,49,0.25)`
- Hover: `transform: translateY(-1px)` + shadow grows to `0 8px 20px rgba(241,60,49,0.32)`
- The single most important button — used for "Get a Free AI Consultation," "Hire Developers," and any conversion-critical CTA

**Brand Square**
- Background: Vermilion Red (`#F13C31`)
- Text: Pure White (`#ffffff`)
- Padding: 12px 24px
- Radius: 6px
- Same hover lift
- Used in nav and inside dense layouts where a pill would feel oversized

**Outline Dark**
- Background: transparent
- Text: Charcoal Ink (`#252A33`)
- Border: `1.5px solid #252A33`
- Padding: 12px 26px
- Radius: 50px (pill) or 6px (square)
- Hover: background → Charcoal Ink, text → White
- The standard secondary CTA pairing the primary brand button

**Ghost Link**
- Background: transparent
- Text: Charcoal Ink (`#252A33`)
- Padding: 8px 0
- Trailing arrow icon (→) in Vermilion Red
- Hover: text → Vermilion Red, arrow translates 4px right
- Used for "Read More," "View Case Study," and inline content links

**Dark Surface**
- Background: Charcoal Ink (`#252A33`)
- Text: Pure White (`#ffffff`)
- Padding: 14px 28px
- Radius: 50px
- Used on light backgrounds when red would over-saturate (e.g. download/secondary CTAs)

### Cards & Containers
- Background: Pure White (`#ffffff`) on Mist (`#F8FAFC`) sections; Mist on white sections
- Border: `1px solid #E2E8F0` standard, or no border with shadow
- Radius: 12px standard, 16px for featured, 24px for hero/imagery containers
- Shadow: `0 2px 8px rgba(37,42,51,0.06)` resting; `0 12px 32px rgba(37,42,51,0.10)` on hover
- Hover: `transform: translateY(-4px)` lift with smooth `cubic-bezier(0.16,1,0.3,1)` easing
- Content padding: 28px–32px
- Service cards include a small icon block (40×40 rounded square in Coral Tint) above the heading

### Inputs & Forms
- Background: Pure White (`#ffffff`) on Mist Pale Slate (`#F1F5F9`) sections
- Border: `1.5px solid #E2E8F0`
- Radius: 8px
- Padding: 14px 16px
- Font: Poppins 15px, weight 400, color Charcoal Ink
- Focus: border-color → Vermilion Red, outline → `0 0 0 4px rgba(241,60,49,0.15)`
- Label: 13px Poppins weight 600, Charcoal Ink, sits above input
- Helper text: 13px Slate Gray, 6px below input

### Navigation
- Sticky top nav, white background with `backdrop-filter: blur(12px)` once scrolled
- Height: 80px desktop, 64px mobile
- Border-bottom: `1px solid #E2E8F0` on scroll
- Logo: full-color IndiaNIC wordmark on the left
- Links: Poppins 15px weight 500, color Charcoal Ink, 32px gap
- Hover: link color shifts to Vermilion Red, no underline
- Active link: 2px underline in Vermilion Red, 8px below text
- Dropdown menus: white card, 16px radius, `0 16px 48px rgba(37,42,51,0.10)` shadow
- Right side: single Brand Pill CTA button

### Image Treatment
- Photography: high-quality team and product shots with cool-neutral grading
- Border-radius: 16px for inline imagery, 24px for hero/feature shots
- Subtle `0 24px 48px rgba(37,42,51,0.12)` shadow on featured imagery
- Webp format for performance
- Video backgrounds in hero sections with `linear-gradient(180deg, transparent 0%, rgba(37,42,51,0.5) 100%)` overlay for legibility

### Distinctive Components

**Statistic Chips**
- Layout: large number + small label stacked vertically
- Number: Poppins 56px weight 800, Sunrise Gradient text fill
- Label: 14px uppercase weight 600, Slate Gray
- Used for "90+ Countries," "7000+ Projects," "3000+ Clients"
- Sits in a 4-column grid with thin vertical dividers between

**Client Logo Carousel**
- Auto-scrolling horizontal marquee
- Logos in `#8B969F` (Slate Gray) at 50% opacity, transitioning to full color on hover
- 80px row height, 64px gap between logos
- Mask gradient on edges for soft fade

**Sticky Discussion Widget**
- Bottom-left fixed pill button
- Background: Vermilion Red, white text, chat icon
- Radius: 50px
- Shadow: `0 8px 24px rgba(241,60,49,0.30)`
- Always visible across the site

**Loader Ring**
- Circular spinner, 4px Vermilion Red border, white centre
- Logo pulses inside the ring
- Used during page transitions

## 5. Layout Principles

### Spacing System
- Base unit: 4px
- Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px, 128px
- Card internal padding: 28–32px
- Section vertical padding: `clamp(48px, 8vw, 128px)` — fluid and breathing
- Container side padding: 1rem mobile → 2rem tablet → 4rem desktop

### Grid & Container
- Max container width: **1140px** centred
- 12-column grid with 24px gutters at desktop, collapsing to 16px on tablet, 12px on mobile
- Hero: split layout (text left, imagery right) at desktop; stacked on mobile
- Service grids: 3-column desktop, 2-column tablet, 1-column mobile
- Statistic blocks: 4-column desktop, 2×2 mobile
- Full-bleed dark sections occasionally break the container for case-study showcases

### Whitespace Philosophy
- **Enterprise calm**: Sections are deliberately spacious. The 96–128px vertical rhythm signals "established company" without feeling empty.
- **Rationed color**: Whitespace is part of the color palette — letting white dominate is what makes the red CTAs land.
- **Asymmetric hero**: Hero headlines sit left-aligned with imagery offset right; the asymmetry is intentional and breaks the centred-everything trap.

### Border Radius Scale
- Sharp (4px): Form inputs, table cells
- Subtly rounded (6px): Square brand buttons, badge chips
- Comfortably rounded (8px): Inputs, small cards
- Generously rounded (12px): Standard cards, containers
- Very rounded (16px): Featured cards, dropdowns, inline imagery
- Highly rounded (24px): Hero imagery, video containers
- Pill (50px / 999px): Primary CTAs, sticky widgets, status chips

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow, no border | Page background, body text, inline content |
| Hairline (Level 1) | `1px solid #E2E8F0` | Standard cards, table dividers, nav border |
| Soft (Level 2) | `0 2px 8px rgba(37,42,51,0.06)` | Resting card states, sticky nav |
| Lifted (Level 3) | `0 12px 32px rgba(37,42,51,0.10)` | Hover card states, dropdowns |
| Float (Level 4) | `0 24px 48px rgba(37,42,51,0.12)` | Hero imagery, modals, featured screenshots |
| Brand Glow | `0 8px 24px rgba(241,60,49,0.30)` | Primary CTA hover, sticky discussion widget |

**Shadow Philosophy**: IndiaNIC uses **cool-toned charcoal shadows** — never pure black, never warm — that mirror the Charcoal Ink text color. The result is a unified visual language where shadow and ink share a hue. The single exception is the Brand Glow on red CTAs, which uses the brand red itself at low opacity to create a halo that feels like the button is emitting energy rather than casting a shadow.

### Decorative Depth
- **White → Mist alternation**: Sections alternate between pure white and Mist (`#F8FAFC`) rather than using shadows for separation. The 4-point luminosity shift is enough to define sections without visual weight.
- **Card hover lift**: Service and case-study cards lift 4px on hover with a smooth `cubic-bezier(0.16,1,0.3,1)` ease — the standard interactive signal.

## 7. Do's and Don'ts

### Do
- Use Pure White (`#ffffff`) as the dominant background — let it carry 80%+ of the page
- Use Vermilion Red (`#F13C31`) only on primary CTAs, link arrows, and the loader — ration it
- Use Poppins for everything; let weight (400 → 800) carry the hierarchy
- Use heavy weights (700–800) on hero and section headlines
- Use the Sunrise Gradient (`#F13C31 → #FF9653`) for statistic numbers and the rare accent panel
- Use pill buttons (50px radius) for primary CTAs and square (6px) for inline actions
- Use cool charcoal shadows that match the ink color, never pure black
- Use fluid `clamp()` sizing on every heading
- Use the eyebrow label pattern (12px uppercase Vermilion Red) above section headings
- Use sticky discussion widgets and loader rings as red brand anchors

### Don't
- Don't use red as a section background — it must remain a punctuation color
- Don't introduce a serif font — Poppins is the entire system
- Don't use weights below 400 for body or below 600 for headings — Poppins reads thin and weak below those thresholds
- Don't use pure black (`#000`) text — always Charcoal Ink (`#252A33`)
- Don't use pure black shadows — always tinted charcoal at low opacity
- Don't centre everything — left-aligned text with split hero layouts is the IndiaNIC fingerprint
- Don't skip the eyebrow label pattern on major sections — it's the structural anchor
- Don't over-pill UI — pills are reserved for primary CTAs and chips, not every button
- Don't introduce additional gradients beyond Sunrise — multi-color gradients dilute the palette
- Don't use blue as a brand accent — blue is reserved for input focus rings only

## 8. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Single column, hamburger nav, hero stacks, statistics 2×2 |
| Tablet | 640–991px | 2-column service grids, condensed nav, hero still stacked |
| Desktop | 992–1199px | Full 3-column grids, horizontal nav with dropdowns, split hero |
| Large Desktop | 1200px+ | Container clamps at 1140px, full hero, max heading sizes |

### Touch Targets
- Buttons: 48px minimum height on mobile (14px vertical padding + 15px text + 5px buffer)
- Nav links: 44×44px hit area minimum
- Sticky widget: 56×56px circular at mobile

### Collapsing Strategy
- **Navigation**: Horizontal nav with dropdowns → off-canvas drawer triggered by hamburger
- **Hero**: Split layout → stacked, image moves below copy
- **Service grid**: 3 columns → 2 → 1 with consistent 24px gap
- **Statistics**: 4 columns → 2×2 grid, dividers removed
- **Section padding**: `clamp(48px, 8vw, 128px)` automatically halves on mobile
- **Type**: `clamp()` ensures the hero shrinks from 56px → 32px without a hard step

### Image Behavior
- Hero imagery scales proportionally inside its rounded container
- Service card images crop with `object-fit: cover` to maintain card heights
- Client logos scale via SVG, maintaining vector crispness
- Video backgrounds switch to static poster image on mobile to save bandwidth

## 9. Agent Prompt Guide

### Quick Color Reference
- Primary CTA: "Vermilion Red (#F13C31)"
- Page Background: "Pure White (#ffffff)"
- Alternate Section: "Mist (#F8FAFC)"
- Primary Text: "Charcoal Ink (#252A33)"
- Secondary Text: "Graphite (#475569)"
- Tertiary Text: "Slate Gray (#8B969F)"
- Borders: "Border Slate (#E2E8F0)"
- Warm Accent: "Warm Orange (#FF9653)"
- Soft Callout: "Coral Tint (#FFE3D6)"
- Dark Surface: "Charcoal Ink (#252A33)"

### Example Component Prompts
- "Create a hero section on Pure White (#ffffff) with a left-aligned eyebrow label in Vermilion Red (#F13C31) at 12px uppercase Poppins 600 with 1.5px letter-spacing. Below it, a headline at clamp(32px,5vw,56px) Poppins 800 in Charcoal Ink (#252A33), tracking -0.02em. Subheadline in Graphite (#475569) at 18px Poppins 400 line-height 1.6. Place a Brand Pill CTA in Vermilion Red with white text and a 50px radius next to an Outline Dark pill."
- "Design a service card on Pure White with 1px Border Slate (#E2E8F0), 12px radius, and 32px padding. Add a 40×40 Coral Tint (#FFE3D6) rounded square icon block above a 24px Poppins 600 Charcoal Ink heading. Body text in Graphite (#475569) at 16px Poppins 400. On hover, lift translateY(-4px) with shadow 0 12px 32px rgba(37,42,51,0.10)."
- "Build a statistics row with 4 columns separated by thin vertical Border Slate dividers. Each column shows a number at 56px Poppins 800 with the Sunrise Gradient (linear-gradient(135deg, #F13C31 0%, #FF9653 100%)) as text fill, and a 14px uppercase Slate Gray label below."
- "Create a dark footer on Charcoal Ink (#252A33) with White Soft (#F8FAFC) text. Column headings at 16px Poppins 600. Links at 14px Poppins 400 in Slate Gray (#8B969F), hover to White Soft. Border-top in Border Dark (#1E232B). Bottom-left sticky discussion widget: 56px Brand Pill in Vermilion Red with chat icon."
- "Build a contact form on Mist (#F8FAFC) with white input cards. Inputs: 1.5px Border Slate, 8px radius, 14px padding, 15px Poppins. On focus: border Vermilion Red, outline 4px rgba(241,60,49,0.15). Submit button: full-width Brand Pill, 14px vertical padding, 50px radius."

### Iteration Guide
1. Always specify "Poppins weight X" — weight is the system's hierarchy mechanism
2. Reference colors by name and hex — "Vermilion Red (#F13C31)" not "red"
3. Ration the brand red — at most one or two red elements per section
4. Use pill buttons only for primary CTAs, square buttons for inline actions
5. Include the eyebrow label pattern on every major section
6. Specify cool charcoal shadows, never black: `rgba(37,42,51,0.X)`
7. Use `clamp()` for any heading you describe
8. Default backgrounds: white, with Mist alternating sections — never colored backgrounds
9. For dark sections, use Charcoal Ink (`#252A33`), not pure black
10. Hover states should always include a `translateY(-1px)` to `translateY(-4px)` lift