Independent — Brand Design System Deep Dive

1. Brand Overview

The Independent’s Asia site is a study in restrained news design. They’re not here to entertain with flashy gradients or micro-interactions — the design language is straight, utilitarian, and confident. Headlines dominate. The typography is the voice; color is an accent, not the star. You can tell they’ve built this for fast reading and high editorial clarity.

The vibe is serious but not stiff. There’s a sharp, almost print-like precision in the type — “Indy Serif” and “Indy Sans” carry the brand’s weight and authority. The serif brings that newspaper heritage into the digital space, while the sans is for navigation, labels, and small UI. Weight choices are deliberate — a lot of 700s for headings and links, giving boldness without relying on color.

Colors? Mostly grayscale with one loud red (#eb1426). That red is their flag — it shows up in search buttons, accents, and occasional links. It’s the only “brand color” beyond neutrals, and they guard its use. Everything else lives in monochrome or muted tones: dark charcoals (#353533, #222222), light grays (#d3d3d3), off-whites (#eaf2f2). There’s a teal (#337e81) that sneaks in for some link states, and a pure blue (#005fcc) for hover states — feels almost like a system color rather than brand.

The layout is built on an 8px logic, with some oddball values like 6px or 7px for micro adjustments. Breakpoints cover the usual suspects — 320px small mobile, 768px tablet, 1024px desktop, with some in-between for specific device widths.

This is a design system for a newsroom that values speed and clarity. It’s not trying to be “fun.” It’s designed to scale across hundreds of articles and sections, with typography and spacing doing most of the branding work. Color is minimal; interaction states are subtle. The result: a UI that feels trustworthy, familiar, and functional — exactly the tone you want for news.

2. Color System

2.1 Primary Colors

The declared semantic primary is rgb(34, 34, 34) (#222222). That’s almost-black, used for text and core UI outlines. But in practice, the brand “hero” color is rgb(235, 20, 38) (#eb1426), a sharp red. This red is emotionally loaded — urgency, importance, breaking news. It’s not a warm red; it’s intense, leaning toward a warning tone. Compared to competitors (BBC’s muted red or CNN’s darker red), Independent’s is brighter, more aggressive — closer to fire engine than maroon.

This works because they use it sparingly. In a sea of grayscale, that red pops hard. It’s not for buttons everywhere; it’s for highlights and critical UI. Overuse would dilute the effect.

2.2 Complete Palette

Here’s the full extracted palette:

2.3 Color Relationships

The main contrast pair is #222222 text on #ffffff background — perfect for WCAG AAA. The red (#eb1426) on white also passes easily. Where they dip into teal (#337e81) for links, contrast is still strong against white. Hover states often use #005fcc (blue) — high contrast but not brand-driven. This creates a slightly odd mix: blue hover on red link is a brand departure, but it’s a common pattern for web conventions.

Dark mode? Not implemented here. The palette is tuned for light backgrounds. The off-white #eaf2f2 is as far as they go toward “softening” the white.

2.4 Usage Guide

• Primary text (#222222) is default for all copy.
• #eb1426 red is only for brand-critical interactive elements — don't paint whole sections with it.
• #d3d3d3 is your divider — 1px solid borders between content blocks.
• Teal (#337e81) is used in specific link contexts — don’t mix with red links in the same area.
• Hover/focus blues (#005fcc) are standard web cues — keep them for interactive clarity.
• Avoid mixing red and blue in the same element — feels off-brand.
• If you need a background alt, go with #eaf2f2 — it’s subtle and keeps the page airy.

3. Typography

3.1 Font Families

Two custom faces dominate: Indy Serif and Indy Sans. Both have defined fallbacks (“Indy Serif Fallback” / “Indy Sans Fallback”) — likely system serif/sans stacks. Arial shows up in some headings/captions, probably as a legacy or system fallback.

No Google Fonts, no Adobe Fonts — these are self-hosted.

3.2 Type Scale

Complete extracted styles:

3.3 Hierarchy

Headings are bold and tight — line heights around 1.13–1.22 keep headlines compact. Uppercase is used sparingly for navigation or labels (Indy Sans CAPS at 14px, 12px). Body/link text is mostly 16px for legibility. Captions drop to 12px or 10px, often uppercase — clear separation from body.

The type scale is dense — they don’t jump in huge increments. This means hierarchy is more about weight and font family than size alone.

4. Spacing & Layout

4.1 Spacing Scale

Base system: 8px grid, but with 4px half-step. Common values:

4.2 Layout

Breakpoints:

• 320px: small mobile
• 375px: iPhone portrait
• 480px: small tablet
• 768px: tablet
• 1024px: base desktop
• 1250px: wide desktop

Likely a fluid grid scaling between these.

5. Visual Elements

Border Radius

Values:

• 0px — default for text inputs
• 2px — rare, low use
• 4px — small buttons, inputs
• 6px — buttons
• 50% — avatars, social icons

Corners are mostly sharp — radius is reserved for buttons or avatars.

Shadows

Mostly light, subtle:

• rgba(0,0,0,0.25) 0px 2px 2px — common
• Occasional heavier: rgba(0,0,0,0.5) 0px 1px 3px

Shadows are minimal — depth comes from borders.

Borders

1px solid #d3d3d3 is the workhorse — dividers everywhere. Some black (#222222) borders for frames.

6. Components

6.1 Buttons

Variant 1 — Light button

• Default: bg #fbfbfb, text #000000, padding 8px 0px, radius 6px, border 1px solid #d3d3d3
• Hover: bg #333333
• Focus: bg #333333

Variant 2 — Red search button

• Default: bg #eb1426, text #222222, padding 0px, radius 0px, border none
• Hover: bg #333333
• Focus: bg #333333

6.2 Links

Five styles:

• White (#ffffff) text, bold — hover to blue (#3366cc)
• Dark charcoal (#353533), regular — hover to blue
• Red (#eb1426), bold — hover to blue
• Primary text (#222222), regular — hover to blue
• Teal (#337e81), bold — hover to blue

No underlines.

6.3 Forms

Text inputs: bg white, text #222222, no border, no radius, padding 0px. Focus can change text color to transparent (odd — likely hiding for icon overlay).

7. Design Tokens — CSS Custom Properties

:root {
  /* Colors */
  --color-primary-text: #222222;
  --color-white: #ffffff;
  --color-brand-red: #eb1426;
  --color-light-gray: #d3d3d3;
  --color-teal: #337e81;
  --color-dark-charcoal: #353533;
  --color-off-white: #eaf2f2;
  --color-system-blue: #005fcc;
  --color-slate: #37686b;
  --color-neutral-gray: #dfdfdf;
  --color-dark-charcoal-84: #353533;
  --color-deep-red: #ac2a2c;
  --color-soft-gray: #d6d6d6;
  --color-mid-gray: #5e5e5c;
  --color-warm-gray: #555553;
  --color-dark-warm-gray: #4e4e4c;
  --color-black: #000000;

  /* Typography */
  --font-indy-serif: "Indy Serif", "Indy Serif Fallback";
  --font-indy-sans: "Indy Sans", "Indy Sans Fallback";
  --font-indy-sans-caps: "Indy Sans CAPS", "Indy Sans CAPS Fallback";
  --font-arial: Arial, sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-4: 4px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-sm: rgba(0,0,0,0.25) 0px 2px 2px 0px;
  --shadow-md: rgba(0,0,0,0.5) 0px 1px 3px 0px;

  /* Borders */
  --border-default: 1px solid #d3d3d3;
}

8. AI Coding Assistant Prompt

# Independent Design System Specification

You are an Independent design expert. Build UIs matching their visual language exactly.

## Brand Context
Independent’s design is editorial-first: bold headlines, restrained color, authority through typography. Color accents are rare and deliberate. Layout adheres to an 8px grid with occasional micro adjustments.

## Color Palette
- Primary Text: #222222 — body text, core UI outlines
- White: #ffffff — page background, text on dark
- Brand Red: #eb1426 — search button, critical highlights
- Light Gray: #d3d3d3 — dividers, borders
- Teal: #337e81 — section links
- Dark Charcoal: #353533 — secondary text
- Off-white: #eaf2f2 — alt backgrounds
- System Blue: #005fcc — hover/focus states
- Slate: #37686b — alt hover
- Neutral Gray: #dfdfdf — hover background
- Deep Red: #ac2a2c — danger hover
- Soft Gray: #d6d6d6 — subtle background
- Mid Gray: #5e5e5c — hover text alt
- Warm Gray: #555553 — hover text alt
- Dark Warm Gray: #4e4e4c — hover text alt
- Black: #000000 — icons, text in certain states

## Typography
Fonts:
- Headings: "Indy Serif", "Indy Serif Fallback"
- UI & Navigation: "Indy Sans", "Indy Sans Fallback"
- Uppercase labels: "Indy Sans CAPS", "Indy Sans CAPS Fallback"
- System fallback: Arial

Sizes:
| Level | Font | Size | Weight | Line Height | Use For |
| H1 | Indy Serif | 32px | 700 | 1.13 | Page titles |
| H2 | Indy Serif | 30px | 700 | 1.13 | Section titles |
| H3 | Indy Sans | 28px | 700 | 1.14 | Subheads |
| Body | Indy Serif | 16px | 400 | 1.20 | Main copy |
| Caption | Indy Sans | 12px | 700 | 1.17 | Labels |
| Small Label | Indy Sans | 10px | 400 | 1.20 | Meta info |

## Spacing & Grid
Base: 8px grid with half-step 4px
Scale: 1px, 4px, 6px, 7px, 8px, 10px, 12px, 16px, 20px, 24px, 32px
Component mapping:
- Button padding: 8px vertical
- Card padding: 16px
- Section gaps: 24px–32px

## Border Radius
- none: 0px — inputs, text fields
- sm: 2px — small containers
- md: 4px — inputs/buttons
- lg: 6px — buttons
- full: 50% — avatars, social icons

## Shadows & Depth
- Small: rgba(0,0,0,0.25) 0px 2px 2px
- Medium: rgba(0,0,0,0.5) 0px 1px 3px

## Components

### Primary Button
Default:
- background: #fbfbfb
- color: #000000
- padding: 8px 0px
- radius: 6px
- border: 1px solid #d3d3d3
Hover/Focus: background #333333
Font: Indy Sans 14px, weight 700

### Secondary Button (Search)
Default:
- background: #eb1426
- color: #222222
- padding: 0px
- radius: 0px
- border: none
Hover/Focus: background #333333
Font: Indy Sans 13px, weight 700

### Navigation Links
Default: color varies (#ffffff, #353533, #eb1426, #222222, #337e81), no underline
Hover: color #3366cc

### Input Fields
Default: background #ffffff, color #222222, no border, no radius
Focus: color transparent (for icon overlay)

## Layout & Responsive Rules
Breakpoints:
- 320px — mobile
- 375px — small mobile
- 480px — small tablet
- 768px — tablet
- 1024px — desktop
- 1250px — wide desktop

Max content width: ~1250px
Page padding: 16px mobile, 32px desktop
Grid gap: 16px

## Interaction Rules
- Transition: 150ms ease for hover/focus state changes
- Focus: background change, no outlines unless system default
- Loading: no animations, static states

## DO List
- Use ONLY colors from the palette
- Maintain 8px grid (allow 4px half-step)
- Use Indy Serif for headings, Indy Sans for UI
- Keep uppercase limited to labels/navigation
- Use 1px #d3d3d3 borders for dividers
- Reserve red for critical actions/highlights

## DON'T List
- Don't use shadows beyond specified values
- Don't mix rounded and sharp corners in the same component
- Don't invent new hover colors
- Don't underline links
- Don't use red for body text

## Code Examples

### Button
```css
.btn-primary {
  background: #fbfbfb;
  color: #000;
  padding: 8px 0;
  border-radius: 6px;
  border: 1px solid #d3d3d3;
  font-family: var(--font-indy-sans);
  font-weight: 700;
  font-size: 14px;
  transition: background 150ms ease;
}
.btn-primary:hover,
.btn-primary:focus { background: #333333; }
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 4px;
  padding: 16px;
  border: 1px solid #d3d3d3;
}
```

### Input
```css
.input-text {
  background: #ffffff;
  color: #222222;
  border: none;
  padding: 0;
  border-radius: 0;
  font-family: var(--font-indy-sans);
}
.input-text:focus { color: transparent; }
```

9. Summary

TL;DR — Independent’s Asia site is built for clarity: bold serif headlines, minimal color, tight spacing. Red is the only real brand accent, used sparingly. The grid is 8px-based with micro adjustments. Borders and typography carry the structure; shadows are minimal.

Brand Keywords:

• editorial-authority
• restrained-color
• typography-driven
• grid-consistent
• functional-minimalism