Swiss：ミニマルグリッドデザインシステム

Web · ライト · ミニマル · 大胆 · ポートフォリオ

Swiss

黒、白、そして 1 色のシグナルレッド。厳格なグリッドの上で。

Swiss は国際タイポグラフィ様式に沿っています。大きなグロテスク書体、厳格なグリッド、直角の角、たっぷりの白。色は赤だけで、ごく限られた場所に現れます。

プレビュー

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

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

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

無料で始めるデモを予約

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

売上$48.2k

継続率86%

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

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

プロジェクトで使う

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

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

トークン

カラー

ライトテーマ

background#FFFFFFoklch(1 0 0)
foreground#0A0A0Aoklch(0.145 0 0)
card#FFFFFFoklch(1 0 0)
card-foreground#0A0A0Aoklch(0.145 0 0)
popover#FFFFFFoklch(1 0 0)
popover-foreground#0A0A0Aoklch(0.145 0 0)
primary#D70015oklch(0.553 0.225 27.269)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#F0F0F0oklch(0.955 0 0)
secondary-foreground#0A0A0Aoklch(0.145 0 0)
muted#F0F0F0oklch(0.955 0 0)
muted-foreground#595959oklch(0.464 0 0)
accent#EBEBEBoklch(0.94 0 0)
accent-foreground#0A0A0Aoklch(0.145 0 0)
destructive#B3000Foklch(0.482 0.197 27.345)
border#D4D4D4oklch(0.87 0 0)
input#BDBDBDoklch(0.798 0 0)
ring#D70015oklch(0.553 0.225 27.269)
chart-1#D70015oklch(0.553 0.225 27.269)
chart-2#0A0A0Aoklch(0.145 0 0)
chart-3#7A7A7Aoklch(0.58 0 0)
chart-4#1F4FD1oklch(0.484 0.207 264.286)
chart-5#E3A100oklch(0.753 0.156 79.154)

ダークテーマ

background#0A0A0Aoklch(0.145 0 0)
foreground#F5F5F5oklch(0.97 0 0)
card#121212oklch(0.182 0 0)
card-foreground#F5F5F5oklch(0.97 0 0)
popover#121212oklch(0.182 0 0)
popover-foreground#F5F5F5oklch(0.97 0 0)
primary#FF3341oklch(0.65 0.236 23.908)
primary-foreground#0A0A0Aoklch(0.145 0 0)
secondary#1C1C1Coklch(0.226 0 0)
secondary-foreground#F5F5F5oklch(0.97 0 0)
muted#1A1A1Aoklch(0.218 0 0)
muted-foreground#A3A3A3oklch(0.715 0 0)
accent#222222oklch(0.252 0 0)
accent-foreground#F5F5F5oklch(0.97 0 0)
destructive#FF5A5Foklch(0.689 0.2 22.384)
border#2E2E2Eoklch(0.301 0 0)
input#3A3A3Aoklch(0.348 0 0)
ring#FF3341oklch(0.65 0.236 23.908)
chart-1#FF3341oklch(0.65 0.236 23.908)
chart-2#F5F5F5oklch(0.97 0 0)
chart-3#8A8A8Aoklch(0.633 0 0)
chart-4#5C85FFoklch(0.649 0.187 267.126)
chart-5#FFC02Eoklch(0.843 0.163 82.698)

フォント

見出し: Archivo · 700
本文: Archivo · 400
等幅: JetBrains Mono

タイプスケール

display · 88/0.95 · -0.035emデザインで、画面はもっと使いやすくなる
h1 · 56/1 · -0.025emデザインで、画面はもっと使いやすくなる
h2 · 32/1.1 · -0.015emデザインで、画面はもっと使いやすくなる
h3 · 20/1.25デザインで、画面はもっと使いやすくなる
body · 16/1.5デザインで、画面はもっと使いやすくなる
small · 13/1.4 · 0.01emデザインで、画面はもっと使いやすくなる

角の半径、余白、影

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

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

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

レイアウト

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

向いている用途

エージェンシーとスタジオ
建築とイベント
ポートフォリオ
個性がほしい開発者向けドキュメント

やること・やらないこと

見出しをページでいちばん大きな要素にする。
グリッドに空のカラムを残す。
角を丸めたり、影を加えたりしない。
装飾のために赤を使わない。