Sap Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

17tokens

19type steps

4radius steps

2pxspacing base

Sap, in one page

SAP's web surface is built like an application frame rather than a marketing site. A 60px bar in {colors.chrome} sits across the top, and on any product or services page a second rail drops beneath it carrying a breadcrumb and a row of tabs. That two-storey chrome is the first thing the design commits to: before a visitor reads a headline they have been told where they are in a very large catalogue, and the page below behaves like the content pane of that catalogue.

What fills the pane is mostly {colors.canvas}. White covers between 57 and 69 percent of every page, and the design separates content by dropping in broad flat bands rather than by bordering or elevating anything. There are four of them and each does a different job: {colors.chrome} for a neutral section, {colors.band} for the footer, {colors.band-blue} for a highlighted strip, and {colors.band-lavender} for a softer one. They run edge to edge with square corners, so the page reads as a stack of full-width horizontal zones.

Blue is the only colour that acts. {colors.primary} fills every button and every inline link; {colors.primary-deep} fills the solid hero band on interior pages and is also the label colour inside an outline button. The home page hero departs from both, running a deep navy gradient anchored on {colors.navy} behind a product lockup, which makes it the one surface on the site that is atmospheric rather than flat. Corners stay tight throughout: {rounded.md} on every control, {rounded.lg} on media, and nothing rounder anywhere.

Key Characteristics:

A two-storey chrome — a {colors.chrome} global bar above a product tab rail — that frames the page like an application.
White canvas broken by four full-width flat bands ({colors.chrome}, {colors.band}, {colors.band-blue}, {colors.band-lavender}) with square edges.
One acting colour: {colors.primary} for controls and links, {colors.primary-deep} for the interior hero band.
A five-tier text ladder ({colors.ink} → {colors.ink-lead} → {colors.ink-body} → {colors.ink-list} → {colors.ink-meta}) that shifts hue as it descends, from pure black through warm grey into slate.
The brand's own variable typeface across a 350-to-700 weight range, so a 15px list item and a 15px nav link read as different classes at identical size.
Depth carried by band and gradient rather than by shadow; controls sit flat on their ground.
Corners capped at {rounded.md} for controls and {rounded.lg} for media — nothing on the site is a pill.

Do's and don'ts

Do

Keep {colors.primary} for things that act — buttons, inline links, the active tab — and let everything else stay neutral.
Separate sections with a full-width band rather than a border or a shadow. The bands are this layout's punctuation.
Run every band square. {rounded.none} at full width is what makes a zone read as a zone.
Use the weight axis at small sizes. {typography.list-item} at 350 and {typography.nav-link} at 400 are the same size on purpose.
Set headings in true {colors.ink} black and step body copy down into {colors.ink-body} slate. The hue shift carries the hierarchy.
Keep the chrome in {colors.ink-nav} grey so navigation stays visually distinct from content text.
Cap controls at {rounded.md} and media at {rounded.lg}.
Let the product illustrations carry the shadows. Floating UI cards inside an image are depicting an interface, not decorating a section.

Don't

Don't elevate a button or a card. Depth in this system is band and gradient, not shadow.
Don't round a full-width region. It becomes a card and the banded rhythm collapses.
Don't introduce a second accent hue. {colors.sky} and {colors.navy} are scoped to specific surfaces and are not general-purpose.
Don't set body copy in {colors.ink-nav}. That grey belongs to the chrome; content uses the slate tiers.
Don't flatten the weight range to 400 and 700. Losing 350 and 500 collapses three distinct roles in the 14–16px band.
Don't add letter-spacing. The typeface is metrically tuned for these sizes and needs no correction.
Don't crop the product illustrations to a uniform ratio. Each composition is sized to what it explains.
Don't let a hero band and a content band sit adjacent without a white interval. The rhythm depends on white returning between coloured zones.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Sap design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #0057d2
- primary-deep: #0040b0
- on-primary: #ffffff
- navy: #022879
- sky: #6bc0ff
- canvas: #ffffff
- chrome: #f5f6f7
- band: #eaecee
- band-blue: #ebf8ff
- band-lavender: #f7f4ff

