design guidev0.1
A personal design system
문서 탐색
이 페이지에서
Foundations/Colors

Colors

Stable

색에 역할을 부여해 일관되고 명확한 경험을 만듭니다.

DESIGN & DEVELOPMENTUpdated Sep 2026

Overview

참고 저장소의 site 토큰 이름과 값을 기준으로 합니다. Gray, Blue, Red, Green, Orange 원시 팔레트에 텍스트·배경·경계·아이콘·브랜드 역할을 연결합니다.

Primitive values.
Semantic meaning.

Primitive palette

원본 Primitive 팔레트 전체입니다. 스와치와 표시 값은 실제 CSS 변수를 사용합니다.

gray

gray-0…
gray-50…
gray-100…
gray-200…
gray-300…
gray-400…
gray-500…
gray-600…
gray-700…
gray-800…
gray-900…

blue

blue-50…
blue-400…
blue-500…
blue-600…
blue-logo…

red

red-50…
red-400…
red-500…
red-600…

green

green-50…
green-500…

orange

orange-50…
orange-500…

Semantic colors

색의 원시 값과 역할 이름을 분리합니다. 예를 들어 text/point는 Red 500, text/link는 Blue 500입니다.

Token정의 / 매핑현재 값
--site-text-primaryvar(--site-gray-900)…
--site-text-bodyvar(--site-gray-800)…
--site-text-secondaryvar(--site-gray-700)…
--site-text-tertiaryvar(--site-gray-600)…
--site-text-mutedvar(--site-gray-500)…
--site-text-disabledvar(--site-gray-400)…
--site-text-pointvar(--site-red-500)…
--site-text-linkvar(--site-blue-500)…
--site-text-on-imagevar(--site-gray-0)…
--site-text-on-image-subvar(--site-gray-200)…
--site-text-on-solidvar(--site-gray-0)…
--site-text-on-disabledvar(--site-gray-500)…
--site-text-successvar(--site-green-500)…
--site-text-warningvar(--site-orange-500)…
--site-text-errorvar(--site-red-500)…
--site-bg-basevar(--site-gray-0)…
--site-bg-surface-lightvar(--site-gray-50)…
--site-bg-mainvar(--site-gray-100)…
--site-bg-promovar(--site-blue-500)…
--site-bg-disabledvar(--site-gray-300)…
--site-bg-success-tintvar(--site-green-50)…
--site-bg-warning-tintvar(--site-orange-50)…
--site-bg-error-tintvar(--site-red-50)…
--site-bg-info-tintvar(--site-blue-50)…
--site-line-lightvar(--site-gray-200)…
--site-line-strongvar(--site-gray-300)…
--site-line-headingvar(--site-gray-900)…
--site-line-on-imagevar(--site-gray-0)…
--site-line-pointvar(--site-red-500)…
--site-line-focusvar(--site-gray-900)…
--site-line-hovervar(--site-gray-400)…
--site-line-defaultvar(--site-gray-300)…
--site-line-errorvar(--site-red-500)…
--site-line-checkedvar(--site-gray-900)…
--site-line-accentvar(--site-blue-500)…
--site-icon-strong-colorvar(--site-gray-900)…
--site-icon-default-colorvar(--site-gray-600)…
--site-icon-muted-colorvar(--site-gray-400)…
--site-icon-on-solid-colorvar(--site-gray-0)…
--site-icon-point-colorvar(--site-red-500)…
--site-brand-logovar(--site-blue-logo)…
--site-overlay-scrimrgb(33 33 33 / 60%)…

Token hierarchy

PRIMITIVE--site-gray-0…
SEMANTIC--site-text-on-solid단색 배경 위 텍스트
COMPONENT--site-button-solid-default-textSolid 레이블
TSX / CSS
/* Primitive */
--site-gray-0: #ffffff;
/* Semantic */
--site-text-on-solid: var(--site-gray-0);
/* Component */
--site-button-solid-default-text: var(--site-text-on-solid);

원본의 매핑을 보존합니다. 일부 Component 토큰은 Primitive를 직접 참조하며, Semantic의 레이아웃·효과 값 중에는 원시 수치도 있습니다. 계층을 맞추기 위해 이 매핑을 임의로 바꾸지 않습니다.

