Docomo Design System — Colours, Type and a Ready Prompt

Back to all styles

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

13tokens

10type steps

3radius steps

4pxspacing base

Docomo, in one page

デザイン方針: ドコモレッドを軸とした信頼感のあるコーポレートサイト。カード型UIとやわらかな角丸で親しみやすさを演出。ライトグレー背景に白カードを浮かせるレイヤー構造
密度: 情報量が多いがカード型で整理されている。本文 line-height: 1.5 で標準的な可読性
キーワード: コーポレート、レッドアイデンティティ、カード型UI、やわらかな角丸、親しみやすさ
特徴: ドコモレッド #cc0033 がヘッダー・ボタンボーダー・アクセントに一貫して使われる。欧文に Roboto を部分的に使用。全体的にシャドウ付きカードで視覚的階層を作っている

Do's and don'ts

Do

ヘッダーとアクセントには必ずドコモレッド #cc0033 を使う
カードリンクには border-radius: 10px + シャドウで浮遊感を出す
欧文ラベル（MENU、P 等）には Roboto 700 を使う
和文テキストはヒラギノ角ゴ → メイリオのフォールバックを守る
ページ背景は #f3f3f3 のライトグレー、カード面は #ffffff の白
本文は 14px / line-height: 1.5 を維持する
ログインボタンは白地にレッドボーダー（1px solid #cc0033）
フッターは #272727 のダークグレー背景

Don't

ドコモレッド #cc0033 をテキスト色として使わない（背景・ボーダー専用）
カードの角丸を 4px 以下にしない（10px 以上のやわらかな角丸がブランドの特徴）
Roboto を和文テキストに使わない（MENU、P 等の欧文ラベル専用）
フラットなカード（シャドウなし）を使わない（浮遊感がデザインの要）
純白 #ffffff をページ背景に使わない（#f3f3f3 を使う）
letter-spacing を本文に適用しない（normal を維持）

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

This prompt ships with the source DESIGN.md.

NTT docomo のデザインに従って、サービス一覧ページを作成してください。
- 和文フォント: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif
- 欧文ラベル: Roboto, sans-serif（700、MENU 等に使用）
- ヘッダー: 背景 #cc0033、白ロゴ
- ページ背景: #f3f3f3
- カード: 白背景、radius 10px、shadow 2px 2px 8px rgba(0,0,0,0.2)
- テキスト色: #272727
- 見出し: 24px, 700
- 本文: 14px, line-height: 1.5, letter-spacing: normal
- フッター: bg #272727, 白文字
- palt / kern は使わない

The specification

Colour paletteRead the full spec

Primary（ブランドカラー）

