시작하기

Groo Design 은 그루 이음(B2B)과 그루 담다(B2C)가 함께 쓰는 디자인 시스템입니다. 웹과 앱은 이 사이트에 적힌 값을 따릅니다. 같은 컴포넌트를 두 곳에서 다르게 만들지 않도록, 치수·색·상태를 빠짐없이 여기에 적습니다.

구성

색상 · 타이포그래피 · 레이아웃 · 모양 · 깊이 · 모션 · 토큰 전체 값

컴포넌트마다 구조 · 변형 · 크기 · 상태 · 접근성

이 사이트의 페이지는 대부분 레포의 원본 문서를 빌드할 때 그대로 옮긴 것입니다. 페이지를 고치려면 원본을 고칩니다. 각 페이지 위의 메뉴에서 원본 파일로 갈 수 있습니다.

원본	사이트
`DESIGN.md` 의 각 `##` 절	기초의 각 페이지
`DESIGN.md` · `DESIGN.hr.md` · `DESIGN.desk.md` 의 YAML 머리말	기초 › Token reference
`specs/z-index.md`	기초 › Z-Index Layers
`specs/components/*.md`	컴포넌트의 각 페이지
`DESIGN.md` 의 Components 절	컴포넌트 › 공통 가이드

원본을 사이트용으로 새로 쓴 페이지는 site/content/docs 에 .mdx 로 둡니다. 같은 자리에 .mdx 가 있으면 원본에서 옮기는 것을 건너뜁니다.

cd site
npm install
npm run dev

npm run build 는 site/out 에 정적 사이트를 만듭니다.