Harbor：エンタープライズ B2B デザインシステム

Web · ライト · ミニマル · SaaS

Harbor

ネイビー、余白、安定した構成。本格的な B2B プロダクトのために。

Harbor は、退屈にならずに信頼感を出します。クールなブルーグレーのページ、主なアクションにはネイビー、フォーカスとデータには明るいブルー、そして現代的でありながら落ち着いた声の Plus Jakarta Sans。長い機能紹介ページ、比較表、セキュリティのセクションも無理なく収まります。

プレビュー

下のトークンから、このシステム自身のフォントでリアルタイムに描画しています。

2026 年の新機能計画も、リリースも、計測も、ひとつの場所で

小さなチームのための、落ち着いたワークスペース。必要な数字はすべて、不要なものは何もなく。

無料で始めるデモを予約

アクティブユーザー12,480

売上$48.2k

継続率86%

チームを招待仕事用メールアドレスyou@company.comロール編集者 ▾招待を送信

最近の注文顧客ステータス金額Ada Park支払い済み$1,240Lukas Weber保留中$380Mei Chen返金済み$96

プロジェクトで使う

これを Codex か Claude Code に貼り付けてください。エージェントが仕様を DESIGN.md として保存し、以降はそれに従います。

このプロジェクトでは Harbor デザインシステムを使います。仕様は https://codexdesign.io/ja/design-systems/harbor.md にあります。プロジェクトのルートに DESIGN.md として保存し、これからはすべての画面でそれに従ってください。

トークン

カラー

ライトテーマ

background#F6F8FBoklch(0.978 0.005 258.324)
foreground#0F1B2Doklch(0.221 0.039 258.275)
card#FFFFFFoklch(1 0 0)
card-foreground#0F1B2Doklch(0.221 0.039 258.275)
popover#FFFFFFoklch(1 0 0)
popover-foreground#0F1B2Doklch(0.221 0.039 258.275)
primary#13294Boklch(0.283 0.069 258.854)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#E6ECF5oklch(0.941 0.014 258.346)
secondary-foreground#13294Boklch(0.283 0.069 258.854)
muted#EDF1F7oklch(0.957 0.009 258.336)
muted-foreground#526077oklch(0.486 0.041 260.276)
accent#E3EAF4oklch(0.935 0.015 257.198)
accent-foreground#0F1B2Doklch(0.221 0.039 258.275)
destructive#B42318oklch(0.5 0.182 29.513)
border#D9E1ECoklch(0.907 0.017 256.285)
input#C8D2E0oklch(0.86 0.022 256.739)
ring#2F6FD6oklch(0.557 0.172 259.651)
chart-1#13294Boklch(0.283 0.069 258.854)
chart-2#2F6FD6oklch(0.557 0.172 259.651)
chart-3#18A0A0oklch(0.641 0.105 194.845)
chart-4#E0A43Aoklch(0.758 0.137 77.684)
chart-5#8A63D2oklch(0.591 0.165 297.305)

ダークテーマ

background#0B1320oklch(0.186 0.029 259.81)
foreground#E6ECF5oklch(0.941 0.014 258.346)
card#111B2Coklch(0.222 0.037 260.614)
card-foreground#E6ECF5oklch(0.941 0.014 258.346)
popover#111B2Coklch(0.222 0.037 260.614)
popover-foreground#E6ECF5oklch(0.941 0.014 258.346)
primary#7FA8F0oklch(0.731 0.114 261.239)
primary-foreground#0B1320oklch(0.186 0.029 259.81)
secondary#1A2639oklch(0.267 0.04 259.345)
secondary-foreground#E6ECF5oklch(0.941 0.014 258.346)
muted#152034oklch(0.244 0.042 261.771)
muted-foreground#8F9DB3oklch(0.692 0.036 259.404)
accent#1D2A40oklch(0.284 0.045 260.568)
accent-foreground#E6ECF5oklch(0.941 0.014 258.346)
destructive#F97066oklch(0.709 0.17 26.471)
border#24324Aoklch(0.316 0.047 260.838)
input#2C3B55oklch(0.351 0.05 261.08)
ring#7FA8F0oklch(0.731 0.114 261.239)
chart-1#7FA8F0oklch(0.731 0.114 261.239)
chart-2#4FC3C3oklch(0.752 0.103 195.179)
chart-3#F0C26Eoklch(0.838 0.115 81.184)
chart-4#B79BF0oklch(0.746 0.123 298.536)
chart-5#E6ECF5oklch(0.941 0.014 258.346)

フォント

見出し: Plus Jakarta Sans · 700
本文: Plus Jakarta Sans · 400
等幅: JetBrains Mono

タイプスケール

display · 60/1.05 · -0.025emデザインで、画面はもっと使いやすくなる
h1 · 40/1.1 · -0.02emデザインで、画面はもっと使いやすくなる
h2 · 28/1.2 · -0.01emデザインで、画面はもっと使いやすくなる
h3 · 20/1.3デザインで、画面はもっと使いやすくなる
body · 16/1.55デザインで、画面はもっと使いやすくなる
small · 13/1.45デザインで、画面はもっと使いやすくなる

角の半径、余白、影

角の半径sm 4pxmd 6pxlg 8pxxl 12px

余白xs 4pxsm 8pxmd 16pxlg 24pxxl 48px

影低く広がるやわらかな影。カードとシートにだけ使います。

レイアウト

最大幅: 1280px
本文の幅: 70ch
カラム: 12
ガター: 24px

向いている用途

B2B SaaS とエンタープライズソフトウェア
コンサルティングとプロフェッショナルサービス
物流、保険、銀行のサイト
投資家向け・パートナー向けのページ

やること・やらないこと

抽象的なイラストではなく、本物のスクリーンショットでプロダクトを見せる。
主張は顧客ロゴ、数字、導入事例で裏づける。
明るいブルーをネイビーのプライマリボタンと競わせない。
料金や営業への連絡先を、何クリックも先に隠さない。