Crashlytics Brand Design System Deep Dive

1. Brand Overview

Crashlytics sits under the Firebase umbrella. That’s important — you’re not dealing with an isolated brand here, you’re dealing with Google’s developer-facing design language. Crashlytics is a product for developers who want real-time crash reporting. The audience is technical, impatient, and allergic to fluff.

The vibe? Clean, utilitarian, but with a few moments of color to signal interactivity. Black and white dominate, with strategic injections of blue for links and orange for warnings. It’s not playful — this is about trust and precision. The design philosophy borrows heavily from Google’s Material guidelines, but not slavishly. They’ve tuned it for a product site: less card clutter, more direct vertical rhythm, and typography that reads well in dense tech content.

The site is structured for clarity. Breakpoints are numerous (over 20 distinct widths) — that tells you they care about pixel-perfect responsiveness across a crazy range of devices. Spacing is locked to an 8px grid, but they allow 4px and even 1px adjustments when needed.

Buttons are restrained. You’ll see transparent backgrounds, thin borders, and shadows triggered only on hover or focus. Active states drop opacity instead of changing color — subtle but functional. Links avoid underlines, relying on color shifts instead. That’s a gamble on recognition, but with a developer audience, it works.

Overall: this is a tech-first brand expression. Minimal ornamentation, maximal clarity. The visual language says “we’re part of Firebase, we’re part of Google, and we won’t waste your time.”

2. Color System

2.1 Primary Colors

