Overview
Horizon is the default visual style for SAP Products. The visual style consists of Brand DNA colors that are converted to theme parameters and supplied to products. In BTP, the standard Brand DNA palette is insufficient to handle the requirements of our customers for Charting and Diagraming. Additionally, colored layouts like the Block Layout take full advantage of the richness of the Brand DNA palette to provide designers and developers with colored background options.
Extended Brand DNA Palette
See also:
Color Balance
Color balance refers to the recommended mixture of light and dark and colored and non-colored areas of any interface. Approaching the ideal color balance for each page creates a visual rhythm throughout the tool. It also helps to draw the user’s attention to the essential information and functions. Furthermore, it promotes a distinct and consistent look throughout all products.
Color Definitions
Primary Colors
The recommended primary colors leverage the uniqueness of SAP apps. The primary colors represent the overall look and feel.
Tool Header
#ffffff
RGB(255, 255, 255)
Selection
#dcf3ff
RGB(220, 243, 255)
Brand / Links
#0070f2
RGB(166, 224, 255)
Container
#ffffff
RGB(255, 255, 255)
Shell / Home
#eff1f2
RGB(77, 177, 255)
Divider
#d9d9d9
RGB(217, 217, 217)
Field Border
#556b81
RGB(85, 107, 129)
Subtitle / Label
#556b82
RGB(85, 107, 130)
Title / Text
#1d2d3e
RGB(29, 45, 62)
Accent Colors
Secondary colors can be applied to accentuate important elements. They make a vivid contribution to the overall UI and should be used sparingly.
Accent 1
#d27700
RGB(210, 119, 0)
Accent 2
#aa0808
RGB(170, 8, 8)
Accent 3
#ba066c
RGB(186, 6, 108)
Accent 4
#a100c2
RGB(161, 0, 194)
Accent 5
#5d36ff
RGB(93, 54, 255)
Accent 6
#0057d2
RGB(0, 87, 210)
Accent 7
#046c7a
RGB(4, 108, 122)
Accent 8
#256f3a
RGB(37, 111, 58)
Accent 9
#6c32a9
RGB(108, 50, 169)
Accent 10
#5b738b
RGB(91, 115, 139)
Accent Backgrounds
Some components utilize accent background colors in combination with darker foreground text or icon UI elements.
Background 1
#fff3b8
RGB(255, 243, 184)
Background 2
#ffd0e7
RGB(255, 208, 231)
Background 3
#ffdbe7
RGB(255, 219, 231)
Background 4
#ffdcf3
RGB(255, 220, 243)
Background 5
#ded3ff
RGB(222, 211, 255)
Background 6
#d1efff
RGB(209, 239, 255)
Background 7
#c2fcee
RGB(194, 252, 238)
Background 8
#ebf5cb
RGB(235, 245, 203)
Background 9
#ddccf0
RGB(221, 204, 240)
Background 10
#eaecee
RGB(234, 236, 238)
Grayscale
Grayscale areas play an important role in any SAP Fiori user interface. They minimize the risk of over-stimulation and foster simplicity. White and light grays are mainly used for areas in the background or for borders. Darker gray shades are primarily used for text.
Title / Text
#1d2d3e
RGB(29, 45, 62)
Subtitle / Label
#556b82
RGB(85, 107, 130)
Placeholder
#556b82
RGB(85, 107, 130)
Border / Divider
#758ca4
RGB(117, 140, 164)
Header Border
#d9d9d9
RGB(217, 217, 217)
Data Item Border
#e5e5e5
RGB(229, 229, 229)
Column Header
#ffffff
RGB(255, 255, 255)
Content
#f5f6f7
RGB(245, 246, 247)
Header / Data Item
#ffffff
RGB(255, 255, 255)
Semantic Element Colors
Semantic colors can be used to represent a negative, critical, positive, neutral, or information status.
Negative
#aa0808
RGB(170, 8, 8)
Critical
#e76500
RGB(231, 101, 0)
Positive
#256f3a
RGB(37, 111, 58)
Neutral
#788fa6
RGB(120, 143, 166)
Information
#0070f2
RGB(0, 112, 242)
Semantic Background Colors
Semantic colors can be used to represent a negative, critical, positive, neutral, or information status.
Negative
#ffeaf4
RGB(255, 234, 244)
Critical
#fff8d6
RGB(255, 248, 214)
Positive
#f5fae5
RGB(245, 250, 229)
Neutral
#eff1f2
RGB(239, 241, 242)
Information
#e1f4ff
RGB(225, 244, 255)
See also: