Nordic: 차분한 SaaS 디자인 시스템

Web · Light · Soft · SaaS · Productivity

Nordic

생산성 도구를 위한 톤다운된 파랑, 부드러운 회색, 조용한 자신감.

Nordic은 스칸디나비아의 절제를 소프트웨어에 가져옵니다. 거의 흰 페이지, 행동에는 톤다운된 피오르 블루, 보조 색으로는 부드러운 바다 초록과 꿀빛, 편안한 크기의 Manrope. 아무것도 소리치지 않으므로 긴 기능 소개 페이지도, 빽빽한 설정 화면도 눈이 편합니다.

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

Tokens

Colors

Light theme

background#FBFBFAoklch(0.988 0.001 106.423)
foreground#1D2125oklch(0.245 0.01 248.22)
card#FFFFFFoklch(1 0 0)
card-foreground#1D2125oklch(0.245 0.01 248.22)
popover#FFFFFFoklch(1 0 0)
popover-foreground#1D2125oklch(0.245 0.01 248.22)
primary#3A5BA0oklch(0.481 0.118 263.376)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#EDF0F5oklch(0.954 0.007 260.732)
secondary-foreground#1D2125oklch(0.245 0.01 248.22)
muted#F1F2F4oklch(0.961 0.003 264.542)
muted-foreground#5C636Boklch(0.496 0.015 251.687)
accent#ECEEF2oklch(0.949 0.006 264.532)
accent-foreground#1D2125oklch(0.245 0.01 248.22)
destructive#B93A32oklch(0.533 0.165 27.691)
border#E2E5EAoklch(0.921 0.008 260.732)
input#D3D8DFoklch(0.88 0.011 256.7)
ring#3A5BA0oklch(0.481 0.118 263.376)
chart-1#3A5BA0oklch(0.481 0.118 263.376)
chart-2#5E9C8Foklch(0.647 0.068 179.163)
chart-3#C98A3Eoklch(0.683 0.119 68.299)
chart-4#9A6FB0oklch(0.61 0.107 313.712)
chart-5#C25E6Eoklch(0.607 0.129 11.672)

Dark theme

background#131619oklch(0.198 0.008 248.212)
foreground#E9ECEFoklch(0.942 0.005 247.879)
card#191D21oklch(0.228 0.01 248.257)
card-foreground#E9ECEFoklch(0.942 0.005 247.879)
popover#191D21oklch(0.228 0.01 248.257)
popover-foreground#E9ECEFoklch(0.942 0.005 247.879)
primary#8EA9E0oklch(0.735 0.086 264.147)
primary-foreground#131619oklch(0.198 0.008 248.212)
secondary#22272Coklch(0.27 0.012 248.263)
secondary-foreground#E9ECEFoklch(0.942 0.005 247.879)
muted#1D2126oklch(0.246 0.011 254.046)
muted-foreground#959DA6oklch(0.692 0.016 251.217)
accent#242A30oklch(0.282 0.014 248.322)
accent-foreground#E9ECEFoklch(0.942 0.005 247.879)
destructive#F28A82oklch(0.743 0.128 25.246)
border#2A3036oklch(0.306 0.014 248.274)
input#333A41oklch(0.345 0.016 248.276)
ring#8EA9E0oklch(0.735 0.086 264.147)
chart-1#8EA9E0oklch(0.735 0.086 264.147)
chart-2#8CC7BAoklch(0.785 0.064 179.312)
chart-3#E6B46Eoklch(0.801 0.105 74.641)
chart-4#C3A2D6oklch(0.759 0.081 312.997)
chart-5#E6939Foklch(0.751 0.101 10.369)

Fonts

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

Type scale

display · 60/1.05 · -0.025emThe quick brown fox
h1 · 40/1.1 · -0.02emThe quick brown fox
h2 · 28/1.2 · -0.01emThe quick brown fox
h3 · 20/1.3The quick brown fox
body · 16/1.55The quick brown fox
small · 13/1.45The quick brown fox

Radius, spacing and shadow

Corner radiussm 8pxmd 10pxlg 12pxxl 16px

Spacingxs 4pxsm 8pxmd 16pxlg 24pxxl 48px

ShadowSoft, low and wide, on cards and sheets only.

Layout

Max width: 1200px
Text width: 68ch
Columns: 12
Gutter: 24px

Best for

생산성·협업 SaaS
메모·기획 도구
제품 마케팅 사이트
도움말 센터와 온보딩

Do's and don'ts

스크린샷 주변에 넉넉한 여백을 두세요.
아이콘은 가늘고 단색으로 유지하세요.
톤다운된 팔레트 옆에 채도 높은 브랜드 색을 두지 마세요.
그림자를 겹쳐 쌓지 마세요. 부드러운 한 단계면 충분합니다.