Harbor: 엔터프라이즈 B2B 디자인 시스템

Web · Light · Minimal · SaaS

Harbor

진지한 B2B 제품을 위한 네이비, 여백, 탄탄한 구조.

Harbor는 지루하지 않으면서 믿음직해 보입니다. 서늘한 블루 그레이 페이지, 주요 행동에는 네이비, 포커스와 데이터에는 밝은 파랑, 현대적이면서 절제된 목소리의 Plus Jakarta Sans. 긴 기능 소개 페이지, 비교표, 보안 섹션이 자연스럽게 어울립니다.

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

Tokens

Colors

Light theme

background#F6F8FBoklch(0.978 0.005 258.324)
foreground#0F1B2Doklch(0.221 0.039 258.275)
card#FFFFFFoklch(1 0 0)
card-foreground#0F1B2Doklch(0.221 0.039 258.275)
popover#FFFFFFoklch(1 0 0)
popover-foreground#0F1B2Doklch(0.221 0.039 258.275)
primary#13294Boklch(0.283 0.069 258.854)
primary-foreground#FFFFFFoklch(1 0 0)
secondary#E6ECF5oklch(0.941 0.014 258.346)
secondary-foreground#13294Boklch(0.283 0.069 258.854)
muted#EDF1F7oklch(0.957 0.009 258.336)
muted-foreground#526077oklch(0.486 0.041 260.276)
accent#E3EAF4oklch(0.935 0.015 257.198)
accent-foreground#0F1B2Doklch(0.221 0.039 258.275)
destructive#B42318oklch(0.5 0.182 29.513)
border#D9E1ECoklch(0.907 0.017 256.285)
input#C8D2E0oklch(0.86 0.022 256.739)
ring#2F6FD6oklch(0.557 0.172 259.651)
chart-1#13294Boklch(0.283 0.069 258.854)
chart-2#2F6FD6oklch(0.557 0.172 259.651)
chart-3#18A0A0oklch(0.641 0.105 194.845)
chart-4#E0A43Aoklch(0.758 0.137 77.684)
chart-5#8A63D2oklch(0.591 0.165 297.305)

Dark theme

background#0B1320oklch(0.186 0.029 259.81)
foreground#E6ECF5oklch(0.941 0.014 258.346)
card#111B2Coklch(0.222 0.037 260.614)
card-foreground#E6ECF5oklch(0.941 0.014 258.346)
popover#111B2Coklch(0.222 0.037 260.614)
popover-foreground#E6ECF5oklch(0.941 0.014 258.346)
primary#7FA8F0oklch(0.731 0.114 261.239)
primary-foreground#0B1320oklch(0.186 0.029 259.81)
secondary#1A2639oklch(0.267 0.04 259.345)
secondary-foreground#E6ECF5oklch(0.941 0.014 258.346)
muted#152034oklch(0.244 0.042 261.771)
muted-foreground#8F9DB3oklch(0.692 0.036 259.404)
accent#1D2A40oklch(0.284 0.045 260.568)
accent-foreground#E6ECF5oklch(0.941 0.014 258.346)
destructive#F97066oklch(0.709 0.17 26.471)
border#24324Aoklch(0.316 0.047 260.838)
input#2C3B55oklch(0.351 0.05 261.08)
ring#7FA8F0oklch(0.731 0.114 261.239)
chart-1#7FA8F0oklch(0.731 0.114 261.239)
chart-2#4FC3C3oklch(0.752 0.103 195.179)
chart-3#F0C26Eoklch(0.838 0.115 81.184)
chart-4#B79BF0oklch(0.746 0.123 298.536)
chart-5#E6ECF5oklch(0.941 0.014 258.346)

Fonts

Headings: Plus Jakarta Sans · 700
Body: Plus Jakarta Sans · 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 4pxmd 6pxlg 8pxxl 12px

Spacingxs 4pxsm 8pxmd 16pxlg 24pxxl 48px

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

Layout

Max width: 1280px
Text width: 70ch
Columns: 12
Gutter: 24px

Best for

B2B SaaS와 엔터프라이즈 소프트웨어
컨설팅·전문 서비스
물류, 보험, 은행 사이트
투자자·파트너 페이지

Do's and don'ts

추상적인 일러스트가 아니라 실제 스크린샷으로 제품을 보여 주세요.
고객사 로고, 수치, 사례로 주장을 뒷받침하세요.
밝은 파랑이 네이비 주요 버튼과 경쟁하지 않게 하세요.
요금과 영업 문의를 여러 번 클릭해야 나오게 숨기지 마세요.