Business Insider — Design System Deep Dive

1. Brand Overview

Business Insider’s digital presence is designed for speed, clarity, and authority. Their audience is busy, high-information readers: professionals, investors, business decision-makers. The brand’s design system mirrors that—lean typography, high-contrast colors, minimal embellishment.

There’s no fluff. No ornamental flourishes. The design is functional first, aesthetic second. This is a newsroom UI that’s been pared down to the essentials. You can see it in the way color is deployed sparingly—black for authority, blue for action, red for urgency. Even the typography is consistent to the point of being predictable: one family, Garnett, across headings, links, buttons, captions.

The vibe is confident modernism. They’re not chasing trends. This isn’t a “look at us” design—it’s a “read this now” design. That means the system leans heavily on crisp text rendering, tight vertical rhythm, and ruthless restraint in spacing.

Navigation and CTAs stand out with bold blues. Headlines and body text sit in near-black (#0a0a0a) for maximum legibility. Alerts or attention-grabbing elements use red (#e51716) sparingly, which makes them pop even more when they appear.

The UI's underlying logic is clearly built on an 8px spacing grid. Breakpoints span from small mobile widths up to ultra-wide desktops (1950px), which suggests they want the site to feel equally native on a phone in transit and on a 4K monitor in an office.

Business Insider’s design philosophy here: clarity beats decoration, hierarchy is everything, and brand colors are tools, not wallpaper.

2. Color System

2.1 Primary Colors

The hero color is blue—specifically #002aff—used for CTAs, primary buttons, and active states. It’s a saturated, deep blue that feels corporate but still energetic. Blue here signals “click me” or “this is the action.” It’s paired with a darker variant #0022cc for hover states—subtle shift, but enough to signal interactivity.

Black (#0a0a0a) is the anchor. It’s everywhere—masthead, logo, text. Against white or very light backgrounds, it’s absolute clarity. This is not a washed-out gray; it’s almost pure black.

Red (#e51716) is an accent color, likely for alerts, urgent headlines, or breaking news. It’s bright enough to catch the eye without clashing against the blue.

2.2 Complete Palette

2.3 Color Relationships

This palette is high-contrast by design. #0a0a0a on #fafafa is 19:1 contrast—well above WCAG AAA. Blue (#002aff) on white is ~8.6:1—also AAA. Red (#e51716) on white is ~4.8:1—AA level, good enough for alerts.

They’re not running a dark mode here—everything is optimized for light backgrounds.

2.4 Usage Guide

• Do pair #0a0a0a text with light backgrounds (#fafafa, white).
• Do reserve #002aff for interactive elements—don’t dilute it by using it in decorative contexts.
• Avoid pairing red (#e51716) with blue—it’s jarring and fights for attention.
• Use gray tones (#71717a, #edeef1) for secondary content and dividers to keep hierarchy clear.
• Hover colors (#0022cc, #505057, #31313b) should only appear in interactive contexts—don’t use them as static colors.

3. Typography

3.1 Font Families

Everything runs through Garnett. No Google Fonts, no Adobe kit—likely custom licensing. Fallbacks are Helvetica, Arial in some contexts, or system stacks (-apple-system, BlinkMacSystemFont, Segoe UI...) for UI elements.

This is smart—single brand typeface for recognition, system fallbacks for performance.

3.2 Type Scale

3.3 Hierarchy

Headings jump from 28px down to 24px and 20px—tight scale, keeps everything feeling compact. Captions at 14px and 12px are bold for visibility. The 10px uppercase captions are used for labels—small but unmistakable.

This hierarchy is built for scanning. Big headline, bold section header, tight meta info.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. Values:

4.2 Layout

Breakpoints:

• Mobile: <600px
• Tablet: 600px–1128px
• Desktop: >1128px up to 1950px

This is a responsive-first setup—small mobile breakpoint, with lots of intermediate widths (630px, 728px, 800px etc.) for fine tuning.

5. Visual Elements

Border Radius

Values range from sharp 1px for subtle rounding, up to 50% for circular elements.

Shadows

Only one shadow found:

rgba(9, 30, 66, 0.08) 0px 0px 0px 1px, rgba(9, 30, 66, 0.08) 0px 2px 10px 0px, rgba(9, 30, 66, 0.31) 0px 0px 20px -4px

Used sparingly—this is mostly flat design.

Borders

Thin hairlines (1px solid) in neutral colors. Also bottom borders (0px 0px 1px solid) for sections.

6. Components

6.1 Buttons

Menu Button
Default:

• BG: #0a0a0a
• Text: white
• Radius: 40px
• Font: 20px, weight 400

Hover:

• BG: #0022cc
• Text: #002aff

Pulse Button
Default:

• BG: rgb(216, 222, 255)
• Text: #002aff
• Padding: 4px 12px 4px 4px
• Radius: 24px
• Font: 12px, weight 600

Hover:

• BG: #0022cc
• Text: #002aff

Newsletter Button
Default:

• BG: rgb(229, 233, 255)
• Text: #0a0a0a
• Radius: 0px
• Font: 16px, weight 400

Hover:

• BG: #002aff
• Text: #31313b

6.2 Links

Multiple styles—primary black, blue, hover to muted gray.

Example:
Default: #0a0a0a text, no underline.
Hover: #505057 text.

6.3 Forms

Text input:
Default: white bg, 1px solid #76767a border, radius 4px, padding 0 12px.
Focus: 2px solid #002aff border, inset shadow with #0a0a0a.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-black: #0a0a0a;
  --color-blue-primary: #002aff;
  --color-blue-hover: #0022cc;
  --color-red-accent: #e51716;
  --color-white-off: #fafafa;
  --color-gray-light: #edeef1;
  --color-gray-medium: #71717a;
  --color-gray-hover: #505057;
  --color-gray-dark-hover: #31313b;

  /* Typography */
  --font-garnett: "Garnett", Helvetica, Arial, sans-serif;
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-75: 75px;

  /* Radius */
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-12: 12px;
  --radius-24: 24px;
  --radius-32: 32px;
  --radius-40: 40px;
  --radius-full: 50%;

  /* Shadow */
  --shadow-default: rgba(9, 30, 66, 0.08) 0 0 0 1px,
                     rgba(9, 30, 66, 0.08) 0 2px 10px 0,
                     rgba(9, 30, 66, 0.31) 0 0 20px -4px;
}

8. AI Coding Assistant Prompt

# Business Insider Design System Specification

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

## Brand Context
Business Insider’s design is minimal, authoritative, and built for information clarity. The palette is high-contrast, typography is consistent, and spacing is strict on an 8px grid. Colors are used sparingly for interaction and alerts.

## Color Palette
- Near Black: #0a0a0a — Primary text, masthead, logo
- Primary Blue: #002aff — CTAs, buttons, interactive elements
- Hover Blue: #0022cc — Hover/focus on buttons and links
- Accent Red: #e51716 — Alerts, urgent labels
- Off White: #fafafa — Backgrounds
- Light Gray: #edeef1 — Section dividers, neutral areas
- Medium Gray: #71717a — Secondary text
- Hover Gray: #505057 — Link hover
- Hover Dark Gray: #31313b — Alternate hover state

## Typography
Font Families:
- Garnett, Helvetica, Arial
- System stack for UI elements

Type Scale:
| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 28px | 700 | 1.35 | Page titles |
| H2 | 24px | 500 | 1.40 | Section headings |
| Link Large | 24px | 500 | 1.40 | Prominent links |
| Button | 20px | 400 | 0.80 | Menu buttons |
| H3 | 20px | 700 | 1.35 | Smaller headings |
| Body | 18px | 500 | 1.40 | Article text |
| Caption | 14px | 600 | 1.50 | Meta info |
| Label | 10px | 600 | 1.30 | Uppercase labels |

## Spacing & Grid
Base: 8px grid
Scale: 1px, 4px, 6px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 75px
Use multiples for padding, margins, and gaps.

## Border Radius
- sm: 2px — links, lists
- md: 4px — inputs
- lg: 12px — images
- pill: 24px — buttons
- full: 50% — avatars

## Shadows & Depth
Use only: rgba(9, 30, 66, 0.08) 0 0 0 1px, rgba(9, 30, 66, 0.08) 0 2px 10px 0, rgba(9, 30, 66, 0.31) 0 0 20px -4px

## Component Specifications

### Primary Button
Default:
- background: #0a0a0a
- color: #ffffff
- padding: 0
- border-radius: 40px
- font-size: 20px
- font-weight: 400
Hover:
- background: #0022cc
- color: #002aff
Focus:
- outline: 0px

### Pulse Button
Default:
- background: rgb(216, 222, 255)
- color: #002aff
- padding: 4px 12px 4px 4px
- radius: 24px
- font-size: 12px
- font-weight: 600
Hover:
- background: #0022cc
- color: #002aff

### Input Fields
Default:
- background: #ffffff
- color: #000000
- border: 1px solid #76767a
- radius: 4px
- padding: 0 12px
Focus:
- border: 2px solid #002aff
- box-shadow: #0a0a0a inset 0 0 0 0.5px

## Layout & Responsive Rules
Breakpoints:
- Mobile: <600px
- Tablet: 600–1128px
- Desktop: >1128px

## Interaction Rules
- Transitions: 150ms ease for background and color changes
- Focus indicators: visible outlines in brand blue
- Hover states always change color; no underline

## DO List
- Use ONLY colors from palette
- Keep spacing in 8px multiples
- Use Garnett for headings, system stack for UI
- Reserve blue for interactive elements
- Keep buttons pill-shaped when intended

## DON'T List
- Don't invent new colors
- Don't mix sharp and rounded corners in same component
- Don't use shadows beyond the defined one
- Don't apply hover colors to static text

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #0a0a0a;
  color: #fff;
  padding: 0;
  border-radius: 40px;
  font-size: 20px;
  font-weight: 400;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #0022cc;
  color: #002aff;
}
.btn-primary:focus {
  outline: 0;
}
```

### Card
```css
.card {
  background: #fafafa;
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow-default);
}
```

### Input
```css
.input {
  background: #fff;
  color: #000;
  border: 1px solid #76767a;
  border-radius: 4px;
  padding: 0 12px;
}
.input:focus {
  border: 2px solid #002aff;
  box-shadow: inset 0 0 0 0.5px #0a0a0a;
  outline: none;
}
```

9. Summary

TL;DR
Business Insider’s design system is a masterclass in restraint. Black for text, blue for action, red for urgency. One typeface. Strict 8px grid. Almost no shadows. It’s fast, clear, and built for readers who don’t have time to guess what’s clickable.

Brand Keywords

• clarity-first
• corporate-modern
• news-authoritative
• high-contrast
• grid-disciplined