Design System v1.0

Minimalist
Monochrome

흑백과 세리프 타이포그래피로 만드는 에디토리얼 럭셔리 디자인 시스템. 오른쪽 패널에서 토큰을 실시간으로 변경해보세요.

01 — Typography

Type Scale

Display
9xl · 900
Playfair
Aa
Hero
7xl · 700
Playfair
Editorial Design
Title
5xl · 700
Playfair
Section Heading
Subhead
3xl · 500
Playfair
Subsection Title
Lead
xl · 400
Source Serif
Lead paragraph text for introductions and summaries that need emphasis.
Body
base · 400
Source Serif
본문 텍스트는 Source Serif 4를 사용합니다. 가독성과 품격을 동시에 갖춘 세리프 폰트로, 에디토리얼 감성을 유지하면서도 긴 글에 최적화되어 있습니다.
Caption
sm · 400
Source Serif
Secondary text, captions, and supporting copy. Used for metadata and supplementary information.
Mono
xs · 400
JetBrains
LABELS · DATES · 2024-01-15 · CODE · METADATA · TRACKING
"
Typography is the craft of endowing human language with a durable visual form, and thus with an independent existence.
— Robert Bringhurst, The Elements of Typographic Style
02 — Buttons

Actions

Primary
Outline
Ghost
Inverted Context
Badges & Labels
Default Filled Muted Subtle Secondary
03 — Cards

Containers

Standard Card
Design with Intent
Every element in this design system serves a purpose. No decoration without function, no function without form.
2024-01-15
Inverted Card
Black as Accent
In Minimalist Monochrome, black is not just a color — it is the accent, the emphasis, the drama.
Featured
Muted Card
Subtle Background
Off-white backgrounds create hierarchy without disrupting the monochrome palette.
Secondary
Performance
Zero-runtime tokens. Pure CSS variables with instant updates.
Composable
Every component is built from the same token foundation.
Accessible
21:1 contrast ratio. WCAG AAA by design.
Systematic
Strict rules. No gray areas. Decisions made once, applied everywhere.
2
Colors Only
0px
Border Radius
9
Type Scales
∞
Combinations
04 — Forms

Inputs

Underline Style
Box Style
Your registered company name
05 — Colors

Palette

foreground
#000000
background
#FFFFFF
muted
#F5F5F5
muted-fg
#525252
border-light
#E5E5E5
border
#000000
gradient
scale
pattern
diagonal
Lines & Dividers
hairline
thin 1px
medium 2px
thick 4px
ultra 8px
06 — Icons

Iconography

Home
Search
User
Mail
Phone
Location
Calendar
Clock
Plus
Check
Close
Arrow
Share
Edit
Delete
Upload
Download
Wifi
Shield
Info