文化を喫する、
入場料のある本屋。

DESIGN.md から抽出したデザイントークンのカタログ。カラー、タイポグラフィ、コンポーネント、スペーシングの全値を可視化。computed style 実測値に基づく。

文喫の楽しみ方 店舗を探す
Colors
配色
Brand
Apricot
#fdeadf
主色。全 CTA ピルの面 ＋ フッター帯
Forest
#34806f
第 2 色。記事への遷移＝アウトラインピル
Neutral
Ink
#000000
見出し・CTA の文字・枠線。純黒を使う
Body Ink
#28292b
body の既定文字色
Muted
#5d5d5d
住所・注記・キャプション
Background
#ffffff
ページ地色。純白
Surface
#f4f4f4
実用情報ブロックの面
Typography
組版
文喫の楽しみ方
44px / 400 / line-height: 1.25 (55px) / letter-spacing: 0.512pxh1 — 見出しも 400 のまま
文化を喫する、入場料のある本屋。
36px / 400 / line-height: 1.6 (57.6px) / letter-spacing: 0.512pxリード（h2）
Store / How to use / Information
Bookman Old Style（代替 Bitter）/ 24px / 400 / line-height: 1.5 / letter-spacing: -0.48px (-0.02em)欧文ラベル — 唯一の負の字間
読書・ワークなど目的にあわせた滞在
24px / 400 / line-height: 1.6 (38.4px) / letter-spacing: 0.512pxh3
読み物本文 — 文喫の店舗には、どなたも気軽に立ち寄っていただける無料エリアと、入場料をお支払いいただくことで一日じっくり過ごせるエリアがあります。読み物ブロックだけ line-height を 1.6 から 1.75 に広げます。
18px / 400 / line-height: 1.75 (31.5px) / letter-spacing: 0.512px読み物本文
新企画「文喫復刻選書」始動　第1弾は吉本隆明『言葉からの触手』
18px / 700 / line-height: 1.6 (28.8px) / letter-spacing: 0.512pxニュースカード — 700 が出る唯一の箇所
本文テキスト — body に font-feature-settings: "palt" と letter-spacing: 0.512px が掛かり、全要素に継承されます。約物「」（）、。を palt で詰めた上で、一律の px を足して開き直す二段構えです。
16px / 400 / line-height: 1.6 (25.6px) / letter-spacing: 0.512px (0.032em)本文の基準
東京都港区六本木6-1-20 六本木電気ビルディング1F
14px / 400 / line-height: 1.5 (21px) / letter-spacing: 0.512px / #5d5d5d住所（メタ）
※こちらはイメージ図です。詳しいエリアの情報は下記の店舗ページをご確認ください。
12px / 400 / line-height: 1.6 (19.2px) / letter-spacing: 0.512px / #5d5d5dキャプション

縦組み — セクション見出しと本文コピー

Store
店舗
30px / 400 / ls 31.5px (1.05em)
writing-mode: vertical-rl
border-left: 1px solid #000
自由で楽しい、みんなの居場所です。
16px / lh 2.4 / ls 0.512px
height 固定で行数を制御
Store
店舗
文喫 六本木
東京都港区六本木6-1-20 六本木電気ビルディング1F　MAP
詳しくみる

スペースのご利用について

文喫では、イベント・パーティー、撮影利用での店舗貸切や、企業さまとの共同企画を承っています。実用情報のブロックだけ面（#f4f4f4）を敷いて横組みにし、詩的な部分（縦組み）と書式で分けます。

お問い合わせ
Buttons
操作
文喫の楽しみ方
Primary（大）— padding 9.6/40/12
店舗を探す
Primary（小）— padding 3.5/16.8/5.6
詳しくみる
Outline（深緑）— 記事への遷移
MAP
Chip — 面を持たない最小のピル

すべて border-radius: 38px。塗りピルにも 1px solid #000000 の枠を付ける（塗りと輪郭をセットで持たせる）。padding は上下非対称で、下を上より 2.4px 厚くする——和文の字面が視覚的に中央へ来るための補正。ボタンだけ letter-spacing: normal に戻す。

Information
お知らせ
2026.08.01

新企画「文喫復刻選書」始動　第1弾は吉本隆明『言葉からの触手』

詳しくみる
2026.07.18

文喫 栄が「NIKKEI OFFICE PASS AWARD」を受賞しました

詳しくみる
2026.06.30

「BUNKITSU TOKYO」がオープンしました

詳しくみる
一覧を見る

カードは border-radius: 0px。ピル（38px）とカード（0px）の対比を保つ。区切りは 1px の横罫だけで、枠も影も付けない。

Forms
入力
デフォルト — 1px solid #000000 / radius 38px / padding 9.6px 24px 12px（ボタンと同じ非対称）
フォーカス — border: #34806f（深緑）
エラー — border: #b34a3a（実装目安。アプリコットの濃版に寄せる）
Textarea だけ radius 8px（ピルにすると複数行が入らない）
Elevation
階層
地 #ffffff
ページ全体
面 #f4f4f4
実用情報のセクション
面 #fdeadf
CTA・フッター帯
線 #34806f
深緑アウトライン（1px）

box-shadow はサイト内に 1 つも存在しない。奥行きは面色 3 段（白 / #f4f4f4 / #fdeadf）と 1px 罫だけで作る。

Layout
寸法
XS 6.4
S 12.8
M 20
L 40
XL 51.2
XXL 80
XXXL 118
Main Container 1320px
Article 720px 目安

セクションの間に 300〜500px の余白を置く。1 画面にセクションを 2 つ入れない。