Braze Design System Deep-Dive

1. Brand Overview

Braze’s brand design language is unapologetically modern SaaS. The first impression is “high-tech, but approachable.” There’s a deliberate balance here: deep, confident blues and purples anchor the interface, while generous white space and rounded components soften the experience. This isn’t a brand playing in the consumer toy space — the look is enterprise-ready but not sterile.

The typography choices scream clarity and impact. Aribau Grotesk dominates — a geometric, grotesque sans that’s bold without being aggressive. Headings run heavy (800 weight) and tight in tracking, making every headline feel like a statement. Body copy stays clean and functional, never ornamental. Braze knows its audience: marketing and product teams who need dashboards and content that communicate quickly.

The color story is restrained but not dull. The primary palette leans into #101828 (a deep charcoal/navy hybrid) and #4a0cdf (a saturated purple), with accent appearances from #300266 (an even deeper violet). These work alongside bright whites (#ffffff) and light grays (#eaecf0) to create strong contrast and clear hierarchy. There’s minimal use of saturated hues except where interaction is key — CTAs, link hovers, and highlights.

The UI tokens tell you a lot about the philosophy: an 8px spacing grid (with occasional 4px steps) keeps everything consistent. Rounded shapes are common — from subtle 6px radii on nav elements to fully pill-shaped 9999px buttons. Shadows are used sparingly and precisely, often layered and tinted with brand colors rather than default greys — a nice touch.

Framework-wise, the site’s built with Tailwind CSS and Vuetify components. That combination explains the tight utility-class control and the v-component structure. Breakpoints are standard responsive ranges, starting at 400px up to 1440px, so layouts adjust smoothly across devices.

In short: Braze’s design system is confident, modular, and tuned for high-density information without losing warmth. It’s a system that says “enterprise SaaS can be friendly” — and it backs that up with consistent tokens and strong visual rhythm.

2. Color System

2.1 Primary Colors

The primary semantic colors are:

• Primary: rgb(16, 24, 40) → #101828
• Secondary: rgb(255, 255, 255) → #ffffff

