Design System Preview
NTT docomo — 日本語版

DESIGN.md から抽出したデザイントークンのカタログ。ドコモレッド #cc0033 を軸とした信頼感あるコーポレートデザイン。computed style 実測値に基づく。

詳しく見る

01 / Colors

カラーパレット

Brand
docomo Red
#cc0033
ヘッダー・アクセント
Dark Blue
#093475
信頼性コンテキスト
Text
Text Primary
#000000
本文テキスト
Text Content
#272727
見出し・コンテンツ
Text Card
#333333
カードテキスト
Text Muted
#b2b2b2
補助テキスト
Surface & Background
Background
#f3f3f3
ページ背景
Surface
#ffffff
カード・ヘッダー
Light Red
#fff2f2
注意喚起エリア
Badge
#5c5c5c
報道発表バッジ
Footer
#272727
フッター背景
Border
#d9d9d9
区切り線

02 / Typography — 実測値

タイポグラフィ階層

セクション見出し — Heading 2 (24px)
24px / 700 / line-height: 1.5 / letter-spacing: normalヒラギノ角ゴ
サブ見出し — Heading 3 (20px)
20px / 700 / line-height: 1.5 / letter-spacing: normalヒラギノ角ゴ
本文テキスト — 日本最大の携帯キャリア NTT docomo のコーポレートサイト。ドコモレッドを軸とした信頼感あるデザインで、サービス情報やお知らせを提供します。
14px / 400 / line-height: 1.5 / letter-spacing: normal本文
カードリンクテキスト — Bold Body (14px)
14px / 700 / line-height: 1.5カード内
ナビゲーション — Nav Label (12px)
12px / 700 / line-height: 1.5ヘッダーナビ
MENU
Roboto / 11px / 700 / letter-spacing: 0.99px欧文ラベル
P
Roboto / 10px / 700 / ポイント単位ポイント表示

サービスページの組版サンプル

よく利用されるサービス・情報

NTT docomo は日本最大の移動体通信事業者として、携帯電話サービスを中心に多彩なサービスを提供しています。料金プラン、機種購入、各種手続きなどをオンラインで簡単に行えます。

携帯料金プラン

お客さまのライフスタイルに合わせた最適な料金プランをご案内します。データ使用量や通話スタイルに応じて、ぴったりのプランをお選びいただけます。


04 / Buttons

ボタンバリエーション

Login (Red Border)
契約確認・お手続き
Card Link (Shadow)
Disabled

05 / Cards

カードコンポーネント

契約確認・お手続き

ご契約内容の確認や各種変更手続きをオンラインで行えます。料金プランの変更も簡単です。

詳しく見る →

機種購入

最新のスマートフォンやタブレットをオンラインショップでご購入いただけます。

詳しく見る →

携帯料金プラン

お客さまのライフスタイルに合わせた最適な料金プランをご案内します。

詳しく見る →

06 / Forms

フォーム要素

デフォルト — border: #d9d9d9, radius: 4px
フォーカス — border: #cc0033 (docomo Red)
エラー — border: #cc0000

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし・ボーダーのみ
Level 1: Card
2px 2px 8px rgba(0,0,0,0.2)
Level 2: Hover
4px 4px 12px rgba(0,0,0,0.25)
Brand Border
#cc0033 (docomo Red)

08 / Layout

コンテンツ幅

Main Content 960px
Article 620px