CLAS
ログイン 新規会員登録

暮らしに、サブスクという選択を
Design System Preview — CLAS

家具・家電のレンタル／サブスク CLAS の DESIGN.md から抽出したデザイントークンのカタログ。カラー、タイポグラフィ、ピルボタン、カードの全値を可視化。computed style 実測値（2026-06-23）に基づく。

新規会員登録 ログイン
01 / Colors

COLOR PALETTE

Brand
Brand Green
#669988
主要CTA・ブランド要素
Text
Text Heading
#4b5049
見出し
Text Primary
#2d312f
本文主要
Text Secondary
#646b61
ゴースト文字・補足
Accent
Accent Orange
#d96c45
セール・ハイライト
Accent Blue-grey
#608494
NEW・人気バッジ
Accent Gold
#998866
ナンバリング・装飾
Surface & Background
White
#ffffff
ページ背景・カード
Warm Beige Surface
#f5f3f0
ステップ／ガイド帯
Cool Grey 2
#f2f3f2
記事帯サーフェス
Cool Grey 1 / Border
#e3e5e5
カテゴリタグ・区切り線
02 / Typography — 実測値

TYPOGRAPHY

暮らしに、サブスクという選択を — Hero H1
Jost (代替) / 34px / 700 / line-height: 1.5 / letter-spacing: 0.04emヒーローエリア
GREEN ITEM
Jost / 18px / 700 / line-height: 1.8 / letter-spacing: 0.05em — 英字セクション見出し（uppercase）セクションヘッダー
セクション見出し — おすすめの家具・家電
Jost / 18px / 700 / line-height: 1.8 / letter-spacing: 0.05em / color: #4b5049H2 Section
サブ見出し — 人気のキーワード
Jost / 16px / 500 / line-height: 1.8 / letter-spacing: 0.075em / color: #4b5049H3
強調サブ見出し — ガイドに沿って選ぶだけ
Jost / 18px / 700 / line-height: 1.8 / color: #2d312fH3 Alt
本文テキスト — 家具・家電を、買わずに借りる。必要な期間だけ使って、ライフスタイルの変化に合わせて自由に入れ替えられます。サステナブルな暮らしの新しい選択肢。ABCabc 123
Jost / 14px / 400 / line-height: 1.8 / letter-spacing: 0 / color: #4b5049本文
補足テキスト — 商品の特徴や利用方法の説明に使います。14px より一段小さく、補足的な情報を示すためのスタイルです。
Jost / 12px / 400〜700 / line-height: 1.8 / color: #646b61Small
キャプション — 月額 ／ 最短利用期間 ／ 送料込み
Jost / 10px / 400〜700 / line-height: 1.8 / color: #4b5049Caption
03 / Product — サブスク商品 組版

PRODUCT CONTENT

NEW SALE # 2人掛けソファ
ファブリックソファ 2人掛け — 暮らしになじむ、やさしいグリーン

買って後悔したくない大きな家具こそ、まずは借りて試す。CLAS なら月額制で、引越しや模様替えに合わせていつでも返却・交換ができます。使わなくなったら次の人へ。家具をシェアして循環させる、サステナブルな暮らしの選択肢です。

CLAS が選ばれる理由

初期費用をぐっと抑えて、必要な期間だけ。お届けも返却も送料込みで、面倒な手続きはありません。ライフステージの変化に合わせて、住まいを身軽にアップデートできます。

月額 ¥1,540 ／ 最短利用 3ヶ月 ・ 送料込み

利用者満足度 4.7 ／ 取扱ブランド 200 以上 ／ 全国配送対応

この商品を借りる お届けできるか確認する
04 / Buttons

BUTTONS

新規会員登録
Primary CTA Pill
#669988 / 24px / 14px / 700
ログイン
Ghost CTA
1px solid #646b61 / 24px
家電から選ぶ
Large Outline (green)
3px solid #669988 / 24px
家具から選ぶ
Large Outline (dark)
3px solid #2d312f / 24px
ドラム式洗濯乾燥機
Filter Chip
white / #646b61 border / 24px
2人掛けソファ
Filter Chip
5px 12px / 12px / 700
# コンパクト冷蔵庫
Category Tag
#e3e5e5 / #2d312f
NEW
Badge NEW
#608494 / 4px / 10px / 700
人気
Badge 人気
#608494 / blue-grey
SALE
Badge SALE
#d96c45 / orange accent
05 / Cards

PRODUCT CARDS

🛋️
NEW
ファブリックソファ 2人掛け — グリーン
CLAS オリジナル ／ 幅 138cm
月額 ¥1,540 〜
🧊
人気
コンパクト冷蔵庫 2ドア — 一人暮らし向け
Panasonic ／ 138L
月額 ¥990 〜
🌀
SALE
ドラム式洗濯乾燥機 — 乾燥までおまかせ
Panasonic ／ 洗濯 10kg
月額 ¥3,300 〜
🛏️
NEW
シングルベッド フレーム + マットレス
CLAS オリジナル ／ 天然木
月額 ¥1,980 〜

洗濯機・冷蔵庫・レンジ・寝具。ガイドに沿って選ぶだけで、新生活にすぐ使える必需品が揃います。

1洗濯機 2冷蔵庫 3家具 4家事ラク
新規会員登録 サービスを見る
06 / Forms

FORMS

🔍
デフォルト — background: #ffffff / border: 1px solid #e3e5e5 / radius: 24px（ピル）
フォーカス — border: #669988 / box-shadow: 0 0 0 3px rgba(102,153,136,0.25)
7桁の郵便番号を入力してください
エラー — border: #d96c45 / box-shadow: 0 0 0 2px rgba(217,108,69,0.35)
Textarea — background: #ffffff / border: 1px solid #e3e5e5 / radius: 8px / line-height: 1.8
07 / Elevation

DEPTH & ELEVATION

Level 0 — Flat
影なし。ボタン・チップの基本フラット。
Level 1 — Card
0 2px 8px rgba(45,49,47,0.06)
商品カード
Level 2 — Dropdown
0 8px 20px rgba(45,49,47,0.10)
ドロップダウン・ポップオーバー
Level 3 — Modal
0 16px 40px rgba(45,49,47,0.15)
モーダル
Warm Surface
#f5f3f0
ウォームベージュで区切る
Cool Surface
#f2f3f2
クールグレーで区切る
08 / Layout

SPACING & LAYOUT

Spacing Scale (8px グリッド)
XS
4px
S
8px
M
16px
L
24px
XL
40〜48px
XXL
80px
Border Radius Scale
XS
4px — バッジ
Small
8px — 入力欄・画像
Pill
24px — 全CTA・チップ
Circle
50% — アイコン
Container Widths
Max Container 1200px
推奨最大コンテナ幅
Desktop Padding 24〜32px
水平パディング（デスクトップ）
Mobile Padding 16px
水平パディング（モバイル）