Noir：ダークポートフォリオデザインシステム

Web · ダーク · セリフ体 · ミニマル · ポートフォリオ

Noir

黒、骨のような白、巨大なセリフ体。色は作品だけ。

Noir は色を取り去り、作品に語らせます。黒いページ、ボーンホワイトの文字、名前とプロジェクト名に使う巨大な Instrument Serif、そして直角の画像フレーム。いちばん映えるのはダークモードで、ボーンホワイトのライトモードは印刷物のようなケーススタディに合います。

プレビュー

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

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

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

無料で始めるデモを予約

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

売上$48.2k

継続率86%

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

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

プロジェクトで使う

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

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

トークン

カラー

ライトテーマ

background#F4F2EEoklch(0.962 0.006 84.566)
foreground#0E0E0Eoklch(0.164 0 0)
card#FFFFFFoklch(1 0 0)
card-foreground#0E0E0Eoklch(0.164 0 0)
popover#FFFFFFoklch(1 0 0)
popover-foreground#0E0E0Eoklch(0.164 0 0)
primary#0E0E0Eoklch(0.164 0 0)
primary-foreground#F4F2EEoklch(0.962 0.006 84.566)
secondary#E7E4DEoklch(0.92 0.009 84.574)
secondary-foreground#0E0E0Eoklch(0.164 0 0)
muted#EAE7E1oklch(0.929 0.009 84.574)
muted-foreground#5F5C57oklch(0.476 0.009 80.7)
accent#E2DFD8oklch(0.904 0.01 87.475)
accent-foreground#0E0E0Eoklch(0.164 0 0)
destructive#A3261Doklch(0.472 0.163 28.986)
border#D3CFC7oklch(0.855 0.012 84.582)
input#C2BDB4oklch(0.8 0.014 82.4)
ring#0E0E0Eoklch(0.164 0 0)
chart-1#0E0E0Eoklch(0.164 0 0)
chart-2#6E6A63oklch(0.526 0.012 81.78)
chart-3#A39D93oklch(0.698 0.016 80.689)
chart-4#3F3C38oklch(0.358 0.008 75.303)
chart-5#A3261Doklch(0.472 0.163 28.986)

ダークテーマ

background#0E0E0Eoklch(0.164 0 0)
foreground#F2EFE9oklch(0.953 0.009 84.573)
card#161616oklch(0.2 0 0)
card-foreground#F2EFE9oklch(0.953 0.009 84.573)
popover#161616oklch(0.2 0 0)
popover-foreground#F2EFE9oklch(0.953 0.009 84.573)
primary#F2EFE9oklch(0.953 0.009 84.573)
primary-foreground#0E0E0Eoklch(0.164 0 0)
secondary#1F1F1Foklch(0.239 0 0)
secondary-foreground#F2EFE9oklch(0.953 0.009 84.573)
muted#1A1A1Aoklch(0.218 0 0)
muted-foreground#9C978Foklch(0.678 0.013 79.764)
accent#242424oklch(0.26 0 0)
accent-foreground#F2EFE9oklch(0.953 0.009 84.573)
destructive#F07167oklch(0.697 0.159 26.504)
border#2A2A2Aoklch(0.285 0 0)
input#353535oklch(0.329 0 0)
ring#F2EFE9oklch(0.953 0.009 84.573)
chart-1#F2EFE9oklch(0.953 0.009 84.573)
chart-2#9C978Foklch(0.678 0.013 79.764)
chart-3#6A665Foklch(0.512 0.012 81.778)
chart-4#C9C4BBoklch(0.822 0.014 82.4)
chart-5#F07167oklch(0.697 0.159 26.504)

フォント

見出し: Instrument Serif · 400
本文: Manrope · 400
等幅: JetBrains Mono

タイプスケール

display · 120/0.9 · -0.03emデザインで、画面はもっと使いやすくなる
h1 · 72/0.95 · -0.02emデザインで、画面はもっと使いやすくなる
h2 · 40/1.05 · -0.01emデザインで、画面はもっと使いやすくなる
h3 · 22/1.3デザインで、画面はもっと使いやすくなる
body · 16/1.6デザインで、画面はもっと使いやすくなる
small · 12/1.5 · 0.08emデザインで、画面はもっと使いやすくなる

角の半径、余白、影

角の半径sm 0pxmd 0pxlg 0pxxl 4px

余白xs 8pxsm 16pxmd 32pxlg 48pxxl 96px

影なし：奥行きは枠線と色で表現します。

レイアウト

最大幅: 1440px
本文の幅: 56ch
カラム: 12
ガター: 16px

向いている用途

写真家と映像作家
デザイナーとアートディレクター
クリエイティブスタジオ
個人サイトとケーススタディ

やること・やらないこと

どのページも、巨大なセリフ体のタイトル 1 つで始める。
プロジェクトに番号を振り、年、クライアント、役割を載せる。
アクセントカラーを加えない。色は画像が与えてくれる。
画像を角丸や影付きのフレームに入れない。