Design System Preview
LOWYA --- Furniture & Interior

DESIGN.md から抽出したデザイントークンのカタログ。モノトーン基調、シャープなスクエアボタン、プロダクトファーストのECデザイン。computed style 実測値に基づく。

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

Color Palette

Brand
Black
#000000
ブランドカラー・CTA
Cyan Accent
#05c5f5
リンク・アクセント
Text
Text Primary
#000000
見出し・本文
Text Body Alt
#111820
ブランドアイテム
Text Secondary
#666666
商品名・補足
Text Muted
#cccccc
フッター見出し
Semantic
Badge Red
#ff4e48
NEW / HOT バッジ
Badge Red Surface
#ffedec
バッジ淡色面
Surface & Border
Background
#ffffff
ページ背景
Placeholder
#eeeeee
画像プレースホルダー
Border Primary
#000000
ボタン・区切り (2px)
Border Input
#999999
入力欄ボーダー
02 / Typography

Type Hierarchy

LIVING COLLECTION --- リビングコレクション
Open Sans + Noto Sans JP / 24px / 900 / line-height: 1.5セクション見出し H2
MENU
Open Sans / 28px / 600 / line-height: 1.0 / letter-spacing: 2px / color: #ccccccフッター見出し
ご利用ガイド
Noto Sans JP / 16px / 700 / line-height: 1.5フッター情報見出し
SOFA --- ソファ
Open Sans + Noto Sans JP / 16px / 900 / line-height: 1.5カテゴリタイトル
すべて見る
Noto Sans JP / 14px / 700 / color: #05c5f5テキストリンク
ナビゲーション項目テキスト
Noto Sans JP / 14px / 400 / line-height: 1.5ナビゲーション
3人掛けカウチソファ ファブリック ロータイプ
Noto Sans JP / 12px / 400 / letter-spacing: 0.5px / color: #666666商品名
タブテキスト
Noto Sans JP / 12px / 400 / line-height: 1.5タブ
最小テキスト（bodyベースサイズ 10px）
Noto Sans JP / 10px / 400 / line-height: 1.5Body Small (base)
¥29,990 (税込)
Open Sans / 価格表示 / 700価格
03 / Product

Product Cards

NEW
▢
3人掛けカウチソファ ファブリック ロータイプ ポケットコイル
¥39,990 (税込)
HOT
▢
デスク 幅120cm 引き出し付き 天然木脚 北欧デザイン
¥19,990 (税込)
▢
テレビ台 幅180cm ローボード 壁面収納 ウォールナット調
¥24,990 (税込)
すべて見る
NEW
▢
ダイニングテーブル 4人掛け 天然木 オーク材 幅140cm
¥29,990 (税込)
04 / Buttons

Button Variations

カートに入れる
Primary (Black)
お気に入り登録
Secondary (White)
お問い合わせ
Contact (Muted)
おすすめ
Nav Active
新着
Nav Inactive
ランキング
Nav Inactive

すべてのボタンは border-radius: 0px（シャープなスクエア）。pill 型は使用しない。ボーダーは 2px solid が基本。

05 / Cards

Content Cards

北欧スタイルのリビング作り

ナチュラルな木目と柔らかなファブリックを組み合わせた、温もりのある空間づくり。LOWYAの家具で叶えるシンプルで心地よい暮らし。

詳しく見る

一人暮らしの部屋づくり

限られたスペースを最大限に活かすレイアウト術。コンパクトながら機能的な家具選びのポイントを紹介。

詳しく見る

在宅ワーク環境の整え方

長時間のデスクワークでも快適に過ごせるデスクとチェアの選び方。集中力を高める環境づくりのコツ。

詳しく見る
06 / Forms

Form Elements

デフォルト --- border: 1px solid #999999, radius: 3px
フォーカス --- border: 1px solid #000000
正しい電話番号を入力してください
エラー --- border: 1px solid #ff4e48
07 / Elevation

Depth & Elevation

Level 0: Flat
影なし。LOWYA の標準状態
Level 1
ホバー時のカード（控えめ）
Level 2
ドロップダウン・ポップオーバー
Level 3
モーダル・ダイアログ
Border Emphasis
2px solid #000000 --- 影の代わりにボーダーで区切る

LOWYA はフラットデザインが基本。影よりも 2px solid ボーダーが主要な分離手段。

08 / Layout

Spacing & Grid

Spacing Scale
4px
8px
16px
24px
32px
48px
64px
Content Widths
Full Width (Hero) 100%
Product Grid (4-col) ~1200px
Content Area ~940px
Grid

商品一覧: 4列グリッド（デスクトップ）/ 2列（モバイル）
カテゴリ: 横スクロール / フレックス配置
ヒーロー: フルブリード画像