Type:
- families: 72 Brand Variable
- scale: 14, 15, 16, 17.6, 18, 20, 21, 22, 24
- weights: 350, 400, 500, 700

Shape:
- radius: 0, 4, 8, 12

Spacing: 2, 3, 8, 9, 10, 12, 15, 16, 20, 24

Rules:
- Keep `{colors.primary}` for things that act — buttons, inline links, the active tab — and let everything else stay neutral.
- Separate sections with a full-width band rather than a border or a shadow. The bands are this layout's punctuation.
- Run every band square. `{rounded.none}` at full width is what makes a zone read as a zone.
- Use the weight axis at small sizes. `{typography.list-item}` at 350 and `{typography.nav-link}` at 400 are the same size on purpose.
- Set headings in true `{colors.ink}` black and step body copy down into `{colors.ink-body}` slate. The hue shift carries the hierarchy.
- Keep the chrome in `{colors.ink-nav}` grey so navigation stays visually distinct from content text.

Avoid:
- Don't elevate a button or a card. Depth in this system is band and gradient, not shadow.
- Don't round a full-width region. It becomes a card and the banded rhythm collapses.
- Don't introduce a second accent hue. `{colors.sky}` and `{colors.navy}` are scoped to specific surfaces and are not general-purpose.
- Don't set body copy in `{colors.ink-nav}`. That grey belongs to the chrome; content uses the slate tiers.
- Don't flatten the weight range to 400 and 700. Losing 350 and 500 collapses three distinct roles in the 14–16px band.
- Don't add letter-spacing. The typeface is metrically tuned for these sizes and needs no correction.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Brand & Accent

