브랜드 팔레트
Apothem 핵심 브랜드 색상과, 하니스 색상 페이지에 정의된 열다섯 가지 하니스 브랜드 색상. 핵심 색상의 단일 진실의 출처는 assets/design-tokens.css의 표준 디자인 토큰이며, 사이트는 그 값을 미러링합니다.
핵심 팔레트
표준 팔레트 — slate 중립 램프, emerald 강조 램프, 그리고 시맨틱 색조 — 는
assets/design-tokens.css의
디자인 토큰(및 그 미러인 assets/design-tokens.json)이 소유합니다.
site/app/global.css의
사이트 테마는 시맨틱 토큰 값을 Fumadocs 테마가 사용하는 CSS 변수에 OKLCH로 다시 기술합니다.
페이지 배경, 텍스트, 기본(primary), 테두리, 포커스 링 변수는 정확한 토큰 단계로 귀결됩니다
(lib/theme-tokens.test.mjs 검사가 배경, 전경, 기본, 링 변수를 그 단계에 맞춰 고정합니다).
같은 파일에 선언된 apothem-*, polygon-*, field-* 램프는 토큰 램프의 복사본이 아니라
파생된 근사치이며, 명세의 일부가 아닙니다. 아래의 모든 값은 디자인 토큰에 있는 slate
램프 또는 emerald 램프의 한 단계입니다. slate-600 같은 단계 이름은 해당 램프의 값을
가리킵니다.
| 역할 | 토큰(CSS) | 라이트 모드 | 다크 모드 | 용도 |
|---|---|---|---|---|
| 기본 | --apothem-text | slate-900 #0f172a | slate-50 #f8fafc | 제목, 내비게이션 텍스트, 주요 읽기 표면. |
| 강조 | --apothem-accent-text | emerald-700 #047857 | emerald-400 #34d399 | 활성 링크, 포커스 링, 선택된 내비게이션. |
| 본문 텍스트 | --apothem-text-muted | slate-600 #475066 | slate-300 #c2ccda | 기본 산문 텍스트. |
| 본문 바탕 | --apothem-surface | slate-50 #f8fafc | slate-900 #0f172a | 기본 배경. |
| 내비게이션 바탕 | --apothem-surface-sunken | slate-100 #eef2f7 | slate-950 #080c15 | 헤더 및 내비게이션 띠. |
하니스 팔레트
하니스 색상은 하니스 색상에 있습니다. Apothem 마크는 하니스 색상을 담지 않습니다. 마크의 육각형, 중심 노드, 종단 노드는 assets/DESIGN-SYSTEM.md의 마크 섹션에 설명되어 있습니다. 하니스 색상은 디자인 토큰이나 site/app/global.css가 아니라 그 페이지에 정의되며, 이 둘은 핵심 팔레트만 담고 있습니다.
문서에서의 사용
팔레트는 전역 스타일시트 site/app/global.css를 통해 연결되며, 루트 레이아웃이
가져옵니다. 라이트 및 다크 모드 변형은 테마의 .dark 클래스 상태에 따라 전환됩니다.
업데이트
팔레트는 핵심 색상(slate / emerald)이 변경되거나 하니스가 업스트림에서 브랜드 색상 변경을
확정할 때에만 업데이트됩니다. 하니스별 변경은 하니스 색상과
assets/src/ 아래의 영향받는 모든 SVG 마스터에 걸쳐 원자적으로 전파됩니다.