브랜드 가이드라인
브랜드 팔레트
Apothem 핵심 브랜드 색상과 열일곱 가지 하니스 브랜드 색상. 단일 진실의 원천은 assets/design-tokens.css의 표준 디자인 토큰이며, 사이트는 그 값을 미러링합니다.
핵심 팔레트
표준 팔레트 — slate 중립 램프, emerald 강조 램프, 그리고 시맨틱 색조 — 는
assets/design-tokens.css
의 디자인 토큰(및 그 미러인 assets/design-tokens.json)이 소유합니다.
site/app/global.css
의 사이트 테마는 이 토큰 값을 Fumadocs 테마가 사용하는 CSS 변수로 미러링합니다. 아래의
모든 값은 표준 램프 단계로 추적됩니다.
| 역할 | 토큰(CSS) | 라이트 모드 | 다크 모드 | 용도 |
|---|---|---|---|---|
| 기본 | --brand-text | slate-900 #0f172a | slate-50 #f8fafc | 제목, 내비게이션 텍스트, 주요 읽기 표면. |
| 강조 | --sl-color-accent | emerald-600 #059669 | emerald-400 #34d399 | 활성 링크, 포커스 링, 선택된 내비게이션. |
| 본문 텍스트 | --brand-muted | slate-600 #475066 | slate-300 #c2ccda | 기본 산문 텍스트. |
| 본문 바탕 | --brand-surface | white #ffffff | slate-900 #0f172a | 기본 배경. |
| 내비게이션 바탕 | --brand-surface-muted | slate-50 #f8fafc | slate-950 #080c15 | 헤더 및 내비게이션 띠. |
| 코드 바탕 | --brand-code-bg | slate-900 #0f172a | slate-950 #080c15 | 인라인 / 블록 코드 표면. |
하니스 팔레트
하니스 색상은 하니스 색상에 있습니다. Apothem 마크의
육각형 — 그 중심 노드와 종단 노드 — 에 대한 기하학적 매핑은 브랜드 섹션에 통합되어
있습니다.
site/app/global.css
의 CSS 진실의 원천이 각 토큰을 해당 CSS 변수에 연결합니다.
문서에서의 사용
팔레트는 전역 스타일시트 site/app/global.css를 통해 연결되며, 루트 레이아웃이
가져옵니다. 라이트 및 다크 모드 변형은 테마의 .dark 클래스 상태에 따라 전환됩니다.
업데이트
팔레트는 핵심 색상(slate / emerald)이 변경되거나 하니스가 상류에서 브랜드 색상 변경을
승인할 때에만 업데이트됩니다. 하니스별 변경은 site/app/global.css,
하니스 색상, 그리고 assets/src/ 아래의 영향받는 모든
SVG 마스터에 걸쳐 원자적으로 전파됩니다.