SAP Fiori Horizon

---
name: sap-fiori-horizon
description: Apply the SAP Fiori Horizon visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" SAP Fiori Horizon, mentions SAP Horizon, Fiori, SAP Fiori, or describes #0070f2 SAP brand blue, '72' typeface, Morning/Evening Horizon light-dark pair — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# SAP Fiori Horizon Design System

SAP's enterprise design language in its Horizon theme era: the '72' typeface, #0070f2 brand blue, cool blue-gray text (#131e29 on #f5f6f7), white cards and shell bars, pill-ish 8px controls, and paired official light/dark themes (Morning and Evening Horizon) tuned for data-heavy ERP screens, object pages, and analytical list pages.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values come from the officially published token set. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as SAP Fiori Horizon.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (SAP Horizon, Fiori, SAP Fiori, Morning Horizon, Evening Horizon), or describes its traits: #0070f2 SAP brand blue; '72' typeface; Morning/Evening Horizon light-dark pair; cool blue-gray neutrals; white cards on #f5f6f7 shell; semantic status colors on KPI tags.

## Design tokens

### Color palette

- sapBackgroundColor — Morning Horizon page/shell background: `#f5f6f7` (--color-bg)
- sapBaseColor / sapTile_Background — cards, lists, headers: `#ffffff` (--color-surface)
- sapTextColor / sapTitleColor — cool blue-black: `#131e29` (--color-text)
- sapContent_LabelColor — labels and secondary text: `#556b82` (--color-text-muted)
- sapBrandColor / sapButton_Emphasized_Background / sapInformativeColor: `#0070f2` (--color-accent)
- sapLinkColor (also sapHighlightColor): `#0064d9` (--color-link)
- sapContent_FocusColor — dotted/solid focus outline: `#0032a5` (--color-focus)
- sapList_BorderColor — row and card separators: `#e5e5e5` (--color-border)
- sapField_BorderColor — input outlines (buttons use lighter #bcc3ca): `#556b81` (--color-field-border)
- sapErrorColor / sapNegativeColor: `#aa0808` (--color-error)
- sapSuccessColor / sapPositiveColor: `#256f3a` (--color-success)
- sapWarningColor / sapCriticalColor: `#e76500` (--color-warning)

### Dark mode overrides

When building dark mode, override these roles (all other tokens stay the same):

- sapBackgroundColor — Evening Horizon shell: `#12171c` (--color-bg)
- sapBaseColor / sapTile_Background / sapGroup_ContentBackground dark: `#1d232a` (--color-surface)
- sapTextColor / sapTitleColor dark: `#f5f6f7` (--color-text)
- sapContent_LabelColor dark: `#8396a8` (--color-text-muted)
- sapBrandColor stays #0070f2; emphasized buttons keep white text (tint #4db1ff used for standard button text): `#0070f2` (--color-accent)
- sapLinkColor dark: `#008fff` (--color-link)
- sapContent_FocusColor dark: `#9ad3ff` (--color-focus)
- sapList_BorderColor dark: `#2e3742` (--color-border)
- sapField_BorderColor dark: `#a9b4be` (--color-field-border)
- sapErrorColor / sapNegativeColor dark: `#fa6161` (--color-error)
- sapSuccessColor / sapPositiveColor dark: `#97dd40` (--color-success)
- sapWarningColor / sapCriticalColor dark: `#ffdf72` (--color-warning)

### Typography

- Display / headings: Source Sans 3 (fallback: Arial, Helvetica, sans-serif) (ideal: 72, premium — use Source Sans 3 as the free substitute)
- Body: Source Sans 3 (fallback: Arial, Helvetica, sans-serif) (ideal: 72, premium — use Source Sans 3 as the free substitute)
- Type scale: 1.125 ratio, base 14px — computed steps: 14px / 16px / 18px / 20px / 22px / 25px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 600, line-height 1.25, letter-spacing 0
- Body: line-height 1.4, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 64 — Fiori ships 'cozy' (touch) and 'compact' (mouse) densities from one token set; base font is 0.875rem (14px, sapFontSize) and content padding steps 16/24/32px; tables in compact mode drop row heights to ~32px.
- Border radius: sm 4px, md 8px, lg 16px — Horizon rounded Fiori: buttons and inputs at 8px, cards and tiles up to 16px — a visible break from the square Quartz/Belize predecessor themes.
- Border treatment: 1px solid #e5e5e5 — Cards and list rows use hairline #e5e5e5; inputs carry a stronger 1px #556b81 outline so fields are findable in dense forms — a Horizon accessibility decision.

### Shadows

- shadow-0: `0 0 0.125rem 0 rgba(34, 53, 72, 0.2), 0 0.125rem 0.25rem 0 rgba(34, 53, 72, 0.2)` — sapContent_Shadow0 — cards and tiles at rest
- shadow-1: `0 0 0 0.0625rem rgba(34, 53, 72, 0.48), 0 0.125rem 0.5rem 0 rgba(34, 53, 72, 0.3)` — sapContent_Shadow1 — popovers and raised interactive surfaces
- shadow-2: `0 0 0 0.0625rem rgba(34, 53, 72, 0.48), 0 0.625rem 1.875rem 0 rgba(34, 53, 72, 0.25)` — sapContent_Shadow2 — dialogs and heavy overlays

### Layout

- Max content width: 1440px
- Shell bar on top (search, notifications, avatar); content letterboxes at the XL breakpoint (~1440px) with responsive margins
- Canonical floorplans: List Report, Object Page, Overview Page, Analytical List Page — pick a floorplan before designing
- Flexible column layout: up to three sliding columns (list/detail/detail) instead of modal drill-ins
- Dynamic page header collapses on scroll; footer toolbar carries finalizing actions

### Effects

- Semantic color coding saturates the UI: KPI tags, micro charts, and status texts in error/warning/success hues
- Tiles on the launchpad show live counts and micro charts on white 16px-radius cards

### Motion

- Easing: cubic-bezier(0.4, 0, 0.2, 1); durations 100ms / 200ms / 400ms
- Column layouts slide horizontally; page headers collapse/expand smoothly
- Most control feedback is instant; Fiori guidance keeps animation subtle and purposeful for long-session comfort

## CSS variables (drop-in)

```css
:root {
  --color-bg: #f5f6f7;
  --color-surface: #ffffff;
  --color-text: #131e29;
  --color-text-muted: #556b82;
  --color-accent: #0070f2;
  --color-link: #0064d9;
  --color-focus: #0032a5;
  --color-border: #e5e5e5;
  --color-field-border: #556b81;
  --color-error: #aa0808;
  --color-success: #256f3a;
  --color-warning: #e76500;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --shadow-shadow-0: 0 0 0.125rem 0 rgba(34, 53, 72, 0.2), 0 0.125rem 0.25rem 0 rgba(34, 53, 72, 0.2);
  --shadow-shadow-1: 0 0 0 0.0625rem rgba(34, 53, 72, 0.48), 0 0.125rem 0.5rem 0 rgba(34, 53, 72, 0.3);
  --shadow-shadow-2: 0 0 0 0.0625rem rgba(34, 53, 72, 0.48), 0 0.625rem 1.875rem 0 rgba(34, 53, 72, 0.25);
  --border-default: 1px solid #e5e5e5;
  --font-display: "Source Sans 3", Arial, Helvetica, sans-serif;
  --font-body: "Source Sans 3", Arial, Helvetica, sans-serif;
  --text-base: 14px;
  --leading-heading: 1.25;
  --leading-body: 1.4;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;600;700&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** White (Morning) shell bar, 44px, with SAP logo, product title in '72', central search field, and icon cluster; navigation itself lives in the launchpad home and in-page anchors rather than a global sidebar
- **Hero:** Launchpad home: rows of white tiles/cards with KPI numbers in light 72 at 24–36px, section headings, on the #f5f6f7 shell — no marketing hero exists in-product
- **Card:** White card, 16px radius, sapContent_Shadow0, 16px padding; header with 16px title and optional counter; list/table/chart content below with hairline separators
- **Button (primary):** Emphasized button: #0070f2 fill, white 600-weight label, 8px radius, 32px (compact) tall; hover deepens; focus draws the #0032a5 outline outside the button
- **Button (secondary):** Default button: white fill, 1px #bcc3ca border, #0064d9 label; ghost/transparent variants for toolbars
- **Form fields:** Label above or left (in forms), input on white with 1px #556b81 border, 8px radius, 32–40px tall; states recolor the border and add value-state message popups (error #aa0808, warning #e76500)

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The Fiori object page under Horizon: a white header with a 72-typeface title, KPI tags in semantic colors, and an anchor-tab bar, floating over the cool #f5f6f7 shell — enterprise data wrapped in SaaS-soft chrome. Spend boldness here; keep everything else quiet.

## Do

- Start from a Fiori floorplan (List Report, Object Page…) — the system is opinionated at page level, not just component level
- Use both official themes: Morning Horizon values as the base and Evening Horizon as the dark overrides, switching whole token sets
- Encode status with the semantic quartet (error/warning/success/information) consistently across tags, texts, and micro charts
- Respect the stronger #556b81 input borders — findable fields are a Horizon signature

## Don't

- Don't reach back to Belize/Quartz values (#0a6ed1 brand, square corners) — Horizon moved the brand to #0070f2 with 8–16px rounding
- Don't run brand-blue text or icons on the gray shell background for critical info — put them on white surfaces
- Don't use the '72' typeface outside SAP products without license review; substitute Source Sans 3
- Don't mix cozy and compact densities within one floorplan

## Accessibility notes

- Accent #0070f2 on the #f5f6f7 shell is ≈4.2:1 (below AA for small text) — SAP applies brand blue on white surfaces (buttons, links on cards) where it is ≈4.6:1, and uses darker #0064d9/#0032a5 for links and focus; keep accent off the gray shell for text
- Horizon was explicitly re-tuned for WCAG 2.1 AA: text #131e29 on white is 15.9:1, and Evening Horizon re-picks semantic hues (#fa6161, #97dd40, #ffdf72) rather than inverting light values
- The high-visibility #0032a5 (light) / #9ad3ff (dark) focus outline is drawn on every interactive control

## Reference sites

- SAP Fiori design guidelines: https://experience.sap.com/fiori-design-web/
- SAP theming-base-content (Horizon token source): https://github.com/SAP/theming-base-content
- UI5 Horizon theme documentation: https://sap.github.io/ui5-webcomponents/

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip sap-fiori-horizon.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/sap-fiori-horizon.json

Settings → Capabilities → Skills → Upload skill → sap-fiori-horizon.zip