Optimizely Brand Design System Deep Dive
1. Brand Overview
Optimizely’s visual language is built for a very specific audience: enterprise-level digital teams who care about precision, performance, and clarity. The vibe is modern, tech-forward, but not overly flashy. It’s a restrained palette, tight typography, and a component system that reads as professional rather than playful.
You can tell immediately that this is a B2B SaaS brand. The color decisions lean into blues and teals — colors that communicate trust, data, and clarity — but they avoid the overly saturated “startup blue.” Instead, they use controlled RGB values like #00ccff and #1bd0fd as accents, paired with neutral grays (#969cac) and deep darks (rgb(35, 40, 52)) for grounding.
Typography is clean. Figtree is the workhorse — a sans-serif that’s friendly enough to feel human, but with weights ranging from 300 to 700 it covers everything from light body copy to bold hero headings. There’s also a secondary mono font (NBI Pro Mono) used sparingly for code-like or data-driven elements, which reinforces the tech credibility.
Layout and spacing scream “grid discipline.” They’re on an 8px base grid, with everything from tight 3px micro-gaps to big 128px section paddings fitting neatly into multiples. That’s a sign of a design system built to scale — nothing is arbitrary.
The components themselves are minimal but functional. Buttons have clear state changes and avoid unnecessary decoration. Inputs are clean with subtle focus outlines. Shadows are used sparingly — mostly for interactive elements — and often replaced by borders for separation.
This isn’t a “brand for fun.” It’s a brand for clarity. For teams who want their UI to feel solid, reliable, and precise. And Optimizely nails that without feeling cold — a tricky balance.
2. Color System
2.1 Primary Colors
The primary semantic color is rgb(150, 156, 172) — a muted gray. This is unusual for a “primary” in many brands, but here it makes sense: Optimizely’s primary semantic token is used for text and UI elements, not brand accent. The actual “brand” color energy comes from the teals and blues in the palette (#00ccff, #1bd0fd, #005fcc).
Psychology-wise, the muted gray primary says “serious business.” The bright accents are reserved for interaction states — hover, focus, active — so they pop where they matter. Compared to competitors in the experimentation/optimization space, Optimizely is less saturated and more neutral, which reads as more enterprise-ready.
2.2 Complete Palette
| Color Name / Role | Hex | Role | Usage |
|---|---|---|---|
| Primary Semantic | #969cac | Primary UI text | Semantic primary, muted gray |
| White | #ffffff | Background / text | Body background, inverted text |
| Accent Cyan | #1bd0fd | Accent / hover | Hover/focus effects |
| Brand Blue | #005fcc | Accent / hover | Hover/focus on interactive elements |
| Light Cyan | #00ccff | Accent gradient | Hover/focus, gradient effects |
| Table Body Text | #e9ebf1 | Text on dark | Table body text color |
| Table Head Text | #ffffff | Text on dark | Table heading text color |
| Ring Color | rgba(59,130,246,.5) | Focus outline | Focus ring color for interactive elements |
| Text Gradient Start | #3be081 | Gradient start | Part of radial text gradient |
| Text Gradient End | #00ccff | Gradient end | Part of radial text gradient |
2.3 Color Relationships
The gray primary (#969cac) has good contrast against white backgrounds (WCAG AAA for normal text). White (#ffffff) on #005fcc or #00ccff gives strong contrast (>4.5:1). The bright accents are balanced with deep darks (rgb(35, 40, 52)) for interactive focus.
Dark mode is implicit in the palette — table body text #e9ebf1 and table head text #ffffff are clearly designed for dark backgrounds. The hover/focus accents (#00ccff, #1bd0fd) stand out well in both light and dark contexts.
2.4 Usage Guide
- Use
#969cacfor default UI text or subdued elements. - Reserve
#00ccff,#1bd0fd,#005fccfor interactive states — don't overuse them in static copy. - For dark mode, pair
#e9ebf1with deep backgrounds (rgb(35, 40, 52)). - Avoid mixing
#3be081with#005fccunless in gradients — they’re meant to work as part of the text gradient. - White text only on dark or brand-colored backgrounds, never on
#969cac.
3. Typography
3.1 Font Families
- Primary: Figtree — Sans-serif, custom loaded (no Google/Adobe source noted), used for almost all headings, body, links, buttons.
- Secondary: NBI Pro Mono — Monospaced, fallback to Arial. Used for small captions, data labels, code-like text.
3.2 Type Scale
| Element Context | Font Family | Size (px/rem) | Weight | Line Height | Transform |
|---|---|---|---|---|---|
| Heading-1 | Figtree | 72px / 4.50rem | 700 | 1.00 | none |
| Heading-1 | Figtree | 72px / 4.50rem | 620 | 1.11 | none |
| Heading-1 | Figtree | 48px / 3.00rem | 500 | 1.10 | none |
| Heading-1 | Figtree | 48px / 3.00rem | 620 | 1.42 | none |
| Heading-1 | Figtree | 36px / 2.25rem | 500 | 1.10 | none |
| Heading-1 | Figtree | 36px / 2.25rem | 450 | 1.44 | none |
| Heading-1 | Figtree | 24px / 1.50rem | 300 | 1.33 | none |
| Heading-1 | Figtree | 24px / 1.50rem | 500 | 1.33 | none |
| Heading-1 | Figtree | 18px / 1.13rem | 300 | 1.50 | none |
| Link | Figtree | 18px / 1.13rem | 450 | 1.56 | none |
| Link | Figtree | 16px / 1.00rem | 300 | 1.50 | none |
| Button | Figtree | 16px / 1.00rem | 500 | 1.50 | none |
| Link | Figtree | 16px / 1.00rem | 500 | 1.50 | none |
| Heading-1 | Figtree | 16px / 1.00rem | 500 | 1.25 | none |
| Button | Figtree | 16px / 1.00rem | 300 | 1.50 | none |
| Heading-1 | Figtree | 16px / 1.00rem | 300 | 1.50 | none |
| Link | Figtree | 16px / 1.00rem | 450 | 1.75 | none |
| Caption | Figtree | 14px / 0.88rem | 500 | 1.43 | none |
| Caption | Figtree | 14px / 0.88rem | 300 | 1.43 | none |
| Caption | Figtree | 14px / 0.88rem | 600 | 1.43 | capitalize |
| Link | Figtree | 14px / 0.88rem | 300 | 2.00 | capitalize |
| Caption | Figtree | 14px / 0.88rem | 300 | 2.00 | capitalize |
| Caption | NBI Pro Mono | 12px / 0.75rem | 400 | 1.33 | none |
| Caption | Figtree | 12px / 0.75rem | 300 | 1.50 | none |
| Caption | NBI Pro Mono | 12px / 0.75rem | 400 | 1.67 | uppercase |
| Link | Figtree | 12px / 0.75rem | 300 | 1.50 | none |
3.3 Hierarchy
They use large jumps for hero headings (72px heavy weight) which creates immediate impact. Mid-range headings (36–48px) allow for section titles. Body and link styles hover around 16–18px, which keeps readability high. Captions drop to 12–14px but with careful line heights (1.43–2.00) to avoid feeling cramped.
Weights are used as much as size to create hierarchy — you’ll see 620 weight at 48px for emphasis without needing 700’s extra boldness.
4. Spacing & Layout
4.1 Spacing Scale
Base scale is 8px — everything falls into multiples, even odd values like 3px are clearly micro-adjustments, not random.
| Value | Rem | Count | Usage |
|---|---|---|---|
| 3px | 0.19rem | 8 | Icon gaps, hairline spacing |
| 4px | 0.25rem | 19 | Button padding, tiny offsets |
| 8px | 0.50rem | 682 | Base unit — everywhere |
| 9px | 0.56rem | 2 | Input padding nuance |
| 10px | 0.63rem | 330 | Border-radius alignment, component gaps |
| 12px | 0.75rem | 1 | Rare, specific UI element spacing |
| 14px | 0.88rem | 1 | Caption padding |
| 15px | 0.94rem | 25 | Small control spacing |
| 16px | 1.00rem | 24 | Body text line height spacing |
| 20px | 1.25rem | 2 | Medium gaps |
| 24px | 1.50rem | 44 | Card padding, section spacing |
| 32px | 2.00rem | 1 | Large gaps |
| 34px | 2.13rem | 1 | Specific layout offsets |
| 40px | 2.50rem | 34 | Section padding |
| 60px | 3.75rem | 3 | Hero spacing |
| 64px | 4.00rem | 7 | Large section margins |
| 80px | 5.00rem | 7 | Intro sections |
| 81px | 5.06rem | 1 | Specific hero alignment |
| 96px | 6.00rem | 1 | Full-bleed spacing |
| 128px | 8.00rem | 1 | Max section padding |
4.2 Layout
Breakpoints are tight: 576px, 600px, 768px, 992px, 1024px, 1199px, 1200px, 1400px, 1600px. This suggests responsive adjustments happen often, not just at standard mobile/tablet/desktop.
5. Visual Elements
Border Radius
They have a wide range:
- 0px — for hard-edged containers
- 2px — badges
- 4px — small buttons
- 5px — inputs, divs
- 8px — buttons
- 9px — inputs
- 10px — most common — spans, divs, labels
- 12px — occasional container
- 24px — large cards
- 24px 24px 0px 0px — top-rounded only
- 9999px — pills
- 50% — circles (avatars)
Shadows
Used sparingly:
- Transparent fade —
rgba(255,255,255,0)...mostly for layering - Soft depth —
rgba(35,40,52,0.3) 0px 20px 25px -5px...for elevated elements - No-shadow states for flat UI
- Rare
rgb(128,128,128) 0px 0px 5px— probably legacy
Borders
Mostly 1px solid rgb(44,49,63) for separation. Some 2px for emphasis. Occasionally rgb(193,193,193) for form elements.
6. Components
6.1 Buttons
Primary Variant
Default:
- Background:
rgb(25,75,255) - Text:
rgb(233,235,241) - Padding: 4px 12px
- Radius: 8px
- Border: none
- Font: 16px / 500 weight
Hover: opacity 0.8, background var(--vulcan), border 1px solid rgb(0,62,255)
Active: scale(0.65), background rgb(0,127,255), opacity 0, text white
Focus: outline 2px solid focus ring, background rgb(250,250,250), scale(0.65), opacity 0.15
Secondary Variant
Default:
- Background:
rgb(233,235,241) - Text:
rgb(16,20,29)
Same padding/radius as primary.
Dark Variant
Default:
- Background:
rgb(35,40,52) - Text:
rgb(233,235,241)
6.2 Links
Multiple styles — black, white, gray, all with underline on hover. Font weights from 300 to 500 depending on importance.
6.3 Forms
Email input:
Default — background rgb(25,30,40), text white, radius 9px, padding 8px 40px 8px 24px
Focus — box-shadow var(--light-blue), outline rgba(0,204,255,0.5)
6.4 Cards
No explicit card data, but likely use 24px radius and soft shadow for elevation.
7. Design Tokens (CSS Variables)
:root {
/* Colors */
--color-primary: #969cac;
--color-white: #ffffff;
--color-accent-cyan: #1bd0fd;
--color-brand-blue: #005fcc;
--color-light-cyan: #00ccff;
--color-table-body-text: #e9ebf1;
--color-table-head-text: #ffffff;
--color-ring: rgba(59,130,246,.5);
--color-text-gradient-start: #3be081;
--color-text-gradient-end: #00ccff;
/* Typography */
--font-primary: "Figtree", sans-serif;
--font-secondary: "NBI Pro Mono", Arial, monospace;
/* Spacing */
--space-3: 3px;
--space-4: 4px;
--space-8: 8px;
--space-9: 9px;
--space-10: 10px;
--space-12: 12px;
--space-14: 14px;
--space-15: 15px;
--space-16: 16px;
--space-20: 20px;
--space-24: 24px;
--space-32: 32px;
--space-34: 34px;
--space-40: 40px;
--space-60: 60px;
--space-64: 64px;
--space-80: 80px;
--space-81: 81px;
--space-96: 96px;
--space-128: 128px;
/* Radius */
--radius-none: 0px;
--radius-sm: 2px;
--radius-md: 4px;
--radius-5: 5px;
--radius-8: 8px;
--radius-9: 9px;
--radius-10: 10px;
--radius-12: 12px;
--radius-24: 24px;
--radius-pill: 9999px;
--radius-circle: 50%;
/* Shadows */
--shadow-soft: rgba(35,40,52,0.3) 0px 20px 25px -5px, rgba(35,40,52,0.12) 0px 10px 10px -5px;
}8. AI Coding Assistant Prompt
# Optimizely Design System Specification
You are an Optimizely design expert. Build UIs matching their visual language exactly.
## Brand Context
Optimizely's design language is precise, tech-forward, and enterprise-ready. It balances muted neutrals with bright accents reserved for interactions. Typography is clean sans-serif with disciplined sizing on an 8px grid.
## Color Palette
- Primary Semantic: #969cac — Default UI text, muted foreground
- White: #ffffff — Backgrounds, inverted text
- Accent Cyan: #1bd0fd — Hover/focus accents
- Brand Blue: #005fcc — Hover/focus accents
- Light Cyan: #00ccff — Gradients, interactive highlights
- Table Body Text: #e9ebf1 — Text on dark table rows
- Table Head Text: #ffffff — Text on dark table headers
- Ring Color: rgba(59,130,246,.5) — Focus ring outlines
- Text Gradient Start: #3be081 — Gradient start for hero text
- Text Gradient End: #00ccff — Gradient end for hero text
## Typography
- Primary Font: "Figtree", sans-serif
- Secondary Font: "NBI Pro Mono", Arial, monospace
| Level | Font | Size | Weight | Line Height | Use |
|-------|------|------|--------|-------------|-----|
| H1 Hero | Figtree | 72px | 700 | 1.00 | Hero titles |
| H1 Hero Alt | Figtree | 72px | 620 | 1.11 | Hero titles |
| Section Title | Figtree | 48px | 500 | 1.10 | Section headings |
| Section Title Bold | Figtree | 48px | 620 | 1.42 | Section headings |
| Subheading | Figtree | 36px | 500 | 1.10 | Subheadings |
| Subheading Light | Figtree | 36px | 450 | 1.44 | Subheadings |
| Body Large | Figtree | 24px | 300 | 1.33 | Body text |
| Body Large Bold | Figtree | 24px | 500 | 1.33 | Body text |
| Body Medium | Figtree | 18px | 300 | 1.50 | Body text |
| Link Large | Figtree | 18px | 450 | 1.56 | Links |
| Link Medium | Figtree | 16px | 300 | 1.50 | Links |
| Button Text | Figtree | 16px | 500 | 1.50 | Buttons |
| Caption | Figtree | 14px | 500 | 1.43 | Captions |
| Caption Mono | NBI Pro Mono | 12px | 400 | 1.33 | Code labels |
## Spacing & Grid
Base: 8px grid
Scale: 3px, 4px, 8px, 9px, 10px, 12px, 14px, 15px, 16px, 20px, 24px, 32px, 34px, 40px, 60px, 64px, 80px, 81px, 96px, 128px
## Border Radius
- none: 0px — Tables, hard edges
- sm: 2px — Badges
- md: 4px — Small buttons
- radius-5: 5px — Inputs
- radius-8: 8px — Buttons
- radius-9: 9px — Inputs
- radius-10: 10px — Common elements
- radius-12: 12px — Containers
- radius-24: 24px — Cards
- full: 9999px — Pills
- circle: 50% — Avatars
## Shadows & Depth
- Soft Elevation: rgba(35,40,52,0.3) 0px 20px 25px -5px, rgba(35,40,52,0.12) 0px 10px 10px -5px
- Transparent fade for overlays
- Avoid heavy drop shadows
## Component Specifications
### Primary Button
Default:
background: rgb(25,75,255); color: rgb(233,235,241); padding: 4px 12px; border-radius: 8px; font-weight: 500; font-size: 16px; border: none.
Hover: opacity 0.8; background: var(--vulcan); border: 1px solid rgb(0,62,255).
Active: scale(0.65); background: rgb(0,127,255); opacity 0; color: #fff.
Focus: outline 2px solid rgba(59,130,246,.5); background: #fafafa; scale(0.65); opacity 0.15.
### Secondary Button
Default: background: rgb(233,235,241); color: rgb(16,20,29); same padding/radius.
### Input Fields
Email input:
Default — background: rgb(25,30,40); color: #fff; border-radius: 9px; padding: 8px 40px 8px 24px.
Focus — box-shadow: 0 5px 5px -5px #10141d66, 0 4px 20px -5px var(--light-blue); outline: rgba(0,204,255,0.5) solid 1px.
### Links
Default: color: #10141d; no underline. Hover: underline, color: #2b2b2b.
## Layout & Responsive Rules
Breakpoints: 576px, 600px, 768px, 992px, 1024px, 1199px, 1200px, 1400px, 1600px.
Max content width: follow 1400–1600px breakpoints.
Page padding: multiples of 8px.
## Interaction Rules
- Transition: 150ms ease for hover/active states
- Focus indicators: visible outlines in brand colors
- Loading: fade opacity changes
## DO List
- Use only defined palette colors
- Maintain 8px grid
- Keep button text at 16px Figtree
- Reserve bright accents for interactive states
- Use soft shadows for interactive elevation
## DON'T List
- Don’t introduce new colors
- Don’t mix sharp and rounded corners in same component
- Don’t overuse gradients — reserve for hero text
- Don’t apply heavy shadows
## Code Examples
```css
.btn-primary {
background: rgb(25,75,255);
color: rgb(233,235,241);
padding: 4px 12px;
border-radius: 8px;
font-weight: 500;
font-size: 16px;
border: none;
transition: background 150ms ease;
}
.btn-primary:hover {
opacity: 0.8;
background: var(--vulcan);
}
.input-email {
background: rgb(25,30,40);
color: #fff;
border-radius: 9px;
padding: 8px 40px 8px 24px;
}
.input-email:focus {
outline: rgba(0,204,255,0.5) solid 1px;
}
.card {
background: #fff;
border-radius: 24px;
padding: 24px;
box-shadow: rgba(35,40,52,0.3) 0px 20px 25px -5px, rgba(35,40,52,0.12) 0px 10px 10px -5px;
}
---
## 9. Summary
**TL;DR** — Optimizely’s design system is a disciplined, enterprise-ready UI language. Muted neutrals set the tone, bright blues and cyans pop only on interaction, and typography plus spacing ride a strict 8px grid.
**Brand Keywords**: muted-enterprise, interaction-focused, grid-disciplined, tech-trust