D-5 · OPEN
모모의 정원 · ★ 4.9
Thezzle design system
작은 규칙이
한결같은 경험을 만듭니다
화면에 사용한 기초 토큰과 공통 UI를 역할별로 분리했습니다. 마스코트나 브랜드 자산이 바뀌어도 컴포넌트 구조는 유지됩니다.
Foundation
채도를 낮춘 바탕과 짙은 잉크 선 위에 세 가지 브랜드 색을 기능적으로 사용합니다.
Color tokens
assets/css/tokens.css
Typography scale
.display / .page-title / .section-title
함께 만드는 세계
페이지 제목 36
섹션 제목 26
본문은 15px, 보조 정보는 12–13px을 사용합니다.
Controls
모서리와 그림자를 절제하고, 주요 행동은 색보다 테두리와 대비로 구분합니다.
Buttons & tags
.button / .tag
함께 의뢰
신청 가능
D-4
Forms
.field / .input / .check-row
Cards
카드는 정보 묶음에만 쓰며, 장식 목적의 중첩 카드는 피합니다.
모
모모의 정원
응답 약 2시간
작가 중심 정보는 아바타, 활동명, 상태 순으로 읽힙니다.
Data & progress
그룹 의뢰, 정산, 작업 단계에서 같은 진행률 문법을 사용합니다.
Metrics
.metric / .progress
72%
216,000 / 300,000원
D-4
현재 7명 참여
Communication
채팅은 공개 커뮤니티 기능이 아니라 커미션을 문의하거나 진행할 때 작가와 의뢰인이 사용하는 1:1 작업 채팅입니다. 모바일에서는 앱형 전체 화면으로 전환됩니다.
Commission 1:1 chat
.chat-layer / commission context
희망하는 분위기와 마감일을 알려주세요.
2인 구성과 석양 배경을 원해요.
Feedback
일시적 알림, 모달, 빈 상태를 동일한 선과 면 체계로 제공합니다.
Toast & modal
.toast / .modal
Mascot slot
캐릭터는 공지·도움말·빈 상태에만 제한적으로 사용합니다. 이미지 경로 하나만 교체하면 되도록 분리했습니다.
선택한 마스코트 시안현재 시안은 에셋 한 장으로 분리되어, 추후 캐릭터가 확정되면 같은 역할을 유지한 채 바로 교체할 수 있습니다.
assets/bara-mascot.png