Mono design system · v0.1.0
모노톤 위에 단 하나의 강조색
표면은 전부 모노톤, 강조는 단 하나면 충분합니다. Pretendard 한 패밀리로 한글과 영문을, 라이트와 다크를 모두 담았습니다.
43 components · 1 accent · 2 themes · 4px grid
Explore
시스템 둘러보기
기반 토큰부터 원자·분자·유기체 컴포넌트까지, 아토믹 디자인 구조로 정리되어 있습니다.
Foundations at a glance
모노톤 + 단일 강조, 그리고 Pretendard
잉크(거의 검정)가 주요 텍스트와 기본 버튼을, 강조색은 링크·포커스·선택 상태와 화면당 가장 중요한 CTA 하나에만 절제해서 쓰입니다.
Neutral ramp · 표면과 텍스트의 전부gray-50 → 950
단 하나의 액센트 — 링크 · 포커스 · 선택 상태와 화면당 가장 중요한 CTA 하나에만.
accent · #2D5BFF
display명료하게 Display
h2섹션 제목 Heading
h4카드 타이틀 Subhead
body본문 텍스트입니다. Pretendard는 한글과 영문을 한 패밀리로 자연스럽게 담아냅니다.
data123,456 · 98.6% · v0.1.0 — Pretendard tabular
Get started
사용하기
빌드 도구는 필요 없습니다. 스타일은 styles.css 한 줄로 연결하고, React 컴포넌트는 소스에서 바로 import 하세요.
1 · 스타일 연결
<!-- 토큰 + 컴포넌트 CSS 전부 포함 --> <link rel="stylesheet" href="styles.css">
3 · 다크 모드
// html(또는 임의의 조상)에 설정 document.documentElement .setAttribute("data-theme", "dark");
2 · 컴포넌트 import (React)
// 배럴에서 import { Button, Card } from "./components"; // 또는 개별 파일에서 import { Button } from "./components/atoms/Button.jsx"; <Button variant="primary">저장하기</Button>