---
version: alpha
name: SAP
description: SAP Fiori design language — enterprise clarity through SAP Blue authority, the 72 Brand typeface at medium weight, soft-shadow depth on white canvas, and 8px-base spacing that balances information density with generous breathing room.

colors:
  # Canvas + surfaces
  background: "#ffffff"
  surface: "#f5f6f7"            # light gray tray — product cards, sidebar fills
  surface-muted: "#ebf8ff"      # pale blue-tint — secondary section washes
  surface-dark: "#1a2733"       # deep navy — dark hero panels, footers

  # Text / ink
  ink: "#223548"                # SAP Dark Blue — primary heading and body text
  ink-secondary: "#545454"      # medium gray — supporting copy, metadata
  ink-tertiary: "#6a7a87"       # muted slate — placeholder, caption text
  on-primary: "#ffffff"         # white text on filled buttons
  on-dark: "#ffffff"            # white on dark surfaces

  # Brand accent — SAP Blue
  primary: "#0057d2"            # SAP Blue — primary buttons, links, interactive
  primary-hover: "#0040b0"      # deeper blue — hover state on primary
  primary-active: "#003080"     # pressed / active state  /* estimated */
  primary-container: "#ebf5ff"  # pale blue tint — tinted backgrounds, info badges
  primary-border: "#0057d2"     # button outline color

  # Secondary accent — SAP slate (used on ghost / outlined buttons)
  secondary: "#354a5f"          # SAP Blue-Gray — secondary action borders, ghost text
  secondary-hover: "#223548"    # darker slate on hover  /* estimated */

  # Semantic
  success: "#256f3a"            # SAP Green  /* estimated */
  success-bg: "#e8f5ea"         # success tint  /* estimated */
  warning: "#e76500"            # SAP Gold-Orange  /* estimated */
  warning-bg: "#fff3e0"         # warning tint  /* estimated */
  error: "#bb0000"              # SAP Red  /* estimated */
  error-bg: "#ffebeb"           # error tint  /* estimated */
  info: "#0057d2"               # same as primary for info state

  # Borders & dividers
  border: "#d5dadd"             # light cool-gray border  /* estimated from rgb(213,218,221) */
  border-subtle: "#e8ecee"      # very subtle divider  /* estimated */
  border-focus: "#0057d2"       # focus ring color — SAP Blue

  # Shadow tints (opaque; Google format requires hex)
  shadow-soft: "#b8c2cc"        # was rgba(34,54,73,0.25) — card + floating shadow
  shadow-deep: "#8494a1"        # was rgba(34,54,73,0.35) — modal / elevated shadow  /* estimated */

typography:
  display-hero:
    fontFamily: "72 Brand, 72 Brand Variable, Arial, Helvetica, sans-serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.10
    letterSpacing: -0.5px
  display:
    fontFamily: "72 Brand, 72 Brand Variable, Arial, Helvetica, sans-serif"
    fontSize: 44px
    fontWeight: 500
    lineHeight: 1.10
    letterSpacing: -0.25px
  heading-section:
    fontFamily: "72 Brand, 72 Brand Variable, Arial, Helvetica, sans-serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: 0px
  heading-sub:
    fontFamily: "72 Brand, 72 Brand Variable, Arial, Helvetica, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: 0px
  heading-card:
    fontFamily: "72 Brand, 72 Brand Variable, Arial, Helvetica, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "72 Brand, 72 Brand Variable, Arial, Helvetica, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body:
    fontFamily: "72 Brand, 72 Brand Variable, Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body-compact:
    fontFamily: "72 Brand Variable, Arial, Helvetica, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px
  nav-link:
    fontFamily: "72 Brand, 72 Brand Variable, Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  button-ui:
    fontFamily: "72 Brand, 72 Brand Variable, Arial, Helvetica, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  caption:
    fontFamily: "72 Brand Variable, Arial, Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  eyebrow:
    fontFamily: "72 Brand Variable, Arial, Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.40
    letterSpacing: 0.08px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 80px
  4xl: 192px

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  pill: 9999px

