BOAZ 공개 홈페이지와 관리자 콘솔이 함께 쓰는 디자인 언어입니다. 디자인 토큰과 컴포넌트·패턴 명세를 단일 원천(Single Source of Truth)으로 관리하고, Style Dictionary로 빌드해 CSS 변수와 Tailwind 테마로 배포합니다.
tokens/ (DTCG JSON) ── npm run build ──▶ dist/ (build artifacts)
├── tokens.css CSS 변수 --boaz-*
├── tokens.js·.d.ts CSS 변수 참조 객체와 타입
└── tailwind-theme.css Tailwind v4 @theme
tokens/— Primitive(팔레트)·Semantic 토큰. 색, 타이포그래피, radius, spacing
components/— 컴포넌트 명세. Phase 2부터components/<id>.md로 추가합니다. 양식은components/_template.md입니다.patterns/— 패턴·가이드라인: feedback, form, accessibility, voice & tone (Phase 3에서 작성)
git 태그로 설치합니다. 첫 버전 v0.1.0(파운데이션 토큰, 2026-10-11)부터 설치할 수 있고, 최신은 v0.1.1(radius.xs 추가)입니다. 버전 목록은 Releases에 있습니다.
npm install github:BOAZ-website/design-system#v0.1.1@import "@boaz/design-system/tokens.css"; /* CSS 변수 */
@import "@boaz/design-system/tailwind-theme.css"; /* Tailwind v4 (tokens.css 포함) */import { vars } from '@boaz/design-system/tokens';
vars.color.palette.purple[100]; // "var(--boaz-color-palette-purple-100)"크기·행간·간격·radius 토큰은 px입니다. 두 앱의 루트 글꼴 크기가 달라(frontend 10px, frontend_admin 14px) rem을 쓰면 같은 토큰이 앱마다 다른 크기로 보이기 때문입니다. 브라우저 확대는 px에도 적용됩니다.
처음 합류했다면 CONTRIBUTING.md의 "처음 합류했다면"부터 읽습니다.
docs/design-reference.md— 디자인 참조: Figma 원본 색·타이포·컴포넌트·에셋 기록docs/wbs/— 구축 로드맵 (WBS·작업 정의서). 작업 정의서는 할 일과 완료 조건을 정하고, 결과물의 정의는components/·patterns/의 명세서에 있습니다.AGENTS.md— 토큰 명명 규칙, 토큰·명세 작업 절차, breaking change 정책, 문서 작성 규칙CONTRIBUTING.md— 처음 합류했을 때의 순서, 권한 체크리스트, 개발 환경, 브랜치·리뷰·커밋 규약