Where work happens.
An airy light system interrupted by concentrated pools of aubergine—the product surface carries the complexity.
Colors
Aubergine grounds actions and dark bands; the rest of the system remains almost white.
#611f69
#481a54
#f9f0ff
#eac8fe
#3d0157
#730394
#1264a3
#fefbff
Type with a single spark.
Avant Garde owns the architecture. Salesforce Sans makes the everyday interface readable.
Spacing & shape
Comfortable rhythm lets the oversized type breathe; actions remain precise rectangles.
4px
16px
999px
90px
Product UI carries depth.
The only broad ambient shadow sits beneath an authentic product-surface scale.
Screenshot card
White card, 16px radius, 32px ambient shadow. In-product Channel Blue remains confined to the workspace.
Components
Default cards are bordered, not elevated; rectangular actions retain a firm, usable feel.
Actions
Aubergine fill, white text, 4px radius. The secondary action relies on Plum Shadow text.
Feature card
Transparent surface · Lavender Mist border · 16px radius · no shadow.
Make purple structural.
Do
- Reserve Aubergine for filled CTAs.
- Use Deep Plum for full inverted bands.
- Keep product shadows to screenshot surfaces.
- Highlight only one headline phrase with Vivid Violet.
Avoid
- Pill-shaped primary actions.
- Gradient UI surfaces.
- Channel Blue marketing CTAs.
- Lavender borders around product screenshots.