OneSignal Brand Design System Deep Dive

1. Brand Overview

OneSignal’s visual language delivers a clear message: modern SaaS with developer-friendly polish. This isn’t a glossy consumer brand—it’s a product for people who care about fast integration, scalable messaging, and a UI that doesn’t get in the way. The tone is professional but not cold. There’s warmth in the typography and a bit of playfulness in hover effects, but the foundation is strong and precise.

The brand’s primary color—a saturated indigo (#3a3db3)—sets the stage. It’s confident without being loud, leaning more towards "trustworthy platform" than "creative agency." This suits their audience: app developers, marketers, and product teams who need dependable infrastructure. They marry that deep indigo with plenty of white space and muted grays so interfaces feel breathable. The occasional bright accent (a warm orange, a soft green) is sprinkled in where attention is needed—calls to action, highlights, code examples.

Typography is clean, approachable, and human: Nunito Sans for almost everything, with Inconsolata and Source Code Pro appearing in code contexts. That’s deliberate. Nunito Sans has rounded terminals, injecting friendliness into what could otherwise become a utilitarian dashboard. Inconsolata and Source Code Pro remind developers this is a technical product.

Spacing is consistent—a base 8px grid reinforced by frequent multiples (16px, 24px, 40px, 80px). This makes layout balance predictable: sections have breathing room, buttons feel proportional, and cards don’t crowd their contents.

The overall feeling: a system built by designers who understand both marketing and product UX. It’s structured enough to scale across a complex SaaS application but flexible enough to let marketing pages breathe. Hover effects and scale transitions add micro-interaction delight without tipping into gimmickry.

2. Color System

2.1 Primary Colors

The main brand color is #3a3db3 (RGB 58,61,179). A saturated indigo. It’s calm and authoritative—a safe choice for B2B SaaS. The hue sits in a sweet spot between tech-trust and creative-pop. It’s deeply usable because it contrasts well against white backgrounds and pairs cleanly with both dark text and lighter accent colors.

Psychologically, indigo blends the trustworthiness of blue with a slight creative twist from violet. Compared to many dev-tool brands (which skew bright blue or teal), OneSignal’s choice feels more distinctive yet still safe. Against competition like SendGrid or Firebase, they own a more unique visual niche.

2.2 Complete Palette

2.3 Color Relationships

There’s clear foreground/background discipline. Primary indigo against white achieves excellent contrast (~7.9:1 for WCAG AA and AAA compliance for normal text). Secondary slate #424d57 against white is ~8.9:1—safe for body text. Light gray #e5e8eb is used for backgrounds with dark text to ensure accessibility.

A few accent choices (warm orange #f08d49, soft blue #88aece) drop contrast if used for text against white. This is fine—they are rarely used for copy, mostly for non-critical accents or icons.

Dark mode isn’t actively shown—palette is optimized for light mode surfaces.

2.4 Usage Guide

• Primary indigo (#3a3db3): Reserve for primary buttons, CTAs, key highlights in nav. Don’t overuse for body text—it’s a brand accent, not a default copy color.
• White & light gray surfaces: White for main content, light gray for section separation.
• Slate (#424d57): Safe default for headings over white/light backgrounds.
• Accents (orange, soft blue, olive green): Sparingly—use in icons, status labels, or small highlight areas.
• Pale indigo (#a4a6f1): Works as border or focus color—contrast against darker background is adequate, against white it’s subtle.

Avoid mixing warm and cool accents unless intentional—orange plus soft blue can feel visually noisy. Pair primary indigo with white or slate for clean contrast.

3. Typography

3.1 Font Families

• Nunito Sans: Google Font, variable. Primary UI and marketing font. Rounded, friendly sans-serif.
  • Fallbacks: -apple-system, system-ui, Segoe UI, Roboto, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Arial, Helvetica Neue, Helvetica.
• Inconsolata: Google Font. Used for inline code or developer-facing snippets. Monospaced.
• Source Code Pro: Google Font. Likely used in larger code blocks for clarity.

No Adobe Fonts. Variable fonts enabled.

3.2 Type Scale

3.3 Hierarchy

H1 jumps dramatically to 64px for hero titles—strongly marketing-led. The heavy weights (700–800) push emphasis, while lighter weights (400) soften secondary headings. Links range from 16–24px, scaled by importance.

Body text sits around 16–18px—safe for readability. The monospaced fonts are isolated to technical contexts, avoiding typographic clutter. Hierarchy is clear: big bold heading, medium bold subheading, light body.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px. Very consistent.

4.2 Layout

Breakpoints are granular—mobile-first approach with multiple ranges: 320px, 480px, 768px, 1024px, 1280px, etc. They use Bootstrap grid + Vuetify components, so container widths respond at common points.

5. Visual Elements

Border Radius

Rounded corners are generously used—4px for small UI, 16px for blocks, 50% for circles. No super-pill buttons (9999px)—this brand prefers subtle rounding.

Shadows

They’re using mixed depth, mostly soft layered shadows with rgba blacks:

1. rgba(5, 27, 44, 0.1) 0px 6px 12px -6px, rgba(5, 27, 44, 0.08) 0px 8px 24px -4px — most common.
2. Slight variants with 0.12 opacity for more lift.
3. Some inverted ordering.
4. Rare heavier shadows: rgba(9, 14, 21, 0.16) 0px 5px 40px.
5. Inset border-shadow used once.

Shadows appear on interactive elements to signal elevation.

Borders

Mostly 1px solids in palette colors:

• Pale Indigo border for secondary buttons
• Primary Indigo solid for primary buttons
• Light gray border for separators Minimal usage of decorative borders—functional only.

6. Components

6.1 Buttons

Secondary Button (btn btn-secondary):

• Default: transparent bg, #3a3db3 text, 9px 15px padding, 4px radius, 1px solid #a4a6f1.
• Hover: indigo bg, lighter indigo (#6b6ed9) text, scale 1.1, shadow lift, white border.
• Active: #ececfc bg, pale purple text, scale 0.85.
• Focus: pale bg, indigo text, 0.9 opacity, pale indigo border.

Primary Button (btn btn-primary):

• Default: indigo bg, white text, 9px 15px padding, 4px radius, indigo border.
• Hover: identical to secondary hover—indigo bg stays, text shifts to lighter shade, scaling/shadow same.
• Active/Focus states match secondary.

Integration CTA Section:

• Huge 80px 0px padding, light gray bg, center-aligned.
• Hover: slight scale, optionally background shifts indigo.

6.2 Links

6.3 Forms

No explicit input styles extracted—likely handled by Vuetify defaults (border, focus states, consistent radius).

6.4 Cards

Cards use 16px radius, white or light gray bg, common shadows. Padding commonly 24px or multiples for interior spacing.

7. Design Tokens

:root {
  /* Colors */
  --color-gray-medium: #95a1ac;
  --color-white: #ffffff;
  --color-indigo-primary: #3a3db3;
  --color-slate: #424d57;
  --color-soft-blue: #88aece;
  --color-warm-orange: #f08d49;
  --color-light-gray: #e5e8eb;
  --color-olive-green: #b5bd68;
  --color-muted-gray-blue: #8b96a2;
  --color-pale-indigo: #a4a6f1;
  --swiper-theme-color: #007aff;

  /* Typography */
  --font-primary: 'Nunito Sans', -apple-system, system-ui, 'Segoe UI', Roboto, Arial, Helvetica, sans-serif;
  --font-code: 'Inconsolata', monospace;
  --font-code-alt: 'Source Code Pro', monospace;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-7: 7px;
  --space-7_04: 7.04px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-24: 24px;
  --space-30: 30px;
  --space-40: 40px;
  --space-48: 48px;
  --space-80: 80px;
  --space-160: 160px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-round: 50%;

  /* Shadows */
  --shadow-soft: rgba(5, 27, 44, 0.1) 0px 6px 12px -6px, rgba(5, 27, 44, 0.08) 0px 8px 24px -4px;
  --shadow-soft-strong: rgba(5, 27, 44, 0.12) 0px 6px 12px -6px, rgba(5, 27, 44, 0.08) 0px 8px 24px -4px;
}

8. AI Coding Assistant Prompt

# OneSignal Design System Specification

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

## Brand Context
OneSignal’s design philosophy: developer-friendly SaaS with clean, modern marketing pages. High trust via indigo tones, friendly typography, and consistent spacing. Interaction delight through subtle scaling and shadow transitions.

## Color Palette
- Gray Medium: #95a1ac — neutral backgrounds, muted text
- White: #ffffff — primary surface backgrounds
- Indigo Primary: #3a3db3 — CTAs, primary buttons, key actions
- Slate: #424d57 — headings, dark UI text
- Soft Blue: #88aece — decorative accents, icons
- Warm Orange: #f08d49 — alerts, highlights
- Light Gray: #e5e8eb — section backgrounds, dividers
- Olive Green: #b5bd68 — success accents
- Muted Gray Blue: #8b96a2 — secondary text
- Pale Indigo: #a4a6f1 — borders, focus outlines
- Swiper Blue: #007aff — carousel controls

## Typography
Primary font: 'Nunito Sans', -apple-system, system-ui, 'Segoe UI', Roboto, Arial, Helvetica, sans-serif
Code fonts: 'Inconsolata', monospace; 'Source Code Pro', monospace

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 Hero | 64px | 800 | 1.20 | Main marketing headline |
| H1 Light | 64px | 400 | 1.20 | Secondary hero line |
| H1 Mid | 48px | 800 | 1.20 | Section titles |
| H2 | 36px | 800 | 1.33 | Feature headings |
| H2 Alt | 36px | 700 | 1.20 | Alternate feature headings |
| H3 | 24px | 700 | 1.30 | Card titles |
| Body Large | 24px | 400 | 1.25 | Large link text |
| Body Medium Bold | 18px | 700 | 1.63 | Subheadings |
| Body Medium | 18px | 400 | 1.50 | Body text |
| Body Small | 16px | 400 | 1.50 | Secondary text |
| Button Text | 16px | 700 | 1.50 | Primary/secondary buttons |

## Spacing & Grid
Base: 8px. Scale includes: 1px, 2px, 4px, 5px, 7px, 7.04px, 8px, 9px, 10px, 12px, 13px, 15px, 16px, 18px, 24px, 30px, 40px, 48px, 80px, 160px  
Use multiples for section padding and component gaps.

## Border Radius
- none: 0 — edge-aligned list items
- sm: 4px — buttons, inputs
- md: 8px — images
- lg: 16px — cards, larger blocks
- xl: 24px — select divs
- round: 50% — avatars, circular icons

## Shadows & Depth
Primary shadow: rgba(5, 27, 44, 0.1) 0px 6px 12px -6px, rgba(5, 27, 44, 0.08) 0px 8px 24px -4px

## Component Specifications

### Primary Button
Default:
```css
background-color: #3a3db3;
color: #ffffff;
padding: 9px 15px;
border-radius: 4px;
border: 1px solid #3a3db3;
font-weight: 600;
font-size: 16px;
```
Hover:
```css
color: #6b6ed9;
transform: scale(1.1);
box-shadow: rgba(5, 27, 44, 0.25) 0px 30px 60px -24px;
border: 1px solid #ffffff;
```
Active:
```css
background-color: #ececfc;
color: #9496e3;
transform: scale(0.85);
```
Focus:
```css
border: 1px solid #a4a6f1;
background-color: #ececfc;
opacity: 0.9;
```

### Secondary Button
Same as primary but default bg transparent and text #3a3db3.

### Navigation Links
Default: color per palette, underline if white or indigo.  
Hover: lighter indigo, no underline.

### Cards
Background: #ffffff; border-radius: 16px; padding: 24px; shadow per primary.

## Layout & Responsive Rules
Bootstrap grid with Vuetify components. Breakpoints: 320px, 480px, 768px, 1024px, 1280px. Gaps: multiples of 8px.

## Interaction Rules
Transitions: 150ms ease for hover/active/focus changes. Slight scale for hover (1.06–1.1).

## DO
- Use ONLY colors from palette
- Maintain 8px grid
- Keep button radii at 4px
- Use shadows only for interactivity cues
- Reserve primary indigo for CTAs

## DON'T
- Use unapproved colors
- Mix corner styles in same component
- Apply shadows to non-interactive elements
- Break grid spacing

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #3a3db3;
  color: #ffffff;
  padding: 9px 15px;
  border-radius: 4px;
  border: 1px solid #3a3db3;
  font-weight: 600;
  font-size: 16px;
}
.btn-primary:hover {
  color: #6b6ed9;
  transform: scale(1.1);
  box-shadow: rgba(5, 27, 44, 0.25) 0px 30px 60px -24px;
  border: 1px solid #ffffff;
}
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-soft);
}
```

9. Summary

TL;DR — OneSignal’s design system is SaaS-focused, friendly, and precise. Indigo primary, consistent 8px grid, Nunito Sans for warmth. Shadows and subtle scales make UI feel alive without overcomplication.

Brand Keywords:

• developer-friendly
• warm-modern
• grid-consistent
• indigo-trust
• subtle-interactive