ZZEM Design System
Foundations and components — single source of truth.
Design tokens live in wds-tokens,
patterns live in docs/designs/, and this browser renders both.
Foundations
See all → color Color ZZEM의 컬러 체계. 중성·퍼플·시맨틱 3계층. typography Typography Pretendard 기반 10-step scale. H2/Title/Subtitle/Body/Label. spacing Spacing 4·8·12·16·24·32·48·64 base. 8의 배수 준수. radius Radius 4·8·12·22·999 — 카드 12, 기기 프레임 22, pill 999. motion Motion 4-curve system. ease-out 140 / spring-soft 220 / spring-handoff 320 / linear-fast 100. elevation Elevation 3-step depth. 그림자는 중립색이 아닌 accent-tinted. icon Icon Code Connect 기반 아이콘 세트. Stroke / Fill 변형으로 쌍을 이룸.
Components
See all →Patterns
See all → pattern Detail View 세로 스와이프 풀스크린 피드 — blur PostCard + 사이드 액션 + 크리에이터 정보. pattern Feed Grid 2열 매거진 피드. Pinterest/Masonry 스타일로 카드 비율 1:1·4:5 교차. pattern Home Screen 앱 홈 전체 스크롤 레이아웃 — 헤더·카테고리 칩·신규 템플릿·랭킹·필터·피드 그리드. pattern Other User Profile 타 유저 프로필 — MY와의 차이점 중심 (편집·팔로우 없음, 게시물 탭 only). pattern Profile Edit 닉네임·프로필 이미지 편집 화면 + 이미지 소스 시트 + 나가기 확인 시트. pattern Profile Header MY 프로필 상단 — 이미지·카운트·액션 버튼·탭 바 조합. pattern Settings Screen 아이콘 없는 텍스트 메뉴 리스트 + 12px 디바이더 섹션 구분 + 하단 고정 로그아웃.