生活雑貨の最前線。
ロフトで見つける、暮らしのアイデア

DESIGN.md から抽出したデザイントークンのカタログ。loft.co.jp の computed style 実測値に基づく。

季節の特集・おすすめ特集一覧はこちら 店舗情報

01 / Colors

カラーパレット

Brand
LOFT Yellow
#fdd000
ヘッダー背景
Yellow Dark
#eba700
アクセント・矢印
NEW Red
#e40012
NEW!! バッジ
Neutral
Black
#000000
本文テキスト
Dark Gray
#333333
ストア本文
Mid Gray
#666666
補助UI
Light Gray
#999999
日付テキスト
Border
#cccccc
ボタン枠線
Surface
White
#ffffff
メイン背景
Warm White
#fffbf4
サイドバー
Light Gray
#f4f4f4
セクション背景
Footer Gray
#f1f1f1
フッター
Category
#f3f2db
カテゴリーBG
Semantic
Danger
#e40012
Success
#00875a
Warning
#eba700

タイポグラフィ階層

セクション見出し — H2 (18px/700)
18px / 700 / lh 1.0 / kernネットストア
重要なお知らせ — H2 (16px/700)
16px / 700 / lh 1.4 / kernコーポレート
お知らせリスト項目 — H3 (14px/400)
14px / 400 / lh 1.4 / kernコーポレート
本文テキスト — ロフトは文房具、雑貨、コスメ、健康グッズなど、暮らしを彩る生活雑貨の専門店です。新しい発見と出会いをお届けするライフスタイルストアとして、お客様の毎日をもっと楽しく、もっと便利に。
16px / 400 / lh 1.875 / kernコーポレート
商品タイトルテキスト — ストア (12px/400)
12px / 400 / lh 1.3ネットストア
2026.05.08 — Date (12px)
12px / 400 / lh 1.0 / color #999999ネットストア
ナビゲーション — Nav (14px/700)
14px / 700 / lh 1.0ヘッダー
NEW!!ニュースタイトル — News (13px) + NEW Badge
badge: 11px / bg #e40012 / padding 2px | title: 13px / 400コーポレート

03 / Article

記事組版サンプル

2026.05.08

文房具の新しいトレンド — 2026年春の注目アイテム

毎年進化する文房具シーン。今年の春は「書く体験」を見直すアイテムが注目を集めています。デジタル全盛の時代だからこそ、手書きの温もりが見直されています。

万年筆の再ブーム

初心者向けのエントリーモデルから、老舗メーカーの限定品まで。インクの色選びも楽しみのひとつ。ロフトでは常時200色以上のボトルインクを取り揃えています。

※ 在庫状況は店舗によって異なります。


ボタンバリエーション

季節の特集一覧はこちら
Primary / 12px bold / radius 5 / border #ccc
カラーをみる
Secondary / 11px / bg #eee / radius 3
詳細検索
Search / 12px / radius 3 / border #ccc
偽通販サイトにご注意ください >
Link / 16px / border #a2a1ab / radius 0

05 / Cards

カードコンポーネント

Product Image

NEW!!カンロ「ピュレグミ」リラックマコラボ

¥324(税込)
2026.05.08
Product Image

ジェットストリーム 4&1 限定カラー

¥1,100(税込)
2026.05.05
Product Image

クリエイターmeets ロフト オリジナルポーチ

¥1,650(税込)
2026.04.28
Product Image

NEW!!UV対策 フェイスパウダー

¥2,200(税込)
2026.05.07

フォーム要素

Default / bg #e1e2e5 / radius 0 3px 3px 0
Focus / bg #fff / border 1px #333
入力してください
Error / border 1px #e40012

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし — 全要素(フラット基調)

LOFT はフラットデザインが基本。box-shadow の使用は実測されなかった。


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

Spacing Scale
XS
4px
S
8px
M
16px
L
24px
XL
32px
XXL
48px
Border Radius
0px
Link Button
3px
Search / Tag
5px
Primary CTA
Content Width

Corporate: max-width 980px / Store: max-width 960px / 2-column layout (store)