Colors
01 — 白地に藍。有彩色はバッジ4色と藍系だけ
Base
Background
#ffffff
Ink
#121212
Ink Black
#000000
Text Muted
#555555
Text Caption
#787878
Text Sub
#676767
Indigo(藍)
Navy
#1a1a41
Indigo(塗りCTA)
#4d4d77
Indigo Border
#6c6c84
Indigo Text
#717188
Navy Deep
#0f0d3f
Violet Navy
#4b4a86
Badge(商品状態)
新商品
#8b1b18
オリジナル
#1a1a41
在庫限り
#8d654a
再入荷
#e4ab9c
Neutral(罫・面)
Border
#d8d8d8
Border Wide
#d9d9d9
Border Gray
#b4b4b5
Divider Gray
#979797
Overlay
rgba(0,0,0,.05)

商品写真は色数が多いが、UI の有彩色はバッジ4色と藍系だけ。「安い」「セール」的な赤や黄を足さない。

Typography
02 — 明朝が主役。line-height の既定は 1.0、letter-spacing は 0.1em 固定
Logo
ゴシック 28px / 400 / 1.0 / normal
Page Title
明朝 26px / 400 / 1.0 / 0.15em
font-feature-settings: "palt" 0
はじめに
Section Title
明朝 22px / 400 / 1.0 / 0.1em
おしらせ
Lead
明朝 21px / 400 / 1.7 / 0.08em
地域文化商社として、土地性を紐解き流通を担い、交流を生む
Sub Head
ゴシック 21px / 400 / 1.0
地域文化商社として対話を生みたい
Card Title
明朝 16px / 400 / 1.6 / 0.1em
【ステテコ】2026年の柄、いろいろ
List Title
明朝 15px / 400 / 1.6 / 0.1em
江戸注染をまとう浴衣シャツ、丸久商店「ダボシャツ」
Nav
明朝 14px / 400 / 1.0 / normal
つくりて紹介
Article Title
明朝 14px / 400 / 1.7 / 0.1em
【もんぺ巡業・出張 現地レポート】久留米絣のはじまりを訪ねて
Category Label
明朝 12px / 400 / 1.0 / 0.12em
おしらせ一覧
Price
明朝 12px / 700 / 1.0 / 0.08em
19,800円(税込)
Caption
明朝 11px / 400 / 1.8 / 0.1em
[お買い物] 久留米絣のもんぺは、反物の柄をそのまま生かして仕立てています。
Badge
明朝 10px / 700 / 1.0 / 0.04em
新商品 オリジナル 在庫限り 再入荷
EN Heading
Helvetica 38px / 300 / 1.4 / 0.02em
Shopping Guide
EN Body
Helvetica 15px / 400 / 1.7
We are a shop and local enterprise based in Yame, Fukuoka.

ウェイトは 400 と 700 の2値だけ(欧文見出しの 300 が唯一の例外)。700 を使うのは価格とバッジのみ。

Article / Product
03 — 左固定サイドバー + 本文870px の2カラム
[つくりて紹介]

久留米絣のはじまり

福岡県南部、筑後地方で二百年あまり織り継がれてきた久留米絣は、糸を先に括って染め分け、 織りあがったときに柄が立ちあがる織物です。図案を描き、糸を括り、藍に沈め、 織機に掛ける。工程のほとんどが人の手に残されています。

反物の幅から、もんぺが生まれた

着物のために織られてきた反物は、幅が約36センチ。この幅をそのまま使い切る型として、 わたしたちは「もんぺ」を仕立てています。裁ち落としが出ないこと、 産地の織り機をそのまま生かせること。ふたつが同時に満たされる形でした。

つくりての一覧を見る

Product Grid
新商品product
久留米絣 MONPE いろは / あさがお
19,800円(税込)
オリジナルproduct
UNA PRODUCTS ステテコ 綿麻
9,900円(税込)
在庫限りproduct
丸久商店 ダボシャツ 江戸注染
14,300円(税込)
再入荷product
八女の手漉き和紙 便箋
1,320円(税込)
Buttons
04 — 用途ごとに角丸を変える(塗り 4px / ピル 20px / 小 2px / 全幅 0px)
Filled(塗りCTA)
写真一覧から探す
Outline Pill
おしらせ一覧 企画展一覧 全カテゴリから探す
Outline Tiny
一覧へ
Wide Outline(角丸ゼロ)
企画展・店休日カレンダー
On Dark Surface(サイドドロワー)
カテゴリから探す 全て

塗りのCTAは藍 #4d4d77 の1種のみ。padding が「20px 0 18px 2px」と上下だけ厚いのは全幅ブロック前提のため。

Cards
05 — 影なし・枠なし。白地にそのまま置く
feature

【ステテコ】2026年の柄、いろいろ

今年のステテコは久留米絣・遠州織物・播州織の3産地から。

feature

江戸注染をまとう浴衣シャツ

丸久商店の注染は、生地の両面に色が抜けるのが特徴です。

feature

もんぺ巡業、今年の行き先

全国20会場を回ります。試着してから選べます。

Forms
06 — デフォルト / フォーカス / エラー
全角でご入力ください
フォーカス時は罫線が藍 #4d4d77 に変わる
郵便番号を7桁でご入力ください
Elevation
07 — 影はほぼ使わない。奥行きは罫線と余白でつくる
Level 0 — none既定。カード・ボタン・写真すべて影なし。1px の罫線で区切る。
Level 1rgba(0, 0, 0, 0.1) 2px 6px 10px 0px
浮かせるパネル(ドロワー・ドロップダウン)。
Focusrgb(128, 128, 128) 0px 0px 5px 0px
Layout
08 — 本文870px。サイドバーは常時固定
1440px — フルブリード
870px — 本文カラム(標準)
824px — 記事内の狭い版面
730px — 最も狭い版面
340px — サイドドロワー(固定幅)
Spacing Scale
4
8
20
40
80

ブレークポイントは 600 / 767px(モバイル)と、1300 / 1340 / 1360 / 1380 / 1400 / 1415 / 1439 / 1455px の 「絞り込みラダー」。2カラムを崩さずに幅だけ段階的に削る設計。