Primary semantic color: rgb(0, 0, 0) (#000000). Yes, black. That’s unusual — most brands push a vibrant color for “primary.” Here, primary means “default text and core UI frames.”

The actual “brand” color in practice is blue — specifically rgb(30, 136, 229) (#1e88e5). This is the link color and nav highlight. Blue is a safe choice: trust, stability, clarity. It’s lighter than Google’s standard #1a73e8, giving slightly more vibrance.

Competitor comparison: Sentry uses purple, Bugsnag uses teal. Crashlytics going with blue aligns with Firebase’s branding and Google’s ecosystem — you immediately know it’s part of the family.

2.2 Complete Palette

Yes, that’s a lot. This isn’t a “3-color brand palette” — it’s a full Material token set.

2.3 Color Relationships

Contrast: Primary text (#000000) on white (#ffffff) is perfect — 21:1 ratio. Blue (#1e88e5) on white is ~4.5:1 — just hits WCAG AA for normal text. Orange hover accents (#e88000) on white are ~3:1 — fails AA for body text but acceptable for non-text UI.

Dark mode? Not explicitly here, but inverse surfaces (#303030) and inverse text (#f2f2f2) suggest they have a dark variant in other parts of Firebase.

2.4 Usage Guide

• Use #1e88e5 for links, #0b57d0 for secondary actions.
• Keep warnings in the #ff9d0a / #bf360c family.
• Avoid mixing multiple bright accents in the same area — orange and blue together can clash.
• Shadows rely on rgba(60,64,67,…) tones — don’t introduce heavier blacks.

3. Typography

3.1 Font Families

• Primary: Google Sans — from Google Fonts.
• Icons: Material Icons, Material Symbols Outlined — icon fonts.
• Code/Text: JetBrains Mono — for uppercase headings or tech labels.
• Fallbacks: Noto Sans family for multi-language coverage.

Google Sans is clean, geometric, optimized for UI legibility. JetBrains Mono is a developer-friendly monospaced font — nice touch for code snippets.

3.2 Type Scale

3.3 Hierarchy

They’re not shy with big type — 65px H1s for hero areas. But they also scale down aggressively for dense content (13px captions). Line heights are tight (1.15–1.50) — keeps things feeling compact. Weight shifts are the main hierarchy signal: 700 for strong headings, 400 for body, 500 for UI elements.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px. They also use 4px and 1px for micro-adjustments.

4.2 Layout

Breakpoints: from 321px up to 3200px. That’s granular. They don’t just do mobile/tablet/desktop — they fine-tune across dozens of widths.

5. Visual Elements

Border Radius

They mix sharp and rounded — 0px top-left corners with rounded right corners in menus. Pill buttons go up to 100px radius.

Shadows

• rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px, rgba(155, 161, 166, 0.5) 0px 4px 6px -4px inset
• rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px
• rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px

Shadows are subtle, low-offset, and mostly on hover.

Borders

Thin 1px borders with light grays (#dadce0, #c4c7c5) for dividers. Highlight borders use #ff9100 or #e88000.

6. Components

6.1 Buttons

Skip Link Button

• Default: bg transparent, color transparent, padding 0 24px, radius 4px, border 1px solid rgba(4,30,73,0.2)
• Hover: box-shadow with rgba(60,64,67) tones, border removed, color var(--firebase-link-color), transform translateX(-50%)
• Active: bg transparent, opacity 0.85
• Focus: same shadow as hover, transform scale(1.2)

Font: 14px, weight 500.

Search Field Button

• Default: bg #f1f3f4, color rgba(0,0,0,0.6), padding 8px 8px 8px 40px, radius 0, border 0.

6.2 Links

Four styles:

1. Transparent default, hover to #dd2c00.
2. Blue #1e88e5 default, no hover change.
3. Dark blue #0b57d0 default, hover to #dd2c00.
4. White default, hover to black.

No underlines in any state.

6.3 Forms

Text input: bg #f1f3f4, color rgba(0,0,0,0.6), border 0, padding 8px 8px 8px 40px, radius 0.

6.4 Cards

No explicit card data here, but surfaces use #f0f4f9 or white, padding from spacing scale, optional subtle shadow.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #000000;
  --color-link: #1e88e5;
  --color-white: #ffffff;
  --color-gray600: #5f6368;
  --color-link-secondary: #0b57d0;
  --color-gray200: #dadce0;
  --color-orange92: #ca7000;
  --color-orange: #e88000;
  --color-orange68: #ff9100;
  --color-black60: rgba(0,0,0,0.6);
  /* … include all palette values above */

  /* Typography */
  --font-primary: "Google Sans", "Noto Sans", sans-serif;
  --font-icons: "Material Icons";
  --font-mono: "JetBrains Mono", monospace;

  /* Spacing */
  --space-1: 1px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-60: 60px;
  --space-64: 64px;
  --space-80: 80px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 20px;
  --radius-xl: 40px;
  --radius-pill: 100px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-hover: rgba(60,64,67,0.3) 0px 1px 2px 0px, rgba(60,64,67,0.15) 0px 2px 6px 2px;
}

8. AI Coding Assistant Prompt

# Crashlytics Design System Specification

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

## Brand Context
Crashlytics is part of Firebase, under Google’s developer product line. The design is minimal, functional, with restrained color use and tight typography. Audience is developers — clarity and speed matter more than decoration.

## Color Palette
- Primary Black: #000000 — Text, icons, header bars
- Link Blue: #1e88e5 — Nav titles, actionable links
- White: #ffffff — Backgrounds
- Gray 600: #5f6368 — Secondary text
- Secondary Link: #0b57d0 — Header links, secondary actions
- Gray 200: #dadce0 — Dividers
- Orange 92%: #ca7000 — Hover/focus accents
- Orange: #e88000 — Hover/focus accents
- Orange 68%: #ff9100 — Highlight transitions
- Black 60%: rgba(0,0,0,0.6) — Disabled text
- GM3 Surface High: #e9eef6 — High container surfaces
- GM3 Primary Container: #d3e3fd — Primary container backgrounds
- [continue listing all extracted colors with usage]

## Typography
- Headings: "Google Sans", fallback Noto Sans
- Icons: "Material Icons"
- Code/UI labels: "JetBrains Mono"
| Level | Size | Weight | Line Height | Use For |
| H1 | 65px | 700 | 1.15 | Hero titles |
| H1 | 44px | 500 | 1.23 | Section titles |
| H1 | 34-40px | 700 | 1.29 | Major headings |
| Body | 16px | 400-500 | 1.50 | Paragraphs |
| Caption | 14px | 400-700 | 1.29 | Labels |
| Small | 13px | 400-700 | 1.38 | Meta text |
| Micro | 9px | 500 | 1.78 | Uppercase micro labels |

## Spacing & Grid
Base: 8px grid. Scale includes 1px, 4px, 6px, 8px, 10px, 12px, 16px, 18px, 20px, 24px, 32px, 40px, 60px, 64px, 80px.

## Border Radius
- sm: 4px — inputs, small buttons
- md: 8px — small UI elements
- lg: 20px — images
- xl: 40px — large containers
- pill: 100px — pill buttons
- full: 50% — avatars, circular buttons

## Shadows & Depth
- Hover shadow: rgba(60,64,67,0.3) 0px 1px 2px, rgba(60,64,67,0.15) 0px 2px 6px 2px
- Inset shadow for pressed states

## Component Specifications

### Primary Button
Default:
```css
background: transparent;
color: transparent;
padding: 0 24px;
border-radius: 4px;
border: 1px solid rgba(4,30,73,0.2);
font-weight: 500;
font-size: 14px;
```
Hover:
```css
box-shadow: rgba(60,64,67,0.15) 0px 6px 10px, rgba(60,64,67,0.3) 0px 2px 3px;
color: var(--firebase-link-color);
transform: translateX(-50%);
```
Focus: same as hover plus `transform: scale(1.2)`.
Active: `opacity: 0.85`.

### Secondary Button
BG: #f1f3f4, color: rgba(0,0,0,0.6), padding: 8px 8px 8px 40px, border-radius: 0, no border.

### Navigation Links
No underline. Color changes on hover (#dd2c00 for some variants).

### Input Fields
BG: #f1f3f4, color rgba(0,0,0,0.6), padding 8px 8px 8px 40px, no border, radius 0.

### Cards
BG: #f0f4f9 or #ffffff, padding from spacing scale, optional subtle shadow.

## Layout & Responsive Rules
- Breakpoints: 321px to 3200px
- Maintain proportional scaling at each breakpoint
- Section padding: multiples of 8px

## Interaction Rules
- Hover shadows only on interactive components
- Focus states enlarge slightly
- Active states reduce opacity

## DO List
- Use ONLY colors from palette
- Maintain 8px grid
- Use Google Sans for headings, JetBrains Mono for code
- Keep hover shadows subtle
- Use pill radius only for buttons

## DON'T List
- Don’t underline links
- Don’t use unapproved colors
- Don’t mix heavy shadows with light borders
- Don’t stretch icons

## Code Examples

Primary Button:
```css
.btn-primary {
  background: transparent;
  color: var(--color-link);
  padding: 0 24px;
  border-radius: 4px;
  border: 1px solid rgba(4,30,73,0.2);
  font-weight: 500;
  font-size: 14px;
}
.btn-primary:hover {
  box-shadow: rgba(60,64,67,0.15) 0px 6px 10px, rgba(60,64,67,0.3) 0px 2px 3px;
}
```

Card:
```css
.card {
  background: #f0f4f9;
  border-radius: 8px;
  padding: 16px;
  box-shadow: rgba(60,64,67,0.15) 0px 2px 6px;
}
```

Input:
```css
.input {
  background: #f1f3f4;
  border: none;
  padding: 8px 8px 8px 40px;
  border-radius: 0;
}
```

9. Summary

TL;DR — Crashlytics uses a stripped-down, Material-inspired design language with developer-first priorities: tight typography, restrained color, subtle shadows. Everything sits on an 8px grid, with pixel-level tweaks for precision.

Brand Keywords: tech-minimalist, google-material, developer-functional, clarity-first, restrained-color