Colors
Stable색에 역할을 부여해 일관되고 명확한 경험을 만듭니다.
Overview
명확한 위계(Clear)와 차분한 인상(Calm)을 바탕으로 한 범용 디자인 시스템의 색상 체계입니다. 단단한 Cabinet Olive(#38471D)가 Primary 메인 컬러가 되며, Fresh Olive(green)와 Tomato Coral(amber)이 보조 및 상태 강조 역할을 수행합니다. 포인트 컬러로 Butter Yellow가 추가되었으며, Cream은 Butter Yellow 스케일의 밝은 톤(yellow-100, #FFF8E5)으로 따뜻한 서피스를 구성합니다. 시스템의 Red(#EF4444)는 명확한 오류·삭제 피드백을 위해 고유 색상을 유지합니다.
Primitive values.
Semantic meaning.
Semantic meaning.
Cabinet Symbolic Line Logo & Favicon
정돈된 서랍과 사선 다리, 버터 옐로우 손잡이 포인트로 디자인 시스템의 수납·위계 원칙을 상징합니다.
Two-Tier Archive (기본 로고 & 파비콘)배경 없는 투명 라인 + 올리브 프레임 + 버터 옐로우/토마토 코랄 손잡이
Modern Credenza (양문형)양문형 슬릿 손잡이에 각각 버터 옐로우와 토마토 코랄이 포인트로 들어간 사이드보드
Three-Tier System (3단형)3개 서랍에 버터 옐로우, 토마토 코랄, 프레시 올리브 3색 손잡이가 배치된 캐비닛
Primitive palette
시스템의 6가지 핵심 브랜드 컬러와 목적별 스케일 팔레트(Brand, Neutral, Green, Amber, Yellow, Red)입니다. 컴포넌트는 원시 값을 직접 쓰지 않고, 역할이 정의된 Semantic 토큰을 통해 참조합니다.
core brand colors
Cabinet Olive
…Fresh Olive
…Butter Yellow
…Cream
…Deep Ink
…Tomato Coral
…목적별 전체 스케일 팔레트 (Primary Brand, Neutral, Green, Amber, Yellow, Red):
brand
brand-50
…brand-100
…brand-200
…brand-300
…brand-400
…brand-500
…brand-600
…brand-700
…brand-800
…brand-900
…brand-logo-base
…neutral
neutral-0
…neutral-50
…neutral-100
…neutral-200
…neutral-300
…neutral-400
…neutral-500
…neutral-600
…neutral-700
…neutral-800
…neutral-900
…green
green-50
…green-100
…green-200
…green-300
…green-400
…green-500
…green-600
…green-700
…amber
amber-50
…amber-100
…amber-200
…amber-300
…amber-400
…amber-500
…amber-600
…amber-700
…yellow
yellow-50
…yellow-100
…yellow-200
…yellow-300
…yellow-400
…yellow-500
…yellow-600
…yellow-700
…red
red-50
…red-400
…red-500
…red-600
…Semantic colors
색의 원시 값과 역할 이름을 분리합니다. 컴포넌트는 특정 색상명이 아닌 text, background, border, action과 feedback 역할을 사용합니다. 각 카드의 원형 컬러 팔레트는 다크 모드 전환 시 실시간으로 대응하는 다크 시맨틱 색상으로 즉시 반응합니다.
Surface & Background (배경 및 서피스)
화면의 기본 베이스와 카드 레이어, 모달, 상태 틴트 서피스
Base Background
--guide-bg-base전체 화면 기본 배경
…Surface Light
--guide-bg-surface-light카드 및 패널 서피스
…Surface Warm
--guide-bg-surface-warm따뜻한 보조 서피스 (Cream)
…Main Background
--guide-bg-main중립 회색 서피스
…Promo Surface
--guide-bg-promo프로모션 버터 옐로우 서피스
…Disabled Background
--guide-bg-disabled비활성화 배경
…Success Tint
--guide-bg-success-tint성공 상태 소프트 배경
…Warning Tint
--guide-bg-warning-tint경고 상태 소프트 배경
…Error Tint
--guide-bg-error-tint오류 상태 소프트 배경
…Info Tint
--guide-bg-info-tint정보 상태 소프트 배경
…Text & Content (텍스트 위계)
제목, 본문, 보조 문구 및 상태별 가독성을 위한 텍스트 색상
Primary Text
--guide-text-primary주요 헤드라인 및 강조 텍스트
…Body Text
--guide-text-body본문 기본 텍스트
…Secondary Text
--guide-text-secondary보조 설명 및 부제 텍스트
…Tertiary Text
--guide-text-tertiary메타 정보 및 캡션
…Muted Text
--guide-text-muted플레이스홀더 및 흐린 텍스트
…Disabled Text
--guide-text-disabled비활성 안내 문구
…Brand Text
--guide-text-brand브랜드 올리브 강조 텍스트
…Point Text
--guide-text-point토마토 코랄 포인트 텍스트
…Link Text
--guide-text-link인라인 링크 텍스트
…Text on Solid
--guide-text-on-solid솔리드 버튼/뱃지 위 텍스트
…Success Text
--guide-text-success성공 상태 안내 텍스트
…Error Text
--guide-text-error오류 피드백 텍스트
…Line & Border (경계선 및 인터랙션 라인)
구분선, 입력 컨트롤 테두리, 포커스 및 선택 상태 라인
Default Line
--guide-line-default기본 폼 컨트롤 테두리
…Light Line
--guide-line-light은은한 디바이더 구분선
…Strong Line
--guide-line-strong강조 테두리 및 카드 호버선
…Heading Line
--guide-line-heading헤딩 하단 기준선
…Focus Line
--guide-line-focus포커스 링 (접근성 아웃라인)
…Checked Line
--guide-line-checked체크/라디오 선택 시 활성선
…Accent Line
--guide-line-accent프레시 올리브 포인트선
…Point Line
--guide-line-point토마토 코랄 포인트선
…Error Line
--guide-line-error오류 상태 테두리선
…Icon & Graphic (아이콘 및 그래픽)
심볼 아이콘, 브랜드 로고 및 딤/오버레이 그래픽
Icon Strong
--guide-icon-strong-color주요 액션 및 강조 아이콘
…Icon Default
--guide-icon-default-color기본 보조 아이콘
…Icon Muted
--guide-icon-muted-color흐린 부가 아이콘
…Icon Point
--guide-icon-point-color알림 및 경고 포인트 아이콘
…Brand Logo
--guide-brand-logo캐비닛 로고 라인 그래픽
…Overlay Scrim
--guide-overlay-scrim모달 딤 배경 스크림
…전체 시맨틱 토큰 매핑 명세
| Token | 정의 / 매핑 | 현재 값 |
|---|---|---|
--guide-text-primary | var(--guide-color-deep-ink) | … |
--guide-text-body | var(--guide-color-deep-ink) | … |
--guide-text-secondary | var(--guide-neutral-700) | … |
--guide-text-tertiary | var(--guide-neutral-600) | … |
--guide-text-muted | var(--guide-neutral-500) | … |
--guide-text-disabled | var(--guide-neutral-400) | … |
--guide-text-point | var(--guide-color-tomato-coral) | … |
--guide-text-link | var(--guide-color-olive) | … |
--guide-text-brand | var(--guide-color-olive) | … |
--guide-text-on-image | var(--guide-neutral-0) | … |
--guide-text-on-image-sub | var(--guide-neutral-200) | … |
--guide-text-on-solid | var(--guide-neutral-0) | … |
--guide-text-on-disabled | var(--guide-neutral-500) | … |
--guide-text-success | var(--guide-green-500) | … |
--guide-text-warning | var(--guide-amber-500) | … |
--guide-text-error | var(--guide-red-500) | … |
--guide-bg-base | var(--guide-neutral-0) | … |
--guide-bg-surface-light | var(--guide-neutral-50) | … |
--guide-bg-surface-warm | var(--guide-color-cream) | … |
--guide-bg-main | var(--guide-neutral-100) | … |
--guide-bg-promo | var(--guide-color-butter-yellow) | … |
--guide-bg-disabled | var(--guide-neutral-300) | … |
--guide-bg-success-tint | var(--guide-green-50) | … |
--guide-bg-warning-tint | var(--guide-amber-50) | … |
--guide-bg-error-tint | var(--guide-red-50) | … |
--guide-bg-info-tint | var(--guide-brand-50) | … |
--guide-line-light | var(--guide-neutral-200) | … |
--guide-line-strong | var(--guide-neutral-300) | … |
--guide-line-heading | var(--guide-color-deep-ink) | … |
--guide-line-on-image | var(--guide-neutral-0) | … |
--guide-line-point | var(--guide-color-tomato-coral) | … |
--guide-line-focus | var(--guide-color-olive) | … |
--guide-line-hover | var(--guide-neutral-400) | … |
--guide-line-default | var(--guide-neutral-300) | … |
--guide-line-error | var(--guide-red-500) | … |
--guide-line-checked | var(--guide-color-olive) | … |
--guide-line-accent | var(--guide-color-fresh-olive) | … |
--guide-icon-strong-color | var(--guide-neutral-900) | … |
--guide-icon-default-color | var(--guide-neutral-600) | … |
--guide-icon-muted-color | var(--guide-neutral-400) | … |
--guide-icon-on-solid-color | var(--guide-neutral-0) | … |
--guide-icon-point-color | var(--guide-red-500) | … |
--guide-brand-logo | var(--guide-brand-logo-base) | … |
--guide-brand-logo-frame | var(--guide-brand-logo-base) | … |
--guide-overlay-scrim | rgb(15 23 42 / 64%) | … |
Token hierarchy
PRIMITIVE
--guide-color-olive…SEMANTIC
--guide-brand-600주요 브랜드 행동COMPONENT
--guide-button-primary-default-bgPrimary 버튼 배경TSX / CSS
/* Primitive */
--guide-color-olive: #38471d;
/* Semantic */
--guide-brand-600: var(--guide-color-olive);
/* Component */
--guide-button-primary-default-bg: var(--guide-brand-600);Primitive는 값, Semantic은 의미, Component는 구체적인 UI 계약을 담당합니다. 브랜드 테마는 Semantic 값을 덮어쓰고 컴포넌트 API는 유지합니다.
전체 Primitive 명세 · 143개
| Token | 정의 / 매핑 | 현재 값 |
|---|---|---|
--guide-font-sans | var(--font-pretendard), system-ui, sans-serif | … |
--guide-font-code | 'SFMono-Regular', Consolas, monospace | … |
--guide-size-40 | 40px | … |
--guide-size-36 | 36px | … |
--guide-size-32 | 32px | … |
--guide-size-30 | 30px | … |
--guide-size-28 | 28px | … |
--guide-size-26 | 26px | … |
--guide-size-24 | 24px | … |
--guide-size-22 | 22px | … |
--guide-size-20 | 20px | … |
--guide-size-18 | 18px | … |
--guide-size-17 | 17px | … |
--guide-size-16 | 16px | … |
--guide-size-15 | 15px | … |
--guide-size-14 | 14px | … |
--guide-size-13 | 13px | … |
--guide-size-12 | 12px | … |
--guide-size-11 | 11px | … |
--guide-fw-700 | 700 | … |
--guide-fw-600 | 600 | … |
--guide-fw-500 | 500 | … |
--guide-fw-400 | 400 | … |
--guide-lh-130 | 1.3 | … |
--guide-lh-150 | 1.5 | … |
--guide-neutral-0 | #ffffff | … |
--guide-neutral-50 | #f8fafc | … |
--guide-neutral-100 | #f1f5f9 | … |
--guide-neutral-200 | #e2e8f0 | … |
--guide-neutral-300 | #cbd5e1 | … |
--guide-neutral-400 | #94a3b8 | … |
--guide-neutral-500 | #64748b | … |
--guide-neutral-600 | #475569 | … |
--guide-neutral-700 | #334155 | … |
--guide-neutral-800 | #1e293b | … |
--guide-neutral-900 | #0f172a | … |
--guide-color-olive | #38471d | … |
--guide-color-fresh-olive | #7f9445 | … |
--guide-color-butter-yellow | #f5ca45 | … |
--guide-color-cream | #fff8e5 | … |
--guide-color-deep-ink | #23281d | … |
--guide-color-tomato-coral | #e66f4f | … |
--guide-brand-50 | #f5f7f0 | … |
--guide-brand-100 | #e7edd9 | … |
--guide-brand-200 | #cedcb3 | … |
--guide-brand-300 | #abc284 | … |
--guide-brand-400 | #6b843e | … |
--guide-brand-500 | #4d6129 | … |
--guide-brand-600 | #38471d | … |
--guide-brand-700 | #2b3716 | … |
--guide-brand-800 | #1f2710 | … |
--guide-brand-900 | #161c0c | … |
--guide-brand-logo-base | #38471d | … |
--guide-dark-bg-base | #0f130d | … |
--guide-dark-bg-surface | #181f14 | … |
--guide-dark-bg-warm | #232d1d | … |
--guide-dark-bg-main | #141a11 | … |
--guide-dark-line-light | #2f3d27 | … |
--guide-dark-line-strong | #495d3c | … |
--guide-dark-line-control | #697764 | … |
--guide-red-50 | #fef2f2 | … |
--guide-red-400 | #f87171 | … |
--guide-red-500 | #ef4444 | … |
--guide-red-600 | #dc2626 | … |
--guide-green-50 | #f6f8f1 | … |
--guide-green-100 | #eaf0de | … |
--guide-green-200 | #d5e2bd | … |
--guide-green-300 | #bad196 | … |
--guide-green-400 | #9dbf6f | … |
--guide-green-500 | #7f9445 | … |
--guide-green-600 | #677a35 | … |
--guide-green-700 | #506028 | … |
--guide-amber-50 | #fef4f1 | … |
--guide-amber-100 | #fde6e0 | … |
--guide-amber-200 | #fbcbc1 | … |
--guide-amber-300 | #f7a998 | … |
--guide-amber-400 | #f08870 | … |
--guide-amber-500 | #e66f4f | … |
--guide-amber-600 | #cc5636 | … |
--guide-amber-700 | #aa4226 | … |
--guide-yellow-50 | #fffdf7 | … |
--guide-yellow-100 | #fff8e5 | … |
--guide-yellow-200 | #feeec2 | … |
--guide-yellow-300 | #fedd8a | … |
--guide-yellow-400 | #f9d45f | … |
--guide-yellow-500 | #f5ca45 | … |
--guide-yellow-600 | #d9ad26 | … |
--guide-yellow-700 | #b3881c | … |
--guide-space-0 | 0px | … |
--guide-space-2 | 2px | … |
--guide-space-4 | 4px | … |
--guide-space-8 | 8px | … |
--guide-space-12 | 12px | … |
--guide-space-16 | 16px | … |
--guide-space-20 | 20px | … |
--guide-space-24 | 24px | … |
--guide-space-32 | 32px | … |
--guide-space-40 | 40px | … |
--guide-space-48 | 48px | … |
--guide-space-64 | 64px | … |
--guide-space-80 | 80px | … |
--guide-height-24 | 24px | … |
--guide-height-32 | 32px | … |
--guide-height-40 | 40px | … |
--guide-height-48 | 48px | … |
--guide-height-56 | 56px | … |
--guide-radius-0 | 0px | … |
--guide-radius-2 | 2px | … |
--guide-radius-4 | 4px | … |
--guide-radius-6 | 6px | … |
--guide-radius-8 | 8px | … |
--guide-radius-10 | 10px | … |
--guide-radius-16 | 16px | … |
--guide-radius-full | 999px | … |
--guide-border-1 | 1px | … |
--guide-border-2 | 2px | … |
--guide-border-3 | 3px | … |
--guide-icon-12 | 12px | … |
--guide-icon-14 | 14px | … |
--guide-icon-18 | 18px | … |
--guide-icon-24 | 24px | … |
--guide-icon-36 | 36px | … |
--guide-icon-48 | 48px | … |
--guide-stroke-1 | 1 | … |
--guide-stroke-1-25 | 1.25 | … |
--guide-stroke-1-5 | 1.5 | … |
--guide-stroke-2 | 2 | … |
--guide-touch-32 | 32px | … |
--guide-touch-44 | 44px | … |
--guide-touch-48 | 48px | … |
--guide-opacity-40 | 0.4 | … |
--guide-opacity-60 | 0.6 | … |
--guide-opacity-80 | 0.8 | … |
--guide-container-1280 | 1280px | … |
--guide-grid-columns-12 | 12 | … |
--guide-grid-columns-8 | 8 | … |
--guide-grid-columns-4 | 4 | … |
--guide-breakpoint-360 | 360px | … |
--guide-breakpoint-767 | 767px | … |
--guide-breakpoint-768 | 768px | … |
--guide-breakpoint-1024 | 1024px | … |
--guide-breakpoint-1280 | 1280px | … |
--guide-breakpoint-1920 | 1920px | … |
전체 Semantic 명세 · 155개 (효과·레이아웃 포함)
| Token | Mobile | Tablet ≥768 | Desktop ≥1280 | 현재 값 |
|---|---|---|---|---|
--guide-tit-display-hero | 36px | 40px | 40px | … |
--guide-tit-main-page | 32px | 36px | 36px | … |
--guide-tit-page-title | 28px | 30px | 30px | … |
--guide-tit-section-title | 22px | 24px | 24px | … |
--guide-tit-component-header | 16px | 18px | 18px | … |
--guide-tit-banner | 26px | 28px | 28px | … |
--guide-tit-promo-bar | 18px | 20px | 20px | … |
--guide-tit-card-title | 15px | 16px | 16px | … |
--guide-tit-deal-card | 18px | 24px | 24px | … |
--guide-txt-body-main | 16px | 16px | 16px | … |
--guide-txt-body-sub | 14px | 14px | 14px | … |
--guide-txt-caption | 12px | 12px | 12px | … |
--guide-txt-desc | 14px | 14px | 14px | … |
--guide-txt-banner-sub | 14px | 14px | 14px | … |
--guide-nav-menu | 14px | 16px | 16px | … |
--guide-nav-tab-label | 11px | 11px | 11px | … |
--guide-nav-util | 16px | 16px | 16px | … |
--guide-nav-mega-cat | 14px | 14px | 14px | … |
--guide-nav-mega-group | 16px | 16px | 16px | … |
--guide-nav-mega-item | 14px | 14px | 14px | … |
--guide-nav-breadcrumb | 13px | 13px | 13px | … |
--guide-price-main | 18px | 18px | 18px | … |
--guide-price-original | 14px | 14px | 14px | … |
--guide-price-convert | 13px | 13px | 13px | … |
--guide-badge-tag | 13px | 13px | 13px | … |
--guide-card-compact-title | 14px | 14px | 14px | … |
--guide-tab-item | 14px | 14px | 14px | … |
--guide-form-label | 13px | 13px | 13px | … |
--guide-sp-3xs | 4px | 4px | 4px | … |
--guide-sp-2xs | 4px | 4px | 4px | … |
--guide-sp-xs | 8px | 8px | 8px | … |
--guide-sp-sm | 12px | 12px | 12px | … |
--guide-sp-md | 16px | 16px | 16px | … |
--guide-sp-lg | 24px | 24px | 24px | … |
--guide-sp-xl | 32px | 32px | 32px | … |
--guide-sp-2xl | 32px | 40px | 40px | … |
--guide-sp-3xl | 40px | 40px | 40px | … |
--guide-sp-4xl | 80px | 80px | 80px | … |
--guide-gap-xxs | 4px | 4px | 4px | … |
--guide-gap-xs | 4px | 4px | 4px | … |
--guide-gap-sm | 8px | 8px | 8px | … |
--guide-gap-md | 12px | 12px | 12px | … |
--guide-gap-lg | 16px | 16px | 16px | … |
--guide-gap-xl | 16px | 16px | 16px | … |
--guide-gap-xxl | 24px | 24px | 24px | … |
--guide-gap-3xl | 40px | 40px | 40px | … |
--guide-gap-4xl | 64px | 64px | 64px | … |
--guide-gap-5xl | 80px | 80px | 80px | … |
--guide-breakpoint-min | 360px | 768px | 1280px | … |
--guide-breakpoint-max | 767px | 1024px | 1920px | … |
--guide-container-max | 360px | 768px | 1280px | … |
--guide-margin-container | 16px | 24px | 0px | … |
--guide-grid-card-4col | 302px | 302px | 302px | … |
--guide-grid-card-3col | 227px | 227px | 227px | … |
--guide-grid-card-1col | 328px | 328px | 328px | … |
--guide-grid-card-2col | 156px | 156px | 156px | … |
--guide-grid-desktop | 12 | 12 | 12 | … |
--guide-grid-tablet | 8 | 8 | 8 | … |
--guide-grid-mobile | 4 | 4 | 4 | … |
--guide-text-primary | #23281d | #23281d | #23281d | … |
--guide-text-body | #23281d | #23281d | #23281d | … |
--guide-text-secondary | #334155 | #334155 | #334155 | … |
--guide-text-tertiary | #475569 | #475569 | #475569 | … |
--guide-text-muted | #64748b | #64748b | #64748b | … |
--guide-text-disabled | #94a3b8 | #94a3b8 | #94a3b8 | … |
--guide-text-point | #e66f4f | #e66f4f | #e66f4f | … |
--guide-text-link | #38471d | #38471d | #38471d | … |
--guide-text-brand | #38471d | #38471d | #38471d | … |
--guide-text-on-image | #ffffff | #ffffff | #ffffff | … |
--guide-text-on-image-sub | #e2e8f0 | #e2e8f0 | #e2e8f0 | … |
--guide-text-on-solid | #ffffff | #ffffff | #ffffff | … |
--guide-text-on-disabled | #64748b | #64748b | #64748b | … |
--guide-text-success | #7f9445 | #7f9445 | #7f9445 | … |
--guide-text-warning | #e66f4f | #e66f4f | #e66f4f | … |
--guide-text-error | #ef4444 | #ef4444 | #ef4444 | … |
--guide-bg-base | #ffffff | #ffffff | #ffffff | … |
--guide-bg-surface-light | #f8fafc | #f8fafc | #f8fafc | … |
--guide-bg-surface-warm | #fff8e5 | #fff8e5 | #fff8e5 | … |
--guide-bg-main | #f1f5f9 | #f1f5f9 | #f1f5f9 | … |
--guide-bg-promo | #f5ca45 | #f5ca45 | #f5ca45 | … |
--guide-bg-disabled | #cbd5e1 | #cbd5e1 | #cbd5e1 | … |
--guide-bg-success-tint | #f6f8f1 | #f6f8f1 | #f6f8f1 | … |
--guide-bg-warning-tint | #fef4f1 | #fef4f1 | #fef4f1 | … |
--guide-bg-error-tint | #fef2f2 | #fef2f2 | #fef2f2 | … |
--guide-bg-info-tint | #f5f7f0 | #f5f7f0 | #f5f7f0 | … |
--guide-line-light | #e2e8f0 | #e2e8f0 | #e2e8f0 | … |
--guide-line-strong | #cbd5e1 | #cbd5e1 | #cbd5e1 | … |
--guide-line-heading | #23281d | #23281d | #23281d | … |
--guide-line-on-image | #ffffff | #ffffff | #ffffff | … |
--guide-line-point | #e66f4f | #e66f4f | #e66f4f | … |
--guide-line-focus | #38471d | #38471d | #38471d | … |
--guide-line-hover | #94a3b8 | #94a3b8 | #94a3b8 | … |
--guide-line-default | #cbd5e1 | #cbd5e1 | #cbd5e1 | … |
--guide-line-error | #ef4444 | #ef4444 | #ef4444 | … |
--guide-line-checked | #38471d | #38471d | #38471d | … |
--guide-line-accent | #7f9445 | #7f9445 | #7f9445 | … |
--guide-icon-strong-color | #0f172a | #0f172a | #0f172a | … |
--guide-icon-default-color | #475569 | #475569 | #475569 | … |
--guide-icon-muted-color | #94a3b8 | #94a3b8 | #94a3b8 | … |
--guide-icon-on-solid-color | #ffffff | #ffffff | #ffffff | … |
--guide-icon-point-color | #ef4444 | #ef4444 | #ef4444 | … |
--guide-icon-3xs-size | 12px | 12px | 12px | … |
--guide-icon-3xs-stroke | 1 | 1 | 1 | … |
--guide-icon-2xs-size | 14px | 14px | 14px | … |
--guide-icon-2xs-stroke | 1.25 | 1.25 | 1.25 | … |
--guide-icon-xs-size | 18px | 18px | 18px | … |
--guide-icon-xs-stroke | 1.25 | 1.25 | 1.25 | … |
--guide-icon-sm-size | 24px | 24px | 24px | … |
--guide-icon-sm-stroke | 1.5 | 1.5 | 1.5 | … |
--guide-icon-md-size | 36px | 36px | 36px | … |
--guide-icon-md-stroke | 2 | 2 | 2 | … |
--guide-icon-lg-size | 48px | 48px | 48px | … |
--guide-icon-lg-stroke | 2 | 2 | 2 | … |
--guide-icon-3xs-svg-stroke | 26.667px | 26.667px | 26.667px | … |
--guide-icon-2xs-svg-stroke | 28.571px | 28.571px | 28.571px | … |
--guide-icon-xs-svg-stroke | 22.222px | 22.222px | 22.222px | … |
--guide-icon-sm-svg-stroke | 20px | 20px | 20px | … |
--guide-icon-md-svg-stroke | 17.778px | 17.778px | 17.778px | … |
--guide-icon-lg-svg-stroke | 13.333px | 13.333px | 13.333px | … |
--guide-brand-logo | #38471d | #38471d | #38471d | … |
--guide-brand-logo-frame | #38471d | #38471d | #38471d | … |
--guide-overlay-scrim | rgb(15 23 42 / 64%) | rgb(15 23 42 / 64%) | rgb(15 23 42 / 64%) | … |
--guide-font-base | --font-pretendard, system-ui, sans-serif | --font-pretendard, system-ui, sans-serif | --font-pretendard, system-ui, sans-serif | … |
--guide-fw-heading | 700 | 700 | 700 | … |
--guide-fw-strong | 600 | 600 | 600 | … |
--guide-fw-title | 500 | 500 | 500 | … |
--guide-fw-body | 400 | 400 | 400 | … |
--guide-lh-tight | 1.3 | 1.3 | 1.3 | … |
--guide-lh-base | 1.5 | 1.5 | 1.5 | … |
--guide-media-play-button | 80px | 80px | 80px | … |
--guide-control-box | 20px | 20px | 20px | … |
--guide-control-mark | 12px | 12px | 12px | … |
--guide-radius-square | 0px | 0px | 0px | … |
--guide-radius-badge | 6px | 6px | 6px | … |
--guide-radius-button | 8px | 8px | 8px | … |
--guide-radius-input | 8px | 8px | 8px | … |
--guide-radius-card | 10px | 10px | 10px | … |
--guide-radius-modal | 16px | 16px | 16px | … |
--guide-radius-chip | 999px | 999px | 999px | … |
--guide-radius-avatar | 999px | 999px | 999px | … |
--guide-touch-compact | 32px | 32px | 32px | … |
--guide-touch-min | 44px | 44px | 44px | … |
--guide-touch-comfortable | 48px | 48px | 48px | … |
--guide-border-default | 1px | 1px | 1px | … |
--guide-border-divider | 1px | 1px | 1px | … |
--guide-border-focus | 1px | 1px | 1px | … |
--guide-border-tab-active | 2px | 2px | 2px | … |
--guide-opacity-disabled | 0.4 | 0.4 | 0.4 | … |
--guide-opacity-dim | 0.6 | 0.6 | 0.6 | … |
--guide-shadow-header | 0 1px 0 0 rgb(15 23 42 / 8%) | 0 1px 0 0 rgb(15 23 42 / 8%) | 0 1px 0 0 rgb(15 23 42 / 8%) | … |
--guide-shadow-sm | 0 1px 2px 0 rgb(15 23 42 / 8%) | 0 1px 2px 0 rgb(15 23 42 / 8%) | 0 1px 2px 0 rgb(15 23 42 / 8%) | … |
--guide-shadow-md | 0 8px 20px -6px rgb(15 23 42 / 18%) | 0 8px 20px -6px rgb(15 23 42 / 18%) | 0 8px 20px -6px rgb(15 23 42 / 18%) | … |
--guide-shadow-lg | 0 18px 40px -12px rgb(15 23 42 / 24%) | 0 18px 40px -12px rgb(15 23 42 / 24%) | 0 18px 40px -12px rgb(15 23 42 / 24%) | … |
--guide-shadow-quick-menu | 0 0 50px 0 rgb(0 0 0 / 10%) | 0 0 8px 0 rgb(0 0 0 / 6%) | 0 0 8px 0 rgb(0 0 0 / 6%) | … |
--guide-scrim-banner-bottom | linear-gradient( to bottom, rgb(33 33 33 / 0%) 30%, rgb(33 33 33 / 80%) 100% ) | linear-gradient( to bottom, rgb(33 33 33 / 0%) 30%, rgb(33 33 33 / 80%) 100% ) | linear-gradient( to bottom, rgb(33 33 33 / 0%) 30%, rgb(33 33 33 / 80%) 100% ) | … |
Guidelines
- 화면에서는 의미에 맞는 Semantic 이름을 우선 사용합니다.
- 색상값을 직접 사용하기보다 Semantic 토큰을 선택하고, 작은 텍스트는 배경과의 WCAG 명암비를 확인합니다.
- 색상 외에 레이블과 아이콘으로 오류·선택 상태를 함께 전달합니다.
- 문서 UI와 실제 Button 모두 같은 guide 토큰을 참조합니다.