디자인 시스템

Hereby의 디자인 시스템은 admin·hr-system·team-manager 등 모든 앱이 공유하는 시각·상호작용 규칙과 재사용 가능한 컴포넌트의 집합입니다.

어디에 있나

영역	위치
토큰 (색·간격·모서리·그림자)	`packages/static/styles/design-system.css`
컴포넌트 (Alpine + HTML partial)	`packages/components/`
아이콘 레지스트리	`packages/components/src/icons.ts`
Figma 토큰	`packages/static/tokens.figma.json`

Foundations — 모든 컴포넌트가 따르는 기초 시각 단위 (색·타이포·간격·모서리·그림자·아이콘·모션·접근성)
Components — Alpine 컴포넌트 + 마크업 partial + BEM CSS 한 묶음. 카테고리: Navigation / Authentication / Forms & Wizards / Feedback / Communication
Patterns — 여러 컴포넌트가 합쳐진 흐름 (예: App chrome, Embed iframe, 양식 마법사, 알림 흐름)
Resources — 아이콘 라이브러리, Figma 토큰, 변경 이력

새 앱이나 페이지에서 디자인 시스템을 어떻게 가져다 쓰는지는 시작하기를 참고하세요.

작업 중

이 문서는 실제 코드에 구현된 디자인 시스템을 정리하는 중입니다. 페이지가 비어 있을 수 있고, 우선순위가 높은 항목부터 채워집니다.