Sony 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

9tokens

11type steps

3radius steps

4pxspacing base

Sony, in one page

デザイン方針: ダークテーマ基調（#111111 背景 + 白テキスト）で、プレミアム感と技術的な先進性を表現。映像・ゲーム・音楽が事業の柱であることを反映し、暗い背景で画像やビジュアルが映えるシネマティックな世界観
密度: ヒーローセクションはフルスクリーンの大胆な画像・映像演出。コーポレート情報は適度な密度でまとめ、ニュースリストは行間 1.5 でコンパクトに
キーワード: ダーク＆シネマティック、SST 独自フォント、クリーンな白テキスト、先進的テクノロジー、エンタテインメント
特徴:
フォントに SST（Sony Sans Text） ファミリーを使用。SST は Sony が Monotype と共同開発したコーポレートフォント。日本語は SSTJapanesePro を使用
ページ背景は #111111（純黒ではない暗灰色）で、長時間の閲覧時の目の負担を軽減
テキストリンクは #3865e0（Sony ブルー）
ニュースタイトル等に font-feature-settings: "palt" + letter-spacing: 1.6px（0.1em）の広めのトラッキングを適用
ヒーローコピーは weight 300（Light）で上品な印象
ダークモードがデフォルト。ライトモード非対応（コーポレートサイト）

Do's and don'ts

Do

ダーク背景には #111111 を使う（純黒 #000000 は避ける）
テキストは #ffffff を基調に、補助テキストに #c8c8c8 を使う
ニュースタイトルは letter-spacing: 0.1em + palt でワイドトラッキング
ヒーローコピーは weight 300（Light）で上品に
ビジュアルを大きく見せるダークテーマの余白設計を維持する
SST フォントが使えない環境では Noto Sans JP + Inter を代替に

Don't

ページ背景に純白 #ffffff を使わない（ダークテーマの世界観を壊す）
ボタンの角丸を大きくしない（radius 2〜3px のシャープなスタイル）
ヒーローに weight 700（Bold）を使わない（Light 300 が Sony のトーン）
明朝体を混ぜない（全体をゴシック系で統一）
letter-spacing に em ではなく px を使う場合、フォントサイズとの比率に注意

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.

Sony のコーポレートサイトのデザインシステムに従って、製品紹介セクションを作成してください。
- 背景: #111111（ダーク）
- テキスト: #ffffff
- フォント: 上記 font-family（SST 系）
- ヒーローコピーは weight 300、letter-spacing 0.1em
- ボタン: #2d75c7 背景、radius 2px
- カードはオーバーレイ方式（画像上に半透明黒 + 白テキスト）

The specification

Colour paletteRead the full spec

実サイトの computed style 実測値。すべて hex 表記。

Brand

