Bugsnag Design System Deep Dive

1. Brand Overview

Bugsnag’s website feels unapologetically like a developer tool brand. No fluff, no fake “startup lifestyle” shots. The vibe is pragmatic, but polished. It’s clearly built for engineering teams who care about reliability. The design language supports that — clean typography, deliberate spacing, and a restrained color palette that doesn’t try to be “fun” in ways that would undermine trust.

The philosophy here is functional clarity. The UI isn’t chasing trends — no glassmorphism, no excessive motion. Instead, it’s about control and precision. The colors are almost all business: strong blues for primary actions, deep grays for text, and occasional bright accents (yellow, red) for emphasis. The typography is a mix of Roboto and Open Sans — workhorse sans-serifs that keep things readable at all sizes. There’s also Monda making a cameo for uppercase captions, which adds a subtle technical flavor.

You can tell this is aimed at people who live in dashboards. The button states are tactile — hover states have actual border changes, shadows, and color shifts. The spacing is on an 8px grid, which makes layouts feel consistent and predictable. Breakpoints are generous, giving content breathing room on large screens.

This isn’t a brand trying to be “warm” — it’s a brand trying to be clear. When a primary button goes from #097eb2 to #4949e4 on hover, you notice, and you know exactly what’s clickable. When links go from dark navy to bright cyan, they’re signalling action, not decoration.

In short: Bugsnag’s design system is a toolmaker's system. It’s built for users who value fast recognition over visual novelty. It’s not flashy, but it’s confident — every color, font, and radius feels like it’s there to support clarity in complex interfaces.

2. Color System

2.1 Primary Colors