components:
  # Primary button — SAP Blue filled
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 11px 13px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
  button-primary-active:
    backgroundColor: "{colors.primary-active}"
    textColor: "{colors.on-primary}"

  # Secondary / ghost button — outlined SAP Blue
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 11px 13px
  button-secondary-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary-hover}"

  # Ghost dark button — slate outline (on light surfaces)
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 11px 13px
  button-ghost-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.secondary-hover}"

  # Card — the primary content container
  card:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.md}"
    padding: 24px
  card-hover:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.md}"

  # Tray / feature tile — light gray
  tile:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    padding: 24px

  # Form input
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.xs}"
    padding: 8px 12px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"

  # Navigation bar — white, sticky
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 0px 20px

  # Badge / tag
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  # Banner / notification strip
  banner:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 24px
---

# SAP Design System

## Overview

SAP's web presence is the digital face of the world's largest enterprise software company, and it earns that gravity quietly. The page opens on pure white ({colors.background}), a deliberate statement of restraint from a company that services 400,000 businesses: no heavy chrome, no sidebar clutter, just the enterprise product speaking for itself. SAP Blue ({colors.primary}) punctuates with absolute economy — primary CTAs, links, and interactive borders are the only consistent chromatic presence on an otherwise achromatic ground. The dark navy ({colors.ink}) headings in 72 Brand Medium carry the quiet confidence of a company that does not need to shout.

The 72 typeface is the least-known proprietary design token in enterprise software. Developed specifically for SAP's Fiori design system, it resolves the classical problem of rendering complex multilingual content across 40+ supported languages: uniform stroke weight at medium (500), optical metrics tuned for Latin, CJK, Arabic, and Devanagari at the same time. On the marketing site, 72 Brand Medium at 64px creates a display presence that is both contemporary and slightly neutral — authoritative without the expressive eccentricity of a display serif or the tech-startup familiarity of a geometric grotesque. The tight 1.10 line-height at display sizes gives headlines a compressed, editorial gravitas.

Depth in SAP's system comes not from bold chromatic contrast but from layered softness. Cards float on subtle box-shadows (`0px 10px 30px {colors.shadow-soft}`) against white surfaces; sections alternate between white and a pale gray-tint ({colors.surface}) wash. The hero section breaks from this restraint with a three-dimensional gradient sculpture — purple-to-violet crystalline forms representing Joule, SAP's AI — the sole expressive flourish in an otherwise disciplined composition. The result is an enterprise design system that manages to feel modern without sacrificing the trustworthiness that Fortune 500 procurement teams require.

**Key Characteristics:**
- 72 Brand typeface at weight 500 (Medium) for all display and UI text — a proprietary font engineered for multilingual enterprise readability
- SAP Blue (`{colors.primary}`) as the sole interactive accent — primary buttons, focus states, and links share one committed hue
- White canvas ({colors.background}) with {colors.surface} gray trays for section separation — depth through background-color layering, not saturation
- Soft multi-layer box-shadows (`0px 10px 30px {colors.shadow-soft}`) on cards and floating elements — a gentle material quality
- 8px base spacing unit with a scale that reaches 192px for full-bleed section padding
- 8px border-radius on primary buttons (`{rounded.sm}`) and 12px on cards (`{rounded.md}`) — enough softening to feel approachable without becoming playful
- Dark navy ({colors.ink} at `#223548`) for primary text — not pure black, a warm corporate depth
- SAP slate ({colors.secondary} at `#354a5f`) for ghost button borders and secondary navigation — a blue-gray that complements the primary without competing
- Purple-violet gradient hero reserved for Joule AI — the system's one expressive exception, never replicated in product UI
- Compact navigation with icon-driven utility links (search, account, cart) on the far right at 16px 72 Brand

## Colors

### Primary
- **White** (`{colors.background}`): The universal canvas — every page, every card, every modal.
- **SAP Dark Blue** (`{colors.ink}`): Primary text. Not pure black — this warm navy carries typographic warmth.
- **Light Gray** (`{colors.surface}`): Secondary surface for tray sections, product tiles, alternating content zones.

### Brand Accent
- **SAP Blue** (`{colors.primary}`): Every interactive element — primary buttons, text links, focus rings, active nav indicators. The single chromatic heartbeat of the entire system.
- **SAP Blue Hover** (`{colors.primary-hover}`): Darker pressed-in blue for hover state on primary buttons and links.
- **SAP Blue Tint** (`{colors.primary-container}`): Pale blue wash for info badges, selected row backgrounds, ghost button hover fill.

