Design System Preview
tabelog.com

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

エリアから探す DESIGN.md を読む
01 / Colors

カラーパレット

Brand
食べログオレンジ
#f09000
ブランド・スコア
Primary Dark
#d07e00
ホバー・プレス
Text
Heading
#333333
見出し・店名
Text Primary
#595960
本文テキスト
Text Secondary
#999999
補足・メタ情報
Text Disabled
#cccccc
無効状態
Semantic
Success
#339933
成功・営業中
Danger
#cc3333
エラー・削除
Warning
#f09000
警告・注意
Score
Score High
#f09000
高評価 (3.5+)
Score Mid
#996600
中評価
Score Low
#666666
低評価・未評価
Surface & Border
Background
#ffffff
ページ背景
Background Secondary
#f5f5f5
セクション背景
Border
#dddddd
区切り線
Border Strong
#cccccc
入力欄の枠
02 / Typography -- computed style 実測値

タイポグラフィ階層

エリアから探す -- Section Heading (h2)
22.5px / 600 / line-height: 22.5px (x1.0) / palt: なしトップページ
閲覧履歴 -- Sub Heading (h2)
14px / 600 / line-height: 19.6px (x1.4) / palt: なしサイドバー
全国のグルメ・レストランガイド 食べログ -- Page Title (h1)
12px / 700 / line-height: 12px (x1.0) / palt: なしヘッダー
本文テキスト -- body のデフォルトスタイル。メイリオを日本語名で先頭に指定し、12px / line-height 1.4 の高密度な情報設計。食べログでは一覧性を重視し、コンパクトなテキストサイズで多くの店舗情報を表示します。
12px / 400 / line-height: 16.8px (x1.4) / letter-spacing: normal / palt: なし本文
3.72
16px / 700 / line-height: 1.2 / color: #f09000評価スコア
補足テキスト -- Caption (10px)
10px / 400 / line-height: 14px (x1.4) / color: #999注釈
03 / Rating -- レーティングUI

評価スコア・レーティング

総合評価サンプル
3.72
★ ★ ★ ★ ★
( 128件 )
5
19
4
51
3
38
2
15
1
5
スコア色分け
4.21高評価
3.15中評価
--未評価
口コミサンプル
U
グルメ太郎
2026/03 訪問
★ 4.2
久しぶりに訪問しました。いつも通り安定したクオリティで、特に季節の魚を使った刺身盛り合わせが絶品でした。接客も丁寧で、予約なしでもカウンター席に案内してもらえました。コスパも良く、また近いうちに再訪したいと思います。
料理・味 4.5
サービス 4.0
雰囲気 3.8
CP 4.5
酒・ドリンク 4.0
04 / Buttons

ボタンバリエーション

お店を探す
Primary CTA
条件を変更
Outline
削除する
Danger
Score Badge
ネット予約
Success CTA
05 / Cards -- 店舗カード

店舗一覧カード

鮨 さいとう

3.97

六本木の隠れ家的寿司店。厳選されたネタと職人の技が光る江戸前鮨。完全予約制で、カウンター8席のみの特別な空間。

寿司 六本木 個室あり
東京都 港区 / 夜: ¥30,000〜 / 128件の口コミ

トラットリア・ダル・ビルバンテ・ジョコンド

3.58

本格的なイタリアンを気軽に楽しめるトラットリア。自家製パスタと窯焼きピッツァが自慢。ワインリストも充実。

イタリアン 渋谷 ランチ営業
東京都 渋谷区 / 夜: ¥6,000〜 / 85件の口コミ

麺屋 一燈

3.81

新小岩の名店。鶏と魚介のWスープが特徴のつけ麺は、濃厚ながらも後味すっきり。チャーシューも低温調理で絶品。

ラーメン 新小岩 行列
東京都 葛飾区 / 夜: ¥1,000〜 / 312件の口コミ
06 / Forms

フォーム要素

デフォルト -- border: #cccccc, radius: 3px, height: 30px
フォーカス -- border: #f09000
エラー -- border: #cc3333
07 / Elevation

Depth & Elevation

Level 0: Flat
影なし、ボーダーのみ（基本）
Level 1
0 1px 3px rgba(0,0,0,0.12) / ドロップダウン
Level 2
0 2px 6px rgba(0,0,0,0.15) / モーダル
Focus Ring
#f09000 (食べログオレンジ)
08 / Spacing

スペーシングスケール

4px
8px
12px
16px
24px
32px
09 / Layout

コンテンツ幅

Container 980px
Main Column 680px
Side Column 280px