Design System Preview
KING JIM — 日本語版

DESIGN.md から抽出したデザイントークンのカタログ。カラー、フォント、コンポーネント、スペーシングの全値を可視化。computed style 実測値に基づく。

商品を探す DESIGN.md を読む
01 / Colors

カラーパレット

Brand
Brand Blue
#418fde
CTA ボーダー・検索ボタン
Brand Blue Dark
#3381d0
リンクテキスト
Text
Text Primary
#333333
本文・見出しテキスト
Black
#000000
ナビ一部
Semantic（推奨補完）
Danger
#c41e3a
エラー・警告
Success
#2e8b57
成功・完了
Warning
#d4a017
注意
Surface & Border
White
#ffffff
ページ背景
Surface Blue
#f0f5f9
商品カテゴリ背景
Surface Gray
#f2f3f5
お問い合わせ面
Surface Blue Light
#f2f7fb
取扱店セクション
Nav BG
#f6f6f6
メガドロップダウン
Gray Border
#cccccc
ボタンボーダー
Divider
#dddddd
区切り線
Light Gray
#efefef
カルーセル矢印
02 / Typography — 実測値

タイポグラフィ階層

商品情報 — Page Title H1
38px / 900 / line-height: 1.5 / letter-spacing: normal商品ページ
商品を探す — Section H2
36px / 900 / line-height: 1.5 / letter-spacing: normalトップページ
商品情報 — Mega Nav Title
27px / 900 / line-height: 1.5 / letter-spacing: normalメガドロップダウン
ラベルライター・ラベルプリンター — Category H3
24px / 700 / line-height: 1.5 / letter-spacing: normal商品ページ
カテゴリから探す — Sub Heading H3
20px / 700 / line-height: 1.75 / letter-spacing: normalトップページ
ラベルライター・ラベルプリンター — Mega Nav Label
19px / 700 / line-height: 1.25 / letter-spacing: normalメガドロップダウン
商品情報 / 企業情報 / IR情報 — Nav Link
17px / 400 / line-height: 1.75 / letter-spacing: normalグローバルナビ
重要なお知らせ — News Heading
16px / 700 / line-height: 1.5 / letter-spacing: normalトップページ
本文テキスト — line-height 1.75 のゆったりとした行間。システムフォント（ヒラギノ角ゴ Pro W3）による堅実な組版。letter-spacing は normal で、ブラウザのデフォルトに委ねる。
16px / 400 / line-height: 1.75 / letter-spacing: normal本文
「収納棚につける落下防止ベルト」に関するお知らせ — News Title
15px / 700 / line-height: 1.75 / letter-spacing: normalお知らせ
リンクテキスト — #3381d0 のコーポレートブルー
16px / 400 / line-height: 1.75 / color: #3381d0リンク
SEARCH / GLOBAL / MENU — Utility Label
10px / 700 / line-height: 1.2 / letter-spacing: normalヘッダーユーティリティ
03 / Product — 商品紹介組版

商品ページの組版サンプル

「テプラ」PRO MARK SR-MK1

スマートフォン専用のラベルプリンター。専用アプリから直感的に操作でき、オフィスでも家庭でも手軽にラベル作成が可能です。コンパクトなボディに高機能を凝縮。

主な仕様

テープ幅4mm / 6mm / 9mm / 12mm / 18mm / 24mm
電源ACアダプタ / 単3形アルカリ乾電池 x 6本
外形寸法約 146(W) x 133(D) x 64(H) mm
質量約 470g（電池・テープカートリッジ除く）
接続Bluetooth Ver.5.0

整理整頓に欠かせないラベリング。テプラなら、文字だけでなくフレームやイラストも印刷でき、見た目も機能性も兼ね備えたラベルを簡単に作成できます。

04 / Buttons

ボタンバリエーション

商品を探す
Primary（ブルー塗り）
取扱店検索
Blue Border
法人のお客様
Gray Border
メニュー
Header Button
削除
Danger（推奨）
全ボタン border-radius: 0px（直角）。ピル型は不使用。ボーダー 2px solid。
05 / Cards

カードコンポーネント

テプラ PRO シリーズ

オフィスの整理整頓に。幅広いテープ幅とフォント、フレーム対応で、あらゆるラベリングニーズに応えます。

商品一覧を見る

キングファイル

50年以上の歴史を持つキングジムの代名詞。豊富なサイズとカラーで、書類の整理に最適なファイリング用品。

商品一覧を見る

デジタルメモ「ポメラ」

テキスト入力に特化したデジタルメモ。起動2秒、乾電池駆動。執筆やメモ取りに集中できるシンプルさ。

商品一覧を見る
06 / Forms

フォーム要素

デフォルト — border: #cccccc, radius: 0px
フォーカス — border: #418fde（Brand Blue）
エラー — border: #c41e3a（Danger）
セレクトボックス — padding: 5px 30px 3px 10px, radius: 0px
07 / Elevation

Depth & Elevation

Level 0: Flat
影なし、ボーダーのみ（標準）
Header Button
border: 2px solid #333333
Gray Border CTA
border: 2px solid #cccccc
Blue Border CTA
border: 2px solid #418fde
Level 1（推奨）
0 2px 8px rgba(0,0,0,0.08)
Level 2（推奨）
0 4px 16px rgba(0,0,0,0.10)
キングジムの階層表現はボーダーとサーフェスカラーが主体。box-shadow は実測上 none。
08 / Layout

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

Spacing Scale

5px
10px
15px
20px
32px
40px
44px

Content Widths

Main Content 1200px（推定）
Product Grid 940px（推定）
Article Content 620px（推定）

Border Radius

全要素 border-radius: 0px で統一。角丸は一切使用しない。