GALLERY SLIM BRIEF — 新作入荷のお知らせ

Design System Preview

Thoughtful Leather Products for a Modern Era

DESIGN.md から抽出したデザイントークンのカタログ。ミディアムグレー #707070 をブランドカラーに据えた、ギャラリーのような静謐なデザインシステム。computed style 実測値に基づく。

Check Products View All
01 / Colors

Color Palette

Brand
Brand Gray
#707070
--colorBtnPrimary / ブランドカラー
Brand Gray Dim
#636363
--colorBtnPrimaryDim / ホバー
Cart Accent
#ff4f33
--colorCartDot / カートドット
Text
Body Text
#707070
本文テキスト
Emphasis
#000000
段落・見出し強調
Near Black
#111111
チェックアウト
Mid Gray
#505050
メール登録ボタン
Surface & Border
Body
#ffffff
--colorBody
Surface Light
#fafafa
--colorBodyLightDim
Surface Medium
#f5f5f5
--colorBodyMediumDim
Surface Dim
#f2f2f2
--colorBodyDim
Border
#e8e8e1
--colorBorder / 暖色系
Announcement
#1c1d1d
告知バー背景
02 / Typography

Typography Hierarchy

ギャラリーヒーロー — Hero H2 (32px)
Inter / 32px / 400 / line-height: 1.2 / system fontヒーロー
商品名 — Heading 1 (22px)
Inter / 22px / 400 / line-height: 1.2 / system font商品ページ
セクション見出し — Heading 2 (20px)
Inter / 20px / 400 / line-height: 1.2 / letter-spacing: 0.1emコレクション
小見出し — Heading 3 (18px)
Inter / 18px / 400 / line-height: 1.2カード見出し
本文テキスト — 上質なレザーの質感を活かしたプロダクトデザイン。使い込むほどに味わいが深まる経年変化を楽しめます。毎日の持ち物をアップデートする、現代のためのレザーグッズ。
Lato + Noto Sans JP / 15px / 400 / line-height: 1.6 / letter-spacing: 0.025em本文
Thoughtful Leather Products for a Modern Era
Lato / 15px / 400 / letter-spacing: 0.2em — ワイドトラッキング装飾テキストヒーロー
ベースボディ — 12px のエレガントな小さめテキスト。商品名・価格・ナビゲーションに使用。objcts.io の特徴的なデリケートなサイズ感。
Lato + Noto Sans JP / 12px / 400 / line-height: 1.5 / letter-spacing: 0.025emボディデフォルト
ボタンテキスト — Button (14px / 500)
Lato / 14px / 500 / letter-spacing: 0.025emCTA
03 / Products

Product Grid

Gallery Backpack
Gallery Backpack
¥77,000
Slim Brief
Slim Brief
¥66,000
Weekender
Weekender
¥88,000
Zip Card Case
Zip Card Case
¥16,500
Long Wallet
Long Wallet
¥33,000
Tote Bag
Tote Bag
¥55,000
View All Products
04 / Buttons

Button Variations

Add to Cart
Primary / r:5px
Checkout
Checkout / r:0px
View All
View All / r:0px
Check Products
Outline / r:4px
Subscribe
Email / r:3px
1 2 3
Pagination / r:50%
Mixed Radius Strategy
0px = 主要 CTA（Checkout, View All）— シャープなエッジで決断を促す
3–5px = セカンダリ（Add to Cart, Subscribe）— やわらかさを残す
50% = ページネーション — 円形の補助要素
05 / Cards

Card Components

Gallery Backpack

A4 サイズ対応のシンプルなバックパック。フルグレインレザーの滑らかな質感と、内部の整理ポケットが特徴。ビジネスにもカジュアルにも。

View Details

Craftsmanship

職人の手仕事と現代のテクノロジーを融合。イタリアンレザーを日本の工房で仕立て、経年変化を楽しめるプロダクトに仕上げます。

Read More

Sustainability

長く使えるものを、丁寧につくる。修理対応とリサイクルプログラムで、プロダクトのライフサイクル全体に責任を持ちます。

Our Approach
06 / Forms

Form Elements

Newsletter Signup
Subscribe
border: #e8e8e1 (warm) / radius: 0px
border: #707070 (brand gray)
有効なメールアドレスを入力してください
border: var(--danger)
07 / Elevation

Depth & Elevation

Level 0: Flat
ボーダーのみ / ギャラリー基調
Elevation 1
0 1px 4px rgba(0,0,0,0.06)
Elevation 2
0 4px 16px rgba(0,0,0,0.08)
Elevation 3
0 12px 32px rgba(0,0,0,0.10)
ミニマルなフラットデザインが基調。影はホバー時のインタラクションフィードバックに限定。静的な状態ではボーダーのみで階層を表現。
08 / Layout

Spacing & Radius

Spacing Scale (8px base)
4
8
12
16
24
32
48
64
80
Border Radius
0px
主要 CTA
3px
Email btn
4px
Outline btn
5px
Add to Cart
50%
Pagination
Content Widths
Max Content 1200px
Product Grid 940px
Article Body 680px