Color Tokens 모든 색상은 CSS 변수 기반. 하드코딩 금지.

Brand

--color-primary-rgb

37 99 235 (#2563EB)

--color-secondary-rgb

71 85 105 (#475569)

--color-accent-rgb

124 58 237 (#7C3AED)

Semantic State

success

16 185 129

warning

245 158 11

danger

239 68 68

info

6 182 212

Surface Scale

bg-base

body 배경

bg-surface

섹션 배경

bg-surface1

호버 배경

bg-surface2

구분선/선택

bg-card

카드 배경

Text

text-main

15 23 42

text-muted

100 116 139

text-subtle

148 163 184

Background Utilities

bg-primary-soft bg-secondary-soft bg-accent-soft bg-success-soft bg-warning-soft bg-danger-soft bg-info-soft

Typography Type Scale + Text Color Utilities

Type Scale

--text-3xl / 24px

Qditer Design System

--text-2xl / 20px

페이지 타이틀

--text-xl / 18px

섹션 헤딩

--text-lg / 16px

서브섹션 헤딩

--text-md / 15px

내비게이션 링크, 강조 본문

--text-base / 14px

기본 본문. 폼 레이블, 셀 텍스트, 설명 텍스트에 사용합니다.

--text-sm / 13px

보조 텍스트, 도움말, 에러 메시지

--text-xs / 12px

레이블, 배지, 캡션, 메타 정보

Text Color Utilities

.c-main — 15 23 42 .c-muted — 100 116 139 .c-subtle — 148 163 184 .c-primary — 37 99 235 .c-accent — 124 58 237 .c-success — 16 185 129 .c-warning — 245 158 11 .c-danger — 239 68 68 .c-info — 6 182 212

Elevation Surface Level 0 → 4

elevation-0

flat

elevation-1

low

elevation-2

mid

elevation-3

high

elevation-4

overlay

State Layer Material 3 인터랙션 상태 토큰

Primary 기준

base
opacity 1.0

hover
–0.08

pressed
–0.12

focused
ring ×4px

disabled
0.38

Buttons Variant × Size

Variants — btn-md

Primary Secondary Accent Danger Outline Soft Ghost Disabled

Sizes — btn-primary

XSmall Small Medium Large

With Icon

새 항목 추가 저장 삭제 나중에

Icon-only

Full Width

전체 너비 Primary 버튼 전체 너비 Outline 버튼

Badges 상태 표시용 인라인 레이블

Size: md (기본)

Primary Secondary Accent Active Pending Error Info

Size: sm

Primary Completed Review Rejected Draft

Alerts 인라인 피드백 메시지

변경 사항이 자동 저장됩니다페이지를 닫아도 작업 내용이 보존됩니다.

배포 완료프로젝트가 프로덕션 환경에 성공적으로 배포되었습니다.

구독 만료 임박현재 구독이 7일 후 만료됩니다. 갱신하지 않으면 서비스가 중단됩니다.

권한 없음이 작업을 수행할 권한이 없습니다. 관리자에게 문의하세요.

Forms Input · Textarea · Select · Checkbox · Radio

Input sizes

States

이름 실명을 입력해 주세요.

이메일 올바른 이메일 형식이 아닙니다.

성공 상태

비활성

Select

역할 관리자 편집자 뷰어

플랜 무료 Pro Enterprise

Textarea

설명 최대 500자

Checkbox & Radio

이메일 알림 수신 SMS 알림 수신 비활성 옵션

무료 플랜 Pro 플랜 Enterprise

Avatars 사용자 식별 요소

Sizes

홍

김

이

Color Variants

기

박

최

정

강

조

Avatar Group

홍

김

이

박

+5

With Ring

P

박지수 프로덕트 디자이너

Cards .card · .card-interactive · elevation 조합

기본 카드

총 방문자

12,847

▲ 8.2% 지난달 대비

전환율

3.6%

▼ 1.1% 지난달 대비

매출

₩4.2M

▲ 23.5% 지난달 대비

Interactive 카드 (hover 해보세요)

프로젝트 관리

팀의 태스크와 마일스톤을 한 곳에서 관리합니다.

팀원 관리

역할과 권한을 세부적으로 설정합니다.

분석 대시보드

핵심 지표를 실시간으로 모니터링합니다.

Tabs 컨텐츠 전환 내비게이션

개요

멤버 12

설정

로그

API

선택된 탭의 컨텐츠 영역입니다.

Nav Pills

월간

주간

일간

Table 데이터 목록 표시

	프로젝트	담당자	상태	마감일	액션
	Qditer 디자인 시스템 v2.0 마이그레이션	홍 홍길동	진행중	2026. 07. 15	편집
	온보딩 플로우 개선 신규 사용자 경험	김 김수연	검토중	2026. 07. 22	편집
	API 문서 작성 REST 엔드포인트	이 이준혁	예정	2026. 08. 01	편집
	레거시 컴포넌트 제거 v1 → v2 정리	박 박민서	지연됨	2026. 06. 30	편집

Progress 진행률 표시 바

디자인 시스템 v2 72%

QA 테스트 100%

API 마이그레이션 45%

서버 안정성 18%

두께 변형

Pagination 페이지 탐색

1

2

3

4

5

…

12

Modal 오버레이 다이얼로그

프로젝트 삭제

정말 삭제하시겠습니까?

"Qditer 디자인 시스템" 프로젝트를 삭제하면 모든 데이터가 영구적으로 제거됩니다. 이 작업은 되돌릴 수 없습니다.

취소 삭제

Dropdown 컨텍스트 메뉴 / 액션 목록

프로필 편집

활동 기록

설정

계정 삭제

편집

복제

내보내기

Toast 알림 메시지 (상태별)

저장 완료

변경 사항이 자동으로 저장되었습니다.

구독 만료 예정

7일 후 플랜이 만료됩니다. 지금 갱신하세요.

연결 오류

서버와의 연결이 끊겼습니다. 다시 시도해 주세요.

새 업데이트 출시

디자인 시스템 v2.1이 출시되었습니다.

Tooltip data-tooltip 어트리뷰트 기반 (hover)

새 프로젝트 저장 설정

Skeleton 로딩 플레이스홀더

Empty State 데이터 없음 안내

아직 프로젝트가 없습니다

첫 번째 프로젝트를 만들어 팀과 함께 작업을 시작해 보세요.

새 프로젝트 만들기

Switch & Checkbox 토글 컨트롤

Switch

이메일 알림 허용 마케팅 수신 동의 비활성 스위치

Checkbox 그룹

푸시 알림

새 메시지 및 업데이트를 알려드립니다

주간 리포트

매주 월요일 요약 보고서를 이메일로 발송합니다

보안 경고

의심스러운 로그인 시도를 즉시 알려드립니다