The main brand color is rgb(73, 73, 228) (#4949e4). It’s a saturated indigo-blue that sits right between tech trustworthiness and a slightly energetic tone. It’s used for hover states, some primary buttons, and certain accent areas. The secondary semantic color is rgb(51, 51, 51) (#333333), a deep neutral gray used for text-heavy areas and secondary actions.

Primary action buttons start with rgb(9, 126, 178) (#097eb2) — a clean, slightly teal blue — and shift to the indigo on hover. This two-blue system is smart: the teal feels approachable and modern, the indigo adds emphasis when you interact.

Compared to competitors like Sentry (who lean heavily into purple), Bugsnag’s palette feels more grounded. That’s a brand choice — it signals “we’re here to help you fix things” rather than “look at us.”

2.2 Complete Palette

2.3 Color Relationships

The palette is high-contrast by design. White (#ffffff) on teal (#097eb2) easily passes WCAG AA for normal text. Indigo (#4949e4) on white is also safe. The only potential accessibility issue is yellow (#ffe600) on white — that’s low contrast and should only be used with dark text.

Text colors are layered: primary text (#173647) is deep navy, secondary text (#7e96a5) is lighter, and disabled (#999999) is medium gray. This keeps hierarchy clear without relying on font weight alone.

Dark mode isn’t explicit here, but the palette could adapt — navy backgrounds, teal accents, white text.

2.4 Usage Guide

Works well:

• #097eb2 with white text for buttons
• #173647 for body text on white backgrounds
• #4949e4 as hover to signal interactivity

Avoid:

• Yellow (#ffe600) on white — low contrast
• Red (#d9272e) for anything non-critical — it’s a clear error signal
• Mixing teal (#097eb2) and orange (#ed6e10) unless intentionally signalling different states — they’ll clash

3. Typography

3.1 Font Families

Three fonts are present:

• Roboto — Heavy lifting for headings. Google font, geometric sans-serif, reliable in UI contexts.
• Open Sans — Body text, links, buttons. Google font, humanist sans-serif, softer than Roboto.
• Monda — Used for uppercase captions. Technical feel, a bit condensed.

Variable fonts are enabled, so weights are flexible.

3.2 Type Scale

3.3 Hierarchy

Headings scale down from 60px to 16px, which covers hero sections down to small UI labels. Roboto’s heavier weight makes titles pop. Open Sans fills in smaller headings and body text, giving a softer feel for dense content.

Captions in Monda uppercase are a nice touch — they read as “labels” in a dashboard. Line heights are tight for headings (1.33–1.38), looser for body (1.50). That’s deliberate: tighter headings feel more compact, looser body improves readability.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px. The actual values:

8px and 12px are the workhorses. 20px and 64px appear often in section spacing. 128px is used for large margin/padding blocks.

4.2 Layout

Breakpoints range from 98px (!) up to 1440px. The small ones (98px, 450px) are likely specific component constraints. The common responsive steps are at 576px, 640px, 768px, 992px, 1200px, 1280px, 1440px. Tailwind CSS modifiers are present — so spacing and layout are responsive via utility classes.

5. Visual Elements

Border Radius

Values:

• 2px — span elements (low confidence)
• 4px — buttons, links
• 6px — modals
• 8px — divs, modals, iframes, images
• 12px — divs
• 17px — labels

The system isn’t strictly “small/medium/large” — some odd numbers like 17px suggest pill-ish shapes for labels.

Shadows

Multiple shadow styles:

• Soft depth: rgba(0,0,0,0.1) 0px 20px 25px -5px + 0px 8px 10px -6px
• Card hover: rgba(0,0,0,0.12) 0px 0px 10px 0px
• Light drop: rgba(0,0,0,0.1) 10px 10px 20px 0px

They use shadows sparingly — mostly on buttons and modals, not on every card.

Borders & Dividers

• 1px solid #e5e7eb (light neutral) — common for dividers
• 1px solid #097eb2 — accent borders
• 1px solid #d8dde4 — muted dividers
• Occasional rgba(112,112,112,0.1) for subtle lines

6. Components

6.1 Buttons

Primary (Teal to Indigo)

• Default: bg #097eb2, text #ffffff, padding 12px 24px, radius 4px, no shadow.
• Hover: bg #4949e4, text #00425a, border 2px solid #4949e4, shadow rgba(73,73,228,0.4) 0px 0px 20px.
• Active: text #097eb2, shadow #dddddd 2px 2px 10px.
• Focus: text #097eb2, shadow rgba(0,122,166,0.25) 0px 0px 0px 0.2rem.

Accent Yellow

• Default: bg #ffe600, text #ffffff, padding 8px, radius 8px, shadow rgba(0,0,0,0.2) 10px 10px 20px, transform scale(1.1).
• Hover: transform reset.

Accent Red

• Default: bg #ffffff, text #d9272e, padding 8px, radius 8px, shadow rgba(0,0,0,0.1) 10px 10px 20px.

Consent Primary (Indigo)

• Default: bg #4949e4, text #ffffff, padding 12px 16px, radius 0px, shadow rgba(0,0,0,0.12) 0px 0px 10px.

Consent Secondary (Gray)

• Default: bg #333333, text #ffffff, padding 12px 16px, radius 0px, shadow rgba(0,0,0,0.12) 0px 0px 10px.

6.2 Links

Variants:

• Teal (#097eb2) default → bright cyan (#58c6ff) hover
• Deep navy (#173647) default → cyan hover
• White (#ffffff) default → slightly tinted hover
• Light gray (#dee5ed) default → cyan hover
• Dark gray (#333333) default → cyan hover

No underlines by default — all rely on color change for state.

6.3 Forms

No explicit input styles extracted — likely Tailwind/Vuetify defaults.

6.4 Cards

Shadows match button hover styles — subtle depth, 8px radius common.

7. Design Tokens

:root {
  /* Colors */
  --color-primary-indigo: #4949e4;
  --color-primary-teal: #097eb2;
  --color-secondary-gray: #333333;
  --color-neutral-light: #e5e7eb;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-text-primary: #173647;
  --color-text-secondary: #7e96a5;
  --color-accent-yellow: #ffe600;
  --color-neutral-mid: #d8dde4;
  --color-accent-red: #d9272e;
  --color-gray-medium: #999999;
  --color-dark-teal: #046693;
  --color-accent-orange: #ed6e10;
  --color-deep-blue: #005fcc;
  --color-soft-blue: #c8e2ee;
  --color-bright-cyan: #58c6ff;
  --color-focus-teal: #03608c;

  /* Typography */
  --font-roboto: "Roboto", sans-serif;
  --font-open-sans: "Open Sans", sans-serif;
  --font-monda: "Monda", sans-serif;

  /* Spacing */
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-16: 16px;
  --space-20: 20px;
  --space-25: 25px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-44: 44px;
  --space-60: 60px;
  --space-64: 64px;
  --space-80: 80px;
  --space-128: 128px;

  /* Border Radius */
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-17: 17px;

  /* Shadows */
  --shadow-lg: rgba(0,0,0,0.1) 0px 20px 25px -5px, rgba(0,0,0,0.1) 0px 8px 10px -6px;
  --shadow-md: rgba(0,0,0,0.12) 0px 0px 10px 0px;
  --shadow-sm: rgba(0,0,0,0.1) 10px 10px 20px 0px;
}

8. AI Coding Assistant Prompt

# Bugsnag Design System Specification

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

## Brand Context
Bugsnag’s design is for developers who value clarity and control. Colors are functional, typography is utilitarian, spacing is predictable. Interaction states are strong and clear.

## Color Palette
- Primary Indigo: #4949e4 — hover states, accent shadows
- Primary Teal: #097eb2 — default primary buttons, CTAs
- Secondary Gray: #333333 — neutral text, secondary buttons
- Neutral Light: #e5e7eb — dividers, modal borders
- Black: #000000 — high contrast text
- White: #ffffff — backgrounds, inverse text
- Text Primary: #173647 — body text
- Text Secondary: #7e96a5 — muted text
- Accent Yellow: #ffe600 — special attention buttons
- Neutral Mid: #d8dde4 — subtle dividers
- Accent Red: #d9272e — error states
- Gray Medium: #999999 — disabled text
- Dark Teal: #046693 — alt hover/focus
- Accent Orange: #ed6e10 — warning hovers
- Deep Blue: #005fcc — alt hover
- Soft Blue Tint: #c8e2ee — hover backgrounds
- Bright Cyan: #58c6ff — link hovers
- Focus Teal: #03608c — focus outlines

## Typography
- Headings: "Roboto", sans-serif
- Body & Links: "Open Sans", sans-serif
- Captions: "Monda", sans-serif

| Level | Font | Size | Weight | Line Height | Use |
|-------|------|------|--------|-------------|-----|
| H1 | Roboto | 60px | 700 | 1.33 | Hero titles |
| H1-sm | Roboto | 42px | 700 | 1.38 | Section titles |
| H1-xs | Roboto | 36px | 700 | 1.38 | Subsections |
| H-sub | Open Sans | 20px | 400 | 1.40 | Subheadings |
| H-sub-bold | Roboto | 20px | 700 | 1.50 | Subheadings |
| Body | Open Sans | 16px | 400 | 1.50 | Body copy |
| Body-bold | Open Sans | 16px | 600 | 1.50 | Emphasis text |
| Label | Monda | 14px | 700 | 1.50 | Uppercase labels |
| Caption | Open Sans | 14px | 400 | 1.43 | Minor notes |
| Small | Open Sans | 12px | 700 | 1.33 | Uppercase UI tags |

## Spacing & Grid
Base: 8px. Scale includes 2px, 4px, 6px, 8px, 10px, 12px, 13px, 16px, 20px, 25px, 28px, 32px, 36px, 40px, 44px, 60px, 64px, 80px, 128px.

## Border Radius
- sm: 4px — buttons
- md: 8px — cards, modals
- lg: 12px — larger surfaces
- label: 17px — pill labels

## Shadows & Depth
- Large: rgba(0,0,0,0.1) 0px 20px 25px -5px, rgba(0,0,0,0.1) 0px 8px 10px -6px
- Medium: rgba(0,0,0,0.12) 0px 0px 10px 0px
- Small: rgba(0,0,0,0.1) 10px 10px 20px 0px

## Component Specifications

### Primary Button
Default: bg #097eb2, color #ffffff, padding 12px 24px, radius 4px, border none.
Hover: bg #4949e4, color #00425a, border 2px solid #4949e4, shadow rgba(73,73,228,0.4) 0px 0px 20px.
Active: color #097eb2, shadow #dddddd 2px 2px 10px.
Focus: color #097eb2, shadow rgba(0,122,166,0.25) 0px 0px 0px 0.2rem.

### Secondary Button
Default: bg #333333, color #ffffff, padding 12px 16px, radius 0px.
Hover: bg #4949e4, shadow rgba(73,73,228,0.4) 0px 0px 20px.

### Navigation Links
No underline. Color change on hover to bright cyan (#58c6ff).

### Cards
bg #ffffff, radius 8px, shadow small or none, padding 20px–64px depending on context.

## Layout & Responsive Rules
Breakpoints: 576px, 640px, 768px, 992px, 1200px, 1280px, 1440px. Maintain consistent 8px grid.

## Interaction Rules
Transitions: 150ms ease for hover/focus.
Focus: visible outline or shadow for accessibility.

## DO List
- Use only colors from palette
- Maintain 8px spacing grid
- Use Roboto for headings, Open Sans for body
- Keep hover states distinct and high contrast
- Apply correct radius per component type

## DON'T List
- Don't use yellow on white backgrounds
- Don't add underlines to links unless required
- Don't mix multiple blues without state logic
- Don't apply shadows to every component

## Code Examples

```css
.btn-primary {
  background: #097eb2;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 16px;
  border: none;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #4949e4;
  color: #00425a;
  border: 2px solid #4949e4;
  box-shadow: rgba(73,73,228,0.4) 0px 0px 20px;
}
.btn-primary:focus {
  box-shadow: rgba(0,122,166,0.25) 0px 0px 0px 0.2rem;
}
```

```css
.card {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: rgba(0,0,0,0.1) 10px 10px 20px;
}
```

```css
.link {
  color: #097eb2;
  text-decoration: none;
  transition: color 150ms ease;
}
.link:hover { color: #58c6ff; }
```

9. Summary

TL;DR — Bugsnag’s design system is built for functional clarity. Blues define actions, grays define structure, and spacing is locked to an 8px grid. Typography is utilitarian but well-scaled, and hover states are obvious.

Brand Keywords:

• clarity-first
• developer-focused
• utilitarian-modern
• high-contrast
• functional-confidence