Design System Preview
dentsu — 日本語版

DESIGN.md から抽出したデザイントークンのカタログ。ニューモーフィズム基調のコーポレートデザインシステム。computed style 実測値に基づく。

詳しく見る DESIGN.md を読む
01 / Colors

カラーパレット

Base & Surface
Background
#f3f5f7
ページ背景（ニューモーフィズム基盤）
White
#ffffff
テキスト（暗い面上）
Surface Dark
#313131
ダークセクション背景
Black / Footer
#000000
テキスト・フッター背景
Accent
Blue
#009be0
プライマリCTA・リンク
Red
#d83f30
アラート・強調
Navy
#254590
セカンダリアクセント
Green
#189f3b
サステナビリティ・成功
Orange
#e4a334
注目・警告
Text & UI
Text Primary
#000000
本文テキスト
Text Secondary
#666666
補足テキスト
Placeholder
#999999
プレースホルダー
Border Default
rgba(0,0,0,0.12)
標準ボーダー
02 / Typography — 実測値

タイポグラフィ階層

電通の未来を創るイノベーション
Roboto + Noto Sans JP / 45px / 700 / line-height: 1.3H2 見出し
統合マーケティング戦略
Roboto + Noto Sans JP / 40px / 700 / line-height: 1.3H3 セクション見出し
デジタルトランスフォーメーション — Digital Transformation
Roboto + Noto Sans JP / 26px / 700 / line-height: 1.75H4 小見出し
電通グループは、社会における様々な課題をクリエイティビティとテクノロジーの力で解決し、人々のより良い未来の実現に貢献してまいります。多様な専門性を持つプロフェッショナルが連携し、クライアントのビジネス成長を支援します。
Noto Sans JP / 15px / 400 / line-height: 1.75 / letter-spacing: normal本文
2026.05.21
Roboto / 13px / 400 / letter-spacing: 0.04em日付
03 / Article — 記事組版

コーポレートニュースの組版サンプル

2026.05.21  |  ニュースリリース

電通グループ、AIを活用した次世代マーケティングプラットフォームを発表

電通グループは、生成AIとデータアナリティクスを融合した新しいマーケティングプラットフォームの提供を開始しました。本プラットフォームにより、クライアント企業のマーケティング活動における意思決定の精度と速度を飛躍的に向上させます。

統合的なデータ基盤の上に構築されたこのソリューションは、消費者インサイトの発見からクリエイティブ制作、メディアプランニングまでを一気通貫で最適化。従来のワークフローと比較して、キャンペーン立案から実施までのリードタイムを大幅に短縮します。

AI マーケティング DX
04 / Buttons

ボタンバリエーション

詳しく見る
Outline Pill (Light)
お問い合わせ
Neumorphic
もっと見る
Outline Pill (Dark)
GDPR / Cookie Consent Bar

当ウェブサイトでは、お客様のブラウジング体験を向上させるためにCookieを使用しています。詳しくはプライバシーポリシーをご覧ください。

すべて同意 設定を管理
05 / Cards — ニューモーフィズム

カードコンポーネント

2026.05.15

サステナビリティ経営の推進

電通グループは、環境・社会・ガバナンスの観点からサステナブルな事業運営を推進し、社会課題の解決に取り組んでいます。

続きを読む
2026.05.08

グローバルネットワークの強化

世界145以上の国と地域で事業を展開する電通グループは、ローカルの知見とグローバルスケールを組み合わせた統合ソリューションを提供します。

続きを読む
2026.04.28

クリエイティブテクノロジーの革新

最先端のテクノロジーとクリエイティビティを融合させ、ブランドと消費者の新しい接点を創造します。XR体験からAI生成コンテンツまで。

続きを読む
06 / Forms

フォーム要素

デフォルト — ニューモーフィズム inset shadow, radius: 8px
フォーカス — border: #000000, focus ring 2px
正しい電話番号を入力してください
エラー — border: #d83f30 (accent-red)
07 / Elevation — ニューモーフィズム

Depth & Elevation

Flat
影なし、ボーダーのみ
Neumorphic SM
ボタン・小要素
Neumorphic
カード・パネル（実測値）
Neumorphic LG
モーダル・フローティング
Inset
入力フィールド・押下状態
08 / Layout

レイアウトグリッド

3-Column Grid
gap: 24px / border-radius: 30px
Column 1
Column 2
Column 3
2-Column Grid (2:1)
メインコンテンツ + サイドバー
Main Content
Sidebar
Content Widths
max-width 実測値
Full Width 1400px
Main Content 1000px
Article 700px