Capgemini India

Overview

Capgemini India's design system embodies 'Professional Clarity'—a structured, confidence-driven aesthetic that prioritizes legibility, trust, and purposeful interaction. The brand serves enterprise clients and technology professionals who demand precision, speed, and reliability. The visual language combines a clean white canvas with a signature Capgemini Blue (#579af6) accent, supported by a secondary corporate navy (#0070ad) and a tertiary deep blue (#003388). This palette conveys stability and expertise without sacrificing approachability. The interface avoids ornamentation; every pixel serves a functional purpose, and every interaction is deliberate.

The brand voice is direct, confident, and solution-oriented. Capgemini speaks to C-suite executives, CTOs, and digital transformation leaders—people who value efficiency and results. Tone: authoritative yet accessible, never patronizing. Vocabulary emphasizes outcomes ('transform', 'accelerate', 'deliver') over features. Example sentence in brand voice: 'We accelerate your digital transformation with proven consulting and cutting-edge technology.'

Colors

The color system is anchored by a three-tier hierarchy: Primary Blue (#579af6) is the signature accent used on all call-to-action buttons, active states, and key interactive elements—it commands attention without aggression. Secondary Navy (#0070ad) provides supporting emphasis for secondary actions, links, and status indicators. Tertiary Deep Blue (#003388) is reserved for text hierarchy, badges, and container backgrounds in data-heavy contexts. The surface stack uses a pure white (#ffffff) as the primary canvas, with carefully calibrated grays (surface-container-high at #e5e5e5, surface-container at #eeeeee) for subtle depth and visual separation. On-surface text is set to #444444 (not pure black) to reduce eye strain in long-form reading; on-surface-variant (#666666) is used for seconda

Typography

The type system uses Ubuntu across all scales, a geometric sans-serif that conveys modernity and clarity. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and brand statements; it commands the page with its scale and weight. Headline-lg (40px, 600 weight, -0.02em) is used for section titles and major content breaks. Headline-md (28px, 600 weight, -0.01em) serves as subsection headers. Title-lg (20px, 600 weight) is applied to card titles and form labels. Body-lg (18px, 400 weight, 0.01em letter-spacing) is the primary reading size for long-form content and hero copy. Body-md (16px, 400 weight, 0.02em letter-spacing) is the default body text for UI labels and descriptions. Label-md (14px, 600 weight, 0.01em) is used for button text, form labels, and UI micro

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, allowing for flexible responsive design across mobile, tablet, and desktop viewports. The gutter (spacing between columns) is set to 24px, providing breathing room without excessive whitespace. Section separation uses the lg spacing token (40px) for major content breaks, md spacing (24px) for subsections, and sm spacing (12px) for component-level grouping. The design favors a 'generous white space' philosophy: negative space is treated as a design element, not wasted real estate. Hero sections typically span the full viewport width with a 1:1 or 16:9 aspect ratio for imagery. Card-based layouts use a 3-column grid on desktop, 2 columns on tablet, and 1 column on mobile. Container max-widths are enforced at 12

Elevation & Depth

Visual hierarchy is conveyed through a restrained shadow system that avoids the 'floating card' aesthetic common in Material Design. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle depth on interactive elements like buttons and form inputs; md (0 4px 12px rgba(0, 0, 0, 0.08)) for elevated cards and modals that require clear separation from the background; and lg (0 16px 50px rgba(0, 0, 0, 0.15)) for hero imagery and full-screen overlays. Shadows are soft and diffuse, never harsh or dramatic. On hover, interactive elements transition from sm to md elevation

Shapes

The shape philosophy is 'Structured Softness'—corners are rounded just enough to feel modern and approachable, but not so much that they appear playful or casual. Buttons use lg radius (1rem / 16px), creating a pill-like shape that feels inviting without being whimsical. Cards use lg radius (1rem) for consistency with buttons. Form inputs use the DEFAULT radius (0.5rem / 8px), a subtle rounding that maintains a utilitarian feel. Badges and small UI elements use full radius (9999px) to create perfect circles or pills. The reasoning: larger, more prominent elements (buttons, cards) receive more

Components

Action Elements Buttons are the primary call-to-action mechanism. The button-primary component uses a solid background of #579af6 with white text, 48px height, and 12px vertical / 24px horizontal padding. On hover, the background darkens to #4a8ae8 and the shadow elevates from sm to md (0 4px 12px rgba(0, 0, 0, 0.08)), signaling interactivity. On active/pressed state, the background becomes #3a7ad8 with an inset shadow (inset 0 2px 4px rgba(0, 0, 0, 0.15)) to create a 'pressed' effect. The transition duration is 0.2s ease-in-out. Button-secondary uses a transparent background with a 1px solid border in #bfc3c8 and text in #579af6. On hover, the background fills with #e5e5e5 and the border becomes #579af6, creating a clear visual progression. Links use an animated underline: a linear gr

Do's and Don'ts

**Do**

• Do use Primary Blue (#579af6) exclusively for primary CTAs, active states, and focus indicators—it is the brand's signature accent and must remain visually distinct.
• Do maintain at least 24px of padding (md spacing) inside cards and containers to prevent content from feeling cramped; generous whitespace improves readability and trust.
• Do apply the 0.2s ease-in-out transition to all interactive state changes (hover, focus, active) to create a cohesive, responsive feel across the interface.
• Do use Ubuntu at 16px (body-md) or larger for all body text; smaller sizes reduce legibility and violate WCAG AA contrast requirements at this brand's color palette.
• Do reserve the lg shadow (0 16px 50px rgba(0, 0, 0, 0.15)) for hero imagery and full-screen overlays only; overuse dilutes the visual hierarchy.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text on colored backgrounds; instead use on-primary (#ffffff) or on-surface (#444444) to maintain the brand's refined aesthetic.
• Don't round corners beyond lg radius (1rem) on buttons or cards; excessive rounding makes the interface feel playful and undermines the professional brand positioning.
• Don't apply multiple box-shadows to a single element; use only one shadow per elevation level to maintain visual clarity and performance.
• Don't use secondary or tertiary blues (#0070ad or #003388) for primary CTAs; these are supporting colors and will confuse users about interaction priority.
• Don't set line-height below 1.5 (24px for 16px text) for body copy; tighter leading reduces readability and accessibility, especially for users with dyslexia or low vision.