Publicis Sapient

Overview

Publicis Sapient is an enterprise AI solutions platform that bridges industry expertise with cutting-edge artificial intelligence capabilities. The brand embodies a "Precision-Driven Modernism" aesthetic—clean, confident, and purposeful—designed to communicate trust and innovation to C-suite executives and technology leaders. The visual language prioritizes clarity and directness: a pure white canvas with strategic use of the signature red accent (#e90130) on high-impact CTAs, complemented by deep navy and vibrant green supporting accents. The UI evokes a sense of controlled sophistication: every pixel serves a function, every color choice signals intent, and every interaction feels deliberate and authoritative.

The brand voice is consultative yet commanding—speaking to enterprise decision-makers with precision and respect. Vocabulary leans toward business outcomes ("modernize," "scale," "measurable results") rather than technical jargon. Tone is confident without arrogance, forward-thinking without hype. Example sentence in brand voice: "We transform your legacy systems into AI-native platforms that drive measurable competitive advantage."

Colors

The color system is built on a foundation of absolute clarity: pure white (#ffffff) as the dominant surface, with a carefully curated accent palette that signals action and priority. Primary red (#e90130) is the brand's signature accent—reserved exclusively for call-to-action buttons, critical links, and focus states. This high-saturation red (hue 0°, saturation 100%, lightness 46%) commands attention without feeling aggressive; it's the color users instinctively reach for. Secondary blue (#3860be) provides a supporting accent for secondary actions, data visualization, and informational elements—a professional, trustworthy tone that complements the primary red. Tertiary green (#68b631) is used sparingly for success states, positive indicators, and growth-related messaging. The neutral pale

Typography

The type system pairs Lexend Deca—a geometric, high-contrast display typeface—for headlines and hero content, with Roboto—a humanist sans-serif—for body text and UI labels. This pairing creates visual hierarchy through both form and weight: Lexend Deca's distinctive letterforms command attention at large sizes (display: 72px, headline-lg: 48px), while Roboto's neutral warmth ensures readability at smaller sizes (body-md: 16px, label-sm: 12px). Display text (72px, 400 weight, -0.02em letter-spacing) is reserved for hero headlines and major section breaks, creating dramatic entry points. Headline-lg (48px) is used for section titles and key messaging. Body-lg (18px) and body-md (16px) form the primary reading experience, with generous 28px and 24px line heights respectively, ensuring comfort

Layout

The layout system uses a 12-column grid with a max-width of 1280px, providing a flexible yet structured canvas for enterprise content. The grid operates in two modes: fluid on mobile and tablet (full-width with 24px gutters), fixed on desktop (centered container with 24px internal gutters). Section spacing follows the semantic scale: lg spacing (40px) separates major sections (hero, feature blocks, testimonials), md spacing (24px) separates subsections and card groups, and sm spacing (12px) separates inline elements. The white background (#ffffff) is the default surface; no secondary background colors are introduced unless explicitly signaling a distinct content zone (e.g., a dark footer or a highlighted feature block). Container max-width of 1280px ensures that even on ultra-wide displays

Elevation & Depth

Elevation is conveyed through subtle shadows and layering, not through color shifts or dramatic depth effects. The shadow system uses three levels: sm (0 2px 5px rgba(0, 0, 0, 0.06)) for cards and subtle containers, md (0 3px 8px rgba(0, 0, 0, 0.15)) for elevated cards and modals, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating elements like sticky headers or popovers. Shadows are always black with low opacity (6–15%), never colored, maintaining the clean aesthetic. The base layer (Level 1) is the white surface (#ffffff) with no shadow. Level 2 (standard cards, form inputs) receives sm sh

Shapes

The shape philosophy is "Functional Minimalism"—rounded corners are used strategically to signal interactivity and soften hard edges, but never gratuitously. Buttons and pills use full rounding (border-radius: 9999px), creating a distinctive, friendly silhouette that's instantly recognizable as clickable. Cards and containers use md rounding (0.75rem / 12px), providing a subtle softness that feels modern without appearing playful. Form inputs use DEFAULT rounding (0.5rem / 8px), a middle ground that's neither too sharp nor too rounded. Decorative elements and dividers may use sm rounding (0.25

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use the signature red background (#e90130) with white text, full rounding (9999px), and 12px vertical / 32px horizontal padding, resulting in a 48px height. Font is Roboto 14px, 500 weight. Hover state shifts the background to #c70026 (darker red, -15% lightness) with no other changes; active state shifts to #a00020 (even darker). Transition timing is 200ms ease-out for smooth feedback. Secondary buttons (button-secondary) use a transparent background with a 2px red border and red text, same padding and height as primary. On hover, the background fills with the primary-container color (#ffcccc) and text shifts to on-primary-container (#8b0000), creating a "fill" effect. Ghost buttons (button-g

Do's and Don'ts

**Do**

• Do use the primary red (#e90130) exclusively on high-priority CTAs, focus states, and success indicators—never on decorative elements or backgrounds.
• Do maintain 24px gutters and 40px section spacing to create visual breathing room and guide the eye through content hierarchy.
• Do apply full rounding (9999px) only to buttons and pills; use md rounding (12px) for cards and DEFAULT rounding (8px) for inputs to maintain functional clarity.
• Do pair Lexend Deca headlines with Roboto body text, using size and weight to create hierarchy, never relying on color alone.
• Do use subtle shadows (sm: 0 2px 5px rgba(0, 0, 0, 0.06)) for standard cards and md shadows (0 3px 8px rgba(0, 0, 0, 0.15)) for elevated elements to signal depth without visual noise.
• Do ensure all interactive elements have visible focus states: a 3px outline in primary red with 0.2em offset for keyboard navigation.

**Don't**

• Don't use the primary red on backgrounds, body text, or decorative elements—it's reserved for interactive affordances and critical actions only.
• Don't introduce additional accent colors beyond primary red, secondary blue, and tertiary green; the neutral palette is sufficient for all other needs.
• Don't apply rounding to dividers, borders, or structural elements; reserve rounding for interactive components and containers.
• Don't use shadows heavier than lg (0 8px 24px rgba(0, 0, 0, 0.12)) or with colored overlays; maintain the clean, minimal aesthetic.
• Don't mix Lexend Deca and Roboto weights arbitrarily; use 400 weight for all headlines and 400–500 weight for body and labels.
• Don't reduce padding or spacing below the sm scale (12px) in interactive elements; maintain touch targets of at least 44px × 44px for accessibility.