EX3

Overview

EX3 is a strategic SAP Business Suite partner that transforms enterprise technology through bold, human-centered design. The brand serves mid-to-large organizations seeking consultancy that balances technical rigor with creative vision. The aesthetic movement is 'Gradient Modernism'—a fusion of professional minimalism with vibrant, directional color flows (purple-to-red gradients dominate hero imagery). The UI evokes confidence, innovation, and forward momentum; users should feel they're partnering with a firm that thinks beyond legacy systems. The brand personality is direct, ambitious, and grounded: consultants who speak plainly about complex SAP implementations without corporate jargon. Vocabulary favors action verbs (Envision, Execute, Excel) and human-first language. Example sentence in brand voice: 'We align your technology roadmap with your business reality—no buzzwords, just results.'

Colors

The color system anchors on a deep, sophisticated purple (#412288) as the primary accent—used exclusively on CTAs ('Book a meeting' buttons), navigation highlights, and focus states. This purple conveys enterprise credibility while remaining distinctly modern. The secondary accent is a vivid scarlet (#ff2e00), deployed sparingly on accent elements, list markers, and error states to inject energy and urgency. The tertiary purple (#7a64ab) provides a lighter, softer variant for hover states and container backgrounds. The gradient hero (purple → red) is the brand's signature visual device, applied to large background shapes and image frames to create depth and movement. Neutral surfaces range from near-white (#fbfbfc) for page backgrounds to mid-gray (#e0e0e2) for headers and card containers.

Typography

The type system uses Geist (a modern, geometric sans-serif from Google Fonts) across all scales, creating visual consistency and a contemporary feel. Display (56px, 400 weight) anchors hero headlines with generous line-height (64px) and tight letter-spacing (-0.02em) to convey scale and confidence. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure page sections with clear hierarchy. Body text (16px–18px, 400 weight) maintains readability at 24–28px line-height, supporting dense consultancy content. Labels and buttons use 14px–12px weights at 500–600 to ensure clickability and visual prominence. On small labels over busy backgrounds (e.g., badge overlays on gradient hero images), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) to preserve legibility. All headings u

Layout

The layout follows a 12-column fluid grid with a 1280px max-width container, centering content on desktop and reflowing to single-column on mobile (breakpoints: 991px tablet, 767px mobile). Page rhythm is governed by the spacing scale: section separation uses lg spacing (40px), card/component padding uses md spacing (24px), and internal element gaps use sm spacing (12px). The header spans full-width with 63.25px horizontal padding and sits on the surface-container color (#e0e0e2), creating a subtle visual anchor. Hero sections employ asymmetric layouts—text on the left (56px headline + 18px body copy) and a large gradient-framed image on the right—to balance content density with visual interest. White-space philosophy prioritizes breathing room around CTAs and key messaging; no section sho

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background color shifts. Level 1 (Base): flat surfaces at surface-container (#e0e0e2) with no shadow, used for body backgrounds and neutral zones. Level 2 (Standard Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with background surface-container (#e0e0e2), applied to cards, input fields, and modals to lift them 1 layer above the base. Level 3 (Elevated/Hover): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with background surface-container-high (#d8d8d8), used on card-hover, dropdown panels, and prominent CTAs to signal interactivi

Shapes

The shape philosophy is 'Soft-Technical Modernism'—balancing geometric precision with approachable curves. Buttons and pills use a full 100px border-radius (or 50% in CSS), creating a distinctive rounded-pill aesthetic that softens the corporate consultancy tone and signals friendliness. Cards and containers use lg radius (1rem / 16px) for a modern, slightly rounded corner that feels contemporary without being playful. Input fields use md radius (0.75rem / 12px) to sit between buttons and cards, maintaining visual hierarchy. The gradient hero shape employs a large xl radius (1.5rem / 24px) on

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses background: #412288, text-color: #ffffff, padding: 10px 24px, height: 44px, border-radius: 100px, font-weight: 500, and font-size: 14px (label-md). On hover, the background transitions to #8d7ab8 (primary-container) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied over 150ms (transition: background-color 150ms ease, box-shadow 150ms ease). Active state darkens to #7a64ab (primary-fixed-dim). Button-secondary mirrors the primary structure but uses transparent background with a 1px solid #412288 border and text-color: #412288; on hover, it fills with surface-container-high (#d8d8d8). Both button variants maintain the 100px border-radius pill shape to reinforce brand identity.

Contain

Do's and Don'ts

**Do**

• Do use the primary purple (#412288) exclusively on CTAs and interactive focus states—it's the brand's signature accent and should never be diluted or overused on passive elements.
• Do apply the gradient hero (purple → red) to large background shapes and image frames to create visual momentum and depth; it's the brand's most distinctive device.
• Do maintain the 100px border-radius pill shape on all buttons to reinforce the approachable, modern brand identity—never use sharp corners or minimal radius on primary actions.
• Do pair Geist typography with tight letter-spacing (-0.01em to -0.02em on headlines) to achieve the premium, editorial aesthetic that differentiates EX3 from generic corporate sites.
• Do use the three-tier shadow system (no shadow / 0 3px 8px / 0 8px 24px) consistently to signal hierarchy and interactivity—never mix shadow depths or add blur effects.

**Don't**

• Don't use the scarlet secondary (#ff2e00) on primary CTAs—reserve it for accent elements, error states, and list markers to maintain visual focus on the purple primary actions.
• Don't apply border-radius smaller than 12px (md) on interactive elements; the brand's soft-technical philosophy requires rounded, approachable corners that signal modernity.
• Don't mix typefaces—Geist is the sole font family across all scales. Avoid Inconsolata (monospace) in body copy; reserve it for code blocks or technical documentation only.
• Don't use glassmorphism, blur effects, or transparency overlays; the design system relies on clean shadows and solid color contrast for hierarchy, not frosted-glass aesthetics.
• Don't exceed 1280px container max-width on desktop, and don't reduce gutter spacing below 24px on tablet/mobile—white-space is essential to the consultancy brand's premium positioning.