MOTHERHOUSE

ONLINE STORE

MOTHERHOUSE (mother-house.jp) から抽出したデザイントークンのカタログ。Lato + 游ゴシック体の欧文先頭フォントシステム、font-feature-settings: normal (palt 未適用)、ミッドグレー CTA #656565、ベージュ #edeadd のナチュラルトーン。見出しに広い letter-spacing (3-5px)。computed style 実測値に基づく。

オンラインストアを見る
01 / COLORS
カラーパレット
Color Palette
PRIMARY
CTA Gray
#656565
CTA ボタン背景・ブランドカラー
Text Charcoal
#121212
最も深いテキスト・ベースカラー
ACCENT
Beige
#edeadd
ステートメント背景・クラフト感
Blue Accent
#377dff
限定的に使用
TEXT
Text Primary
#121212
メインテキスト
Text Dark
#3a3a3a
セクション見出し
Text Medium
#353535
サブ見出し
Text Body
#202020
本文テキスト
Text Secondary
#656565
補足テキスト・ショップ説明
Text Muted
#555555
イベント・タブテキスト
Text on Dark
#ffffff
CTA・カテゴリオーバーレイ上の白テキスト
SURFACE
Surface White
#ffffff
標準背景
Surface Light
#f2f2f2
セカンダリ背景
Surface Divider
#dadada
カテゴリタブ背景
Surface Card
#f5f5f5
カード・フッター背景
Surface Beige
#edeadd
ステートメント背景
BORDER
Border Natural
#dbd9cd
イベントカード枠線・タブ枠線
Border Store
#f8f8f8
「お店を探す」ボタン枠線 (4px)
02 / TYPOGRAPHY
タイポグラフィ
Typography -- Lato + 游ゴシック体 / palt 未適用 / 見出し letter-spacing 広め
WOMEN
Lato + Yu Gothic / 40px / 700 / line-height: 1.8 / letter-spacing: 0.14em (5.6px)Category Overlay
ONLINE STORE
Lato + Arial / 26px / 400 / line-height: 1.19 / letter-spacing: 3pxHeading 2 (section)
SHOP & FACTORY
Lato + Arial / 24px / 400 / line-height: 1.25 / letter-spacing: 5pxHeading 2 (shop)
GOODS
Lato + Arial / 17px / 700 / line-height: 1.8 / letter-spacing: 0.14emCategory Label
NEW TOPICS
Lato + Arial / 12px / 400 / line-height: 1.0 / letter-spacing: 0.1emHeading 3
途上国から世界に通用するブランドをつくる。バングラデシュ、ネパール、インドネシア、スリランカ、ミャンマー、インド。6カ国の素材と職人の手仕事から生まれるバッグやジュエリー。大量生産では届かない、ものづくりの温度を届けます。
Lato + Yu Gothic / 14px / 400 / line-height: 1.75 / letter-spacing: normalBody
東京・銀座をはじめ全国に直営店を展開。バッグの修理工房を併設した店舗も。
Lato + Yu Gothic / 15px / 500 / line-height: 1.47 / letter-spacing: normal / color: #656565Body (shop desc)
バングラデシュの革職人が語る、ものづくりへの想い
Lato + Arial / 14px / 400 / line-height: 1.43 / letter-spacing: 0.6px / color: #656565Article Title
バッグ
Lato / 13px / 400 / line-height: 1.8 / letter-spacing: 0.6pxNav Link
JEWELRY
Lato + Arial / 13px / 400 / line-height: 3.08 / letter-spacing: 2pxHeader Menu
MYPAGE
10px / 700 / line-height: 1.8 / letter-spacing: 0.6pxNav Label
オンラインストアを見る
Lato + Arial / 12px / 600 / line-height: 1.8 / letter-spacing: 1.68px (0.14em)CTA Text
03 / PRODUCT
プロダクト
Product Page Sample -- Bags & Accessories from Developing Countries
BAGS

Zafar アンティークスクエアバックパック

バングラデシュの熟練した革職人が一つひとつ手作業で仕上げるレザーバックパック。上質な牛革に独自のアンティーク加工を施し、使い込むほどに深みを増す風合いが生まれます。A4サイズの書類やノートPCが収まる実用的な容量と、背面のファスナーポケットで日常使いの快適さを両立。

CRAFTSMANSHIP
素材と職人について

バングラデシュは世界有数の皮革産地。マザーハウスの自社工場では、現地の職人たちが伝統的な技法と最新の品質管理を組み合わせ、世界基準のバッグを生み出しています。一つのバッグが完成するまでに、裁断、縫製、仕上げを含む約50の工程を経ます。

詳しく見る
04 / BUTTONS
ボタン
Buttons -- CTA Gray #656565 / radius 2-3px / 12px SemiBold 600 / shadow なし
オンラインストアを見る
Primary CTA / filled #656565 / radius 3px / 600
メールマガジンに登録する
Newsletter CTA / filled #656565 / radius 0 / 600
イベントをさがす
Tab / border #dbd9cd / radius 5px / 400
コラムをよむ
Tab / border #dbd9cd / radius 5px / 400
ダーク背景 (CTA Gray #656565)
お店を探す
Outline / 4px solid #f8f8f8 / radius 0 / 400
詳しく見る
反転 / 白背景 + #656565 テキスト
05 / CARDS
製品カード
Product Cards -- shadow なし / radius 0 / フラット
Product Image
BAGS

Zafar アンティークスクエアバックパック

¥59,400
Made in Bangladesh
Product Image
BAGS

Rinne トートバッグ

¥34,100
Made in Bangladesh
Product Image
JEWELRY

ヨルグラスピアス

¥16,500
Made in Indonesia
Product Image
GOODS

ネパールシルクストール

¥12,100
Made in Nepal
06 / FORMS
フォーム
Forms -- radius 3px / focus: border #121212
デフォルト
正しい電話番号を入力してください
フォーカス状態
07 / ELEVATION
奥行き
Depth & Elevation -- シャドウ一切なし (--media-shadow-opacity: 0.0)、色面コントラストのみ
Level 0 -- White
標準背景。影なし。#ffffff
Level 1 -- Light
セカンダリ面。影なし。#f2f2f2
Level 2 -- Beige
ステートメント面。影なし。#edeadd
Level 3 -- Overlay
半透明オーバーレイ。rgba(255,255,255,0.3)
08 / LAYOUT
レイアウト
Layout -- spacing scale & grid
10px
16px
30px
42px
80px
WHITE #fff
LIGHT #f2f2f2
BEIGE #edeadd