Sony Black (#111111): ページ背景。純黒 #000000 ではなく暗灰色で奥行きを持たせる
Sony Blue (#3865e0): テキストリンク、アクセントカラー（CSS 変数 --color-link）
Sony Red (#dd0000): 注意喚起・重要なお知らせ（CSS 変数 --color-red）
OneTrust Blue (#2d75c7): Cookie 同意バナー等のシステムボタン

CTA / Buttons

System Button: 背景 #2d75c7 / 文字 #ffffff / radius 2px / padding 12px 30px / 12px / weight 700
Portal Badge: 背景 #ffffff / 文字 #000000 / radius 3px / padding 4px 11px / 12px / weight 400
Outline Button: 背景 #ffffff / 文字 #646464 / border 1px solid #646464 / radius 2px / padding 12px 10px

Neutral

Token	hex	RGB	役割
White	`#ffffff`	(255, 255, 255)	主要テキスト（ダーク背景上）
Background Black	`#111111`	(17, 17, 17)	ページ背景
Primary Black	`#000000`	(0, 0, 0)	CSS 変数 `--color-primary`
Dark Gray	`#646464`	(100, 100, 100)	補助テキスト、ボーダー
Light Gray	`#c8c8c8`	(200, 200, 200)	薄い区切り線
Surface Gray	`#eeeeee`	(238, 238, 238)	明るい面背景（ライトセクション用）

Overlay

Card Overlay: rgba(0, 0, 0, 0.7) — カードホバー時の暗転オーバーレイ
Scroll Overlay: rgba(0, 0, 0, 0.4) — セクション背景の半透明レイヤー
White Mist: rgba(255, 255, 255, 0.5) — 番号・インジケーター用
Green Accent: #468254 — サステナビリティセクション等のアクセント

Type scaleRead the full spec

3.1 和文フォント

ゴシック体: SSTJapanesePro を最優先。Sony が Monotype と共同開発したコーポレート和文ゴシック
フォールバック: Meiryo → Hiragino Kaku Gothic ProN → sans-serif
明朝体: 使用しない（サイト全体ゴシック統一）

3.2 欧文フォント

サンセリフ: SST（Sony Sans Text） ファミリー。W20 = Light、W55 = Regular 相当
フォールバック: Arial → Helvetica Neue

3.3 font-family 指定

/* メインコンテンツ */
font-family: SSTJapanesePro, "SST W20 Light", "SST W55 Light",
  Arial, "Helvetica Neue", Meiryo, "Hiragino Kaku Gothic ProN", sans-serif;

/* システム UI（Cookie バナー等） */
font-family: "SST W20 Regular", "SST W55 Regular", sans-serif;

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

SST は Sony のコーポレートフォントであり、Web 配信されるカスタムフォント
日本語版（SSTJapanesePro）→ 欧文版 SST Light/Regular → システムフォントの順
欧文フォールバックに Arial / Helvetica Neue を入れている（SST の代替として字形が近い）
和文のフォールバックは Meiryo → Hiragino の順（Windows 優先）

代替フォント注記: SST は Sony 専用のコーポレートフォントのため外部では使用不可。代替として Noto Sans JP（weight 300 / 400 / 700）+ Inter を使用すると、クリーンでニュートラルな印象が近い（preview.html はこの代替を使用）。

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

実測値（トップ／コーポレートページ、2026-05-09 取得）

Role	Font	Size	Weight	Line Height	Letter Spacing	Color	備考
Hero Copy	SSTJapanesePro	31.5px	300	63px (×2.0)	3.15px (0.1em)	`#ffffff`	"テクノロジーの力で"
Section H2	SSTJapanesePro	24px	700	36px (×1.5)	normal	`#ffffff`	"ミッション"
News Title (H3)	SSTJapanesePro	16px	400	24px (×1.5)	1.6px (0.1em)	`#ffffff`	ニュースリストタイトル
Body	SSTJapanesePro	16px	400	24px (×1.5)	normal	`#ffffff`	本文
Company Name	SSTJapanesePro	14px	400	21px (×1.5)	normal	`#ffffff`	"ソニー株式会社"
Portal Badge	SSTJapanesePro	12px	400	12px (×1.0)	1.6px (0.13em)	`#000000`	"ソニーグループポータルサイト"
Scroll Label	SSTJapanesePro	10px	400	10px (×1.0)	1px (0.1em)	`#ffffff`	"Scroll"
System H2	SST W20 Regular	18px	700	21.6px (×1.2)	normal	`#696969`	"Cookieの設定管理"
System Body	SST W20 Regular	14px	600	21px (×1.5)	normal	`#696969`	Cookie パネル
System H4	SST W20 Regular	14px	600	21px (×1.5)	normal	`#696969`	"厳密に必要な Cookie"

3.5 行間・字間

本文の行間 (line-height): 1.5（24px / 16px）
ヒーローの行間: 2.0（63px / 31.5px）— 大きめの行間で余白を活かしたレイアウト
見出しの行間: 1.5（H2）〜 1.2（システム系）
本文の字間 (letter-spacing): normal（0）
ニュースタイトルの字間: 0.1em（1.6px）— palt と組み合わせたワイドトラッキング
ヒーローの字間: 0.1em（3.15px）— 大きなサイズでは広めの字間

ガイドライン:

ダークテーマでは字間をやや広めに取ると視認性が向上する
ニュース・タイトルの 0.1em は Sony のコーポレートスタイルとして一貫

3.6 禁則処理・改行ルール

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

3.7 OpenType 機能

/* ニュースタイトル・本文の一部 */
font-feature-settings: "palt";

/* ヒーロー・見出し */
font-feature-settings: "palt" 0;

palt: ニュースリスト等のテキスト密度が高い箇所で有効化
ヒーロー・大見出しでは "palt" 0 で明示的にオフ（大きなサイズでは字詰めしない）

3.8 縦書き

該当なし

Components and layoutRead the full spec

Buttons

System Primary

Background: #2d75c7
Text: #ffffff
Padding: 12px 30px
Border Radius: 2px
Font Size: 12px
Font Weight: 700
Letter Spacing: 0.96px (0.08em)

System Outline

Background: #ffffff
Text: #646464
Border: 1px solid #646464
Padding: 12px 10px
Border Radius: 2px
Font Size: 13px
Font Weight: 600

Portal Badge

Background: #ffffff
Text: #000000
Padding: 4px 11px
Border Radius: 3px
Font Size: 12px
Font Weight: 400
font-feature-settings: "palt"

Cards

Background: rgba(0, 0, 0, 0.7) overlay on dark images
Border: none
Border Radius: 0px（角丸なし）
Padding: 32px
テキスト色: #ffffff

Navigation

Background: #111111（ページ背景と同色）
Height: 68px（CSS 変数 --header-height）
Logo: "SONY" テキスト、16px、weight 400

Spacing Scale

Token	Value	備考
XS	8px	アイコンとラベルの間隔
S	16px	テキストブロック間
M	24px	セクション内パディング
L	32px	カードパディング
XL	48px	セクション間
XXL	96px	ラッパーの左右余白（`--wrapper-spacing-value`）

Container

Max Width: 1680px（CSS 変数 --container-max-width-value）
Content Width: 1088px（CSS 変数 --content-small-width-value）
Article Width: 710px（CSS 変数 --article-max-width-value）
Wrapper Padding: 96px（デスクトップ）/ 24px（モバイル）

Grid

ニュースリスト: 1 カラム、リスト型
カードグリッド: 2〜4 カラム

Level	Shadow	用途
0	none	ほぼ全要素（フラットデザイン）
1	overlay `rgba(0,0,0,0.4)`	セクション背景オーバーレイ
2	overlay `rgba(0,0,0,0.7)`	カードホバー時のオーバーレイ

ダークテーマのため、ドロップシャドウではなくオーバーレイの透明度で奥行きを表現する。

Responsive behaviourRead the full spec

Breakpoints

Name	Width	説明
Mobile	≤ 375px	モバイルレイアウト（`--design-width-sp`）
Tablet	≤ 768px	タブレットレイアウト
Desktop	> 768px	デスクトップレイアウト

タッチターゲット

最小サイズ: 44px × 44px

フォントサイズの調整

モバイルではヒーローコピーを 20px 程度に縮小
ラッパーの余白は 96px → 24px（--wrapper-spacing-sp）

Drop-in CSS variables

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

body.theme-sony {--page-bg: #111111;
  --page-bg-gradient: none;
  --text-color: #a7a7a7;
  --heading-color: #a7a7a7;
  --link-color: #ff0606;
  --link-hover-color: #d20000;
  --border-color: #2c2c2c;
  --card-bg: #111111;
  --card-shadow: 0 1px 2px rgba(167,167,167,0.06);
  --card-hover-shadow: 0 6px 18px rgba(167,167,167,0.12);
  --header-bg: #242424;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #111111;
  --footer-text-color: #7d7d7d;
  --button-bg: #dd0000;
  --button-text-color: #ffffff;
  --button-hover-bg: #aa0000;
  --button-border: none;
  --button-border-radius: 2px;
  --button-secondary-bg: #1a1a1a;
  --button-secondary-text-color: #a7a7a7;
  --button-secondary-hover-bg: #232323;
  --button-secondary-border: 1px solid #2c2c2c;
  --prompt-bg: #191919;
  --prompt-text-color: #a7a7a7;
  --base-font: var(--font-helvetica);
  --heading-font: var(--font-inter);
  --card-border-radius: 2px;
}

Download theme.css

Visually close to

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

starflyer 84.4%
hp 82.4%
casio 76.5%
ibm 75.9%
pandora 75.7%

Where this came from

Source document: jp/design-md/sony/DESIGN.md · 8.0 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.