Color

Aria의 색상 중심은 강한 컬러 primary가 아니라 mark color + restrained signal입니다. 기본 action과 로고는 같은 mark 색을 쓰고, 색상은 line 상태를 알려주는 작은 node, badge, inline state에 제한합니다.

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 Aria brand token families. If those names appear in old generated tokens or historical docs, treat them as removed legacy vocabulary.

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가 아니라 상태 보조 신호입니다.

Token implementation

Canonical raw values live in @aria/design-tokens. The package generates primitive CSS variables such as --color-mark-light, --color-bg-app-light, --color-text-muted-dark, and --color-state-active-light.

apps/bsite imports those generated variables and maps them into local semantic variables:

@import "@aria/design-tokens/css";

:root {
  color-scheme: light;

  --aria-mark: var(--color-mark-light);
  --aria-primary: var(--aria-mark);
  --aria-primary-hover: var(--color-mark-light-hover);
  --aria-primary-active: var(--color-mark-light-active);
  --aria-primary-soft: var(--color-primary-soft-light);
  --aria-on-primary: var(--color-mark-dark);
  --aria-bg-app: var(--color-bg-app-light);
  --aria-bg-surface: var(--color-bg-surface-light);
  --aria-bg-surface-secondary: var(--color-bg-surface-secondary-light);
  --aria-bg-surface-tertiary: var(--color-bg-surface-tertiary-light);
  --aria-text: var(--color-text-default-light);
  --aria-text-muted: var(--color-text-muted-light);
  --aria-rail: var(--color-rail-light);
  --aria-separator: var(--color-separator-light);
}

.dark {
  color-scheme: dark;

  --aria-mark: var(--color-mark-dark);
  --aria-primary: var(--aria-mark);
  --aria-primary-hover: var(--color-mark-dark-hover);
  --aria-primary-active: var(--color-mark-dark-active);
  --aria-primary-soft: var(--color-primary-soft-dark);
  --aria-on-primary: var(--color-mark-light);
  --aria-bg-app: var(--color-bg-app-dark);
  --aria-bg-surface: var(--color-bg-surface-dark);
  --aria-bg-surface-secondary: var(--color-bg-surface-secondary-dark);
  --aria-bg-surface-tertiary: var(--color-bg-surface-tertiary-dark);
  --aria-text: var(--color-text-default-dark);
  --aria-text-muted: var(--color-text-muted-dark);
  --aria-rail: var(--color-rail-dark);
  --aria-separator: var(--color-separator-dark);
}

Tailwind exposes the semantic layer globally:

<section class="bg-aria-bg-app text-aria-text">
  <div class="border border-aria-separator bg-aria-bg-surface">
    <p class="text-aria-text-muted">Muted explanation</p>
    <a class="bg-aria-primary text-aria-on-primary">Primary action</a>
  </div>
</section>

Use Tailwind classes on bsite pages. Avoid page-level hex/rgb color classes unless the value is being documented as a token source.

Status colors

Token	Light	Dark	Meaning
`--aria-state-active`	`#8B5CF6`	`#A78BFA`	active input or running work
`--aria-state-done`	`#22C55E`	`#4ADE80`	completed result
`--aria-state-warn`	`#F59E0B`	`#FBBF24`	review needed or degraded state
`--aria-state-fail`	`#EF4444`	`#F87171`	failure, auth, scope, destructive state
`--aria-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

Theme switching changes semantic variables with .theme-light and .theme-dark.
Components use semantic variables, not primitive color family names.
Logo mark always uses --aria-mark.
Primary button and strong action use --aria-primary.
Status colors stay in dots, small badges, inline labels, or status icons.
Large surfaces and page backgrounds do not become status-colored.