Heading · Jua
가볍고 유쾌하게!
큰 제목에서만 둥글고 통통한 인상을 더합니다.
01 · Foundations
먼저, 재료부터.
값을 외우는 대신 역할을 공유합니다. 색, 글꼴, 간격, 라운드, 그림자가 모든 컴포넌트의 같은 결을 만듭니다.
Coral
#FF4000Sun
#FFD84DMint
#66D9A8Sky
#69C4FFGrape
#B69CFFInk
#201B14Body · Neural Sans KR
읽기는 편안하게.
본문과 인터페이스는 정보 밀도를 안정적으로 받쳐줍니다.
환영, 프로모션, 감성적인 시작
완료, 성장, 가벼운 정보
창작, 탐색, 상상
02 · Themes
같은 성격, 다른 분위기.
Light, Dark, High Contrast 모드와 Berry, Ocean, Lime 브랜드 색을 조합할 수 있습니다.
Light
Dark
High contrast
Berry
Ocean
Lime
03 · Actions & selection
누르고, 고르고, 확인하기.
행동은 2px 외곽선과 pop shadow로 눌리는 촉감을 만들고, 선택은 색과 도형을 함께 바꿉니다.
Buttons
Selection
Icons · outline / filled
04 · Forms & feedback
입력 상태는 또렷하게.
기본, 성공, 오류, 읽기 전용, 비활성 상태가 형태와 설명을 함께 제공합니다.
잘 저장했어요!
바뀐 내용이 반영됐습니다.
새로운 안내
확인할 내용이 하나 있어요.
완료하지 못했어요
잠시 후 다시 시도해주세요.
05 · Complex UI
복잡한 흐름도 한 가족처럼.
탐색, 단계, 데이터, 업로드까지 같은 토큰과 상태 문법으로 연결됩니다.
- ✓정보
- ✓옵션
- 3확인
- 4완료
강조색은 행동에, 장식색은 분위기와 그룹 구분에 사용합니다.
ambient는 공간 깊이, pop은 눌리는 촉감을 표현합니다.
2026년 8월
일월화수목금토
| 이름 | 상태 | 담당 | 업데이트 |
|---|---|---|---|
| 새 랜딩 페이지 | 완료 | 하늘 | 방금 전 |
| 여름 컬렉션 | 확인 필요 | 다온 | 12분 전 |
| 커뮤니티 배너 | 진행 중 | 보라 | 어제 |
06 · Real screens
다른 제품에도 그대로.
쇼핑, 커뮤니티, 생산성 도구에 적용한 전체 화면을 별도 HTML로 열어볼 수 있습니다.