Nordic：北欧風 SaaS デザインシステム

Web · ライト · やわらか · SaaS · 生産性

Nordic

落ち着いたブルー、やわらかなグレー、静かな自信。生産性ツールのために。

Nordic は、北欧らしい控えめさをソフトウェアに持ち込みます。ほぼ白のページ、アクションにはくすんだフィヨルドブルー、補助色にやわらかなシーグリーンとハニー、そして読みやすいサイズの Manrope。何も主張しすぎないので、長い機能紹介ページも、情報の多い設定画面も、目にやさしいままです。

プレビュー

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

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

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

無料で始めるデモを予約

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

売上$48.2k

継続率86%

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

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

プロジェクトで使う

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

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

トークン

カラー

ライトテーマ

background#FBFBFAoklch(0.988 0.001 106.423)
foreground#1D2125oklch(0.245 0.01 248.22)
card#FFFFFFoklch(1 0 0)
card-foreground#1D2125oklch(0.245 0.01 248.22)
popover#FFFFFFoklch(1 0 0)
popover-foreground#1D2125oklch(0.245 0.01 248.22)
primary#3A5BA0oklch(0.481 0.118 263.376)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#EDF0F5oklch(0.954 0.007 260.732)
secondary-foreground#1D2125oklch(0.245 0.01 248.22)
muted#F1F2F4oklch(0.961 0.003 264.542)
muted-foreground#5C636Boklch(0.496 0.015 251.687)
accent#ECEEF2oklch(0.949 0.006 264.532)
accent-foreground#1D2125oklch(0.245 0.01 248.22)
destructive#B93A32oklch(0.533 0.165 27.691)
border#E2E5EAoklch(0.921 0.008 260.732)
input#D3D8DFoklch(0.88 0.011 256.7)
ring#3A5BA0oklch(0.481 0.118 263.376)
chart-1#3A5BA0oklch(0.481 0.118 263.376)
chart-2#5E9C8Foklch(0.647 0.068 179.163)
chart-3#C98A3Eoklch(0.683 0.119 68.299)
chart-4#9A6FB0oklch(0.61 0.107 313.712)
chart-5#C25E6Eoklch(0.607 0.129 11.672)

ダークテーマ

background#131619oklch(0.198 0.008 248.212)
foreground#E9ECEFoklch(0.942 0.005 247.879)
card#191D21oklch(0.228 0.01 248.257)
card-foreground#E9ECEFoklch(0.942 0.005 247.879)
popover#191D21oklch(0.228 0.01 248.257)
popover-foreground#E9ECEFoklch(0.942 0.005 247.879)
primary#8EA9E0oklch(0.735 0.086 264.147)
primary-foreground#131619oklch(0.198 0.008 248.212)
secondary#22272Coklch(0.27 0.012 248.263)
secondary-foreground#E9ECEFoklch(0.942 0.005 247.879)
muted#1D2126oklch(0.246 0.011 254.046)
muted-foreground#959DA6oklch(0.692 0.016 251.217)
accent#242A30oklch(0.282 0.014 248.322)
accent-foreground#E9ECEFoklch(0.942 0.005 247.879)
destructive#F28A82oklch(0.743 0.128 25.246)
border#2A3036oklch(0.306 0.014 248.274)
input#333A41oklch(0.345 0.016 248.276)
ring#8EA9E0oklch(0.735 0.086 264.147)
chart-1#8EA9E0oklch(0.735 0.086 264.147)
chart-2#8CC7BAoklch(0.785 0.064 179.312)
chart-3#E6B46Eoklch(0.801 0.105 74.641)
chart-4#C3A2D6oklch(0.759 0.081 312.997)
chart-5#E6939Foklch(0.751 0.101 10.369)

フォント

見出し: Manrope · 700
本文: Manrope · 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 8pxmd 10pxlg 12pxxl 16px

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

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

レイアウト

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

向いている用途

生産性・コラボレーション SaaS
ノートとプランニングのツール
プロダクトのマーケティングサイト
ヘルプセンターとオンボーディング

やること・やらないこと

スクリーンショットのまわりに、たっぷり余白をとる。
アイコンは細い線の単色にする。
くすんだ配色の隣に、彩度の高いブランドカラーを置かない。
影を重ねない。やわらかな 1 段階で十分。