Phase 0 / UI Showcase · Airbnb tokens

少ない色で、強い表現を。

カラーは Airbnb 公式の Rausch(赤)と Hof / Foggy(グレー)のみ。 フォントは Cereal / Circular / Inter / Noto Sans JP のスタックで、自社書体が 読めない環境でも近似表示にフォールバックします。

Brand color · Rausch #FF5A5F

主役は Rausch ひとつだけ

Airbnb のブランドカラー Rausch(HSL 359° 100% 68%)を主役に、明度を振った スケールで全 UI を構成します。CTA・リンクの強調・小さなアクセントすべてこの 1 系統。

brand-50
brand-100
brand-200
brand-300
brand-500 (Rausch)
brand-600
brand-700
brand-900
Neutral · Hof / Foggy

グレースケール

Airbnb のテキスト 2 色(Hof #222 = メイン、Foggy #717171 = 補助)と、 divider・border 用の中間色だけで足ります。

white
ink-50
ink-100 (border)
ink-200 (divider)
ink-300
ink-500 (Foggy)
ink-700
ink-900 (Hof)
Typography

タイポグラフィ

欧文は Cereal → Circular → Inter、和文は Noto Sans JP にフォールバック。 見出しは letter-spacing: -0.02em ぐらいまで詰めて Airbnb の印象に寄せています。

.text-display-h1 · clamp 32 → 68px / 800

家のように、見つけられる店へ。

.text-display-h2 · clamp 24 → 42px / 800

単発の施策ではなく、運用へ。

.text-display-h3 · clamp 18 → 22px / 700

Googleマップ、ChatGPT、口コミ。

body · fluid 15 → 17px / 400

Google マップ、口コミ、ChatGPT や Gemini などの AI 検索。店舗の「見つけられ方」を一つの戦略で運用代行します。

Buttons

ボタン

Variants

Sizes(min-h 40 / 48 / 56px)

Cards

カード

業界

クリニック

AI 検索で「指名される医院」へ。

Interactive

ホバーで持ち上がる

shadow ではなく -translate-y-0.5 で軽さを出します。

Ink card

暗色カード

強調・CTA 用。

Soft

ソフトカード

同セクション内の入れ子に。

Outline

ゴーストカード

透過 + 線のみ。

標準

Default

白背景 + 細いボーダー。

Badges

バッジ

RauschInkSoftOutlinesmallsmall ink
Section tone = ink

最後の一押しに、暗色セクション。

ページ全体は白基調、CTA 直前で 1 度だけ暗くする。color = 強調の希少資源として扱います。

資料を見る