Design System Preview
NTT Group (NTTグループ)

DESIGN.md から抽出したデザイントークンのカタログ。NTT Blue のアウトラインCTAとピルタグ、Noto Sans JP 統一のクリーンなコーポレートデザイン。

グループ企業一覧 DESIGN.md を読む

01 / Colors

カラーパレット

Brand
NTT Blue
#0072bc
ブランドカラー・CTA境界
Link Blue
#0068b7
リンクテキスト・CTAテキスト
Text
Text Primary
#333333
本文・見出しテキスト
Text Secondary
#888888
補足・プレースホルダー
Semantic
Success
#4caf50
成功・完了
Danger
#cc0000
エラー・削除
Warning
#f5a623
警告・注意
Surface & Border
Background
#ffffff
ページ背景
Surface
#f5f5f5
セクション面・カード背景
Border Card
#e5e5e5
カード枠線
Border Default
#cccccc
入力欄枠線
Footer BG
#333333
フッター背景

02 / Typography

タイポグラフィ階層

NTTグループの技術と未来
Noto Sans JP / 38px / 600 / line-height: 1.3Display
セクション見出し — Heading 1
Noto Sans JP / 28px / 600 / line-height: 1.3見出し
サブ見出し — Heading 2
Noto Sans JP / 22px / 600 / line-height: 1.3見出し
Body Medium — 強調テキスト
Noto Sans JP / 16px / 500 / line-height: 1.3本文強調
本文テキスト — NTTグループは、世界中で通信・ICTサービスを提供する企業グループです。イノベーションによる社会課題の解決と、持続可能な成長を目指しています。人と技術と社会をつなぐことで、より良い未来を創造していきます。ABCabc 123
Noto Sans JP / 16px / 400 / line-height: 1.6本文
カードタイトル — Caption (14px / 600)
Noto Sans JP / 14px / 600 / line-height: 1.6カード
2024年12月20日 — ラベル・日付・タグ (12px / 400)
Noto Sans JP / 12px / 400 / line-height: 1.4–1.6 / color: #888888ラベル

コンテンツ組版サンプル

持続可能な未来をつなぐ技術

NTTグループは、光通信やデータセンター、クラウドサービスなどの先端技術を活用し、グローバルな社会インフラの構築に貢献しています。創業以来培ってきた通信技術を基盤に、新たなイノベーションを創出し続けています。

IOWN構想が切り拓く次世代通信

IOWN(Innovative Optical and Wireless Network)構想は、光を中心とした革新的な技術によって、既存のインフラの限界を超えるネットワークやコンピュータ基盤を実現するものです。低消費電力・大容量・低遅延という特長を持ち、2030年の実現に向けて研究開発を進めています。

NTTグループ各社は、通信・IT・エネルギー・都市開発など多様な領域で事業を展開し、地域社会から国際社会まで幅広いフィールドで価値を提供しています。Connecting people, technology, and society for a better future.


04 / Buttons

ボタンバリエーション

CTA Buttons
グループ企業一覧
Primary CTA (Pill Outline)
お問い合わせ
Primary CTA (Pill Filled)
Tags & Labels
グローバル
Tag Pill
テクノロジー
Tag Pill
サステナビリティ
Tag Pill
ニュースリリース
News Label
お知らせ
News Label
Tabs
Pagination
Pagination Dots

05 / Cards

カードコンポーネント

2024.12.20

NTTグループ中期経営戦略の推進について

NTTグループは、新中期経営戦略「New value creation & Sustainability 2027」を策定し、持続的な成長に向けた取り組みを加速しています。

グローバル 経営戦略
2024.12.15

IOWN構想に基づく次世代通信基盤の実証実験を開始

光技術を核とした次世代通信インフラの構築に向けて、国内外のパートナーとともに大規模な実証実験を開始しました。

テクノロジー IOWN
2024.12.10

サステナビリティへの取り組み:カーボンニュートラル実現に向けて

NTTグループは2040年度までにカーボンニュートラルの実現を目指し、再生可能エネルギーの活用拡大と省エネ技術の導入を推進しています。

サステナビリティ

06 / Forms

フォーム要素

デフォルト — bg: #ffffff, border: #cccccc, radius: 4px
フォーカス — border: #0072bc (NTT Blue)
正しい電話番号を入力してください
エラー — border: #cc0000 (Danger)

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし、ボーダーのみ
Level 1
カード、コンテンツエリア
Level 2
ホバーカード、ドロップダウン
Level 3
モーダル・ダイアログ
Focus Ring
#0072bc (NTT Blue)

08 / Layout

レイアウト & スペーシング

Spacing Scale
4px
8px
16px
24px
32px
48px
64px
コンテンツ幅
Container Max 1200px
Main Content 980px
Article Content 660px