Import sap-architecture skill
This commit is contained in:
@@ -0,0 +1,192 @@
|
||||
# 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`
|
||||
Reference in New Issue
Block a user