Nikkei Brand Design System Deep Dive

1. Brand Overview

Nikkei’s digital presence feels exactly like what you’d expect from Japan’s leading business news provider: disciplined, restrained, and deliberately functional. This is a site for people who care about information density and trust—no fluff, no decorative excess, nothing that distracts from the content. The design language is pragmatic but not cold; there’s just enough polish to signal authority without tipping into vanity.

The visual tone is dominated by deep blues and neutral grays, paired with crisp white surfaces. This isn’t a playful palette—it’s meant to convey stability, seriousness, and reliability. The typography choices reinforce that: system fonts first, with Japanese-specific fallbacks like Hiragino Kaku Gothic ProN and Meiryo. This ensures the site renders predictably across devices, which is smart for a brand with a massive domestic audience and significant global reach.

Nikkei’s layout structure is grid-based with an 8px rhythm, but they’re comfortable breaking it for micro-adjustments (2px and 3.5px increments appear). This tells me they prioritize visual balance over strict adherence to a scale. Breakpoints range from narrow mobile widths (~316px) up to wide desktop (~1376px), suggesting they’re optimizing for a broad device spectrum, from commuter smartphones to office monitors.

The component styling—especially buttons and inputs—leans utilitarian. Borders are thin, radii are small (2px is the workhorse), shadows are used sparingly, and hover states are subtle shifts rather than dramatic animations. When they do use color for interaction, it’s functional: link blue, CTA orange, deep navy for premium actions. Everything feels tuned for clarity.

This is a design system built for trust and speed. It’s not trying to “wow” you—it’s trying to get you reliable information quickly, in a visual language that says: we are serious, we are precise, and we’ve been doing this for a long time. I love that confidence. No trendy gradients. No unnecessary motion. Just pure, uncut utility.

2. Color System

2.1 Primary Colors

The main brand blue is #326691 (rgb(50,102,145)). It’s a muted, mid-tone blue—less saturated than tech brand blues, closer to a steel or corporate navy. This works because it’s professional without being cold, and it pairs well with both white and neutral grays. Competitors like Bloomberg use brighter blues (#0067B1), which feel more energetic but less reserved. Nikkei’s choice signals stability.

Primary text color is #333333 (rgb(51,51,51)), your standard near-black for high readability. Secondary background is #f7f7f7 (rgb(247,247,247)), a very light gray used for surfaces that need subtle separation from pure white.

2.2 Complete Palette

2.3 Color Relationships

The palette is dominated by cool tones (blues, grays) with one strong warm accent (CTA orange). Contrast is solid—white text on #003e70 or #0068bc easily clears WCAG AA for normal text. The #f58700 orange on white passes too, though it’s borderline for small text; they avoid that by using it for buttons with bold weight. Dark text (#333333) on #f7f7f7 is legible.

No explicit dark mode. This palette is tuned for light backgrounds. If they ever do dark mode, they’ll need to rethink the muted blue—it’ll feel weak against dark surfaces.

2.4 Usage Guide

