02 · Design Style / 색상
색상Color
주님의교회 PCL 색상 체계는 3단계 — 프리미티브 팔레트(이 페이지의 스케일), 시맨틱 토큰(--color-brand, --color-accent 등), 컴포넌트별 적용. 프로젝트에서 건드리는 건 시맨틱 토큰 한 줄이면 됩니다.
프리미티브 팔레트
주님의교회 PCL 로고 컬러 #955E29 (warm bronze)를 브랜드 코어로 삼고, 그와 조화되는 warm stone 중립톤과 cream 하이라이트, 그리고 3개의 시스템 색(Success · Warning · Danger)으로 구성됩니다. 묵직하고 따뜻한 교회 톤을 유지하는 것이 목표입니다.
토큰 이름에 대한 메모. 내부 변수명은 --color-navy-* · --color-blue-* · --color-gray-* · --color-sky-* 처럼 Foundry 원본의 이름을 그대로 유지합니다. 이름은 남아 있지만 실제 색조는 주님의교회 PCL 브랜드로 재스킨되어 있습니다 — Navy→Bronze, Blue→Bronze Accent, Gray→Stone, Sky→Cream. 변수명을 유지하는 이유는 Foundry 본체 업데이트를 주기적으로 머지할 수 있도록 하기 위함입니다.
Bronze — 브랜드 코어 (internal: navy-*)
Bronze Accent — 링크·CTA (internal: blue-*)
Stone — 중립 · 본문·테두리 (internal: gray-*)
Cream — 하이라이트 (internal: sky-*)
System — 상태
시맨틱 토큰
컴포넌트는 프리미티브를 직접 참조하지 않습니다. 항상 아래 시맨틱 토큰을 경유하세요. 시맨틱 값은 app/globals.css의 한 곳에서 관리되며, 프리미티브가 바뀌어도 시맨틱 매핑만 유지되면 컴포넌트는 건드릴 필요가 없습니다.
| 시맨틱 토큰 | 기본값 | 용도 |
|---|---|---|
| --color-brand | #5e3a19 · Deep Bronze | 브랜드 기본 · 로고 · 히어로. |
| --color-accent | #955e29 · Bronze (로고) | 링크 · 버튼 · 포커스 · 포인트 CTA. |
| --color-surface | #ffffff · White | 기본 배경. |
| --color-surface-inverse | #5e3a19 · Deep Bronze | 반전 배경 (히어로 · 푸터 강조). |
| --color-border | #ddd8cc · Stone 200 | 기본 테두리. |
| --color-border-strong | #c3bdac · Stone 300 | 강조 테두리 · 탭 하단. |
| --color-text | #100e08 · Ink | 본문 텍스트. |
| --color-text-muted | #6c6656 · Stone 500 | 보조 · 메타. |
| --color-text-subtle | #968f7c · Stone 400 | 비활성 · 희미한 라벨. |
대비 기준 (WCAG)
주님의교회 PCL 디자인 시스템은 WCAG AA를 기본값으로 삼습니다. 일반 텍스트는 4.5:1 이상, 큰 텍스트 (18pt/24px 이상)와 아이콘은 3:1 이상을 확보합니다. 시니어 성도도 무리 없이 읽을 수 있는 품질을 목표로 합니다.
text on surface (Ink on White) ≈ 17.8:1 · AAA / accent on surface (Bronze #955E29 on White) ≈ 5.1:1 · AA / muted on surface (Stone 500 on White) ≈ 5.9:1 · AA.
피해야 할 조합
- Cream을 본문으로 — 대비 부족. 히어로 일러스트 하이라이트나 배경 강조 외 금지.
- Stone 300을 텍스트로 — 플레이스홀더에도 너무 흐림. Stone 400 이상 사용.
- Bronze 배경 위 Bronze 텍스트 — Deep Bronze 위 로고 Bronze는 같은 톤이라 거의 보이지 않음. 반전 배경 위에는 반드시
--color-text-inverse(White)를 씁니다.
토큰 소스
모든 색상 값의 단일 소스는 app/globals.css의 @theme 블록입니다. 컴포넌트 레벨에서 헥사값을 직접 찍어넣지 않고, 반드시 var(--color-brand), bg-navy-700, text-accent 같은 토큰/클래스를 경유합니다. 브랜드 재스킨이 필요한 경우 이 파일의 프리미티브 값만 수정하면 전체 시스템에 반영됩니다.