Toyota 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

2radius steps

10pxspacing base

Toyota, in one page

デザイン方針: 自動車メーカーとして信頼感と先進性を両立させた、クリーンでプロフェッショナルなデザイン。車種情報を主役にした構成
密度: 車種紹介ページはビジュアル重視のゆったりしたレイアウト。お知らせ・ナビゲーションは情報密度が高い
キーワード: 信頼、先進的、クリーン、プロフェッショナル、日本品質
特徴: SF Pro を font-family の先頭に置く Apple 寄りのアプローチ。テキスト色は純黒ではなく #222222 を採用し、柔らかい印象を確保。letter-spacing: 0.04em をグローバルに適用

Do's and don'ts

Do

フォントは SF Pro → system-ui → 和文フォント → sans-serif のフォールバックチェーンを維持する
日本語本文の line-height は 1.5 以上にする
letter-spacing: 0.04em をグローバルに適用する
テキスト色は #222222 を使用し、純黒を避ける
車種名見出しは 40px / 700 で存在感を出す

Don't

font-family から SF Pro / system-ui を省略しない（Apple 環境での品質が落ちる）
テキストの色に純粋な #000000 を使わない（コントラストが強すぎる）
日本語本文に line-height: 1.2 以下を使わない
letter-spacing を 0 にしない（toyota.jp の 0.04em は意図的な設計）
車種名見出しのウェイトを 400 以下にしない

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.

トヨタのデザインシステムに従って、車種一覧ページを作成してください。
- プライマリカラー: #eb0a1e（Toyota Red）
- テキスト色: #222222
- フォント: "SF Pro", -apple-system, "system-ui", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif
- 行間: line-height: 1.5
- 字間: letter-spacing: 0.04em
- 車種名見出し: 40px / 700
- カードの影: 0 2px 8px rgba(0,0,0,0.08)
- ボーダー: #dddddd

The specification

Colour paletteRead the full spec

Primary（ブランドカラー）

