愛と自由と
TENGA

DESIGN.md から抽出したデザイントークンのカタログ。白地にブラックの力強いディスプレイ書体と、製品ラインを象徴する赤・黄・緑のアクセント。computed style 実測値に基づく。

製品を見る DESIGN.md を読む
01 / Colors

Color Palette

Brand / Accent
TENGA Red
#d70c19
象徴色・強調・CTA
Signal Yellow
#d7b00c
RELEASE バッジ
Signal Green
#0b9163
NEWS バッジ
Ink (Black)
#000000
見出し
Neutral / Grey
Body Text
#555555
本文・ナビ
Warm Black
#231815
記事リード
Mid Grey
#707070
補助・アイコン
Surface
#f7f7f7
セクション面
Border
#e5e5e5
区切り・枠
Footer / Dark
#333333
フッター地
Background
#ffffff
ページ背景
02 / Typography — 実測値

Typography

TENGA
Display — IBM Plex Sans / 120px / 600 / ls 6px(0.05em)ヒーロー
PICK UP
Section Label — Oswald / 46px / 400 / ls 2.76px(0.06em)トップ
みんなの、愛と自由のために
Heading (JP) — Noto Sans JP / 28px / 700 / line-height 1.93
今回のゲストは女子プロボクサー
Sub Heading — Noto Sans JP / 24px / 700 / ls 1.44px
本文テキスト — TENGA は「性を表通りに」を掲げ、プレジャーアイテムを工業デザインの対象として再定義してきました。本文色は黒ではなくグレー #555555 を使い、白地に柔らかく馴染ませます。ABCabc 123
Body — Noto Sans JP / 16px / 400 / line-height 1.6 / color #555555
About TENGA / Products / Contents
Nav — Oswald / 16–18px / 400 / ls 2px(0.11em)
03 / Badges — カテゴリ色分け

Category Badges

TENGAVOICE RELEASE NEWS MEDIA

赤=強調 / 黄=新着 / 緑=お知らせ。役割を色で固定する。

04 / Cards

News & Articles

PRODUCT
2026.06.20 · RELEASE

新シリーズ「TENGA AERO」発売のお知らせ

NEWS
2026.06.12 · NEWS

レッド・ドット・デザイン賞 受賞レポート

VOICE
2026.06.05 · TENGAVOICE

菊池 真琴（女子プロボクサー）インタビュー

05 / Buttons

Buttons

製品を見る
Primary (Red)
VIEW ALL
Outline
06 / Forms

Forms

デフォルト — border: #e5e5e5, radius: 4px
フォーカス — border: #d70c19 (TENGA Red)
エラー — border: #d70c19
07 / Elevation

Depth & Elevation

Level 0: Flat
影なし、ボーダーのみ
Level 1
0 2px 6px rgba(0,0,0,0.08) — カード
Level 2
0 6px 16px rgba(0,0,0,0.12) — ホバー
Level 3
0 12px 32px rgba(0,0,0,0.16) — モーダル
08 / Layout — Spacing Scale

Spacing

XS 4
S 8
M 16
L 24
XL 48
XXL 80