Rakuten Brand Design System Deep Dive

1. Brand Overview

Rakuten’s Japanese portal is a beast of an e-commerce platform. It’s not shy, it’s not minimalist — it’s function-first, retail-driven design with a commercial heartbeat. The site is built to handle millions of SKUs and countless campaigns. This is not the place for airy whitespace and poetic typography. It’s about clarity, speed, and density of information.

The design language leans heavily on utilitarian Japanese web aesthetics: Meiryo as the core typeface for readability in Japanese scripts, tight line heights, and a grid that’s closer to a newspaper layout than a Silicon Valley landing page. The primary red (#bf0000) is deeply tied to Rakuten’s brand identity — think of it as the visual equivalent of their loyalty points program: it’s everywhere, it’s loud, and it signals “Rakuten” instantly.

What’s interesting is that despite the density, they maintain a disciplined palette and typographic hierarchy. The color system is anchored by strong neutrals (#333333, #666666, white) that keep the red from becoming overwhelming. Blue (#1d54a7) appears as a secondary action or navigational accent, but it’s not fighting for dominance. Shadows are used sparingly — mostly for modals and hover states — which tells me the brand prefers visual separation via borders and background changes over deep, material-style elevation.

The overall vibe: commercial confidence. Rakuten’s design says “we have everything you need, right here, right now.” It’s not trying to seduce you with lifestyle imagery — it’s trying to get you to click “Buy” without distraction. For designers working in this system, the challenge is maintaining visual order in a high-density environment. For developers, it’s about precision: pixel grids, exact spacing, and consistent states across a sprawling component library.

2. Color System

2.1 Primary Colors

The hero here is rgb(191, 0, 0) (#bf0000). This is Rakuten’s signature red. It’s aggressive, saturated, and unmistakable. Psychologically, deep reds convey urgency and power — perfect for CTAs in a retail context. Compared to Amazon’s orange or Yahoo Japan’s lighter red, Rakuten’s red is darker, more serious. It feels less like “flash sale” and more like “trusted retailer.”

2.2 Complete Palette

2.3 Color Relationships

They stick to high-contrast combinations: white text on red, dark gray text on white, blue on light gray. Accessibility-wise, #bf0000 on white passes WCAG AA for large text but is borderline for small text — they mitigate by using bold weights. The neutral grays have enough contrast against white for body copy. No evidence of dark mode — the palette is tuned for a bright retail environment.

2.4 Usage Guide

• Works well: Red + white for primary actions, dark gray + white for body.
• Avoid: Red + blue — too much chromatic conflict.
• Safe combos: Blue accents only in areas with neutral backgrounds.
• Highlight rules: Red reserved for interactive states; don’t use for static decorative elements.

3. Typography

3.1 Font Families

Primary font: Meiryo, with fallbacks to Hiragino Kaku Gothic ProN and MS PGothic. These are standard for Japanese web readability. Secondary appearances of Roboto, Hiragino Sans, and Lucida Grande pop up in certain captions and UI elements — likely legacy components. No Google Fonts, no Adobe Fonts — all system fonts.

3.2 Type Scale

3.3 Hierarchy

The hierarchy is tight — lots of similar sizes, relying on weight and line height to differentiate levels. Bold weights (700) mark importance more than size jumps. This works for dense layouts where large size jumps would break the grid.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. Common values:

4.2 Layout

Breakpoints: 321px (mobile), 512px (tablet), 1412px (desktop). Layout adapts at these widths. No max container width given — site likely stretches full width for product grids.

5. Visual Elements

• Border radius: Mostly small — 4px for inputs and buttons, 8px for dialogs, 25px for labels, 50% for circular images. No exaggerated pills except avatars.
• Shadows: Sparse. Most common: rgba(0,0,0,0.5) 0px 2px 8px for modals, rgba(0,0,0,0.07) inset for subtle depth.
• Borders: Hairline (1px solid) in light gray for dividers, dotted appearances in some labels. Strong use of bottom borders for section headings.

6. Components

6.1 Buttons

Primary button:

• Default: Background #bf0000, text #333333, no padding (odd choice — text sits flush), radius 0px 4px 4px 0px, no shadow.
• Hover: Opacity 0.65, text color changes to #bf0000.
• Focus/Active: Not explicitly defined.
• Font: Meiryo, 12px, weight 400.

This is unusual: hover state changes text color to the brand red, which means on red background it would disappear — likely used with icons or border change.

6.2 Links

Five variants:

• White text, underline on hover with red color.
• Dark gray text, same hover behavior.
• Black text, same hover behavior.
• Blue (#0078b5) text, hover to red.
• Light blue (#0783c2) text, hover to red.

No default underline; underline appears only on hover.

6.3 Forms

Search inputs: Transparent background, medium gray text, no border. On focus: 2px solid black border, filled green (#009500), white text. Checkboxes: same focus behavior.

6.4 Cards

No explicit card component in data, but shadows and borders suggest off-white backgrounds (#f4f4f4), 4px radius, subtle shadows for elevation.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-dark-gray: #333333;
  --color-medium-gray: #666666;
  --color-white: #ffffff;
  --color-red-primary: #bf0000;
  --color-blue-secondary: #1d54a7;
  --color-light-gray: #d0d0d0;
  --color-off-white: #f4f4f4;
  --color-charcoal-gray: #5a5a5a;

  /* Typography - font families */
  --font-meiryo: Meiryo, "Hiragino Kaku Gothic ProN", "MS PGothic";
  --font-roboto: Roboto, sans-serif;
  --font-hiragino-sans: "Hiragino Sans", Meiryo, sans-serif;
  --font-lucida-grande: "Lucida Grande", "Hiragino Kaku Gothic ProN", Meiryo;
  --font-sans: sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-25: 25px;
  --space-29: 29px;
  --space-50: 50px;
  --space-64: 64px;

  /* Border radius */
  --radius-none: 0px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-md-right: 0px 4px 4px 0px;
  --radius-lg: 8px;
  --radius-label: 25px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-modal: rgba(0,0,0,0.5) 0px 2px 8px 0px;
  --shadow-inset-light: rgba(0,0,0,0.07) 1px 0px 0px 0px inset;
  --shadow-card: rgb(225,225,225) 0px 2px 2px 0px;
  --shadow-light: rgba(0,0,0,0.2) 0px 1.25px 6px 0px;
}

8. AI Coding Assistant Prompt

# Rakuten Design System Specification

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

## Brand Context
Rakuten's Japanese portal is dense, commercial, and function-first. The brand uses strong red for primary actions, disciplined neutrals for readability, and small, precise spacing to fit maximum content. Typography is system-based for Japanese script clarity.

## Color Palette
- Dark Gray: #333333 — Primary text, headings, borders
- Medium Gray: #666666 — Secondary text, sublabels
- White: #ffffff — Page background, text on dark surfaces
- Rakuten Red: #bf0000 — Primary buttons, highlights, hover states
- Deep Blue: #1d54a7 — Navigation arrows, coupon buttons
- Light Gray: #d0d0d0 — UI backgrounds, dividers
- Off White: #f4f4f4 — Section backgrounds, cards
- Charcoal Gray: #5a5a5a — Hover/focus states

## Typography
Font families:
- Meiryo, "Hiragino Kaku Gothic ProN", "MS PGothic"
- Roboto, sans-serif
- "Hiragino Sans", Meiryo, sans-serif
- "Lucida Grande", "Hiragino Kaku Gothic ProN", Meiryo

Type scale (selected levels):
| Level        | Size   | Weight | Line Height | Use For          |
|--------------|--------|--------|-------------|------------------|
| H1           | 20px   | 600    | 1.30        | Page titles      |
| Link Large   | 20px   | 600    | 1.30        | Navigation links |
| H1 Alt       | 18px   | 700    | 1.10        | Section headings |
| Body         | 14px   | 400    | 1.30        | Body copy        |
| Button       | 12px   | 400    | 1.10        | Button labels    |
| Caption      | 11px   | 400    | 1.91        | Fine print       |

## Spacing & Grid
Base: 8px grid. Scale: 1px, 3px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 12px, 14px, 15px, 16px, 18px, 20px, 24px, 25px, 29px, 50px, 64px.
Map:
- Button padding: 5px–15px
- Card spacing: 20px
- Section gaps: 24px–64px

## Border Radius
- none: 0px — square edges
- sm: 3px — inputs
- md: 4px — buttons, cards
- md-right: 0px 4px 4px 0px — right-side rounded buttons
- lg: 8px — dialogs
- label: 25px — label backgrounds
- full: 50% — avatars

## Shadows & Depth
- Modal: rgba(0,0,0,0.5) 0px 2px 8px
- Inset light: rgba(0,0,0,0.07) 1px 0px inset
- Card: rgb(225,225,225) 0px 2px 2px
- Light depth: rgba(0,0,0,0.2) 0px 1.25px 6px

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: #bf0000;
  color: #333333;
  padding: 0;
  border-radius: 0px 4px 4px 0px;
  font-family: var(--font-meiryo);
  font-size: 12px;
  font-weight: 400;
  border: none;
}
.btn-primary:hover {
  opacity: 0.65;
  color: #bf0000;
}

Navigation Link

.nav-link {
  color: #333333;
  text-decoration: none;
}
.nav-link:hover {
  color: #bf0000;
  text-decoration: underline;
}

Input Field

.input-search {
  background: transparent;
  color: #666666;
  border: none;
  padding: 0;
}
.input-search:focus {
  border: 2px solid #000000;
  border-color: #009500;
  background-color: #009500;
  color: #ffffff;
}

Layout & Responsive Rules

• Breakpoints: 321px (mobile), 512px (tablet), 1412px (desktop)
• Full-width grids; adjust columns at breakpoints
• Maintain 8px grid spacing in all layouts

Interaction Rules

• Transitions: 150ms ease for hover/focus state changes
• Focus indicators: 2px solid green (#009500) with background fill

DO List

• Use ONLY colors from the palette
• Keep spacing multiples of 8px
• Use Meiryo for all Japanese text
• Reserve red (#bf0000) for interactive elements
• Use hover underline for links

DON'T List

• Don't mix red and blue in the same interactive element
• Don't introduce custom shadows
• Don't round corners beyond defined radius tokens
• Don't use underlines by default on links
• Don't use gradients

Code Examples

Primary Button:

.btn-primary {
  background: #bf0000;
  color: #333333;
  border-radius: 0px 4px 4px 0px;
  font-size: 12px;
}

Card:

.card {
  background: #f4f4f4;
  border-radius: 4px;
  padding: 20px;
  box-shadow: rgb(225,225,225) 0px 2px 2px 0px;
}

Form Input:

.input {
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  padding: 5px;
}
.input:focus {
  border-color: #009500;
  background: #009500;
  color: #fff;
}

---

## 9. Summary

**TL;DR**: Rakuten’s design system is built for dense, retail-heavy interfaces. Red is the brand anchor, Meiryo ensures readability, and small, precise spacing keeps layouts under control. Shadows play a supporting role; borders and color changes carry the weight.

**Brand Keywords**:
- commerce-driven
- red-centric
- grid-disciplined
- system-font
- dense-readable