Pop：ネオブルータリズムデザインシステム

Web · ライト · 大胆 · 遊び心 · スタートアップ

Pop

太い黒の輪郭線、ハードシャドウ、レモンイエロー。あえてうるさく。

Pop は、お行儀のいいネオブルータリズムです。クリーム色のページ、幅広の Unbounded の見出し、あらゆるものに黒の輪郭線、そしてカードをステッカーのように見せる、ずらしたベタ塗りの影。主張するのはレモンイエローとコーラルで、グリッドと余白は規律を保ちます。

プレビュー

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

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

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

無料で始めるデモを予約

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

売上$48.2k

継続率86%

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

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

プロジェクトで使う

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

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

トークン

カラー

ライトテーマ

background#FFFDF5oklch(0.993 0.011 95.159)
foreground#141414oklch(0.191 0 0)
card#FFFFFFoklch(1 0 0)
card-foreground#141414oklch(0.191 0 0)
popover#FFFFFFoklch(1 0 0)
popover-foreground#141414oklch(0.191 0 0)
primary#141414oklch(0.191 0 0)
primary-foreground#FFE45Coklch(0.917 0.155 97.996)
secondary#FFE45Coklch(0.917 0.155 97.996)
secondary-foreground#141414oklch(0.191 0 0)
muted#F5F1E4oklch(0.958 0.018 92.683)
muted-foreground#5C5A52oklch(0.467 0.013 95.338)
accent#FFF3B0oklch(0.958 0.086 99.199)
accent-foreground#141414oklch(0.191 0 0)
destructive#D62D20oklch(0.57 0.206 29.497)
border#141414oklch(0.191 0 0)
input#141414oklch(0.191 0 0)
ring#141414oklch(0.191 0 0)
chart-1#141414oklch(0.191 0 0)
chart-2#FF6B4Aoklch(0.707 0.187 34.078)
chart-3#3D7EFFoklch(0.622 0.204 262.151)
chart-4#22B573oklch(0.684 0.153 157.451)
chart-5#FFE45Coklch(0.917 0.155 97.996)

ダークテーマ

background#141414oklch(0.191 0 0)
foreground#FFFDF5oklch(0.993 0.011 95.159)
card#1E1E1Eoklch(0.235 0 0)
card-foreground#FFFDF5oklch(0.993 0.011 95.159)
popover#1E1E1Eoklch(0.235 0 0)
popover-foreground#FFFDF5oklch(0.993 0.011 95.159)
primary#FFE45Coklch(0.917 0.155 97.996)
primary-foreground#141414oklch(0.191 0 0)
secondary#2A2A2Aoklch(0.285 0 0)
secondary-foreground#FFFDF5oklch(0.993 0.011 95.159)
muted#222222oklch(0.252 0 0)
muted-foreground#A8A69Coklch(0.724 0.014 97.517)
accent#2E2E2Eoklch(0.301 0 0)
accent-foreground#FFFDF5oklch(0.993 0.011 95.159)
destructive#FF6B5Eoklch(0.709 0.183 27.67)
border#FFFDF5oklch(0.993 0.011 95.159)
input#FFFDF5oklch(0.993 0.011 95.159)
ring#FFE45Coklch(0.917 0.155 97.996)
chart-1#FFE45Coklch(0.917 0.155 97.996)
chart-2#FF8A6Eoklch(0.756 0.148 34.518)
chart-3#6FA0FFoklch(0.713 0.149 262.556)
chart-4#4CD494oklch(0.78 0.15 159.16)
chart-5#FFFDF5oklch(0.993 0.011 95.159)

フォント

見出し: Unbounded · 600
本文: Manrope · 500
等幅: JetBrains Mono

タイプスケール

display · 72/1 · -0.03emデザインで、画面はもっと使いやすくなる
h1 · 48/1.05 · -0.02emデザインで、画面はもっと使いやすくなる
h2 · 30/1.15 · -0.01emデザインで、画面はもっと使いやすくなる
h3 · 20/1.3デザインで、画面はもっと使いやすくなる
body · 17/1.55デザインで、画面はもっと使いやすくなる
small · 14/1.45デザインで、画面はもっと使いやすくなる

角の半径、余白、影

角の半径sm 10pxmd 12pxlg 14pxxl 18px

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

影ハード：インクの色でぼかしなしにずらした影。押すと消えます。

レイアウト

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

向いている用途

スタートアップとインディー製品のローンチ
クリエイター向けツールとサイドプロジェクト
イベント、ハッカソン、コミュニティ
遊び心のある SaaS のマーケティングサイト

やること・やらないこと

すべてのカード、ボタン、入力欄に、同じ黒の輪郭線を付ける。
セクションごとに、目立つ色を 1 色選ぶ。
影をぼかさない。ベタ塗りで、ずらして置く。
パステルのグラデーションやグラスモーフィズムを混ぜない。