Design System Preview
Soup Stock Tokyo

DESIGN.md から抽出したデザイントークンのカタログ。明朝体と広い字間が織りなす、温かくミニマルな世界観を可視化。computed style 実測値に基づく。


01 / Colors

カラーパレット

Text
Text Primary
#333333
本文・見出し(純黒不使用)
Text Secondary
#999999
補足・カテゴリ・日付
Pagination Active
#666666
ページネーション・中間色
Surface & Background
Background
#ffffff
ページ背景
Surface Light
#f8f8f8
セクション背景
Footer BG
#333333
フッター背景
Border & Divider
Border
#cccccc
ボタン・フォーム枠線
Divider
#e0e0e0
区切り線
Card Border
#eeeeee
カード間の微細な境界

02 / Typography

タイポグラフィ階層

世の中の体温をあげる
Display (h1) — Ryumin / 40px / 400 / line-height: 1.5 / letter-spacing: 0.15em / palt: onhero
今週のスープのこと
Heading 2 — Ryumin / 24px / 400 / line-height: 1.5 / letter-spacing: 0.15em / palt: onsection
東京ボルシチ
Heading 3 (Card) — Ryumin / 18px / 400 / line-height: 1.5 / letter-spacing: 0.05emcard
オマール海老のビスクが新登場いたしました。
Heading 3 (News) — Ryumin / 14px / 400 / line-height: 1.8 / letter-spacing: 0.05emnews list
スープは、毎日の食卓に温もりを届けるためのもの。季節の食材をていねいに選び、素材の力を引き出す調理法でひとつひとつ仕上げています。一口飲むと、からだの奥からじんわりと温かくなる。そんなスープをお届けしたいと考えています。
Body (Ryumin) — 16px / 400 / line-height: 1.8 / letter-spacing: 0.15emarticle
素材の力を引き出す調理法で、ひとつひとつていねいに仕上げたスープをお届けします。
Lede — sans-serif / 16px / 400 / line-height: 2.5 / letter-spacing: 0.15emlede
SEASONAL MENU
Category — sans-serif / 12px / 400 / line-height: 1.5 / letter-spacing: 0.15emcategory label
MENU  STORY  SHOP  ONLINE SHOP
Nav Link — Ryumin / 10.48px / 400 / line-height: 1.5 / letter-spacing: 0.15emnavigation
2024.12.15
Date — Times New Roman / 14px / 400 / line-height: 1.5 / letter-spacing: normaldate
ReadMore
ReadMore — Ryumin / 14px / 400 / letter-spacing: normallink

記事ページの組版サンプル

STORY

スープのある一日のこと

2024.12.15

朝の光が差し込むキッチンで、ゆっくりとスープを温める。それだけで、一日の始まりが少しだけ豊かになる。

素材のこと

わたしたちが大切にしているのは、素材そのものの力です。旬の野菜をていねいに選び、時間をかけて煮込むことで、食材が持つ本来の甘みや香りを引き出します。化学調味料に頼らず、素材の声に耳を傾ける。それが Soup Stock Tokyo のスープづくりの原点です。

季節とともに

春には新たまねぎのポタージュ、夏にはガスパチョ、秋には栗のスープ、冬にはオマール海老のビスク。季節の移ろいとともにメニューが変わる。それは、自然のリズムに寄り添いたいという、わたしたちの願いでもあります。

ReadMore →

04 / Buttons

ボタンバリエーション

文字サイズ
Outline (Accessibility)
ReadMore
Text Link + Arrow

Note: Soup Stock Tokyo は派手な CTA ボタンを持たない。インタラクションの誘導は、明朝体のテキストリンクと矢印(→)で行う。


05 / Cards

カードコンポーネント

soup photo
SEASONAL MENU

東京ボルシチ

ビーツの甘みと酸味が溶け合う、Soup Stock Tokyo の定番。サワークリームを添えて。

soup photo
GRAND MENU

オマール海老のビスク

オマール海老の殻を贅沢に使い、濃厚な旨みを引き出した看板スープ。

soup photo
SEASONAL MENU

とうもろこしとさつま芋のスープ

夏の太陽を浴びたとうもろこしの甘さと、さつま芋のやさしい味わい。


06 / Forms

フォーム要素

デフォルト — border: #cccccc, radius: 4px
フォーカス — border: #333333
正しいメールアドレスを入力してください
エラー — border: #c0392b

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし。標準状態
Surface Light
#f8f8f8 面でセクション分割
Footer Dark
#333333 面で対比
Divider
#e0e0e0 の区切り線

Soup Stock Tokyo はドロップシャドウを使わない。深度は面色の切り替え(白 / ライトグレー / ダーク)と区切り線で表現する。


08 / Layout

スペーシング & コンテンツ幅

Spacing Scale
4px
8px
16px
32px
64px
120px
Content Widths
Max Container ~1000px
Article Body ~620px