Swiss: 미니멀 그리드 디자인 시스템

Web · Light · Minimal · Bold · Portfolio

Swiss

엄격한 그리드 위의 검정, 흰색, 시그널 레드 하나.

Swiss는 인터내셔널 타이포그래픽 스타일을 따릅니다. 큼직한 그로테스크 서체, 엄격한 그리드, 직각 모서리, 넉넉한 흰 여백. 빨강이 유일한 색이며 정확히 정해진 몇 곳에만 나타납니다.

Preview

Rendered live from the tokens below, in the system's own fonts.

New in 2026Plan, ship and measure in one place

A calm workspace for small teams. Every number you need, nothing you don't.

Start freeBook a demo

Active users12,480

Revenue$48.2k

Retention86%

Invite your teamWork emailyou@company.comRoleEditor ▾Send invite

Recent ordersCustomerStatusAmountAda ParkPaid$1,240Lukas WeberPending$380Mei ChenRefunded$96

Use it in your project

Paste this into Codex or Claude Code. The agent saves the spec as DESIGN.md and follows it from then on.

This project uses the Swiss design system. Its spec is at https://codexdesign.io/ko/design-systems/swiss.md. Save it as DESIGN.md in the project root and follow it for every screen from now on.

Tokens

Colors

Light theme

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)

Dark theme

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)

Fonts

Headings: Archivo · 700
Body: Archivo · 400
Monospace: JetBrains Mono

Type scale

display · 88/0.95 · -0.035emThe quick brown fox
h1 · 56/1 · -0.025emThe quick brown fox
h2 · 32/1.1 · -0.015emThe quick brown fox
h3 · 20/1.25The quick brown fox
body · 16/1.5The quick brown fox
small · 13/1.4 · 0.01emThe quick brown fox

Radius, spacing and shadow

Corner radiussm 0pxmd 0pxlg 0pxxl 4px

Spacingxs 8pxsm 16pxmd 32pxlg 48pxxl 96px

ShadowNone: depth comes from borders and color.

Layout

Max width: 1440px
Text width: 60ch
Columns: 12
Gutter: 16px

Best for

에이전시와 스튜디오
건축과 이벤트
포트폴리오
개성을 원하는 개발자 문서

Do's and don'ts

헤드라인을 페이지에서 가장 큰 요소로 만드세요.
그리드의 컬럼을 비워 두세요.
모서리를 둥글리거나 그림자를 넣지 마세요.
빨강을 장식에 쓰지 마세요.