Design System Preview

KEYUCA

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

商品を見る DESIGN.md を読む
01 / Colors
Color Palette

カラーパレット

Brand
Primary
#aa9977
ブランドカラー（ウォームゴールド）
Secondary
#c28358
アクセント（コッパー / テラコッタ）
Text
Text Primary
#323333
本文テキスト
Dark Grey
#707070
補足テキスト
Grey
#878787
ラベル・CTA面
Grey Scale
Black
#000000
Text Primary
#323333
Dark Grey
#707070
Grey
#878787
Light Grey
#c6c6c6
Silver White
#e2e2e2
Surface & Background
White
#ffffff
ページ背景
Off-White
#f9f9f9
カード背景
BG Primary
#f3f3f3
セクション背景
BG Secondary
#f1f1f1
代替背景
Semantic
Error
#ee2200
エラー・必須
Carousel
Active Dot
#c28358
カルーセル選択中
Inactive Dot
#f3f3f3
カルーセル非選択
02 / Typography
Typography Hierarchy

タイポグラフィ階層

ENGLISH SECTION LABEL
font-en (Lato) / 16px / 500 / line-height: 1.375 / letter-spacing: 0.05em / color: #878787見出し英語ラベル
セクション見出し — 暮らしを整えるデザイン
font-ja / 28px / 500 / line-height: 2.0 / letter-spacing: 0.05em / palt: なしH2 和文
本文テキスト — KEYUCAの特徴は line-height: 2.0 の広い行間です。日本語本文で 2.0 は本コレクション中最大の値であり、ゆったりとした可読性を確保しています。家具やインテリアのカタログにふさわしい、落ち着いた印象の組版です。商品説明や特集記事など、長い文章でも目が疲れにくい設計になっています。
font-ja / 13px / 500 / line-height: 2.0 / letter-spacing: 0.05em / palt: なし本文（コレクション最大の行間）
商品名テキスト — ステンレス製キッチンツール 3点セット
font-ja / 13px / 500 / line-height: 1.7 / letter-spacing: 0.05em商品名
ナビゲーション下部テキスト — カーテン / キッチン / 収納 / バス・トイレ / インテリア
font-ja / 11px / 500 / line-height: 2.0 / letter-spacing: 0.05emナビ下部
フォーム入力テキスト — お名前をご入力ください
"Hiragino Sans" / 12px / 400 / letter-spacing: 0.1emInput
¥12,800 (tax included)
font-en (Lato) / 14px / 400 / letter-spacing: 0.03em価格表示
KEYUCA
font-en (Lato) / 18px / 700 / letter-spacing: 0.12emロゴタイプ
03 / Product
Product Sample

商品紹介の組版サンプル

暮らしを、もっとシンプルに

KEYUCAは「Simple & Natural」をコンセプトに、カーテン、キッチンツール、収納用品、バス・トイレタリーなど、暮らしのすみずみまで行き届いたデザインの生活用品を提案しています。素材の質感を活かし、長く使えるものづくりを大切にしています。

Kitchen
ステンレス水切りラック 2段 スリムタイプ
¥8,690 (tax included)
Curtain
遮光1級 リネンライクカーテン ナチュラルベージュ
¥6,490 (tax included)
Storage
スタッキングバスケット スクエア M ホワイト
¥2,190 (tax included)
Bath
珪藻土バスマット Lサイズ グレー
¥3,990 (tax included)

シンプルであることは、退屈であることではありません。ひとつひとつのディテールに心を配り、使い続けるうちに愛着が生まれる — そんなものづくりを目指しています。

04 / Buttons
Button Variations

ボタンバリエーション

カートに入れる
Primary (radius: 6px)
お気に入りに追加
Outline (radius: 6px)
商品を見る
Secondary / Brand
ログイン
Pill / Login (radius: 20px)
新規会員登録
Pill / Register
もっと見る
Outline Small
05 / Cards
Card Components

カードコンポーネント

640 x 640
Kitchen

ステンレス製キッチンツール 3点セット

¥3,290
640 x 640
Curtain

遮光1級リネンライクカーテン

¥6,490
640 x 640
Storage

スタッキングバスケット スクエア M

¥2,190
06 / Forms
Form Elements

フォーム要素

デフォルト — border: #c6c6c6, radius: 4px, font: Hiragino Sans 12px
フォーカス — border: #aa9977 (primary / warm gold)
正しい電話番号を入力してください
エラー — border: #ee2200 (error)
Textarea — 同一スタイル
07 / Elevation
Depth & Elevation

影の深度

Level 0: Flat
影なし、ボーダーのみ
Level 1
0 1px 4px rgba(0,0,0,0.06)
Level 2
0 2px 8px rgba(0,0,0,0.1)
Level 3
0 4px 16px rgba(0,0,0,0.12)
08 / Layout
Spacing & Layout

スペーシング

4px
8px
12px
16px
20px
24px
32px
48px
64px

Content Widths

Full Width 1120px
Main Content 940px
Product Grid (4 col) 1040px
Article / Form 620px
Product Card 280px