### Secondary
- **SAP Slate** (`{colors.secondary}`): Ghost button borders, secondary nav text, medium-emphasis UI. A blue-gray that sits between {colors.primary} and {colors.ink}.
- **SAP Navy** (`{colors.surface-dark}`): Dark hero panels and footer backgrounds — a deep midnight that grounds page extremities.

### Text States
- `{colors.ink-secondary}` — Supporting body copy, metadata labels, card descriptions
- `{colors.ink-tertiary}` — Placeholder text, muted captions, disabled labels

### Semantic
- **Success** (`{colors.success}`) — confirmation states, checkmarks
- **Warning** (`{colors.warning}`) — alert banners, caution indicators
- **Error** (`{colors.error}`) — validation errors, critical alerts
- **Info** (`{colors.info}`) — informational callouts, defaults to SAP Blue

### Borders & Focus
- `{colors.border}` — standard card and input borders
- `{colors.border-focus}` — 2px focus ring, matches SAP Blue for keyboard navigation clarity

## Typography

### Font Family
- **Primary**: `72 Brand`, fallbacks: `72 Brand Variable, Arial, Helvetica, sans-serif`
- **Variable companion**: `72 Brand Variable` — used at smaller sizes (body-compact, caption, eyebrow) where variable-font optical sizing offers subtle refinement

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`) rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | Hero headline — "Autonomous Enterprise", campaign statements |
| `display` | Section-opening statements, marketing copy leaders |
| `heading-section` | H2 equivalent — major section titles |
| `heading-sub` | H3 equivalent — feature group headers |
| `heading-card` | Card titles, feature names, dialog headers |
| `body-large` | Lead paragraphs, prominent supporting copy |
| `body` | Standard running text, descriptions |
| `body-compact` | Dense UI text, secondary descriptions |
| `nav-link` | Navigation items, tab labels |
| `button-ui` | Button labels, CTA text |
| `caption` | Metadata, timestamps, fine print |
| `eyebrow` | Category labels above headlines ("ENTERPRISE AI") |

### Principles
- **Singular weight at display sizes**: Weight 500 (Medium) across the entire display and heading scale. SAP's approach is tonal hierarchy through size alone, not weight variation.
- **Variable at compact sizes**: 72 Brand Variable at 12–15px for optical refinement where the static font's metrics become critical.
- **No letter-spacing on display text**: Only the `eyebrow` token introduces tracking (0.08px) for category-label legibility at 12px.
- **Line-height discipline**: 1.10 for display (maximizes visual impact), 1.25 for headings (breathing room for medium blocks), 1.50 for body (comfortable reading rhythm).
- **Multilingual readiness**: 72 was designed for 40+ languages — never substitute system fonts or geometry-heavy display faces that would break CJK or Arabic rendering.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: **8px** — the foundational Fiori grid atom.

SAP's marketing pages use generous vertical rhythm. Section padding often reaches `{spacing.3xl}` (80px) or `{spacing.4xl}` (192px) for full-bleed panels, reflecting enterprise brand practice of giving content room to breathe without feeling cluttered by product complexity.

### Grid & Container
- Max content width: approximately 1440px (centered, with responsive margins)
- Primary layout: 12-column grid with 24px gutters
- Navigation: full-width, sticky, 64px height
- Hero: full-width with contained text column (~640px wide)
- Content sections: alternating full-width background panels with inner max-width container

### Whitespace Philosophy
- Enterprise content density is managed with generous section-level padding, not tight component spacing
- Cards use 24px internal padding (`{spacing.lg}`) — approachable, not cramped
- Fiori's spacing philosophy: information should be findable, not overwhelmed by proximity

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, `{colors.background}` background | Default page surface |
| Tray (Level 1) | No shadow, `{colors.surface}` background | Section zones, sidebar fills |
| Card (Level 2) | `0px 10px 30px {colors.shadow-soft}` | Standard content cards, feature tiles |
| Elevated (Level 3) | `0px 20px 80px {colors.shadow-soft}` | Prominent hero cards, spotlighted features |
| Floating (Level 4) | Multi-layer shadow + subtle glow | Dropdowns, tooltips, popovers |
| Focus Ring | `2px solid {colors.border-focus}` | Keyboard focus indicator |

**Shadow Philosophy**: SAP uses warmly-tinted, soft-spread shadows to simulate material depth. The `rgba(34,54,73,...)` shadow base is blue-gray rather than neutral black — it harmonizes with the navy ink family and gives cards a slightly cool, professional float rather than the warm shadow-drop common in consumer apps. Shadow spread is generous (30px, 80px) to create ambient lift rather than hard edges.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-width banners, nav bar, footer |
| `xs` | 4px | Small interactive elements, input fields |
| `sm` | 8px | Primary and ghost buttons |
| `md` | 12px | Cards, feature tiles, dialog containers |
| `pill` | 9999px | Badges, tags, avatar circles |

SAP Fiori uses a graduated radius system — buttons at `{rounded.sm}`, cards at `{rounded.md}`. This slight progression communicates containment hierarchy: interactive elements are slightly sharper than passive containers. The 9999px pill for badges gives them a fully circular end-cap at any size.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`).

