Color
현재 활성 모드의 semantic 토큰 매핑과 정책 SSoT가 정의한 primitive 그라데이션을 함께 시각화합니다. 다른 모드의 행/팔레트는 화면에 동시 노출되지 않으며, mode switcher로 순회 비교합니다.
Color Story
60% canvas + 30% surface + 10% accent로 강조 위계를 분리합니다. Base 테마는 mint 단일 hue 강조, Red 테마는 cherry 강조로 brand identity를 분리하며 두 모드 모두 status 색(success/warning/danger/info)은 공통 hue로 유지해 의미 학습 비용을 줄입니다.
본문 임계 미달인 color-text-on-primary(base accent 위)와 dark 모드의 color-text-muted 본문은 워크벤치 본문에서 직접 시연하지 않고, /foundation/accessibility 패널의 FAIL 행에서만 노출합니다.
운영 콘솔의 CTA와 status solid badge는 FND-001/FND-002 대비 gap을 우회하기 위해 임의 색을 만들지 않습니다. 상태 본문은 neutral surface 위 기본 텍스트를 쓰고, icon · badge · helper text를 병행해 색상만으로 의미가 전달되지 않게 합니다.
Console State Color Use
FND-001 · FND-002 연결Studio 계열 상태는 status hue를 얇은 보조 신호로만 쓰고, 읽어야 하는 문장은 항상 color-text-default 또는 color-text-muted 조합에 둡니다.
- filtered
조건 적용됨
필터 결과 18개. 선택 조건은 chip과 결과 수 텍스트로 함께 전달합니다.
- accent
- —
- badge
- —
- locked
수익 잠금
정산 가능 조건이 부족합니다. 잠금 이유와 다음 행동을 helper로 노출합니다.
- accent
- —
- badge
- —
- applying
신청 검토중
진행 상태는 warning 색상만이 아니라 상태명과 예상 확인 시점으로 설명합니다.
- accent
- —
- badge
- —
- error
조회 실패
오류는 danger 아이콘, alert 역할, 복구 버튼 copy를 함께 사용합니다.
- accent
- —
- badge
- —
- complete
조건 충족
성공 상태도 색 단독 표기를 피하고 check 아이콘과 완료 텍스트를 함께 둡니다.
- accent
- —
- badge
- —
Re-verse App Color Patterns
앱 반복 사용 요소최신 re-verse 화면에서 반복 사용되는 soft surface, world-view 서사 톤, 이미지 내부 scrim을 foundation 색 기준으로 정리합니다. 모두 primitive 직접 참조 없이 semantic/class alias를 사용합니다.
- color-bg-accent-soft
공개 상태 안내
Studio 공개 상태, info/success toast, 안내 패널은 primary solid 대신 soft 배경을 사용합니다.
- bg
- —
- accent
- —
- border
- —
- color-bg-danger-soft
파괴적 작업 안내
오류나 삭제 전 확인은 danger soft surface 위에서 원인, 영향, 복구 행동을 함께 제공합니다.
- bg
- —
- accent
- —
- border
- —
- color-view-character-*
캐릭터 내면 독백
World View 서사 블록은 이름과 생각 톤을 분리해 대화/서술/시스템 문맥을 구분합니다.
- bg
- —
- accent
- —
- border
- —
- color-overlay-image-scrim
이미지 위 조작
World card, carousel control, thumbnail badge는 국소 scrim을 쓰고 modal backdrop과 구분합니다.
- bg
- —
- text
- —
- border
- —
Theme Colors
현재 모드 단일 행4테마 semantic 토큰 매핑 중 현재 모드 한 줄만 노출합니다. 각 셀은 CSS 변수의 computed value를 실시간으로 읽어와 mode 전환 시 자동으로 갱신됩니다.
Primitive Palette
현재 모드 관련 ramp만정책 SSoT에 문서화된 primitive 색상 ramp 50~900 단계를 노출합니다. 컴포넌트는 primitive를 직접 참조하지 않고 semantic 토큰을 거치며, 본 섹션은 토큰 정의의 출처를 확인하는 용도입니다.