Color
색은 정보의 계층과 상태를 구분하고, 모든 화면의 경험을 일관되게 이어 줘요.
Neutral
기본 텍스트, 보조 버튼, 내비게이션 같은 대부분의 UI
neutralborder
color.*.neutralBrand
주요 액션과 브랜드를 표현하는 요소
brandborder
color.*.brandInformation
정보를 주거나 진행 중임을 알리는 UI
informationborder
color.*.informationSuccess
성공 메시지처럼 좋은 결과
successborder
color.*.successWarning
실수를 막도록 주의를 주는 UI
warningborder
color.*.warningDanger
위험하거나 심각한 오류 상태
dangerborder
color.*.dangerDiscovery
온보딩, 새 기능처럼 새로운 것
discoveryborder
color.*.discoveryAccent
의미가 없는 장식용 색. 서로 바꿔 써도 경험이 달라지지 않아야 해요.
색의 구성
Steel 의 색은 세 종류로 나뉘어요.
- 채도 있는 색 — 의미를 더하거나, UI 를 강조하거나, 같은 색의 요소끼리 묶어 줘요. 성공의 초록, 위험의 빨강처럼요.
- 중립 색 — 대부분의 배경, 텍스트, 도형에 써요. 보통은 의미가 없고, 비활성 상태를 나타낼 때 쓰기도 해요.
- 알파 색 — 반투명이라 아래 배경과 높이에 맞춰 자연스럽게 섞여요.
color.background.neutral같은 토큰이 알파 색이에요.
토큰으로 색 적용하기
모든 색 토큰은 color 로 시작하고, 이어서 적용할 속성(background, border, text, icon)이 와요. 그 뒤에 역할, 강조 단계, 상호작용 상태가 선택적으로 붙어요.
| 토큰 | 속성 | 역할 | 강조 | 상태 |
|---|---|---|---|---|
color.text | text | — | — | — |
color.text.subtle | text | — | subtle | — |
color.background.danger.bold.hovered | background | danger | bold | hovered |
color.border.focused | border | — | — | focused |
이름 구조 전체는 Design tokens 에서 볼 수 있어요.
색 역할
역할은 색이 무엇을 뜻하는지를 정해요. 같은 파란색이라도 브랜드인지 정보인지에 따라 다른 토큰을 써요.
| 역할 | 쓰는 곳 |
|---|---|
neutral | 기본 텍스트, 보조 버튼, 내비게이션 같은 대부분의 UI |
brand | 주요 액션, 브랜드를 표현하는 요소 |
information | 정보를 주는 UI, 진행 중인 상태 |
success | 성공 메시지처럼 좋은 결과 |
warning | 실수나 오류를 막도록 주의를 주는 UI |
danger | 위험, 심각한 오류 상태 |
discovery | 온보딩, 새 기능 소개처럼 새로운 것 |
accent | 의미 없는 장식 색. 10가지 색을 서로 바꿔 써도 경험이 달라지지 않아야 해요 |
inverse | 진한(bold) 배경 위에 놓이는 요소 |
input | 폼 입력 요소 |
accent 에 의미를 싣지 마세요
accent 색은 태그, 라벨, 아바타 배경처럼 사용자가 고르거나 구분만 필요한 곳에 써요. "빨간 태그 = 긴급" 처럼 의미가 필요하다면 danger 같은 역할 색을 써요.
강조 단계
강조 단계는 기본 표면과의 대비 정도예요. 강조가 클수록 더 눈에 띄어요.
- 텍스트와 아이콘은 기본(가장 높은 대비) →
subtle→subtlest순으로 대비가 낮아져요. - 배경은
subtlest→subtler→subtle→ (기본) →bold→bolder→boldest순으로 강해져요. 역할마다 쓸 수 있는 단계가 조금씩 달라요.
텍스트 — 대비가 높은 순서
스프린트 12 회고
담당자 · 김하늘
3일 전 업데이트됨
texttext.subtletext.subtlest
배경 — 강조가 커지는 순서
완료
background.success.subtler완료
background.success.subtle완료
background.success.bold검토 필요
warning.bold + text.warning.inverse진한 배경 위에는 inverse
bold 배경 위의 글자와 아이콘에는 color.text.inverse, color.icon.inverse 를 써요. 단, 노란 warning.bold 배경은 밝은 색이라 color.text.warning.inverse 를 써야 AA 대비를 지킬 수 있어요.
상호작용 상태
hovered, pressed, selected, focused, disabled 토큰으로 상태 변화를 표현해요.
마우스를 올리면
.hovered, 누르면 .pressed 토큰으로 바뀌어요. Tab 키로 이동하면 border.focused 포커스 링이 보여요.- 선택과 포커스를 구분하세요. 선택(selected)은 현재 고른 것을 계속 보여 주는 상태이고, 포커스(focused)는 키보드 위치를 보여 주는 상태예요.
color.border.focused는 포커스 표시에만 쓰고, 링크·브랜드·포커스 토큰으로 선택을 나타내지 않아요. - 선택은 중립색이에요. Steel 은 최신 Atlassian 모습(FY27 Finesse)을 따라
selected토큰이 파랑이 아니라 진한 중립 글자와 반투명 중립 배경이에요. 브랜드 색(brand)은 주요 액션에만 써요. - 선택은 색만으로 알리지 마세요. 체크 표시, 밑줄, 경계선, 모양 변화 같은 단서를 함께 줘요.
- 호버와 눌림은 현재 상태 위에 겹쳐요. 선택된 항목에 마우스를 올리면
color.background.selected.hovered를 써요. - 아이콘에는 호버 토큰이 없어요. 아이콘 버튼은 아이콘 색 대신
color.background.neutral.subtle.hovered같은 은은한 배경으로 상태를 보여 줘요.
토큰
모든 표는 현재 선택한 브랜드의 토큰 데이터에서 그려져요. 칸 아래의 작은 칩은 해당 토큰의 hovered·pressed 상태예요.
Text
| 토큰 | Light | Dark | 설명 |
|---|---|---|---|
본문, 문장형 제목, 버튼 같은 기본 텍스트Use for primary text, such as body copy, sentence case headers, and buttons. | |||
비활성 상태의 텍스트Use for text in a disabled state. | |||
진한(bold) 배경 위의 텍스트Use for text on bold backgrounds. | |||
선택된 탭·내비게이션 항목처럼 선택을 알리는 텍스트Use for text that communicates selection, such as the active tab or a selected navigation item, or the opened state of a dropdown trigger. On bold selected backgrounds, use color.text.inverse instead. Do not use for unselected links, brand emphasis, or hover alone. Keep the selected text treatment when the element also has focus. | |||
브랜드를 강조하는 텍스트Use for text that reinforces our brand. | |||
입력 오류 메시지 같은 위험·오류 텍스트Use for critical text, such as input field error messaging. | |||
위험 레이블 위 텍스트 (접근성 대비 보장)Use for text on top of danger semantic labels to ensure accessibility and desired visual appearance. | |||
주의를 알리는 텍스트Use for text to emphasize caution, such as in moved lozenges. | |||
진한 경고 배경 위의 텍스트Use for text when on bold warning backgrounds. | |||
경고 레이블 위 텍스트Use for text on top of warning semantic labels to ensure accessibility and desired visual appearance. | |||
입력 성공 메시지 같은 긍정 결과 텍스트Use for text to communicate a favorable outcome, such as input field success messaging. | |||
성공 레이블 위 텍스트Use for text on top of success semantic labels to ensure accessibility and desired visual appearance. | |||
새 기능처럼 변화·새로움을 알리는 텍스트Use for text to emphasize change or something new, such as in new lozenges. | |||
발견 레이블 위 텍스트Use for text on top of discovery semantic labels to ensure accessibility and desired visual appearance. | |||
정보 또는 진행 중임을 알리는 텍스트Use for informative text or to communicate something is in progress, such as in-progress lozenges. | |||
정보 레이블 위 텍스트Use for text on top of information semantic labels to ensure accessibility and desired visual appearance. | |||
메타데이터, 브레드크럼, 플레이스홀더·도움말 같은 3차 텍스트Use for tertiary text, such as meta-data, breadcrumbs, input field placeholder and helper text. | |||
내비게이션, 입력 필드 레이블처럼 한 단계 낮춘 보조 텍스트Use for secondary text, such as navigation, subtle button links, input field labels, and all caps subheadings. |
Link
| 토큰 | Light | Dark | 설명 |
|---|---|---|---|
pressed | 기본·호버 상태 링크. 호버 시 밑줄을 더해요Use for links in a default or hovered state. Add an underline for hovered states. | ||
pressed | 방문한 링크Use for visited links. |
Icon
| 토큰 | Light | Dark | 설명 |
|---|---|---|---|
아이콘 전용 버튼, color.text 와 짝을 이루는 아이콘Use for icon-only buttons, or icons paired with color.text | |||
비활성 상태의 아이콘Use for icons in a disabled state. | |||
진한 배경 위의 아이콘Use for icons on bold backgrounds. | |||
선택된 내비게이션 항목 등 선택을 알리는 아이콘Use for icons that communicate selection, such as icons in selected navigation items, or the opened state of a dropdown trigger. On bold selected backgrounds, use color.icon.inverse instead. Do not use for brand emphasis or hover alone. Keep the selected icon treatment when the element also has focus. | |||
브랜드를 강조하는 아이콘Use for icons that reinforce our brand. | |||
오류 처리처럼 위험을 알리는 아이콘Use for icons communicating critical information, such as those used in error handing. | |||
경고 섹션 메시지의 주의 아이콘Use for icons communicating caution, such as those used in warning section messages. | |||
진한 경고 배경 위의 아이콘Use for icons when on bold warning backgrounds. | |||
긍정 결과를 알리는 아이콘Use for icons communicating a favorable outcome, such as those used in success section messaged. | |||
새로움을 알리는 아이콘Use for icons communicating change or something new, such as discovery section messages. | |||
정보·진행 중을 알리는 아이콘Use for icons communicating information or something in-progress, such as information section messages. | |||
color.text.subtlest 와 짝을 이루는 아이콘Use for icons paired with color.text.subtlest | |||
color.text.subtle 과 짝을 이루는 아이콘Use for icons paired with color.text.subtle |
Border
| 토큰 | Light | Dark | 설명 |
|---|---|---|---|
평평한 카드, 패널 구분선처럼 UI 를 묶거나 나누는 기본 경계선Use to visually group or separate UI elements, such as flat cards or side panel dividers. | |||
코드 블록 경계선Use for code block and code diff borders. | |||
비활성 요소의 경계선Use for borders of elements in a disabled state. | |||
키보드 포커스 링. 선택·호버 표시에 쓰지 않아요Use for the focus ring or border of an element that currently has keyboard or input focus. Do not use to indicate selection or hover alone. When an element is both selected and focused, keep its selected treatment and add a separate focus indicator. | |||
텍스트 필드·체크박스·라디오 같은 입력 요소의 경계선Use for borders of form UI elements, such as text fields, checkboxes, and radio buttons. | |||
검색 입력의 경계선Use for the border of search inputs. | |||
진한 배경 위의 경계선Use for borders on bold backgrounds. | |||
활성 탭, 선택된 메뉴 항목처럼 선택을 알리는 경계선Use for borders or visual indicators that communicate selection, such as the active tab or a selected menu item, or the opened state of a dropdown trigger. Do not use as a keyboard focus indicator; use color.border.focused for focus and preserve the selected treatment when both states apply. | |||
주요 버튼 등 브랜드를 강조하는 경계선Use for borders or visual indicators of elements that reinforce our brand, such as logos or primary buttons. | |||
유효하지 않은 텍스트 필드처럼 위험을 알리는 경계선Use for borders communicating critical information, such as the borders on invalid text fields. | |||
3:1 대비가 필요 없는 장식용 위험 경계선Use for decorative danger borders that do not need to meet 3:1 contrast requirements. | |||
주의를 알리는 경계선Use for borders communicating caution. | |||
장식용 경고 경계선Use for decorative warning borders that do not need to meet 3:1 contrast requirements. | |||
검증된 입력처럼 긍정 결과를 알리는 경계선Use for borders communicating a favorable outcome, such as the borders on validated text fields. | |||
장식용 성공 경계선Use for decorative success borders that do not need to meet 3:1 contrast requirements. | |||
온보딩처럼 새로움을 알리는 경계선Use for borders communicating change or something new, such as the borders in onboarding spotlights. | |||
장식용 발견 경계선Use for decorative discovery borders that do not need to meet 3:1 contrast requirements. | |||
정보·진행 중을 알리는 경계선Use for borders communicating information or something in-progress. | |||
장식용 정보 경계선Use for decorative information borders that do not need to meet 3:1 contrast requirements. | |||
3:1 대비를 통과하는 진한 중립 경계선A neutral border option that passes min 3:1 contrast ratios. |
Background
| 토큰 | Light | Dark | 설명 |
|---|---|---|---|
비활성 요소의 배경Use for backgrounds of elements in a disabled state. | |||
hoveredpressed | 입력 요소(텍스트 필드·체크박스·라디오)의 배경Use for background of form UI elements, such as text fields, checkboxes, and radio buttons. | ||
hoveredpressed | 진한 배경 위에 놓이는 요소의 배경Use for backgrounds of elements on a bold background, such as in the buttons on spotlight cards. | ||
hoveredpressed | 기본 버튼 같은 중립 요소의 기본 배경The default background for neutral elements, such as default buttons. | ||
hoveredpressed | 평소엔 배경이 없어 보이는 요소(subtle 버튼, 메뉴 항목)Use for the background of elements that appear to have no background in a resting state, such as subtle buttons and menu items. | ||
hoveredpressed | 공지 배너 같은 진한 중립 배경A vibrant background option for neutral UI elements, such as announcement banners. | ||
hoveredpressed | 선택된 내비게이션 항목, 열린 드롭다운 트리거의 배경Use for the background of an element that communicates selection, such as a selected navigation item, or the opened state of a dropdown trigger. Use color.background.selected.hovered or color.background.selected.pressed when interacting with a selected element. Selection is distinct from keyboard focus and hover alone. | ||
hoveredpressed | 체크된 체크박스·선택된 라디오의 진한 배경Use for the bold background of selected controls, such as checked checkboxes and selected radio buttons. Pair with color.text.inverse or color.icon.inverse for foreground content. Do not use for primary actions or keyboard focus alone. |
Accent
배경 4단계(subtlest·subtler·subtle·bolder)와 짝을 이루는 텍스트·아이콘·경계선 색이에요. subtlest~subtle 배경 위에는 color.text.accent.<색>.bolder, bolder 배경 위에는 color.text.inverse 를 써요.
| hue | subtlest | subtler | subtle | bolder | text / icon / border |
|---|---|---|---|---|---|
| blue | 라벨 | 라벨 | 라벨 | 라벨 | Aa |
| teal | 라벨 | 라벨 | 라벨 | 라벨 | Aa |
| green | 라벨 | 라벨 | 라벨 | 라벨 | Aa |
| lime | 라벨 | 라벨 | 라벨 | 라벨 | Aa |
| yellow | 라벨 | 라벨 | 라벨 | 라벨 | Aa |
| orange | 라벨 | 라벨 | 라벨 | 라벨 | Aa |
| red | 라벨 | 라벨 | 라벨 | 라벨 | Aa |
| magenta | 라벨 | 라벨 | 라벨 | 라벨 | Aa |
| purple | 라벨 | 라벨 | 라벨 | 라벨 | Aa |
| gray | 라벨 | 라벨 | 라벨 | 라벨 | Aa |
Interaction
자체 배경이 있는 요소(이미지, 아바타 등)라 배경 토큰을 바꿀 수 없을 때, 위에 겹쳐 쓰는 오버레이예요.
| 토큰 | Light | Dark | 설명 |
|---|---|---|---|
자체 배경이 있는 요소 위에 겹쳐 쓰는 호버 오버레이Use as a background overlay for elements in a hovered state when their background color cannot change, such as avatars. | |||
자체 배경이 있는 요소 위에 겹쳐 쓰는 눌림 오버레이Use as a background overlay for elements in a pressed state when their background color cannot change, such as avatars. |
Skeleton
| 토큰 | Light | Dark | 설명 |
|---|---|---|---|
스켈레톤 로딩 상태Use for skeleton loading states | |||
스켈레톤의 펄스·쉬머 효과Use for the pulse or shimmer effect in skeleton loading states |
Blanket
| 토큰 | Light | Dark | 설명 |
|---|---|---|---|
모달 다이얼로그 뒤의 화면 덮개Use for the screen overlay that appears with modal dialogs | |||
배경을 바꿀 수 없을 때 선택을 알리는 반투명 덮개Use as a translucent blanket to communicate selection when changing the background of the selected content is not possible, such as selected Editor blocks. The content beneath remains visible. Do not use to indicate keyboard focus or hover alone. | |||
삭제 직전 블록처럼 위험을 알리는 덮개Use as an overlay to communicate danger states when a simple background color change isn't possible, such as deletion of Editor block elements |
Chart
차트 전용 색이에요. 여러 계열은 chart.categorical.* 를 순서대로, 상태를 보여 주는 차트는 의미 색을 써요. 모든 차트 색에는 .hovered 상태가 있어요.
chart.categorical.1 ~ 8 — 계열이 여러 개인 차트에 이 순서대로 써요
의미 색 — 상태를 표현하는 차트 (bold 계열)
brand
neutral
information
success
warning
danger
discovery
색상별 — 같은 색 안에서 bold → boldest 단계
blue
teal
green
lime
yellow
orange
red
magenta
purple
gray
접근성
WCAG 2.1 AA 기준을 지켜요.
| 대상 | 최소 대비 | 기준 |
|---|---|---|
| 24px 미만 텍스트 | 4.5 : 1 | WCAG 1.4.3 |
| 24px 이상 텍스트 | 3 : 1 | WCAG 1.4.3 |
| 이해에 꼭 필요한 UI 요소·그래픽 (아이콘, 입력 경계선 등) | 3 : 1 | WCAG 1.4.11 |
토큰을 의도한 조합(예: color.text.danger on color.background.danger)으로 쓰면 이 기준을 통과하도록 설계돼 있어요. 아래는 현재 선택한 브랜드에서 주요 조합의 실제 대비값이에요.
| 조합 | 미리보기 | Light | Dark |
|---|---|---|---|
color.text on elevation.surface | 작업 항목작업 항목 | 14.34:1AAA | 10.56:1AAA |
color.text.subtle on elevation.surface | 작업 항목작업 항목 | 7.81:1AAA | 7.15:1AAA |
color.text.subtlest on elevation.surface | 작업 항목작업 항목 | 5.10:1AA | 5.76:1AA |
color.link on elevation.surface | 작업 항목작업 항목 | 5.20:1AA | 6.00:1AA |
color.text.inverse on color.background.brand.bold | 작업 항목작업 항목 | 5.20:1AA | 6.00:1AA |
color.text.inverse on color.background.danger.bold | 작업 항목작업 항목 | 5.16:1AA | 5.92:1AA |
color.text.inverse on color.background.success.bold | 작업 항목작업 항목 | 4.66:1AA | 8.24:1AAA |
color.text.warning.inverse on color.background.warning.bold | 작업 항목작업 항목 | 9.14:1AAA | 10.50:1AAA |
color.text.inverse on color.background.information.bold | 작업 항목작업 항목 | 5.20:1AA | 6.00:1AA |
color.text.inverse on color.background.discovery.bold | 작업 항목작업 항목 | 5.20:1AA | 6.01:1AA |
color.text.danger on color.background.danger | 작업 항목작업 항목 | 5.74:1AA | 6.81:1AA |
color.text.success on color.background.success | 작업 항목작업 항목 | 5.81:1AA | 8.87:1AAA |
color.text.warning on color.background.warning | 작업 항목작업 항목 | 5.54:1AA | 8.59:1AAA |
color.text.information on color.background.information | 작업 항목작업 항목 | 5.90:1AA | 7.03:1AAA |
color.text.selected on color.background.selected | 작업 항목작업 항목 | 12.70:1AAA | 9.02:1AAA |
색만으로 의미를 전달하지 마세요
색을 구분하기 어려운 사람도 있어요. 오류는 빨간 경계선과 함께 아이콘과 메시지를, 선택은 배경색과 함께 체크 표시나 굵은 글씨를 써요.
다크 모드
토큰은 라이트와 다크 두 테마를 지원하고, 각 토큰은 테마마다 다른 값을 가져요. 토큰을 쓰고 있다면 다크 모드 값을 따로 고를 필요가 없어요. 다크 모드에서는 그림자가 잘 보이지 않기 때문에, 높은 표면일수록 표면 색이 밝아지는 방식으로 깊이를 표현해요. 자세한 내용은 Elevation 을 참고하세요.
팔레트
현재 선택한 브랜드에서 시맨틱 토큰이 참조하는 원시 색이에요(라이트 값). 브랜드 전용 팔레트(예: brand-orange)가 있으면 맨 위에 보여요. 칸을 누르면 hex 값이 복사돼요. 팔레트 토큰은 테마가 바뀌어도 값이 그대로라서, 화면에서는 시맨틱 토큰을 먼저 써요.
blue
teal
green
lime
yellow
orange
red
magenta
purple
neutral (light 테마)
dark-neutral (dark 테마)
neutral alpha
dark-neutral alpha