# SAP Horizon palette & typography

Every value in this file is sourced from the **official SAP BTP Solution Diagram Guidelines** at https://github.com/SAP/btp-solution-diagrams/tree/main/guideline. Quotes are verbatim. Hex values are normalised to uppercase (autofix.py will normalise any surviving lowercase).

## The atomic design system

Quoted from `guideline/docs/btp_guideline/atomic.md`:

> "Atoms are the smallest elements – in this case the basic elements such as colors, line styles, icons, and text"
>
> "Molecules are elements that consist of atoms. A Molecule refers to any element that uses the basic colors and lines, for example, an arrow that is red and dashed."
>
> "Organisms are groups of Molecules. This could be grouped elements such as a typical shape with text and connectors, or even a whole diagram."

This skill emits at the organism level — composed zones with cards, connectors, and pills — but every value below is at the atom level so that nothing improvises.

## Color philosophy

> "Horizon is the default visual style for SAP Products. Its color balance helps to draw the user's attention to the essential information and functions. It also promotes a distinct and consistent look throughout all products. **This also applies to diagrams.**"

— `foundation.md`

The skill never invents palette values. The `validate.py` check warns on any hex outside this file.

## Primary palette — the everyday colors

| Role | Border | Fill | Source |
|------|--------|------|--------|
| **SAP / BTP area** | `#0070F2` | `#EBF8FF` | `foundation.md` |
| **Non-SAP area** | `#475E75` | `#F5F6F7` | `foundation.md` |
| **Title text** | — | — | `#1D2D3E` (`foundation.md`) |
| **Body text** | — | — | `#556B82` (`foundation.md`) |

> "Blue is the standard, grey for non-sap elements and the Accent colors are for highlighting certain areas."
>
> "It is not recommended to use the colors too heavily, they can overpower the diagram."

— `diagr_comp/areas.md`

## Semantic palette — status / meaning

> "Semantic colors can be used to represent a negative, critical, positive, neutral, or information status."

— `foundation.md`

| Role | Border | Fill |
|------|--------|------|
| **Positive** (authentication, mTLS, success) | `#188918` | `#F5FAE5` |
| **Critical** (warnings, partial outage) | `#C35500` | `#FFF8D6` |
| **Negative** (errors, blocked) | `#D20A0A` | `#FFEAF4` |

## Accent palette — sparingly, for emphasis

> "Secondary colors can be applied to accentuate important elements. They make a vivid contribution to the overall UI and **should be used sparingly.**"

— `foundation.md`

| Role | Border | Fill |
|------|--------|------|
| **Teal** (MCP, custom emphasis) | `#07838F` | `#DAFDF5` |
| **Indigo** (authorization flows, focus app) | `#5D36FF` | `#F1ECFF` |
| **Pink** (trust flows) | `#CC00DC` | `#FFF0FA` |

The semantic mapping for connectors is fixed (see `shapes-and-edges.md`):

> "To harmonize certain reoccurring flows a use of the following standards is recommended:
> - Trust Flows are usually pink
> - Authentication flows are usually green
> - Authorization flows are usually indigo
> - Firewalls and Network barriers are thick grey lines"

— `lines_connectors.md`

## Observed Architecture Center variants

The 2026 corpus profile in `corpus-findings.md` found these additional SAP-authored variants in real `.drawio` files. Treat them as accepted inherited values, not as colors to introduce casually:

| Family | Observed variants |
|---|---|
| SAP blue | `#00185A`, `#002A86`, `#0057D2`, `#2395FF` |
| SAP light blue fills | `#D1EFFF`, `#CCDDFF`, `#EAF8FF`, `#EDF8FF`, `#ECF8FF` |
| Neutral greys | `#475E74`, `#475F75`, `#5B738B`, `#D5DADD`, `#EDEDED`, `#EDEFF0` |
| Positive green | `#266F3A` |
| Indigo | `#470BED`, `#7F00FF` |

Generated diagrams should still prefer the guideline palette above. The validator accepts these variants because SAP's own Architecture Center files use them.

## Color proportion — the area-color rule

> "It is not recommended to use the colors too heavily, they can overpower the diagram."

The published SAP examples observe roughly:

- **~70%** primary blue (SAP / BTP zones, service cards) and neutral grey (non-SAP)
- **~20%** white inner frames (subaccount, runtime container, focus app)
- **~10%** accent (one or two colored zones / pills max)

