まだ、ここにない、出会い。

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

Colors
カラーパレット
Brand
Brand Primary
#0065bd
リクルートブルー
Brand Secondary
#0e8bd1
セカンダリアクセント
Brand Secondary 2
#37b1de
グラデーション・ホバー
Neutral
Base Dark
#2d3133
本文テキスト
Sub Gray
#838484
補助テキスト・日付
Outline
#d8d8db
ボーダー・区切り線
Base Light
#ffffff
ページ背景
Surface Blue Gray
#f3f5fa
セクション背景面
Overlay & Footer
White Semi
rgba(255,255,255,0.8)
FV コピー背景オーバーレイ
Footer Dark
#2d3133
フッター背景
Semantic
Danger
#e02412
エラー・危険操作
Typography
タイポグラフィ階層 -- 実測値
News — EN Section Title
Inter (Graphik Web) / 36px / 700 / line-height: 1.5 / color: #0065bdセクションタイトル
外食はもっと便利に楽しく
Zen Kaku Gothic New (Tazugane Gothic) / 30px / 400 / line-height: 1.5セクション H2
企業情報
Zen Kaku Gothic New / 28px / 400 / line-height: 1.55セクションリード
本文テキスト — 読みやすさを基本にした組版。line-height: 1.55 の統一的な行間で、コーポレートサイトにふさわしい落ち着いた読書体験を提供します。letter-spacing と palt は適用していません。ABCabc 123
Zen Kaku Gothic New / 15px / 400 / line-height: 1.55 / color: #000000本文
ヘッダーナビゲーション — Nav Animated (12px)
Zen Kaku Gothic New / 12px / 400 / line-height: 2.0ヘッダーナビ
ラベル・キャプション — Small (10px)
Zen Kaku Gothic New / 10px / 400 / line-height: 1.5ラベル
News
ニュースカード -- エディトリアル組版
Buttons
テキストリンク・リンクカード -- 最小限の CTA
詳しく見る →
Text Link (Primary)
一覧を見る →
Text Link (Dark)
企業情報を見る →
Link Card
お問い合わせ
Outline Button
Cards
リンクカード -- ブランドブルー下線アクセント
2026.05.18

テクノロジーで「出会い」を創造する

AIとデータを活用し、一人ひとりに最適な出会いの機会を提供します。

2026.05.15

多様な働き方を支えるプラットフォーム

人材領域で培った知見を活かし、働く人々の可能性を広げます。

2026.05.10

サステナブルな社会の実現に向けて

事業活動を通じた社会課題の解決と持続可能な価値創造に取り組みます。

Forms
フォーム要素
Default -- border: #d8d8db, radius: 4px
Focus -- border: #0065bd (Brand Primary)
正しいメールアドレスを入力してください
Error -- border: #e02412 (Danger)
Elevation
Depth -- フラット + 色面ベース
Flat (Default)
影なし、border: #d8d8db のみ。カードの基本状態
Surface Blue Gray
#f3f5fa 色面で階層を表現
Brand Accent Line
下線 #0065bd でカードを区切る
FV Overlay
rgba(255,255,255,0.8) 半透明面
Layout
レイアウトグリッド
Section Max Width 960px
Section Padding 80px top/bottom, 40px left/right
Card Grid Gap 24px
Nav Height 64px
Background Alternation
#ffffff
#f3f5fa
#ffffff
#f3f5fa
白と #f3f5fa を交互に配置してセクション階層を表現