docomo Red (#cc0033): ヘッダー背景、ボタンボーダー、アクセント。ドコモの象徴色
Dark Blue (#093475): 被災地支援リンク等、信頼性が求められるコンテキストで使用

Neutral（ニュートラル）

Text Primary (#000000): 本文テキスト
Text Content (#272727): 見出し・コンテンツテキスト
Text Card (#333333): カードリンクテキスト
Text Muted (#b2b2b2): 補助テキスト、ポイント単位
Background (#f3f3f3): ページ背景（ライトグレー）
Surface (#ffffff): カード・ヘッダー等の面
Surface Dark (#5c5c5c): 報道発表バッジ背景
Footer (#272727): フッター背景
Border Faint (#d9d9d9): 区切り線

Semantic（意味的な色）

Light Red (#fff2f2): 注意喚起エリア背景
Disabled (#757575): 送信ボタン等の無効状態

Type scaleRead the full spec

3.1 和文フォント

ゴシック体（デフォルト）:

ヒラギノ角ゴ Pro W3（macOS / iOS）
メイリオ（Windows）

3.2 欧文フォント

サンセリフ: Roboto（Google Fonts、MENU ラベル・ポイント表示等の部分使用）
フォールバック: sans-serif

3.3 font-family 指定

/* 本文（和文） */
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;

/* 欧文アクセント（MENU、ポイント表示） */
font-family: Roboto, sans-serif;

フォールバックの考え方:

和文はシステムフォント依存。ヒラギノ → メイリオの二段構え
欧文は Roboto を部分的に使用。MENU ラベル、ポイント数値等のアクセントに限定
Web フォントの読み込みは最小限に抑えたパフォーマンス重視の設計

3.4 文字サイズ・ウェイト階層

以下は computed style による実測値

Role	Font	Size	Weight	Line Height	Letter Spacing	備考
Heading 2	ヒラギノ角ゴ	24px	700	36px (x1.5)	normal	セクション見出し、色 #272727
Heading 3	ヒラギノ角ゴ	20px	700	30px (x1.5)	normal	サブセクション見出し
Body	ヒラギノ角ゴ	14px	400	21px (x1.5)	normal	本文テキスト
Card Link	ヒラギノ角ゴ	14px	700	21px (x1.5)	normal	カードリンクテキスト
MENU Label	Roboto	11px	700	11px (x1.0)	0.99px	ハンバーガーメニューラベル
Nav Label	ヒラギノ角ゴ	12px	700	18px (x1.5)	normal	ヘッダーナビ
Notice	ヒラギノ角ゴ	14px	700	21px (x1.5)	1px	お知らせ・災害情報テキスト
Point Unit	Roboto	10px	700	10px (x1.0)	normal	ポイント単位「P」

3.5 行間・字間

行間 (line-height) — 実測値:

全テキスト: 1.5（21px / 14px）— 統一的な行間設定
見出し: 1.5（30px / 20px）

字間 (letter-spacing) — 実測値:

本文: normal
MENU ラベル: 0.99px（0.09em 相当）
お知らせテキスト: 1px（0.07em 相当）

ガイドライン:

行間は全体的に 1.5 で統一されている
字間は特殊なラベル要素にのみ適用

3.6 禁則処理・改行ルール

word-wrap: break-word;
overflow-wrap: break-word;

3.7 OpenType 機能

/* サイト全体で palt / kern は適用されていない */
font-feature-settings: normal;

palt: 未使用
kern: 未使用

3.8 縦書き

該当なし。横書きのみ

Components and layoutRead the full spec

Buttons

Login Button

Background: #ffffff
Text: #000000
Border: 1px solid #cc0033
Padding: 8px
Border Radius: 4px
Font Size: 12px
Font Weight: 700

Card Link（角丸カード型ボタン）

Background: #ffffff
Text: #272727
Border: none
Padding: 4px 26px 4px 13px
Border Radius: 10px
Font Size: 14px
Font Weight: 700
Shadow: 2px 2px 8px rgba(0,0,0,0.2)

Pill Link（お知らせ系）

Background: #ffffff
Text: #000000
Padding: 8px 8px 6px 24px
Border Radius: 15px
Font Size: 15px
Font Weight: 700

Inputs

検索入力の詳細は未確認（トップページにフォーム要素の露出が少ない）

Cards

Background: #ffffff
Border: none
Border Radius: 10px
Padding: 4–13px
Shadow: 2px 2px 8px rgba(0,0,0,0.2)

Badge（報道発表）

Background: #5c5c5c
Text: #ffffff
Font Size: 推定 12px
Border Radius: 4px

Spacing Scale

Token	Value
XS	4px
S	8px
M	16px
L	24px
XL	32px
XXL	64px

Container

Max Width: 960px（推定）
Padding (horizontal): 20px

Grid

カード型レイアウトが中心
サービス一覧: 4カラムグリッド
ニュース一覧: リスト形式

Level	Shadow	用途
0	none	フラットな要素
1	`2px 2px 8px rgba(0,0,0,0.2)`	カードリンク（デフォルト状態で影あり）
2	`4px 4px 12px rgba(0,0,0,0.25)`	ホバー時の強調（推定）

カード型UIが特徴で、デフォルトでシャドウを持つ要素が多い
ヘッダーはフラットで、#cc0033 のベタ塗りで存在感を出す

Responsive behaviourRead the full spec

Breakpoints

Name	Width	説明
Mobile	<= 767px	モバイルレイアウト
Tablet	<= 1024px	タブレットレイアウト
Desktop	> 1024px	デスクトップレイアウト

タッチターゲット

最小サイズ: 44px x 44px（WCAG 基準）

フォントサイズの調整

モバイルでは本文 14px を維持、見出しはデスクトップの 70–80% に縮小
ハンバーガーメニューに切り替え（MENU ラベル: Roboto 11px 700）

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-docomo {--page-bg: #f3f3f3;
  --page-bg-gradient: none;
  --text-color: #000000;
  --heading-color: #000000;
  --link-color: #cc0033;
  --link-hover-color: #990026;
  --border-color: #c7c7c7;
  --card-bg: #f3f3f3;
  --card-shadow: 0 1px 2px rgba(0,0,0,0.06);
  --card-hover-shadow: 0 6px 18px rgba(0,0,0,0.12);
  --header-bg: #000000;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #f3f3f3;
  --footer-text-color: #555555;
  --button-bg: #cc0033;
  --button-text-color: #ffffff;
  --button-hover-bg: #990026;
  --button-border: none;
  --button-border-radius: 10px;
  --button-secondary-bg: #e4e4e4;
  --button-secondary-text-color: #000000;
  --button-secondary-hover-bg: #d6d6d6;
  --button-secondary-border: 1px solid #c7c7c7;
  --prompt-bg: #e7e7e7;
  --prompt-text-color: #000000;
  --base-font: var(--font-roboto);
  --heading-font: var(--font-roboto);
  --card-border-radius: 10px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

softbank 79.5%
fukumitsuya 76.4%
kashiyama 76.3%
zomato 74.9%
kayak 74.8%

Where this came from

Source document: jp/design-md/docomo/DESIGN.md · 6.2 KB
Repository: kzhrknt/awesome-design-md-jp
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.