Light mark
#101820Color
Auko의 색상 중심은 강한 컬러 primary가 아니라 mark color + restrained signal입니다. 기본 action과 로고는 같은 mark 색을 쓰고, 색상은 line 상태를 알려주는 작은 node, badge, inline state에 제한합니다.
마크와 주요 행동
로고, 가장 강한 행동, 집중 상태를 받치는 색입니다.
Light mark hover
#182230Light mark active
#0b1118Dark mark
#f4f5f1Dark mark hover
#ffffffDark mark active
#e6e8e1Soft action light
#10182014Soft action dark
#f4f5f11fFocus signal
oklch(0.7 0.165 218)배경과 구조
앱 배경, 읽는 면, 텍스트, 경계선을 차분하게 나누는 색입니다.
App light
#f2f2f7App dark
#080a0fSurface light
#ffffffSurface dark
#11151dSecondary light
#f7f8faSecondary dark
#1b212cText light
#101820Text dark
#f4f5f1Muted light
#4c5666Muted dark
#f4f5f1adRail light
#10182024Rail dark
#f4f5f129Separator light
#1018203dSeparator dark
#f4f5f142상태 신호
작은 점, badge, inline label, 상태 아이콘에만 쓰는 색입니다.
Active light
#8b5cf6Active dark
#a78bfaDone light
#22c55eDone dark
#4ade80Warn light
#f59e0bWarn dark
#fbbf24Fail light
#ef4444Fail dark
#f87171Muted light
#6b7280Muted dark
#9ca3af원천 팔레트
중립적인 깊이와 작은 상태 신호를 만들기 위한 기본 색 흐름입니다.
Graphite차분한 바탕
50100200300400500600700800900950Iris절제된 브랜드 신호
50100200300400500600700800900950Signal긍정적 주목
50100200300400500600700800900950Amber검토와 대기
50100200300400500600700800900950Danger실패와 위험
50100200300400500600700800900950Palette direction
Section titled “Palette direction”새 팔레트는 물성 은유가 아니라 작업 상태와 깊이를 표현합니다.
| Family | Role |
|---|---|
mark | logo mark, primary action, strongest brand anchor |
base | app background and neutral foundation |
surface | editable panels and command surfaces |
text | primary, secondary, disabled text |
rail | structure line, divider, active route |
pulse | brand action, focus, active work signal |
success | completed result |
caution | review needed or pending attention |
danger | failure, destructive, auth or scope error |
ink and paper are no longer used as Auko brand token families. If those names appear in old generated tokens or historical docs, treat them as removed legacy vocabulary.
Primary color
Section titled “Primary color”- Light mark anchor: Pantone Black 6 C에 가까운
#101820. - Dark mark anchor: Pantone Bright White 계열의
#F4F5F1. - Primary action color: 별도 blue/purple primary를 만들지 않고 mark 계열을 사용합니다.
- Light primary는 mark fill이고, dark primary는 bright white 계열 fill입니다.
- Status color는 brand primary가 아니라 상태 보조 신호입니다.
Color values
Section titled “Color values”위 컬러 카드는 현재 Auko가 쓰는 실제 색상값입니다. 브랜드 문서에서는 색을 만드는 방식보다, 어떤 색이 어떤 감정과 역할을 맡는지만 설명합니다.
- Mark 계열은 Auko의 가장 강한 기준입니다.
- Surface 계열은 쓰고 읽는 공간을 차분하게 받칩니다.
- Status 계열은 큰 면적이 아니라 작은 신호로만 씁니다.
- Primitive ramp는 화면 전체의 색상 방향을 맞추기 위한 원천 팔레트입니다.
Status colors
Section titled “Status colors”| Token | Light | Dark | Meaning |
|---|---|---|---|
--auko-state-active | #8B5CF6 | #A78BFA | active input or running work |
--auko-state-done | #22C55E | #4ADE80 | completed result |
--auko-state-warn | #F59E0B | #FBBF24 | review needed or degraded state |
--auko-state-fail | #EF4444 | #F87171 | failure, auth, scope, destructive state |
--auko-state-muted | #6B7280 | #9CA3AF | offline, idle secondary state |
Status meaning must not depend on color alone. Always pair color with shape, position, or label.
Usage rules
Section titled “Usage rules”- 밝은 화면과 어두운 화면은 같은 브랜드 인상을 유지해야 합니다.
- 로고는 언제나 mark 계열의 색을 기준으로 삼습니다.
- Primary action은 별도 유행색이 아니라 mark 계열에서 출발합니다.
- 상태 색은 점, 작은 badge, inline label, status icon처럼 작은 신호에만 씁니다.
- 큰 화면 배경과 넓은 surface를 상태 색으로 덮지 않습니다.
- 색만으로 의미를 전달하지 않고, 위치, 모양, label을 함께 씁니다.