Rakuten Design System

# Rakuten Design System — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Rakuten. "Rakuten Design System" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Rakuten Design System
**Owner:** Rakuten
**Official documentation:** https://www.rakuten.design/
**Visual character:** Ecosystem crimson: one saturated brand red across dozens of services, bilingual JP/EN type stacks, and points-program energy.

---

## Summary

Design system for Rakuten's e-commerce platforms.

_Confidence: low. This system publishes little token detail — values below are a conservative, partial reading. Public token documentation is limited; values are a conservative reading._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Rakuten Crimson | `#bf0000` | `--rakuten-red` | Primary brand and actions |
| Text | `#333333` | `--rakuten-text` | Primary text |
| Secondary Text | `#686868` | `--rakuten-text-secondary` | Secondary text |
| White | `#ffffff` | `--rakuten-white` | Surfaces |
| Light Surface | `#f7f7f7` | `--rakuten-surface` | Subtle background |
| Border | `#d1d1d1` | `--rakuten-border` | Borders |
| Link Blue | `#0f6cc9` | `--rakuten-link` | Links |

## Typography

- **Body:** Rakuten Sans / system — weights 400, 700 — `'Rakuten Sans', 'Hiragino Sans', 'Noto Sans JP', Meiryo, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| h1 | `32px` | `42px` |
| h2 | `24px` | `32px` |
| body | `14px` | `22px` |

## Spacing

Base unit: `8px`

Scale: `8px` · `16px` · `24px` · `32px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `4px` |

## Quick start (CSS)

```css
/* Rakuten Design System — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://www.rakuten.design/ */

:root {
  /* Color */
  --rakuten-red: #bf0000; /* Primary brand and actions */
  --rakuten-text: #333333; /* Primary text */
  --rakuten-text-secondary: #686868; /* Secondary text */
  --rakuten-white: #ffffff; /* Surfaces */
  --rakuten-surface: #f7f7f7; /* Subtle background */
  --rakuten-border: #d1d1d1; /* Borders */
  --rakuten-link: #0f6cc9; /* Links */

  /* Typography */
  --font-body: 'Rakuten Sans', 'Hiragino Sans', 'Noto Sans JP', Meiryo, sans-serif;

  /* Type scale */
  --text-h1: 32px /* line-height 42px */;
  --text-h2: 24px /* line-height 32px */;
  --text-body: 14px /* line-height 22px */;

  /* Spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;

  /* Radius */
  --radius-default: 4px;
}
```

## Engineering profile

- **Source model:** Hybrid

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Rakuten Design System by Rakuten — Design system for Rakuten's e-commerce platforms. Character: Ecosystem crimson: one saturated brand red across dozens of services, bilingual JP/EN type stacks, and points-program energy. Use a primary colour near #bf0000, the typeface "Rakuten Sans / system" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 8px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Rakuten Design System documentation](https://www.rakuten.design/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/rakuten-design) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._