An enterprise system built like an application frame rather than a marketing surface: a light chrome bar above a product tab rail, a canvas broken by four full-width flat bands, and one blue that does all the acting. Depth comes from band and gradient rather than shadow, and corners stop at 8px on controls and 12px on media.
72 Brand Variable is SAP's own variable typeface (Inter shown as substitute). What the variable axis buys is a weight range wider than most corporate systems use — 350, 400, 500 and 700 all appear — and the design leans on it hardest at the small end, where a 15px list item at 350 and a 15px nav link at 400 read as different classes of text at identical size. Tracking is left at zero everywhere.
The container around a photograph or illustration, at the system's 12px corner.
The home hero field: a gradient anchored on navy, the one atmospheric surface in a system that is otherwise flat.
A full-width flat band with square edges. Bands are how this layout separates sections — never a border, never a shadow.
An 8px base unit with a fine sub-step for control padding. Controls sit tight — the primary button pads 12px by 14px — and the large steps from 32px upward carry the vertical rhythm between bands.
The scale is short and stops early: 8px on every control, 12px on media, and nothing at all on full-width regions. Nothing in this system is a pill.
| Name | Width | Key changes |
|---|---|---|
| Mobile | 480–767px | Single column; nav collapses to a menu; two-column features stack |
| Tablet | 768–1023px | Two-column features hold; hero image moves below its text |
| Laptop | 1024–1279px | Full grid; tab rail shows all tabs; hero returns to side-by-side |
| Desktop | 1280–1439px | Centred content column at full width |
Touch targets: button-floating clears 44×44 WCAG-AAA at 58px and button-primary meets it exactly at 44px; the inactive product tab sits at 32px. Collapsing: the global bar collapses its links behind a menu but keeps the logo, search and account affordances; the product tab rail becomes a horizontal scroller so the active tab stays anchored; two-column features stack and the 2x2 grid keeps its hairlines; bands hold their full-bleed width at every size while their inner padding compresses.