Hyomin v1.0

Color

Primitive 팔레트 + Semantic 토큰 (Primary / Secondary / Accent / Success / Warning / Error)

Typography

Paperlogy · Pretendard / Title → Label 전체 스케일

Spacing

4px 배수 기준 스케일 — spacing-1 (4px) ~ spacing-16 (64px)

Border / Radius / Shadow

Border 1px · Radius sm~full · Shadow sm~lg · Motion 토큰

Motion

duration-fast / base / slow · easing-default · 사용 가이드라인

Breakpoints

xs 499 · sm 768 · md 999 · lg 1199 · xl 1200+

Button

Primary / Secondary / Accent × Small / Default / Large × 5 States

Form

Label · Input · HelperText × 6 States (Default / Hover / Focus / Disabled / Error / Success)

Tag

Primary / Secondary / Error / Warning / Outline · 닫기 버튼 · 필터 UI 전용

Tooltip

Top / Bottom / Left / Right · hover·focus 시 표시

Spinner

sm 16 / md 24 / lg 36 / xl 48 × Primary · Success · Error · White

Progress Bar

Primary / Secondary / Error × sm / md / lg · 그라디언트 fill

Skeleton

Card / Profile / Paragraph 패턴 · shimmer 애니메이션

Toggle Switch

Off / On / Disabled × 포커스 링 · 키보드 접근성

Badge

Primary / Secondary / Error / Warning / Success / Outline

Number Input

− / + 버튼으로 수량 조절 · Small / Medium / Large × 4 States

Empty State

No Result / No Data / No Network / No Notification — 빈 상태 4종

Table

Default / Hover · thead gray-50 · tbody row hover

Breadcrumb

HOME > 카테고리 > 현재페이지 · 현재 위치 강조(green)

Card

Small 200px / Medium 320px / Large 450px · Image + Content

Tab

Tab1 / Tab2 / Tab3 Active × 인터랙티브 패널 전환

Accordion

Collapsed / Expanded × 단일 · 복수 아이템

Alert / Toast

Success / Error / Warning / Info × Left Bar + Icon

Modal

Small 400px / Medium 600px / Large 800px × Overlay

Pagination

First / Prev / Page / Next / Last · 인터랙티브

File Upload

드래그앤드롭 / 클릭 선택 · 파일 목록 · 서버 업로드

Stepper

Done / Current / Future / Warning / Error × 단계 진행 인터랙션

SearchBar

Default / Focus / Disabled / Filled × 4 States

Rating

Readonly · Interactive · 반별(Half Star) 0.5점 단위 · Small / Medium / Large

DatePicker

달력 팝업 날짜 선택 · jQuery · 백엔드 연동 코드 포함

Drawer

오른쪽 슬라이드 패널 · Footer 선택 · 포커스 트랩 · ESC 닫기

Auth / Login

로그인 · 회원가입 · 비밀번호 찾기 · 유효성 검사 · 이메일 인증

Form + Alert

폼 제출 결과를 Alert으로 피드백 — 유효성 검사 실패·성공 상태 처리

Modal + Form

모달 안에 폼을 배치 — 프로필 수정·필터 설정 등 보조 작업

Error Pages

404 · 403 · Coming Soon · 준비중 — 에러 페이지

Search + Filter

SearchBar + Tag 필터 + Card Grid + Pagination · 실시간 검색·필터

Tab + Pagination

탭 패널 안에 페이지네이션 — 목록 콘텐츠 탭 분류