193 lines
8.4 KiB
Markdown
193 lines
8.4 KiB
Markdown
# 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`
|