SAP Blue ({colors.primary} — #0057d2): the acting colour. Every filled button, every inline text link, and the active product tab.
Deep Blue ({colors.primary-deep} — #0040b0): the solid hero band on interior pages, and the label colour inside an outline button placed on white.
On Primary ({colors.on-primary} — #ffffff): the label on every blue fill and all type inside the hero band.
Navy ({colors.navy} — #022879): the anchor of the home page's hero gradient, the one atmospheric surface in the system.
Sky ({colors.sky} — #6bc0ff): a light blue panel used inside the services layout.

Surface

Canvas ({colors.canvas} — #ffffff): the working ground. Content panes, cards and most sections sit on it unchanged.
Chrome ({colors.chrome} — #f5f6f7): the global navigation bar, and the neutral band used to set a section apart.
Band ({colors.band} — #eaecee): the footer ground, and the largest single non-white surface on the home page.
Band Blue ({colors.band-blue} — #ebf8ff): a pale blue strip used to lift a section out of the white run.
Band Lavender ({colors.band-lavender} — #f7f4ff): a softer wash serving the same role on product pages, with a curved upper edge rather than a square one.

Text

Ink ({colors.ink} — #000000): headings at every level. SAP sets its headlines in true black, not a softened near-black.
Ink Lead ({colors.ink-lead} — #3c3c3c): the 28px lead paragraph that follows a display headline.
Ink Body ({colors.ink-body} — #223548): body copy. A slate rather than a grey, which is what separates the paragraph tier from the lead tier.
Ink List ({colors.ink-list} — #354a5f): list items, set one step lighter than body.
Ink Meta ({colors.ink-meta} — #475e75): captions and footnotes, the quietest legible tier.
Ink Nav ({colors.ink-nav} — #545454): navigation links, breadcrumbs and tab labels. The only text colour that is a neutral grey rather than a slate, which is how the chrome stays visually separate from the content.

Semantic

Hairline ({colors.hairline} — #475e75): the rule on an outline button. The same value as {colors.ink-meta}, used as a border rather than as type.

Type scaleRead the full spec

Font Family

The whole system is set in SAP's own variable typeface, 72 Brand Variable. There is no second family and no monospace. 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 three roles share the 14–16px range and are separated by weight alone.

The clearest example is at 15px. {typography.nav-link} is 400 in {colors.ink-nav} grey; {typography.list-item} is 350 in {colors.ink-list} slate. Same size, same family, and yet a reader parses one as chrome and the other as content. A system without a sub-400 weight could not make that distinction without changing size or colour.

Line height splits cleanly by role. Headings are set tight at roughly 1.1 — {typography.display} runs 57px on 62.7px, {typography.section-title} 32px on 35.2px — while body roles open to 1.5, with {typography.body-lg} at 20px on 30px. {typography.button} is set solid at 16px on 17.6px, which is what lets a 44px button hold its label without vertical drift.

Hierarchy

Token	Size	Weight	Line Height	Use
`{typography.display}`	57px	700	62.7px	Home page display headline
`{typography.hero-title}`	36px	500	39.6px	Interior page hero title
`{typography.section-title}`	32px	500	35.2px	Section headings
`{typography.lead}`	28px	400	30.8px	Lead paragraph
`{typography.subhead}`	20px	500	22px	Feature titles, active tab
`{typography.body-lg}`	20px	400	30px	Large body copy
`{typography.body}`	18px	400	27px	Body copy
`{typography.button}`	16px	500	17.6px	Button labels
`{typography.link}`	16px	400	24px	Inline text links
`{typography.nav-link}`	15px	400	21px	Navigation, breadcrumb
`{typography.list-item}`	15px	350	21px	List items
`{typography.caption}`	14px	400	21px	Captions, tab labels, footnotes

Principles

Headings are black and tight; everything below them is slate and open. That single contrast does most of the hierarchy work, and it is why the system needs so few sizes — twelve roles cover three page templates.

Tracking is left at zero everywhere. For a typeface designed in-house that is a statement of confidence: the metrics are already tuned for the sizes the system uses, so nothing needs correcting.

Note on Font Substitutes

72 Brand Variable is proprietary. A substitute needs a genuine variable weight axis reaching below 400, because the 350 list-item weight is load-bearing — collapsing it to 400 erases the distinction between a list item and a nav link at 15px. Among open faces, Inter Variable or Source Sans 3 Variable come closest in width and x-height; whichever is used, carry the line heights in the table across verbatim rather than accepting the substitute's defaults, since the tight heading leading is what keeps the display sizes from feeling loose.

Components and layoutRead the full spec

No hover states documented. Every component below documents its default state only. Variants live as separate entries in the components: front matter and are described in their own sub-blocks.

Chrome

nav-bar — The global bar.

Background {colors.chrome}, text {colors.ink-nav}, type {typography.nav-link}, rounded {rounded.none}, height 60. Full-bleed, square, and the same on every template.

nav-link — An item within it.

Background {colors.chrome}, text {colors.ink-nav}, type {typography.nav-link}, rounded {rounded.none}.

breadcrumb — The trail above a product tab rail.

Background {colors.canvas}, text {colors.ink-nav}, type {typography.nav-link}, rounded {rounded.none}, height 17.

product-tab — An inactive tab in the product rail.

Background {colors.canvas}, text {colors.ink-nav}, type {typography.caption}, rounded {rounded.none}, height 32.

product-tab-active — The selected tab.

Background {colors.canvas}, text {colors.primary}, type {typography.subhead}, rounded {rounded.none}, height 44. Marked by a blue underline and a step up in both size and weight, which is why it reads as selected without any fill.

Heroes

hero-band — The solid interior hero.

Background {colors.primary-deep}, text {colors.on-primary}, type {typography.body}, rounded {rounded.none}, height 450. Full-bleed and square.

hero-title — Its headline.

Background {colors.primary-deep}, text {colors.on-primary}, type {typography.hero-title}, rounded {rounded.none}, height 40.

hero-display — The home page headline, set on white rather than in a band.

Background {colors.canvas}, text {colors.ink}, type {typography.display}, rounded {rounded.none}, height 188. The largest type in the system and the only role at weight 700.

navy-hero — The home page hero field.

Background {colors.navy}, text {colors.on-primary}, type {typography.body}, rounded {rounded.none}. A gradient anchored on navy rather than a flat fill, carrying a product lockup on its right.

Buttons

button-primary — The standard filled action.

Background {colors.primary}, text {colors.on-primary}, type {typography.button}, rounded {rounded.md}, padding 12px 14px, height 44.

button-outline — Its quiet partner, used beside a filled button in a hero.

Background {colors.canvas}, text {colors.primary-deep}, type {typography.button}, rounded {rounded.md}, padding 8px 9px. Bounded by a {colors.hairline} rule; the label is the deeper blue rather than the standard one.

button-floating — The persistent contact affordance pinned to the lower right.

Background {colors.primary}, text {colors.on-primary}, type {typography.caption}, rounded {rounded.md}, padding 16px 20px, height 58. The tallest control in the system and the only one that follows the page.

Content

section-heading — A section title.

Background {colors.canvas}, text {colors.ink}, type {typography.section-title}, rounded {rounded.none}, height 35.

lead-paragraph — The paragraph that follows a display headline.

Background {colors.canvas}, text {colors.ink-lead}, type {typography.lead}, rounded {rounded.none}. Set at 28px in the one grey that appears nowhere else.

body-copy — Standard prose.

Background {colors.canvas}, text {colors.ink-body}, type {typography.body}, rounded {rounded.none}.

feature-title — The heading inside a feature block.

Background {colors.canvas}, text {colors.ink}, type {typography.subhead}, rounded {rounded.none}, height 22.

list-item — An entry in a linked list.

Background {colors.canvas}, text {colors.ink-list}, type {typography.list-item}, rounded {rounded.none}, height 38. Weight 350, the lightest setting in the system.

meta-note — Captions and footnotes.

Background {colors.canvas}, text {colors.ink-meta}, type {typography.caption}, rounded {rounded.none}.

text-link — An inline link.

Background {colors.canvas}, text {colors.primary}, type {typography.link}, rounded {rounded.none}. Usually trailed by a chevron.

inline-anchor — A small anchored surface within running content.

Background {colors.canvas}, text {colors.primary}, type {typography.caption}, rounded {rounded.sm}. The only place the 4px corner is used.

media-frame — The container around a photograph or illustration.

Background {colors.canvas}, text {colors.ink}, type {typography.caption}, rounded {rounded.lg}.

Bands

band-neutral — A section set apart on the chrome grey.

Background {colors.chrome}, text {colors.ink-body}, type {typography.body}, rounded {rounded.none}.

band-blue — The pale blue variant.

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-sap {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #000000;
  --heading-color: #000000;
  --link-color: #0057d2;
  --link-hover-color: #00429f;
  --border-color: #d1d1d1;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(0,0,0,0.06);
  --card-hover-shadow: 0 6px 18px rgba(0,0,0,0.12);
  --header-bg: #000000;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #595959;
  --button-bg: #0057d2;
  --button-text-color: #ffffff;
  --button-hover-bg: #00429f;
  --button-border: none;
  --button-border-radius: 8px;
  --button-secondary-bg: #f0f0f0;
  --button-secondary-text-color: #000000;
  --button-secondary-hover-bg: #e0e0e0;
  --button-secondary-border: 1px solid #d1d1d1;
  --prompt-bg: #f2f2f2;
  --prompt-text-color: #000000;
  --base-font: var(--font-sans);
  --heading-font: var(--font-sans);
  --card-border-radius: 8px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

astellas 76.2%
uka 74.0%
loglass 72.8%
omron 72.0%
findy 70.0%

Where this came from

Source document: volt/design-md/sap/DESIGN.md · 32.6 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.