• Works well: Brand blue with white (#326691 + #ffffff), CTA orange with white, deep navy with white.
• Avoid: Orange text on brand blue—low contrast. Light gray (#e8e8e8) text on white—too subtle, likely inaccessible.
• Link styling: They keep link blue consistent (#326691), rarely mixing with other accents.
• Hover: Use slightly altered base colors with opacity tweaks—never wild color shifts.

3. Typography

3.1 Font Families

Primary stack is -apple-system, system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Helvetica, Hiragino Kaku Gothic ProN, Meiryo. This covers Latin and Japanese scripts, relying on system fonts for speed and familiarity.

They also use Hiragino Kaku Gothic ProN with Meiryo fallback for certain captions/links—possibly to ensure Japanese text renders with consistent metrics.

No Google Fonts, no Adobe Fonts, no variable fonts. This is a pragmatic choice: faster loads, fewer licensing headaches.

3.2 Type Scale

3.3 Hierarchy

Headings are bold, with sizes scaling from 27px down to 16px. Body links and captions drop to 14px–12px. The tight line height (1.35) for large headings keeps them compact—good for dense news layouts. Captions often have higher line height (1.65) for readability in small sizes.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px. They use half and quarter steps:

4.2 Layout

Breakpoints:

• 316px, 369px, 427px — narrow mobile
• 751px, 752px — small tablet
• 1015px, 1016px — large tablet / small desktop
• 1232px — desktop
• 1376px — wide desktop

They clearly target fluid layouts, not fixed widths, with small breakpoint jumps to tweak UI.

5. Visual Elements

Border Radius

Small radii dominate:

• 0px 0px 2px 2px — subtle bottom rounding
• 2px — standard for buttons, inputs, links
• 2px 2px 0px 0px — top rounding only
• 100px — pill shapes for icons
• 50% — circular images

Shadows

Two shadows:

• rgba(0,0,0,0.25) 0px 2px 8px 0px — main shadow
• rgba(0,0,0,0.24) 0px 2px 8px 0px — slight variant

Shadows are rare; used for depth on hover or modals.

Borders

Thin, subtle:

• 1px solid light grays for dividers
• 4px solid top borders for section headers
• Occasional colored borders (rgba(50,102,145,0.6)) for emphasis

6. Components

6.1 Buttons

Hamburger Button

• Default: white BG, #333333 text, 2px radius, #e8e8e8 border
• Hover: rgba(0,118,214,0.9) BG
• Active: #0076d6 BG

Search Button

• Default: transparent BG, #333333 text, 2px radius, no border
• Hover: same as hamburger
• Active: same as hamburger

Account CTA (Orange)

• Default: #f58700 BG, white text, 2px radius
• Hover: rgba(0,104,188,0.09) BG
• Active: rgba(50,102,145,0.09) BG
• Focus: #f7f7f7 BG

Account CTA (Deep Navy)

• Default: #003e70 BG, white text, 2px radius
• Same hover/active/focus as orange

Secondary CTA (Bright Blue)

• Default: #0068bc BG, white text, 2px radius
• Hover: rgba(0,118,214,0.9) BG
• Active: #0076d6 BG

6.2 Links

Variants:

• Dark text: #333333 with underline
• Brand blue: #326691 underline
• White text: no underline, bold, underline on hover

6.3 Forms

Search input:

• Default: #f7f7f7 BG, #333333 text, #dadada border, 2px radius
• Focus: same BG, no outline

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-brand-blue: #326691;
  --color-neutral-gray-mid: #757575;
  --color-white: #ffffff;
  --color-light-gray-1: #e8e8e8;
  --color-light-gray-2: #f1f1f1;
  --color-dark-gray: #5c5c5c;
  --color-hover-black: #333333;
  --color-hover-blue: #005fcc;
  --color-hover-orange: #ff9819;
  --color-hover-deep-navy: #004c8a;
  --color-cta-orange: #f58700;
  --color-deep-navy: #003e70;
  --color-bright-blue: #0068bc;
  --color-border-blue-60: rgba(50,102,145,0.6);
  --color-border-gray: #dadada;
  --color-divider-gray: #e8e8e8;
  --color-divider-light-gray: #f1f1f1;

  /* Typography */
  --font-system: -apple-system, system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Helvetica, Hiragino Kaku Gothic ProN, Meiryo;
  --font-japanese: Hiragino Kaku Gothic ProN, Meiryo;

  /* Spacing */
  --space-2: 2px;
  --space-3_5: 3.5px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-48: 48px;

  /* Radius */
  --radius-sm: 2px;
  --radius-pill: 100px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-main: rgba(0, 0, 0, 0.25) 0px 2px 8px 0px;
  --shadow-alt: rgba(0, 0, 0, 0.24) 0px 2px 8px 0px;
}

8. AI Coding Assistant Prompt

# Nikkei Design System Specification

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

## Brand Context
Nikkei’s design is disciplined, minimal, and functional. It prioritizes readability, trust, and speed over decorative flourishes. Colors are cool and neutral with one strong warm accent. Typography uses system fonts for predictable rendering and performance.

## Color Palette
- Brand Blue: #326691 — Links, logotype, outlined boxes
- Neutral Gray Mid: #757575 — Secondary text
- White: #ffffff — Backgrounds, text on dark
- Light Gray 1: #e8e8e8 — Borders, background surfaces
- Light Gray 2: #f1f1f1 — Section backgrounds
- Dark Gray: #5c5c5c — Secondary headings, icons
- Hover Black Overlay: #333333 (6% opacity) — Hover/focus overlay
- Hover Bright Blue: #005fcc — Interactive hover/focus
- Hover Orange: #ff9819 — CTA hover/focus
- Hover Deep Navy: #004c8a — Premium hover/focus
- CTA Orange Base: #f58700 — Primary CTA buttons
- Deep Navy Base: #003e70 — Premium buttons
- Bright Blue Base: #0068bc — Secondary CTAs
- Border Blue 60%: rgba(50,102,145,0.6) — Link borders
- Border Gray: #dadada — Input borders
- Divider Gray: #e8e8e8 — List/item dividers
- Divider Light Gray: #f1f1f1 — Content separation

## Typography
Font Families:
- System stack: -apple-system, system-ui, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Helvetica, Hiragino Kaku Gothic ProN, Meiryo
- Japanese stack: Hiragino Kaku Gothic ProN, Meiryo

Type Scale:
| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1    | 27px | 700    | 1.35        | Page titles |
| H1    | 24px | 700    | 1.50        | Section titles |
| H1    | 22px | 700    | 1.50        | Subsection titles |
| H1    | 18px | 700    | 1.50        | Minor headings |
| Body Link | 16px | 400 | 1.50       | Body text links |
| Small Caption | 14px | 400/700 | 1.65 | Captions |
| Micro Text | 12px | 400/700 | 1.65 | Buttons, micro labels |
| Extra Small | 11px | 700 | 1.50 | Legal notes |
| Tiny | 9px | 700 | 1.50 | Micro UI elements |

## Spacing & Grid
Base: 8px. Scale: 2px, 3.5px, 4px, 6px, 8px, 12px, 14px, 15px, 16px, 20px, 24px, 28px, 32px, 48px.
Use multiples for padding, margins, and gaps. Section spacing: 24px–48px.

## Border Radius
- sm: 2px — buttons, inputs
- pill: 100px — icon containers
- circle: 50% — avatars

## Shadows & Depth
- Main: rgba(0,0,0,0.25) 0px 2px 8px 0px
- Alt: rgba(0,0,0,0.24) 0px 2px 8px 0px
Use sparingly; borders are primary separators.

## Component Specifications

### Primary Button (Bright Blue)
Default: BG #0068bc, text #ffffff, padding 0 12px, radius 2px, border none, font-weight 700, font-size 12px.
Hover: BG rgba(0,118,214,0.9)
Active: BG #0076d6

### Secondary Button (Deep Navy)
Default: BG #003e70, text #ffffff, padding 0 12px, radius 2px
Hover: BG rgba(0,104,188,0.09)
Active: BG rgba(50,102,145,0.09)

### CTA Orange Button
Default: BG #f58700, text #ffffff, padding 0 12px, radius 2px
Hover: BG rgba(0,104,188,0.09)
Active: BG rgba(50,102,145,0.09)

### Hamburger Button
Default: BG #ffffff, text #333333, radius 2px, border 1px solid #e8e8e8
Hover: BG rgba(0,118,214,0.9)
Active: BG #0076d6

### Input Field (Search)
Default: BG #f7f7f7, text #333333, border 1px solid #dadada, radius 2px, padding 0 32px 0 8px
Focus: BG #f7f7f7, outline none

### Links
Dark text: #333333, underline
Blue: #326691, underline
White: #ffffff, bold, underline on hover

## Layout & Responsive Rules
Breakpoints: 316px, 369px, 427px, 751px, 752px, 1015px, 1016px, 1232px, 1376px.
Use fluid containers with max width matching breakpoints.

## Interaction Rules
Transitions: 150ms ease for color changes
Focus: No outline, BG change per component spec

## DO List
- Use only palette colors
- Maintain 8px grid (allow 2px/4px micro spacing)
- Use system stack for all text
- Keep border radius consistent at 2px unless pill/circle
- Use shadows sparingly

## DON'T List
- Avoid custom colors
- Don’t mix multiple border radii in same component
- Don’t use heavy shadows
- Avoid decorative fonts
- Don’t overuse hover color shifts

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #0068bc;
  color: #ffffff;
  padding: 0 12px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 12px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: rgba(0,118,214,0.9); }
.btn-primary:active { background: #0076d6; }
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 2px;
  padding: 24px;
  box-shadow: rgba(0,0,0,0.25) 0px 2px 8px 0px;
}
```

### Input
```css
.input-search {
  background: #f7f7f7;
  color: #333333;
  border: 1px solid #dadada;
  border-radius: 2px;
  padding: 0 32px 0 8px;
}
.input-search:focus { outline: none; }
```

9. Summary

TL;DR — Nikkei’s design system is a masterclass in restrained, functional UI. Cool blues, neutral grays, and one warm orange accent signal trust and authority. Small radii, thin borders, and minimal shadows keep the interface clean. It’s built for speed, readability, and long-term brand consistency.

Brand Keywords — precision-minimalist, authority-driven, cool-neutral, content-first