SAP

Overview

SAP is the world's leading enterprise application software company, serving over 400,000 customers across industries with intelligent, cloud-native business solutions. The design system embodies "Enterprise Clarity"—a sophisticated yet approachable aesthetic that transforms complex business data into intuitive, actionable interfaces. The visual language combines a deep navy hero canvas (#001f4d) with a vibrant primary blue accent (#0070f2), creating a sense of trust, stability, and forward momentum. The brand personality is authoritative yet human: precise, solution-oriented, and grounded in real business outcomes. Voice example: "Connect everything. Achieve anything." — a declarative statement that positions SAP as the enabler of enterprise transformation, not merely a software vendor.

Colors

The SAP color system operates on a dual-layer principle: a light, neutral surface stack for content and interaction, paired with a deep navy hero layer for hero sections and brand moments. Primary (#0070f2) is the signature accent used on all call-to-action buttons, active states, and interactive elements—it signals actionability and brand presence. Secondary (#0040b0) provides a deeper anchor for navigation and secondary actions, creating visual hierarchy without competing for attention. Tertiary (#5d36ff) is reserved for status indicators, badges, and accent highlights that require distinction from primary interactions. The surface stack ranges from pure white (#ffffff) for content areas to #eaecee for subtle container separation, with on-surface text at #545454 for optimal readability (

Typography

The type system centers on the proprietary "72 Brand Variable" font family, a modern, geometric typeface that conveys SAP's technical sophistication while remaining highly legible across all screen sizes. Display (60px, 700 weight) is reserved for hero headlines and brand moments; Headline-lg (48px, 500 weight) anchors major section titles; Body-md (16px, 400 weight) is the workhorse for body copy and UI text. Letter-spacing is tightly controlled: -0.04em on display sizes to create visual impact, -0.02em on headlines for elegance, and 0em on body text for maximum readability. Font weights range from 400 (regular) for body copy to 700 (bold) for emphasis, with 500 (medium) used for interactive elements like button labels and list item headers. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15

Layout

The layout system uses a 12-column responsive grid with a maximum container width of 1432px on desktop, scaling down to 1280px at 1280px breakpoint, 980px at 980px, and 640px at 640px for mobile. The gutter (margin between columns) is consistently 24px, with section padding using the semantic spacing scale: lg (40px) for major section separation, md (24px) for component padding, and sm (12px) for internal element spacing. Hero sections span full-width with 80px vertical padding on desktop, creating a premium, breathing composition. Content cards use md (24px) padding with 1px borders at #d5dadd to define boundaries without visual heaviness. The white-space philosophy prioritizes clarity over density: minimum 40px vertical separation between major sections, 24px between subsections, and 12p

Elevation & Depth

Depth in the SAP system is achieved through a restrained shadow and border strategy that maintains the clean, professional aesthetic. Level 1 (Base): flat surfaces with 1px solid borders at #d5dadd (surface-container-highest), no shadow. Level 2 (Standard Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating subtle lift for interactive cards and modals. Level 3 (Elevated/Hover States): box-shadow: 0 8px 24px rgba(120, 88, 255, 0.16), introducing a slight purple tint to reinforce brand presence and signal interactivity. Hover transitions use 200ms ease-in-out timing, allowing users to per

Shapes

The shape philosophy is "Technical Precision with Human Warmth"—combining sharp, geometric forms with subtle rounding to balance enterprise formality with approachability. Buttons use lg (1rem / 16px) border-radius, creating a modern, friendly appearance while maintaining clear affordance. Input fields and cards use DEFAULT (0.5rem / 8px) radius for a more structured, data-focused feel. Hero sections and full-width containers have 0px radius, emphasizing their role as immersive, edge-to-edge experiences. Badges and pills use full (9999px) radius for maximum visual distinction. The rationale: l

Components

Action Elements Buttons are the primary interaction mechanism and come in two variants: primary (solid #0070f2 background, white text, 16px padding horizontal, 48px height, lg radius) and secondary (white background, #0070f2 text, 1px border, same dimensions). Primary buttons use 200ms ease-in-out transitions to #0057d2 on hover, signaling interactivity without abrupt color shifts. Focus states apply a 4px outline at #3699f1 with 1px white inner border, meeting WCAG AAA contrast requirements. All buttons use label-md typography (14px, 600 weight) for clear, scannable text.

Containers & Surfaces Cards are the foundational container element: white background (#ffffff), 1px border at #d5dadd, md (24px) padding, and DEFAULT (8px) radius. Standard cards use md elevation (0 3px 8px rgba

Do's and Don'ts

**Do**

• Do use primary blue (#0070f2) exclusively for call-to-action buttons, active states, and key interactive elements—it is the brand's signature accent and must be reserved for moments that demand user attention.
• Do apply 200ms ease-in-out transitions on all interactive state changes (hover, focus, active) to create a smooth, professional interaction experience that feels intentional and refined.
• Do maintain minimum 40px vertical separation between major sections and 24px between subsections to create breathing room and reduce cognitive load on complex enterprise interfaces.
• Do use the 72 Brand Variable font family with precise letter-spacing (-0.04em on display, -0.02em on headlines, 0em on body) to maintain SAP's distinctive typographic voice and ensure optimal readability across all screen sizes.

**Don't**

• Don't use secondary blue (#0040b0) or tertiary purple (#5d36ff) as primary call-to-action colors—these are supporting accents and will dilute the brand's visual hierarchy and user focus.
• Don't apply shadows heavier than lg elevation (0 8px 24px rgba(120, 88, 255, 0.16)) on standard components; excessive depth undermines the clean, professional aesthetic and creates visual clutter.
• Don't mix font families or use system fonts (Arial, Helvetica) as primary typography—always fall back to 72 Brand Variable first, then Arial/Helvetica only for accessibility or legacy browser support.
• Don't use border-radius values smaller than DEFAULT (8px) on interactive elements like buttons or input fields; this creates a harsh, overly technical appearance that conflicts with SAP's human-centered brand positioning.