少ない色で、強い表現を。
カラーは Airbnb 公式の Rausch(赤)と Hof / Foggy(グレー)のみ。 フォントは Cereal / Circular / Inter / Noto Sans JP のスタックで、自社書体が 読めない環境でも近似表示にフォールバックします。
主役は Rausch ひとつだけ
Airbnb のブランドカラー Rausch(HSL 359° 100% 68%)を主役に、明度を振った スケールで全 UI を構成します。CTA・リンクの強調・小さなアクセントすべてこの 1 系統。
グレースケール
Airbnb のテキスト 2 色(Hof #222 = メイン、Foggy #717171 = 補助)と、 divider・border 用の中間色だけで足ります。
タイポグラフィ
欧文は 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
body · fluid 15 → 17px / 400
Google マップ、口コミ、ChatGPT や Gemini などの AI 検索。店舗の「見つけられ方」を一つの戦略で運用代行します。
ボタン
Variants
Sizes(min-h 40 / 48 / 56px)
カード
クリニック
AI 検索で「指名される医院」へ。
ホバーで持ち上がる
shadow ではなく -translate-y-0.5 で軽さを出します。
暗色カード
強調・CTA 用。
ソフトカード
同セクション内の入れ子に。
ゴーストカード
透過 + 線のみ。
Default
白背景 + 細いボーダー。