Don't paint two zones in different accent colors competing for attention. If two flows need to be highlighted, use one accent and keep the rest neutral.

## Alternating fill by nesting level

> "When nesting different areas inside each other, you should alternate between using a fill and not using a fill to provide sufficient contrast between the areas. **The parent layer is usually the BTP layer.**"

— `diagr_comp/areas.md`

Resulting pattern (alternation, parent = BTP):

| Nest level | Fill |
|------------|------|
| L0 outer (BTP) | `#EBF8FF` |
| L1 inner | `#FFFFFF` (no fill) |
| L2 inner | `#EBF8FF` |
| L3 inner | `#FFFFFF` |

Stacked layers (e.g. multi-tenant subaccounts) keep the same style:

> "Areas can be shown as stacked to display multiple grouped layers or items. **The style should not be changed in order to keep diagrams consistent.**"

— `diagr_comp/areas.md`

## Typography — Helvetica everywhere

The guideline document mentions Arial and Arial Black as font choices:

> "To add the system fonts Arial and ArialBlack to your local draw.io installation you can add the following to the configuration: `{ "customFonts": ["Arial", "Arial Black"] }`"

— `solution_diagr_intro/intro.md`

The current public corpus mixes `Helvetica`, `Arial`, and a small amount of `72 Brand`. The skill emits **Helvetica** and `autofix.py` normalises generated content to Helvetica because it is the dominant value in both the canonical BTP examples and Architecture Center diagrams. If a copied SAP template already contains `Arial` or `72 Brand` in rich-text labels, preserve it unless you are rewriting that label.

### Hierarchy

> "**To create hierarchies four text styles were derived from Fiori Horizon.**"

— `diagr_comp/text.md`

The doc commits the four styles only via a graphic (`text_styles.png`); concrete pt sizes derived from observation of the shipped templates:

| Role | Size (pt) | Weight (`fontStyle`) | Color |
|------|-----------|----------------------|-------|
| Diagram title | 24 | bold (`1`) | `#1D2D3E` |
| Subtitle | 14 | regular (`0`) | `#475E75` |
| Zone / container label | 16 | bold (`1`) | `#475E75` (non-SAP) or `#1D2D3E` / `#00185A` (BTP) |
| Feature-group heading inside a card | 18 | bold (`1`) | `#1D2D3E` |
| Sub-section label | 14 / 11 | bold (`1`) | accent or `#1D2D3E` |
| Service card title | 12–14 | bold (`1`) | `#1D2D3E` |
| Service card caption / inline helper | 11 | regular (`0`) | `#556B82` |
| Pill label | 10 | bold (`1`) — uppercase for TRUST | pill text color |
| Edge label | 10 | regular (`0`) | `#475E75` or zone color |

Never use pure black. `#1D2D3E` reads as "black" but harmonises with the blue zone fills.

### Scaling rule

> "Texts defined in this document may need to be scaled up to fit the specifications of the target medium."
>
> "When scaling elements up or down, take care to ensure text sizes remain consistent."

— `text.md` and `solution_diagr_intro/big_picture.md`

If the user asks for a poster-sized canvas, scale the **whole** diagram including text — don't tweak font sizes individually.

## Spacing — the SAP-logo heuristic

> "**Spacing around objects should be even and roughly the height of the SAP Logo.**"

— `foundation.md`

The SAP logo (the standard 60 × 23 px draw.io shape) is roughly **23 px tall**, snapped to the 10-px grid that's **20 px** of breathing room. Use 20 px between sibling cards, 30 px between zones.

## Banned palettes

Not in the SAP Horizon family — the validator flags these as warnings:

- draw.io defaults: `#dae8fc`, `#d5e8d4`, `#f8cecc`, `#6c8ebf`, `#fff2cc`
- Material / Tailwind generic pastels
- Pure `#000000` for text (use `#1D2D3E` instead)
- Any hex not listed in `validate.py:SAP_PALETTE`

## Don't

> "It is not recommended to use too many SAP logos in the same diagram. Use text only elements instead."

— `diagr_comp/product_names.md`

> "**SAP product names must be paired with the SAP logo.**" *(but only one logo per zone, not one per service card)*

— `diagr_comp/product_names.md`

> "Avoid creating your own arrows; use the ones available in the library instead as they adhere to the correct styling guidelines."

— `solution_diagr_intro/big_picture.md`