전체 Primitive 명세 · 110개
Token정의 / 매핑현재 값
--site-font-sansvar(--font-pretendard), system-ui, sans-serif…
--site-size-4040px…
--site-size-3636px…
--site-size-3232px…
--site-size-3030px…
--site-size-2828px…
--site-size-2626px…
--site-size-2424px…
--site-size-2222px…
--site-size-2020px…
--site-size-1818px…
--site-size-1717px…
--site-size-1616px…
--site-size-1515px…
--site-size-1414px…
--site-size-1313px…
--site-size-1212px…
--site-size-1111px…
--site-fw-700700…
--site-fw-600600…
--site-fw-500500…
--site-fw-400400…
--site-lh-1301.3…
--site-lh-1501.5…
--site-gray-0#ffffff…
--site-gray-50#fafafa…
--site-gray-100#f5f5f5…
--site-gray-200#eeeeee…
--site-gray-300#e0e0e0…
--site-gray-400#bdbdbd…
--site-gray-500#9e9e9e…
--site-gray-600#757575…
--site-gray-700#616161…
--site-gray-800#424242…
--site-gray-900#212121…
--site-blue-50#e3f2fd…
--site-blue-400#33a9ed…
--site-blue-500#0094e9…
--site-blue-600#0087d4…
--site-blue-logo#4093df…
--site-red-50#ffebee…
--site-red-400#f86363…
--site-red-500#f43c3c…
--site-red-600#de3737…
--site-green-50#e8f5e9…
--site-green-500#4caf50…
--site-orange-50#fff8e1…
--site-orange-500#f9a825…
--site-space-00px…
--site-space-22px…
--site-space-44px…
--site-space-88px…
--site-space-1212px…
--site-space-1414px…
--site-space-1616px…
--site-space-1818px…
--site-space-2020px…
--site-space-2424px…
--site-space-2828px…
--site-space-3232px…
--site-space-4040px…
--site-space-5050px…
--site-space-6060px…
--site-space-8080px…
--site-height-2424px…
--site-height-2828px…
--site-height-3232px…
--site-height-3636px…
--site-height-4040px…
--site-height-4444px…
--site-height-4848px…
--site-height-5252px…
--site-height-5656px…
--site-radius-00px…
--site-radius-22px…
--site-radius-44px…
--site-radius-66px…
--site-radius-88px…
--site-radius-1010px…
--site-radius-1616px…
--site-radius-full999px…
--site-border-11px…
--site-border-22px…
--site-border-33px…
--site-icon-1212px…
--site-icon-1414px…
--site-icon-1818px…
--site-icon-2424px…
--site-icon-3636px…
--site-icon-4848px…
--site-stroke-11…
--site-stroke-1-251.25…
--site-stroke-1-51.5…
--site-stroke-22…
--site-touch-3232px…
--site-touch-4444px…
--site-touch-4848px…
--site-opacity-400.4…
--site-opacity-600.6…
--site-opacity-800.8…
--site-container-12801280px…
--site-grid-columns-1212…
--site-grid-columns-88…
--site-grid-columns-44…
--site-breakpoint-360360px…
--site-breakpoint-767767px…
--site-breakpoint-768768px…
--site-breakpoint-10241024px…
--site-breakpoint-12801280px…
--site-breakpoint-19201920px…
전체 Semantic 명세 · 153개 (효과·레이아웃 포함)
TokenMobileTablet ≥768Desktop ≥1280현재 값
--site-tit-display-hero30px36px40px…
--site-tit-main-page26px30px32px…
--site-tit-page-title22px26px28px…
--site-tit-section-title18px22px24px…
--site-tit-component-header15px17px18px…
--site-tit-banner26px28px28px…
--site-tit-promo-bar18px20px20px…
--site-tit-card-title15px16px16px…
--site-tit-deal-card18px24px24px…
--site-txt-body-main13px14px14px…
--site-txt-body-sub12px13px13px…
--site-txt-caption11px12px12px…
--site-txt-desc14px14px14px…
--site-txt-banner-sub14px14px14px…
--site-nav-menu14px16px16px…
--site-nav-tab-label11px11px11px…
--site-nav-util16px16px16px…
--site-nav-mega-cat14px14px14px…
--site-nav-mega-group16px16px16px…
--site-nav-mega-item14px14px14px…
--site-nav-breadcrumb13px13px13px…
--site-price-main18px18px18px…
--site-price-original14px14px14px…
--site-price-convert13px13px13px…
--site-badge-tag13px13px13px…
--site-card-compact-title14px14px14px…
--site-tab-item14px14px14px…
--site-form-label13px13px13px…
--site-sp-3xs2px2px2px…
--site-sp-2xs4px4px4px…
--site-sp-xs8px8px8px…
--site-sp-sm12px14px16px…
--site-sp-md16px18px20px…
--site-sp-lg24px24px24px…
--site-sp-xl28px32px32px…
--site-sp-2xl32px40px40px…
--site-sp-3xl40px50px60px…
--site-sp-4xl80px80px80px…
--site-gap-xxs2px2px2px…
--site-gap-xs4px4px4px…
--site-gap-sm8px8px8px…
--site-gap-md12px12px12px…
--site-gap-lg14px14px16px…
--site-gap-xl16px20px24px…
--site-gap-xxl24px28px32px…
--site-gap-3xl40px40px40px…
--site-gap-4xl60px60px60px…
--site-gap-5xl80px80px80px…
--site-breakpoint-min360px768px1280px…
--site-breakpoint-max767px1024px1920px…
--site-container-max360px768px1280px…
--site-margin-container16px24px0px…
--site-grid-card-4col302px302px302px…
--site-grid-card-3col227px227px227px…
--site-grid-card-1col328px328px328px…
--site-grid-card-2col156px156px156px…
--site-grid-desktop121212…
--site-grid-tablet888…
--site-grid-mobile444…
--site-text-primary#212121#212121#212121…
--site-text-body#424242#424242#424242…
--site-text-secondary#616161#616161#616161…
--site-text-tertiary#757575#757575#757575…
--site-text-muted#9e9e9e#9e9e9e#9e9e9e…
--site-text-disabled#bdbdbd#bdbdbd#bdbdbd…
--site-text-point#f43c3c#f43c3c#f43c3c…
--site-text-link#0094e9#0094e9#0094e9…
--site-text-on-image#ffffff#ffffff#ffffff…
--site-text-on-image-sub#eeeeee#eeeeee#eeeeee…
--site-text-on-solid#ffffff#ffffff#ffffff…
--site-text-on-disabled#9e9e9e#9e9e9e#9e9e9e…
--site-text-success#4caf50#4caf50#4caf50…
--site-text-warning#f9a825#f9a825#f9a825…
--site-text-error#f43c3c#f43c3c#f43c3c…
--site-bg-base#ffffff#ffffff#ffffff…
--site-bg-surface-light#fafafa#fafafa#fafafa…
--site-bg-main#f5f5f5#f5f5f5#f5f5f5…
--site-bg-promo#0094e9#0094e9#0094e9…
--site-bg-disabled#e0e0e0#e0e0e0#e0e0e0…
--site-bg-success-tint#e8f5e9#e8f5e9#e8f5e9…
--site-bg-warning-tint#fff8e1#fff8e1#fff8e1…
--site-bg-error-tint#ffebee#ffebee#ffebee…
--site-bg-info-tint#e3f2fd#e3f2fd#e3f2fd…
--site-line-light#eeeeee#eeeeee#eeeeee…
--site-line-strong#e0e0e0#e0e0e0#e0e0e0…
--site-line-heading#212121#212121#212121…
--site-line-on-image#ffffff#ffffff#ffffff…
--site-line-point#f43c3c#f43c3c#f43c3c…
--site-line-focus#212121#212121#212121…
--site-line-hover#bdbdbd#bdbdbd#bdbdbd…
--site-line-default#e0e0e0#e0e0e0#e0e0e0…
--site-line-error#f43c3c#f43c3c#f43c3c…
--site-line-checked#212121#212121#212121…
--site-line-accent#0094e9#0094e9#0094e9…
--site-icon-strong-color#212121#212121#212121…
--site-icon-default-color#757575#757575#757575…
--site-icon-muted-color#bdbdbd#bdbdbd#bdbdbd…
--site-icon-on-solid-color#ffffff#ffffff#ffffff…
--site-icon-point-color#f43c3c#f43c3c#f43c3c…
--site-icon-3xs-size12px12px12px…
--site-icon-3xs-stroke111…
--site-icon-2xs-size14px14px14px…
--site-icon-2xs-stroke1.251.251.25…
--site-icon-xs-size18px18px18px…
--site-icon-xs-stroke1.251.251.25…
--site-icon-sm-size24px24px24px…
--site-icon-sm-stroke1.51.51.5…
--site-icon-md-size36px36px36px…
--site-icon-md-stroke222…
--site-icon-lg-size48px48px48px…
--site-icon-lg-stroke222…
--site-icon-3xs-svg-stroke26.667px26.667px26.667px…
--site-icon-2xs-svg-stroke28.571px28.571px28.571px…
--site-icon-xs-svg-stroke22.222px22.222px22.222px…
--site-icon-sm-svg-stroke20px20px20px…
--site-icon-md-svg-stroke17.778px17.778px17.778px…
--site-icon-lg-svg-stroke13.333px13.333px13.333px…
--site-brand-logo#4093df#4093df#4093df…
--site-overlay-scrimrgb(33 33 33 / 60%)rgb(33 33 33 / 60%)rgb(33 33 33 / 60%)…
--site-font-base--font-pretendard, system-ui, sans-serif--font-pretendard, system-ui, sans-serif--font-pretendard, system-ui, sans-serif…
--site-fw-heading700700700…
--site-fw-strong600600600…
--site-fw-title500500500…
--site-fw-body400400400…
--site-lh-tight1.31.31.3…
--site-lh-base1.51.51.5…
--site-media-play-button80px80px80px…
--site-control-box20px20px20px…
--site-control-mark12px12px12px…
--site-radius-square0px0px0px…
--site-radius-badge2px2px2px…
--site-radius-button4px4px4px…
--site-radius-input4px4px4px…
--site-radius-card8px8px8px…
--site-radius-modal16px16px16px…
--site-radius-chip999px999px999px…
--site-radius-avatar999px999px999px…
--site-touch-compact32px32px32px…
--site-touch-min44px44px44px…
--site-touch-comfortable48px48px48px…
--site-border-default1px1px1px…
--site-border-divider1px1px1px…
--site-border-focus1px1px1px…
--site-border-tab-active2px2px2px…
--site-opacity-disabled0.40.40.4…
--site-opacity-dim0.60.60.6…
--color-primary#212121#212121#212121…
--site-shadow-header0 1px 0 0 rgb(0 0 0 / 6%)0 1px 0 0 rgb(0 0 0 / 6%)0 1px 0 0 rgb(0 0 0 / 6%)…
--shadow-sm0 1px 2px 0 rgb(0 0 0 / 6%)0 1px 2px 0 rgb(0 0 0 / 6%)0 1px 2px 0 rgb(0 0 0 / 6%)…
--shadow-md0 4px 12px 0 rgb(0 0 0 / 8%)0 4px 12px 0 rgb(0 0 0 / 8%)0 4px 12px 0 rgb(0 0 0 / 8%)…
--shadow-lg0 8px 24px 0 rgb(0 0 0 / 12%)0 8px 24px 0 rgb(0 0 0 / 12%)0 8px 24px 0 rgb(0 0 0 / 12%)…
--site-shadow-quick-menu0 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%)…
--site-scrim-banner-bottomlinear-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 이름을 우선 사용합니다.
  • 원본 팔레트를 임의로 어둡게 보정하지 않습니다. text/link·point·상태 색상의 작은 텍스트 사용은 배경과의 대비를 별도로 확인합니다.
  • 색상 외에 레이블과 아이콘으로 오류·선택 상태를 함께 전달합니다.
  • 문서 UI와 실제 Button 모두 같은 site 토큰을 참조합니다.
작은 원칙이 좋은 경험을 만듭니다.맨 위로