Toyota Red (#eb0a1e): トヨタブランドカラー。ロゴ、重要なアクセントに使用
Toyota Red Dark (#cc0000): ホバー・プレス時

Semantic（意味的な色）

Danger (#d32f2f): エラー、削除、危険な操作
Warning (#f9a825): 警告、注意喚起
Success (#388e3c): 成功、完了

Neutral（ニュートラル）

Text Primary (#222222): 本文テキスト
Text Secondary (#666666): 補足テキスト、ラベル
Text Disabled (#999999): 無効状態のテキスト
Border (#dddddd): 区切り線、入力欄の枠
Background (#ffffff): ページ背景
Surface (#f5f5f5): カード、セクション背景

Type scaleRead the full spec

3.1 和文フォント

ゴシック体: Hiragino Kaku Gothic ProN, Meiryo

3.2 欧文フォント

サンセリフ: SF Pro, -apple-system, system-ui
等幅: SFMono-Regular, Consolas, Menlo

3.3 font-family 指定

/* 本文 */
font-family: "SF Pro", -apple-system, "system-ui", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

/* 等幅（コード等） */
font-family: SFMono-Regular, Consolas, Menlo, monospace;

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

SF Pro（Apple 環境向け）を先頭に配置
-apple-system, system-ui でシステムフォントにフォールバック
和文は Hiragino Kaku Gothic ProN → Meiryo の順
欧文フォントを先に指定し、欧文グリフの品質を優先するアプローチ

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

Role	Font	Size	Weight	Line Height	Letter Spacing	備考
Display	SF Pro 系	40px	700	60px (×1.5)	0.04em	車種名見出し（bZ4X 等）
Heading 1	SF Pro 系	16px	400	24px (×1.5)	0.04em	ロゴ（非表示テキスト）
Heading 2	SF Pro 系	20px	700	30px (×1.5)	0.04em	セクション見出し
Heading 3	SF Pro 系	16px	700	24px (×1.5)	0.04em	小見出し・お知らせ
Body	SF Pro 系	16px	400	24px (×1.5)	0.64px (0.04em)	本文
Caption	SF Pro 系	12px	400	18px (×1.5)	0.04em	補足、注釈
Small	SF Pro 系	10px	400	15px (×1.5)	0.04em	最小テキスト

3.5 行間・字間

本文の行間 (line-height): 1.5（24px / 16px）
見出しの行間: 1.5（全体的に統一）
本文の字間 (letter-spacing): 0.64px（0.04em）— グローバルに適用
見出しの字間: 0.04em（本文と共通）

ガイドライン:

toyota.jp は line-height: 1.5 を全体で統一的に適用
letter-spacing: 0.04em がグローバルに適用され、和文の可読性を向上
車種名の大型見出し（40px）でも同じ比率を維持

3.6 禁則処理・改行ルール

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

禁則対象:

行頭禁止: ）」』】〕〉》」】、。，．・：；？！
行末禁止: （「『【〔〈《「【

3.7 OpenType 機能

font-feature-settings: normal; /* palt 未適用 */

toyota.jp では palt（プロポーショナル字詰め）は適用されていない
letter-spacing: 0.04em のグローバル指定で字間を調整するアプローチ

3.8 縦書き

該当なし

Components and layoutRead the full spec

Buttons

Primary（CTA）

Background: #222222
Text: #ffffff
Padding: 12px 32px
Border Radius: 4px
Font Size: 16px
Font Weight: 700

Secondary（アウトライン）

Background: transparent
Text: #222222
Border: 1px solid #222222
Padding: 12px 32px
Border Radius: 4px

Brand（トヨタレッド）

Background: #eb0a1e
Text: #ffffff
Padding: 12px 32px
Border Radius: 4px
Font Size: 16px
Font Weight: 700

Inputs

Background: #ffffff
Border: 1px solid #dddddd
Border (focus): 1px solid #222222
Border Radius: 4px
Padding: 10px 12px
Font Size: 16px
Height: 44px

Cards

Background: #ffffff
Border: 1px solid #eeeeee
Border Radius: 8px
Padding: 24px
Shadow: 0 2px 8px rgba(0,0,0,0.08)

Spacing Scale

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

Container

Max Width: 1200px
Padding (horizontal): 20px

Grid

Columns: 12
Gutter: 20px

Level	Shadow	用途
0	none	フラットな要素
1	`0 2px 8px rgba(0,0,0,0.08)`	カード、車種サムネイル
2	`0 4px 16px rgba(0,0,0,0.12)`	ドロップダウン、ポップオーバー
3	`0 8px 32px rgba(0,0,0,0.16)`	モーダル、ダイアログ

Responsive behaviourRead the full spec

Breakpoints

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

タッチターゲット

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

フォントサイズの調整

モバイルでは本文 14-16px、車種名見出しはデスクトップの 60-70% 程度（24-28px）に縮小
line-height: 1.5 はレスポンシブでも維持

Drop-in CSS variables

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

body.theme-toyota {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #222222;
  --heading-color: #222222;
  --link-color: #cc0000;
  --link-hover-color: #990000;
  --border-color: #d7d7d7;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(34,34,34,0.06);
  --card-hover-shadow: 0 6px 18px rgba(34,34,34,0.12);
  --header-bg: #222222;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #6f6f6f;
  --button-bg: #cc0000;
  --button-text-color: #ffffff;
  --button-hover-bg: #990000;
  --button-border: none;
  --button-border-radius: 8px;
  --button-secondary-bg: #f2f2f2;
  --button-secondary-text-color: #222222;
  --button-secondary-hover-bg: #e4e4e4;
  --button-secondary-border: 1px solid #d7d7d7;
  --prompt-bg: #f4f4f4;
  --prompt-text-color: #222222;
  --base-font: var(--font-helvetica);
  --heading-font: var(--font-mono);
  --card-border-radius: 8px;
}

Download theme.css

Visually close to

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

sansan 86.8%
sanu 82.2%
agentic 78.4%
abema 78.1%
keyuca 77.5%

Where this came from

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