Design Guide
デザインガイド
このページは各画面で使っている共通部品を確認するための実装ベースのカタログです。
Theme Colors
Primary Blue
#3f6fbbロゴとナビ、主要見出し、強調線に使用。
On Primary
#ffffffPrimary 背景上の文字色、アイコン、主要CTAラベル。
Accent Orange
#e36b2cロゴの山形に由来するCTA用アクセント。
On Accent
#ffffffAccent 背景上の文字色と補助CTAラベル。
Page Background
#3f6fbb現行トークン上の背景色。セクションやカードは白で分離する。
Card Surface
#ffffffカード、本文、ページヘッダーの背景。
Text
#1d2a44本文と主要テキスト。
Muted Text
#000000補足説明、日付、メタ情報。
Border
#ffffff大会設定で上書きされることがある境界線用トークン。
Typography
KATASHINA MOUNTAINS SERIES
HOTAKA SKYRUN
あの稜線へ
本文は macOS で読みやすい日本語サンセリフを優先し、英字ロゴはオリジナル画像を使用します。見出しは太め、本文は可読性重視です。
Section Heading Hero
Default
共通セクション見出し Section Heading
Top Section
最新のお知らせ News
Schedule Card Heading
大会スケジュール Schedule
Photos Card Heading
フォトギャラリー Photos
Results Card Heading
大会結果 Results
Buttons
記事本文のボタンは Markdown 内で post-buttons を使う。スマホでは1列表示。
Top News Card
2026.03.08
2026年大会の開催概要を公開しました
2026.02.14
エントリー開始日のお知らせ
Entry Components
Current Entry
現在受付中の大会
直近大会のエントリーはこちらから進めてください。
第6回大会過去大会
Schedule Card
大会スケジュール Schedule
画像下の説明文。現在は var(--color-muted) を使っているため黒で表示される。
- 08:00 受付開始
- 天候によりスケジュール変更の可能性があります。
Photos Card
フォトギャラリー Photos
Results Card
大会結果 Results
Generic Cards
Advanced
6/7 SUN
01
レースカード
23 km / 1400 mD+
カード面は白。画像枠も白を基準にし、背景色とは明確に分離する。
DAY 1
会場オープン
日別の要点を短くまとめるカード。スケジュール導線の前段で使う。
Operational Notes
- テーマカラーは
shared/assets/css/tokens.cssを編集する。 - カードやレスポンシブの調整は
shared/assets/css/main.cssを編集する。 - 見出し部品は
shared/layouts/partials/section-heading-hero.htmlを基準にし、ページごとの差分はクラスで吸収する。 - デザインページには実ページで使っているマークアップを優先して載せ、見本専用の分岐は増やしすぎない。