홈 대표 시스템 소개 컬러 타이포그래피 아이콘 레이아웃 · 스페이싱 글래스 · 블러 카탈로그 · 53 폼 · 입력 액션 · 버튼 내비게이션 오버레이 데이터 표시 피드백 · 상태 레이아웃 디자인 원칙

Design System · v1.0

하나의 기준,
일관된 브랜드

SOUND.RADAR를 만드는 모든 픽셀의 출처. 컬러·타이포그래피·로고·아이콘·컴포넌트까지 — 제품과 마케팅, 어디에서든 같은 목소리로 말하게 하는 디자인 언어입니다.

대표 시스템 소개 파운데이션부터 →

Core palette

Dark

#0A0A0A

Purple

#6B3FF6

Lime

#D4FF00

White

#FFFFFF

Typeface

NanumSquare 가나다

Light·Regular·Bold·ExtraBold

시작하기

대표 시스템 소개

컬러·타이포그래피·로고·아이콘·컴포넌트를 한 페이지로 보는 디자인 언어 전체.

파운데이션

컬러

White 베이스 위 Dark·Purple·Lime 3색 시스템과 시맨틱 토큰.

타이포그래피

NanumSquare 기반 타입 스케일과 웨이트 운용.

아이콘

1.75px 라인 아이콘 세트와 사용 규칙.

레이아웃 · 스페이싱

4px 베이스 그리드 · 컨테이너 · 라운드 · 브레이크포인트.

글래스 · 블러

떠있는 레이어의 반투명 유리 표면 — 블러·채도·불투명도 토큰과 사용 규칙.

컴포넌트

카탈로그 · 53

53개 컴포넌트 — 폼·액션·내비게이션·오버레이·데이터·피드백·레이아웃.

폼 · 입력

텍스트·선택·토글 등 데이터를 입력받는 컴포넌트.

액션 · 버튼

버튼·버튼 그룹·토글·단축키.

오버레이

다이얼로그·드롭다운·툴팁 등 레이어로 떠오르는 컴포넌트.

데이터 표시

테이블·카드·아바타·캘린더 등 정보를 보여주는 컴포넌트.

피드백 · 상태

알림·진행·로딩 등 상태를 전달하는 컴포넌트.

레이아웃

비율·구분·스크롤·리사이즈 등 배치를 돕는 컴포넌트.

가이드라인

디자인 원칙

우리가 디자인을 결정하는 방식.

다른 시스템

Docs · 문서 · 슬라이드

웹 디자인 언어를 리포트·제안서·발표로 확장 — 토큰·컴포넌트·캔버스·생성기까지.

준비 중

App UI · 제품

대시보드 제품 디자인 언어 — 다크 베이스 · 레드 액센트. External UI와 별개 시스템.

하나의 기준,일관된 브랜드