Noir: 다크 포트폴리오 디자인 시스템

Web · Dark · Serif · Minimal · Portfolio

Noir

검정, 본 화이트, 거대한 세리프. 색은 작품 하나뿐.

Noir는 작품이 말하도록 색을 걷어 냅니다. 검은 페이지, 본 화이트 글자, 이름과 프로젝트 제목에 쓰는 거대한 Instrument Serif, 직각 이미지 프레임. 다크 모드에서 가장 빛나고, 본 화이트의 라이트 모드는 인쇄물 같은 케이스 스터디에 어울립니다.

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 Noir design system. Its spec is at https://codexdesign.io/ko/design-systems/noir.md. Save it as DESIGN.md in the project root and follow it for every screen from now on.

Tokens

Colors

Light theme

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)

Dark theme

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)

Fonts

Headings: Instrument Serif · 400
Body: Manrope · 400
Monospace: JetBrains Mono

Type scale

display · 120/0.9 · -0.03emThe quick brown fox
h1 · 72/0.95 · -0.02emThe quick brown fox
h2 · 40/1.05 · -0.01emThe quick brown fox
h3 · 22/1.3The quick brown fox
body · 16/1.6The quick brown fox
small · 12/1.5 · 0.08emThe 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: 56ch
Columns: 12
Gutter: 16px

Best for

사진가와 영상 감독
디자이너와 아트 디렉터
크리에이티브 스튜디오
개인 사이트와 케이스 스터디

Do's and don'ts

모든 페이지를 거대한 세리프 제목 하나로 시작하세요.
프로젝트에 번호를 매기고 연도, 클라이언트, 역할을 적으세요.
포인트 색을 더하지 마세요. 색은 이미지가 채워 줍니다.
이미지를 둥근 프레임이나 그림자 속에 넣지 마세요.