Design System Preview
CAINZ（カインズ）

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

TV・SNSで話題 お得情報 新商品 ランキング 特集一覧
カートに入れる お知らせをもっと見る
01 / Colors

カラーパレット

Brand
Brand Green
#006438
主要 CTA 背景
Search Orange
#e86e0c
検索ボタン
Attention / Sale
Attention Red
#b81a35
セール・カートバッジ・価格
Tag Yellow
#ffdf9a
送料無料タグ
Text
Text Primary
#222222
本文テキスト（実測値）
Text Secondary
#312f2f
--primary-text-color
Input Text
#5e5e5e
検索プレースホルダー
Surface & Border
White
#ffffff
ページ背景
Surface Gray
#efefef
タグ・カード背景
Border Default
#e5e7eb
Tailwind gray-200
Border Card
#c6c6c6
フッターカード枠
02 / Typography -- 実測値

タイポグラフィ階層

セクション見出し -- Section H2 (Large)
20px / 700 / line-height: 1.4 / letter-spacing: normalトップページ
ピックアップ特集 -- Section H2 (Medium)
18px / 700 / line-height: 1.5 / letter-spacing: normalトップページ
商品カテゴリ -- Section H2 (Small) / H3
16px / 700 / line-height: 1.5 / letter-spacing: normalトップページ
ホームセンター通販のカインズ -- Page H1
14px / 500 / line-height: 1.5 / letter-spacing: normalトップページ h1
本文テキスト -- お探しのページは、移動または削除された可能性があります。カインズのオンラインショップでは、日用品からDIY用品まで幅広い商品をお取り扱いしています。
14px / 400 / line-height: 1.625 / letter-spacing: normal本文
ナビゲーションラベル -- カテゴリから探す
14px / 700 / line-height: 1.5ナビ
キャプション -- カートラベル (12px)
12px / 500 / line-height: 1.25ナビアイコン
バッジラベル -- 送料無料・セール (11px)
11px / 700 / line-height: 1.25バッジ
¥2,980（税込）
20px / 400 / color: #b81a35 (Attention Red)価格表示
03 / Product -- 商品詳細サンプル

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

カインズオリジナル 室内物干し 折りたたみ式 ステンレス

送料無料 セール
¥3,980 （税込） ¥4,980

折りたたみ式のステンレス室内物干し。使わないときはコンパクトに収納でき、限られたスペースでも活躍します。ステンレス素材で錆びにくく、長くお使いいただけます。

商品の特長

耐荷重10kgの丈夫な設計で、家族分の洗濯物もしっかり干せます。組み立て不要で届いたその日からすぐにお使いいただけます。底面には滑り止めゴム付き。

仕様

サイズ: 幅70cm x 奥行45cm x 高さ130cm。重量: 2.8kg。材質: ステンレス鋼、ポリプロピレン。

04 / Buttons

ボタンバリエーション

カートに入れる
Primary CTA
#006438 / radius 22px
もっと見る
More Link
border #222 / radius 9999px
ランキング
Tag Pill
#efefef / radius 24px
Search
#e86e0c / radius 0 4px 4px 0
Badges / Tags
送料無料
Free Shipping
#ffdf9a / radius 0
セール
Sale Badge
border #b81a35 / radius 0
3
Cart Badge (MUI)
#b81a35 / radius 10px
05 / Cards

商品カード

180 x 200 image
送料無料
カインズオリジナル 防草シート 高密度 1m x 10m ブラック
¥2,980（税込）
180 x 200 image
セール 送料無料
LED シーリングライト 8畳用 調光調色 リモコン付き
¥6,980
¥4,980（税込）
180 x 200 image
ステンレス水切りラック スリム 2段 シンク上
¥3,480（税込）
180 x 200 image
送料無料
電動インパクトドライバー 18V 充電式 バッテリー2個付き
¥12,800（税込）
Footer Cards
となりのカインズさん
ホームセンターを遊び倒すメディア
CAINZ Reform
お住まいのメンテナンスとくらしのサポート
DIY Style
自分でものづくりしたいすべての人をサポート
トラノテ
資材調達のプロ向け通販サイト
06 / Forms

フォーム要素

デフォルト -- border: #e5e7eb, radius: 4px, height: 44px
フォーカス -- border: #006438 (Brand Green)
正しい電話番号を入力してください
エラー -- border: #b81a35 (Attention Red)
07 / Elevation

Depth & Elevation

Level 0: Flat
shadow: none
基本すべての要素
Level 1
0 2px 8px rgba(0,0,0,0.06)
カードホバー
Level 2
0 4px 16px rgba(0,0,0,0.10)
ドロップダウン
Level 3
0 8px 24px rgba(0,0,0,0.12)
モーダル
Focus Ring
#006438 (Brand Green)
+ 3px rgba glow
08 / Layout

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

Spacing Scale
4px
XS
8px
S
12px
16px
M (sp)
20px
L (pc)
40px
XL
80px
XXL
Border Radius
0px
Badge
4px
Card
22px
CTA
24px
Tag Pill
9999px
More Link
Content Widths
Max Content Width 1240px (--max-content-width)
Content Width min(1240px, calc(100% - 40px))