### Button Variants
- **`button-primary`** — `{colors.primary}` fill, white text, 8px radius, 11px 13px padding. The authoritative SAP Blue CTA used for "See Joule in action", "Contact us", primary product actions.
- **`button-secondary`** — white background, `{colors.primary}` text and border. For secondary actions that don't need full visual weight.
- **`button-ghost`** — white background, `{colors.secondary}` slate border and text. Used for tertiary actions like "Watch the SAP Sapphire replay".

### Cards
- **`card`** — white background, 12px radius, 24px padding, soft shadow lift. The primary content container for feature tiles, testimonials, product showcases.
- **`tile`** — `{colors.surface}` light gray fill, same radius and padding. Used for alternating content trays.

### Inputs
- **`input`** — white background, 4px radius, `{colors.border}` outline. SAP Fiori forms prefer fully-boxed inputs rather than bottom-border only, distinguishing it from IBM Carbon's approach.

### Navigation
- **`nav-bar`** — white background, sticky, 64px height. Logo left-aligned; product categories center; utility icons (search, account, cart) right. Nav links at `{typography.nav-link}` weight 500.

### Badges / Tags
- **`badge`** — `{colors.primary-container}` fill, `{colors.primary}` text, pill radius, compact caption typography. Used for product category labels, version indicators.

## Do's and Don'ts

### Do
- Use `{colors.primary}` (SAP Blue `#0057d2`) as the sole interactive accent — one committed hue for all CTAs, links, and focus states
- Apply 72 Brand at weight 500 for all display, heading, and UI text — the medium weight is the system's only heading weight
- Use `{rounded.sm}` (8px) for buttons and `{rounded.md}` (12px) for cards — respect the radius hierarchy
- Box inputs with a `{colors.border}` outline — SAP Fiori uses fully-bordered form fields, not bottom-border only
- Use `{colors.ink}` (`#223548`) for primary text — the warm navy is distinct from pure black and should not be substituted
- Apply soft `{colors.shadow-soft}` box-shadows on cards — the blue-gray shadow base is part of the system's material feel
- Alternate section backgrounds between `{colors.background}` and `{colors.surface}` for zonal separation without hard borders
- Limit the purple-violet gradient treatment to AI/Joule-branded contexts only

### Don't
- Don't introduce additional accent colors alongside SAP Blue — the system is monochromatic + blue
- Don't use weight 700 (Bold) for marketing headlines — 72 Brand Medium (500) is the ceiling; bold feels out of register
- Don't add letter-spacing to display or heading text — only the 12px `eyebrow` token uses tracking
- Don't use IBM Carbon's bottom-border-only input style — SAP Fiori uses fully-boxed fields
- Don't replace 72 Brand with a system sans-serif (Arial, Helvetica) for rendered web output — the proprietary font is load-bearing for brand recognition
- Don't soften buttons beyond 8px radius or cards beyond 12px — the system communicates enterprise precision through restrained rounding
- Don't use the purple-violet Joule gradient as a general-purpose background treatment
- Don't use pure black (`#000000`) for text — `{colors.ink}` warm navy is the correct text color

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single column, condensed navigation |
| Mobile | 375–767px | Hamburger nav, stacked hero, 16px body margins |
| Tablet | 768–1023px | 2-column content grid, condensed nav |
| Desktop | 1024–1440px | Full horizontal navigation, 3–4 column grids |
| Large Desktop | >1440px | Max-width container centers, side margins grow |