Primary (#101828) is a rich, near-black navy. It’s authoritative and pairs well with saturated brand accents. Psychology-wise: dark blues convey trust, stability, and professionalism — perfect for a SaaS platform handling customer engagement data. Secondary (#ffffff) is pure white — the foundation for light mode UI, ensuring maximum legibility and contrast.

Compared to competitors in the martech space (think HubSpot’s orange or Salesforce’s pale blue), Braze’s primary is darker and more serious. This works in their favor for enterprise credibility.

2.2 Complete Palette

2.3 Color Relationships

Contrast ratios are strong. Primary (#101828) on white exceeds WCAG AAA for normal text. Brand purple (#4a0cdf) on white is also high contrast — safe for body copy and CTAs. The deep violet (#300266) is reserved for large fills with white text; contrast is still safe, but not as high as the primary.

Dark mode isn’t fully implemented here — but the palette could flip easily: white becomes text, primary dark becomes the main background, and purples remain accents.

2.4 Usage Guide

Works well:

• #101828 text on #ffffff background — clean and high contrast.
• #4a0cdf accents on #eaecf0 panels — brand pops.
• #300266 fills with white text — strong CTA presence.

Avoid:

• Purple (#4a0cdf) on deep violet (#300266) — low contrast, may fail accessibility.
• Medium gray (#696969) on light gray (#eaecf0) for body copy — borderline contrast.

3. Typography

3.1 Font Families

Primary: Aribau Grotesk
Fallbacks: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans
No Google Fonts or Adobe Fonts source — likely self-hosted.

Aribau Grotesk is versatile: geometric but warm, works well for both large display headlines and small UI labels.

3.2 Type Scale

3.3 Hierarchy

Headings scale aggressively — 84px down to 20px — ensuring clear visual separation. Tight letter-spacing on large sizes (-1.68px for 84px) avoids awkward gaps. Body and link text at 16–18px keeps readability high for dashboards. Captions at 14px and below are still legible thanks to the high-contrast palette.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid, with intermediate 4px steps.

4.2 Layout

Breakpoints:
400px, 425px, 480px, 576px, 640px, 768px, 992px, 1024px, 1280px, 1440px.
That’s a standard mobile-first approach with fine-grained midpoints.

5. Visual Elements

Border Radius

Consistency: small elements keep radii under 6px; CTAs go full-pill (100px or 9999px).

Shadows

Shadows are layered and color-tinted — not generic grey. Example:
rgba(128, 30, 215, 0.1) 0px 0px 20px 4px, rgba(48, 2, 102, 0.05) 0px 33px 30px 0px...
They use brand purple and deep violet in shadows to tie depth to the palette.

Borders

Thin (1px) solid borders in brand/accent colors. Light greys (#d0d5dd) for dividers, purples for button outlines.

6. Components

6.1 Buttons

Variant: Light Gray

• Default: bg #eaecf0, text #475467, padding 4px 6px, radius 6px
• Hover: bg #1eaedb, scale 1.05, text #ffffff, border 2px solid var(--input-hover-border-color)
• Focus: bg #1eaedb, outline 2px solid #000, text #ffffff

Variant: Play Button

• Default: transparent, text #ffffff, radius 9999px, transform offset
• Hover: same hover as above

Variant: Deep Violet CTA

• Default: bg #300266, text #ffffff, padding 4px 16px, radius 100px
• Hover/Focus: same teal hover/focus scheme as others — interestingly inconsistent with brand purple.

Variant: Transparent Pill

• Default: bg rgba(255,255,255,0.2), text #344054, padding 4px 16px, radius 100px
• Hover/Focus: same teal hover scheme

Variant: Purple Circle

• Default: bg #801ed7, text #ffffff, padding 12px 10px, radius 9999px, border 1px solid #ffffff

6.2 Links

Six styles detected:

• #101828 body links — plain, no underline
• #4a0cdf bold links — brand accent
• #475467 bold — muted nav links
• #ffffff bold — inverse links
• #4e5b6d bold — dark muted
• #3860be underlined — interactive emphasis

Hover states often switch to #3860be.

6.3 Forms

No explicit text input styles extracted — suggests Vuetify defaults overridden minimally.

6.4 Cards

Rounded corners (12px or 20px), light gray backgrounds, subtle shadow layers with brand tint.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-primary: #101828;
  --color-secondary: #ffffff;
  --color-light-gray: #eaecf0;
  --color-brand-purple: #4a0cdf;
  --color-deep-violet: #300266;
  --color-medium-gray: #696969;
  --color-slate-gray: #475467;
  --color-dark-slate: #344054;
  --color-cool-gray: #667085;
  --color-neutral-gray: #555555;
  --color-accent-blue: #005fcc;
  --color-off-white: #fafbfb;

  /* Typography */
  --font-primary: "Aribau Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";

  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-64: 64px;
  --space-96: 96px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 100px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-brand-soft: rgba(128, 30, 215, 0.1) 0px 0px 20px 4px, rgba(48, 2, 102, 0.05) 0px 33px 30px 0px;
}

8. AI Coding Assistant Prompt

# Braze Design System Specification

You are a Braze design expert. Build UIs matching their visual language exactly.

## Brand Context
Braze’s design language is modern SaaS with a confident, enterprise tone. Deep navy and purple anchor the palette, generous white space keeps it approachable. Rounded shapes and consistent 8px spacing give it a friendly edge.

## Color Palette
- Primary Dark: #101828 — Primary text, nav, headings
- Secondary White: #ffffff — Page background, inverse text
- Light Gray: #eaecf0 — Panels, dividers
- Brand Purple: #4a0cdf — Links, primary CTAs
- Deep Violet: #300266 — CTA fills
- Medium Gray: #696969 — Metadata text
- Slate Gray: #475467 — Secondary buttons, labels
- Dark Slate: #344054 — Button text
- Cool Gray: #667085 — Captions
- Neutral Gray: #555555 — Icons
- Accent Blue: #005fcc — Hover/focus states
- Off White: #fafbfb — Hover backgrounds

## Typography
Font: "Aribau Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans"

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 84px | 800 | 1.25 | Hero titles |
| H1 | 60px | 800 | 1.25 | Section titles |
| H1 | 48px | 800 | 1.25 | Page headings |
| H1 | 36px | 800 | 1.22 | Subheadings |
| Body | 16px | 400 | 1.50 | Paragraphs |
| Link | 18px | 400 | 1.55 | Nav links |
| Button | 18px | 800 | 1.55 | Primary buttons |
| Caption | 14px | 400 | 1.40 | Metadata |

## Spacing & Grid
Base: 8px grid  
Values: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 64px, 96px

## Border Radius
- sm: 2px — Inputs, small buttons
- md: 6px — Nav items
- lg: 12px — Cards
- xl: 20px — Pills
- pill: 100px — Large CTAs
- full: 9999px — Avatars

## Shadows & Depth
Use brand-tinted shadows:  
`rgba(128, 30, 215, 0.1) 0px 0px 20px 4px, rgba(48, 2, 102, 0.05) 0px 33px 30px`

## Component Specifications

### Primary Button
Default:
```css
.btn-primary {
  background: #300266;
  color: #ffffff;
  padding: 4px 16px;
  border-radius: 100px;
  font-weight: 800;
  font-size: 18px;
  border: none;
}
.btn-primary:hover {
  background: #1eaedb;
  transform: scale(1.05);
  color: #ffffff;
}
.btn-primary:focus {
  outline: 2px solid #000;
  border: 1px solid #000;
}

Secondary Button

Default:

.btn-secondary {
  background: #eaecf0;
  color: #475467;
  padding: 4px 6px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 14px;
}

Navigation Link

.nav-link {
  color: #101828;
  font-weight: 400;
  text-decoration: none;
}
.nav-link:hover {
  color: #3860be;
}

Card

.card {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow-brand-soft);
}

Layout & Responsive Rules

Breakpoints: 400px, 425px, 480px, 576px, 640px, 768px, 992px, 1024px, 1280px, 1440px

Interaction Rules

• Transitions: 150ms ease for hover/focus
• Focus: solid 2px outline in high-contrast color
• Hover: subtle scale (1.05) for CTAs

DO

• Use exact hex values from palette
• Maintain 8px spacing multiples
• Keep button shapes consistent per variant
• Use Aribau Grotesk everywhere

DON'T

• Invent new colors
• Mix sharp and rounded corners
• Use default grey shadows
• Overuse hover scale on non-interactive elements

---

## 9. Summary

**TL;DR:** Braze’s design system is a tight, modern SaaS toolkit: deep navy primary, bold purple accents, geometric sans typography, and a consistent 8px grid. Rounded pills and brand-tinted shadows keep it friendly despite enterprise tone.

**Brand Keywords:**  
- enterprise-friendly  
- purple-accented  
- geometric-bold  
- grid-consistent  
- shadow-tinted