JRA.GO.JP — DESIGN TOKENS

日本中央競馬会
デザイントークン

このプレビューは DESIGN.md に定義したトークンを可視化したページです。スタイル方針は Modernism（Swiss / International Typographic Style）。実装スタックは静的 HTML + Tailwind CSS v4。参照元は jra.go.jp のトップページ構造です。

FOUNDATIONS / COLOR

ブランドカラー

コーポレートカラーは #007853。大面積で使ってよいのはヘッダーとフッターの 2 箇所だけで、本文領域では primary ボタンと見出しの 4px アンダーラインに限定します。

turf-50#E8F4EF

turf-100#C6E4D6

turf-300#6BB99B

turf-500#12926A

PRIMARY

turf-700#007853

turf-900#004E36

turf-1000#002D1F

FOUNDATIONS / NEUTRAL & SIGNAL

ニュートラルとシグナル

使用比率の目安は paper 70% / ink 20% / rule 7% / turf 2% / signal 1%。ink-400 は 3.5:1 のため本文・リンクには使いません。

トークン	値	対 paper	用途
ink-900	#0A0A0A	19.8:1	本文
ink-600	#4A4A4A	8.9:1	補助テキスト
ink-400	#8C8C8C	3.5:1	ラベル・非活性のみ
rule	#D4D4D4	—	1px 罫線
fill	#F4F4F4	—	ユーティリティ帯・行ホバー
signal-600	#D81920	5.4:1	GⅠ・締切・発走変更

FOUNDATIONS / COLOR — CONVENTION

枠番カラー

意匠ではなく競馬の規約なので値を変えません。表示は 20px の正方形・角丸なし。色だけで意味を伝えないため、必ず馬番の数字を併記します。

1#FFFFFF

2#1A1A1A

3#E60012

4#0068B7

5#F6AA00

6#009944

7#F39800

8#E85298

FOUNDATIONS / TYPOGRAPHY

タイプスケール

1.333（Perfect Fourth）。中間段を意図的に持ちません。和文は Noto Sans JP の 400 / 700 の 2 ウェイトのみ。見出しは負の字間 + palt、本文はベタ組で letter-spacing: .04em。

h1 · 48px / 1.05 / -0.02em今週の重賞

h2 · 28px / 1.2 / -0.02emエルムステークス

h3 · 20px / 1.35 / -0.01em札幌競馬場ダート1700m

body · 15px / 1.75 / .04em中央競馬は全国10か所の競馬場で、原則として土曜・日曜に開催されます。発走時刻・馬場状態・オッズは開催当日に随時更新されるため、一覧性を損なわない情報設計が求められます。

note · 13px / 1.6 / .04em※ 発走時刻は変更となる場合があります。最新の情報は当日の開催情報をご確認ください。

num-lg · 36px / Archivo15:25 2.4

num-md · 18px / Archivo11R 5 57.0

和文フォントスタック

"Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif

欧文・数字スタック

"Archivo", "Helvetica Neue", Arial, sans-serif ／数字要素には明示指定する

禁則処理

line-break: strict;
overflow-wrap: anywhere;
text-wrap: pretty;（見出しは balance）

COMPONENT / BUTTON

ボタン

高さ 44px（タップターゲット下限）／横 padding 24px ／ radius 0。緑地の上では緑ボタンが沈むため on-brand に反転します。

フォーカス状態

緑地の上：

COMPONENT / RACE TABLE

出馬表・オッズ

ゼブラストライプは使いません。区切りは 1px の罫線のみ、thead の下端だけ 2px の黒罫。数値列はすべて tabular-nums。

札幌11R エルムステークス GⅢ ／ダート1700m ／発走 15:25
馬番	馬名	騎手	斤量	単勝
5	サンライズホープ	松若風馬	57.0	2.4
7	ペプチドナイル	藤岡佑介	56.0	4.1
9	ケイアイパープル	武豊	57.0	6.8
12	メイショウハリオ	浜中俊	58.0	8.2

COMPONENT / LIST & CARD

ニュースとカード

カテゴリはバッジ化せずプレーンテキストで組みます。カードは角丸・影なしの外周 1px 罫線のみ。

即PATインターネットで馬券を購入 UMACAキャッシュレス投票指定席予約競馬場の座席を事前に確保ライブ配信レース映像を無料で視聴

FOUNDATIONS / SPACING, GRID, ELEVATION

余白・グリッド・深度

縦方向の余白は 6 値のみ

グリッド

12 カラム / gutter 24px / コンテンツ幅 1280px / 外側マージン 32px（lg 未満 20px）

ブレークポイント

480 / 768 / 1024 / 1280

深度（Elevation）

box-shadow は使用しない。浮きは 1px solid #0A0A0A で表現する

浮きの表現例

メガメニュー・モーダルはこの黒罫 1px。影は付けない

CONVENTION / DO & DON'T

Do & Don't

本文は 15px / lh 1.75 / ls 0.04em
見出しは負の字間 + palt
和文ウェイトは 400 と 700 の 2 段階
数値はすべて tabular-nums
面の分離は 1px 罫線で行う
緑地の上のボタンは白地に反転
タップターゲットは 44×44px 以上
Focus は 2px outline + offset 2px

DON'T

box-shadow を使わない
角丸を使わない（pill タグのみ例外）
グラデーション背景を使わない
和文に 500・600 を使わない
本文に palt を掛けない
テーブルにゼブラを敷かない
グレードを塗りバッジにしない
スクロール連動のフェードインを使わない

日本中央競馬会デザイントークン