### Touch Targets
- Primary buttons: 40px+ height minimum (48px on mobile nav)
- Navigation items: full 64px nav height provides adequate touch target
- Icon buttons (search, account): 44px square touch areas
- Card hover states gracefully degrade to tap interactions

### Collapsing Strategy
- Hero: 64px display → 44px → 36px as viewport narrows; single-column text below 768px
- Navigation: full horizontal masthead → hamburger menu at <768px
- Grid: 4-column feature grid → 2-column → single column
- Cards: horizontal feature rows → stacked vertical cards
- Footer: multi-column link groups → accordion-style collapsibles on mobile

### Image Behavior
- Hero gradient visuals (Joule sculpture) maintain aspect ratio with `object-fit: contain`
- Product screenshots scale proportionally with `max-width: 100%`
- Section illustrations shift from side-by-side to stacked below 768px

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Primary text: `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Brand accent / CTA: `{colors.primary}`
- CTA hover: `{colors.primary-hover}`
- Surface / tray: `{colors.surface}`
- Border: `{colors.border}`
- Focus ring: `{colors.border-focus}`
- Ghost button border: `{colors.secondary}`
- Badge fill: `{colors.primary-container}`
- Error: `{colors.error}`

### Example Component Prompts
- "Build a hero section on white background. Headline at 64px 72 Brand weight 500, line-height 1.10, color `{colors.ink}`. Supporting text at 18px weight 400, line-height 1.50, color `{colors.ink-secondary}`, max-width 580px. Two CTAs side by side: primary (`{colors.primary}` fill, white text, 8px radius, 11px 13px padding) and ghost (`{colors.background}` fill, `{colors.secondary}` border and text, same radius/padding)."
- "Design a content card: white background, 12px border-radius, 24px padding, `box-shadow: 0px 10px 30px {colors.shadow-soft}`. Card title at 20px 72 Brand weight 500, color `{colors.ink}`. Description at 16px weight 400, line-height 1.50, color `{colors.ink-secondary}`. SAP Blue (`{colors.primary}`) text link at bottom."
- "Create a product category badge: `{colors.primary-container}` background, `{colors.primary}` text, 12px 72 Brand weight 400, 4px 10px padding, 9999px border-radius."
- "Build a sticky navigation bar: white background, 64px height, `border-bottom: 1px solid {colors.border}`. SAP logo left-aligned. Center links at 16px 72 Brand weight 500, color `{colors.ink}`, hover: `{colors.primary}`. Right: search + account icons, primary CTA button (`{colors.primary}` fill, white, 8px radius)."
- "Create a section layout alternating tray: `{colors.surface}` background, 80px vertical padding. Inner container max-width 1280px centered. Eyebrow label at 12px 72 Brand Variable weight 700, letter-spacing 0.08px, color `{colors.primary}`. Section heading at 36px weight 500, line-height 1.15, color `{colors.ink}`."

### Iteration Guide
1. Start with a white (`{colors.background}`) canvas — every page surface begins here
2. SAP Blue (`{colors.primary}`) is the only accent color — one CTA blue, consistent across all interactive states
3. Use 72 Brand Medium (weight 500) for all display and UI — never bold (700), never regular (400) at heading sizes
4. Apply card shadows with blue-gray tint (`{colors.shadow-soft}`) not neutral black — the warmth reads as professional lift
5. Respect the radius hierarchy: buttons at 8px, cards at 12px, badges at pill — don't collapse to a single value
6. Line-height discipline: 1.10 for display (compressed authority), 1.50 for body (reading comfort)
7. Reserve the purple-violet gradient treatment exclusively for AI/Joule contexts — it's a product brand signal, not a background pattern

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by SAP. Brand names and trademarks belong to their respective owners.