Foundations
Color
On a calm base, we add the colors of dynamic energy and connection. From four brand colors we build perceptually even scales and role-based tokens.차분한 바탕 위에, 역동적인 에너지와 연결의 색을 더합니다. 네 가지 브랜드 색에서 지각적으로 균일한 스케일과 역할 기반 토큰을 만듭니다.
Color tokens
Tokens stack in order: brand colors → scales → semantic tokens. Product screens use the top layer, semantic tokens.브랜드 원색 → 스케일 → 의미 토큰 순서로 쌓입니다. 제품 화면에서는 가장 위 단계인 의미 토큰을 사용합니다.
Brand palette
The four colors at the core of the brand. Click a card to copy its HEX value.브랜드의 기준이 되는 네 가지 색입니다. 카드를 눌러 HEX 값을 복사하세요.
Color scales
Lightness is divided into even steps in the OKLCH color space, so contrast between steps is predictable. Brand colors are pinned to their exact values (anchors).OKLCH 색 공간에서 명도를 일정한 간격으로 나눠 단계별 대비를 예측할 수 있게 했습니다. 브랜드 원색은 정확한 값으로 고정(anchor)됩니다.
Click a chip to copy its CSS variable. ● marks a pinned brand value (anchor). The number is the contrast ratio with white (W) or black (B) text.칩을 누르면 CSS 변수를 복사합니다. ● 표시는 브랜드 고정값(anchor)입니다. 숫자는 흰색(W) 또는 검정(B) 텍스트와의 대비율입니다.
Semantic tokens
In product UI, choose tokens by role rather than by color name. The same token points to different scale values in light and dark themes.제품 UI에서는 색상 이름보다 역할을 기준으로 토큰을 선택합니다. 같은 토큰이 라이트, 다크 테마에서 서로 다른 스케일 값을 가리킵니다.
| Token | Light | Dark | Usage사용처 |
|---|---|---|---|
--dy-color-bg | gray.0 | gray.1000 | Default page background페이지 기본 바탕 |
--dy-color-bg-subtle | gray.50 | gray.950 | Distinct surface / Living White구분되는 표면 / Living White |
--dy-color-bg-muted | gray.100 | gray.900 | Inactive / secondary areas비활성 / 보조 영역 |
--dy-color-bg-elevated | gray.0 | gray.900 | Cards, popovers, dialogs카드, 팝오버, 다이얼로그 |
--dy-color-bg-inverse | gray.950 | gray.50 | Inverse surface반전 표면 |
--dy-color-fg | gray.950 | gray.50 | Default body text기본 본문 |
--dy-color-fg-muted | gray.600 | gray.400 | Secondary descriptions보조 설명 |
--dy-color-fg-subtle | gray.500 | gray.500 | Decoration / metadata (not for body text)장식 / 메타 정보 (본문 사용 금지) |
--dy-color-fg-inverse | gray.50 | gray.950 | Text on inverse surfaces반전 표면 위 텍스트 |
--dy-color-border | gray.200 | gray.800 | Dividers구분선 |
--dy-color-border-strong | gray.300 | gray.700 | Emphasized dividers강조 구분선 |
--dy-color-border-control | gray.500 | gray.500 | Input control borders (3:1 or more)입력 컨트롤 경계 (3:1 이상) |
--dy-color-action | violet.600 | violet.500 | Primary actions / selection주요 행동 / 선택 |
--dy-color-action-hover | violet.700 | violet.600 | Primary action hover주요 행동 hover |
--dy-color-action-subtle | violet.50 | violet.950 | Selected item background선택된 항목 배경 |
--dy-color-action-fg | violet.600 | violet.300 | Links / selected text링크 / 선택 텍스트 |
--dy-color-on-action | gray.0 | gray.0 | Text on action color행동 색 위 텍스트 |
--dy-color-accent | lime.300 | lime.300 | Brand emphasis / points of connection브랜드 강조 / 연결 지점 |
--dy-color-accent-hover | lime.400 | lime.200 | Accent hover강조 hover |
--dy-color-on-accent | gray.950 | gray.950 | Text on lime (always dark)라임 위 텍스트 (항상 어둡게) |
--dy-color-brand | violet.500 | violet.500 | Brand color fields브랜드 색면 |
--dy-color-focus | violet.600 | lime.300 | Focus ring포커스 링 |
--dy-color-positive | green.600 | green.400 | Success text / icons성공 텍스트 / 아이콘 |
--dy-color-positive-subtle | green.50 | green.950 | Success background성공 배경 |
--dy-color-critical | red.600 | red.400 | Errors / danger오류 / 위험 |
--dy-color-critical-subtle | red.50 | red.950 | Error background오류 배경 |
--dy-color-warning | amber.700 | amber.300 | Caution주의 |
--dy-color-warning-subtle | amber.50 | amber.950 | Caution background주의 배경 |
--dy-color-chart-1 | violet.500 | violet.400 | Chart series 1 / Life차트 계열 1 / Life |
--dy-color-chart-2 | lime.700 | lime.300 | Chart series 2 / Wellness차트 계열 2 / Wellness |
--dy-color-chart-3 | red.500 | red.400 | Chart series 3 / Bio차트 계열 3 / Bio |
Contrast & pairings대비와 조합
WCAG 2.2 contrast ratios for key text and control pairings, calculated live from the token values.주요 텍스트, 컨트롤 조합의 WCAG 2.2 대비율을 토큰 값으로 실시간 계산합니다.
Light theme
- AaBody text본문fg / bg18.88AAA
- AaSecondary text보조 텍스트fg-muted / bg5.91AA
- AaSecondary text on surface표면 위 보조 텍스트fg-muted / bg-subtle5.50AA
- AaPrimary buttonPrimary 버튼on-action / action6.28AA
- AaLime button / badge라임 버튼 / 배지on-accent / accent16.06AAA
- AaLink링크action-fg / bg6.28AA
- AaError message오류 메시지critical / bg5.46AA
- AaSuccess message성공 메시지positive / bg5.80AA
- AaCaution message주의 메시지warning / bg5.81AA
- Input border (3:1)입력 경계 (3:1)border-control / bg3.943:1 ✓
Dark theme
- AaBody text본문fg / bg18.43AAA
- AaSecondary text보조 텍스트fg-muted / bg8.87AAA
- AaSecondary text on surface표면 위 보조 텍스트fg-muted / bg-subtle8.47AAA
- AaPrimary buttonPrimary 버튼on-action / action4.80AA
- AaLime button / badge라임 버튼 / 배지on-accent / accent16.06AAA
- AaLink링크action-fg / bg10.75AAA
- AaError message오류 메시지critical / bg7.11AAA
- AaSuccess message성공 메시지positive / bg8.00AAA
- AaCaution message주의 메시지warning / bg10.84AAA
- Input border (3:1)입력 경계 (3:1)border-control / bg5.023:1 ✓
Always use dark text (--dy-color-on-accent) on lime backgrounds, and pair errors with an explanatory sentence.라임 바탕에는 항상 어두운 글자(--dy-color-on-accent)를 사용하고, 오류에는 설명 문장을 함께 표시합니다.
Avoid white text on lime, states distinguished by color alone, and gradients behind body text.라임 바탕 위 흰 글자, 색상만으로 구분하는 상태, 본문 뒤 그라디언트는 피합니다.
Color balance
The same four colors can leave a completely different impression depending on their ratio. See recommended ratios and automatic checks per screen context in the Color balance guide.같은 네 가지 색이라도 비율에 따라 전혀 다른 인상이 됩니다. 화면의 맥락별 권장 비율과 자동 진단은 Color balance 문서에서 확인하세요.
CSS tokens
.primary-action {
background: var(--dy-color-action);
color: var(--dy-color-on-action);
}
.highlight {
background: var(--dy-color-accent);
color: var(--dy-color-on-accent);
}
/* Switch themes */
<html data-theme="dark">.primary-action {
background: var(--dy-color-action);
color: var(--dy-color-on-action);
}
.highlight {
background: var(--dy-color-accent);
color: var(--dy-color-on-accent);
}
/* 테마 전환 */
<html data-theme="dark">