Theming (Light)
색상은 브랜드 아이덴티티, 계층 구조, 상태 표현을 전달하는 핵심 수단이며, 올바른 색상 사용은 가독성, 접근성, 사용성을 좌우합니다.
Surface
| Token | Value |
|---|---|
| color.surface.action.hovered-brand | {palette.magenta.500-a10} |
| color.surface.action.hovered-common | {palette.neutral.500-a10} |
| color.surface.action.selected-brand | {palette.magenta.500-a20} |
| color.surface.action.selected-common | {palette.neutral.500-a20} |
| color.surface.backdrop.common | rgba(0, 0, 0, 0.4000) |
| color.surface.backdrop.subtle | rgba(0, 0, 0, 0.1000) |
| color.surface.bar.active | {palette.neutral.800} |
| color.surface.bar.active-disabled | {palette.neutral.300} |
| color.surface.bar.inactive | {palette.neutral.300} |
| color.surface.bar.inactive-disabled | {palette.neutral.100} |
| color.surface.counter.neutral | {palette.neutral.600} |
| color.surface.counter.strong | {palette.magenta.500} |
| color.surface.counter.subtle | {palette.neutral.500-a20} |
| color.surface.emphasis.active | {palette.magenta.700} |
| color.surface.emphasis.default | {palette.magenta.500} |
| color.surface.emphasis.disabled | {palette.magenta.500-a40} |
| color.surface.emphasis.hovered | {palette.magenta.600} |
| color.surface.field.default | {palette.white} |
| color.surface.field.disabled | {palette.neutral.50} |
| color.surface.semantic.emphasis | {palette.magenta.50} |
| color.surface.semantic.info | {palette.blue.50} |
| color.surface.semantic.success | {palette.green_light.50} |
| color.surface.semantic.warning | {palette.yellow.50} |
| color.surface.switch.off | {palette.neutral.300} |
| color.surface.switch.on | {palette.neutral.800} |
| color.surface.default | {palette.neutral.50} |
| color.surface.dim | {palette.neutral.800-a10} |
| color.surface.item-active-solid | {palette.neutral.500} |
| color.surface.item-selected | {palette.neutral.800} |
| color.surface.item-selected-disabled | {palette.neutral.300} |
| color.surface.light | {palette.white} |
| color.surface.shade | {palette.neutral.200} |
| color.surface.tooltip-name | {palette.neutral.800} |
Outline
| Token | Value |
|---|---|
| color.outline.divider.common | {palette.neutral.200} |
| color.outline.divider.subtle | {palette.neutral.100} |
| color.outline.common | {palette.neutral.300} |
| color.outline.emphasis | {palette.magenta.500} |
| color.outline.focused | {palette.neutral.800-a20} |
| color.outline.focused-emphasis | {palette.magenta.500-a20} |
| color.outline.strong | {palette.neutral.800} |
| color.outline.strong-inverse | {palette.white} |
| color.outline.subtle | {palette.neutral.200} |
| color.outline.text-underline | {palette.neutral.500} |
Text
| Token | Value |
|---|---|
| color.text.description.dark | {palette.neutral.600} |
| color.text.description.light | {palette.neutral.500} |
| color.text.nav.category | {palette.neutral.400} |
| color.text.nav.page | {palette.neutral.600} |
| color.text.semantic.emphasis | {palette.magenta.700} |
| color.text.semantic.info | {palette.blue.700} |
| color.text.semantic.success | {palette.green_light.700} |
| color.text.semantic.warning | {palette.yellow.700} |
| color.text.title.column | {palette.neutral.900} |
| color.text.title.neutral | {palette.neutral.700} |
| color.text.title.strong | {palette.neutral.900} |
| color.text.caption | {palette.neutral.500} |
| color.text.emphasis-default | {palette.magenta.500} |
| color.text.emphasis-hovered | {palette.magenta.600} |
| color.text.label-field | {palette.neutral.500} |
| color.text.on-accent | {palette.white} |
| color.text.primary | {palette.neutral.800} |
| color.text.primary-inverse | {palette.neutral.50} |
| color.text.secondary | {palette.neutral.700} |
| color.text.secondary-inverse | {palette.neutral.300} |
Icon
| Token | Value |
|---|---|
| color.icon.button-common | {palette.neutral.800} |
| color.icon.button-gnb-active | {palette.magenta.500} |
| color.icon.button-gnb-default | {palette.neutral.300} |
| color.icon.button-subtle | {palette.neutral.500} |
| color.icon.common | {palette.neutral.500} |
| color.icon.emphasis | {palette.magenta.500} |
| color.icon.info | {palette.blue.500} |
| color.icon.on-accent | {palette.white} |
| color.icon.placeholder | {palette.neutral.300} |
| color.icon.strong | {palette.neutral.800} |
| color.icon.strong-inverse | {palette.neutral.50} |
| color.icon.subtle | {palette.neutral.400} |
| color.icon.success | {palette.green_light.500} |
| color.icon.warning | {palette.yellow.500} |
Effect
| Token | Value |
|---|---|
| color.effect.shadow | rgba(0, 0, 0, 0.0800) |