크라우니 표준 φ 디자인 토큰 선언
crowny-tokens.css 는 모든 Crowny 서비스(빠델라·스튜디오·crowny.org 등)가 공유하는 단일 출처(SSOT) 디자인 토큰이다. 타입스케일·간격·색상·레이아웃 비율 전부가 황금비(φ=1.618)와 피보나치 수열에서 수학적으로 파생된다. 서비스별 로컬 변수가 이 토큰을 덮어쓰는 것을 금지한다 — 서비스 색상이 필요하면 --c-* 토큰 위에 --svc-* 별칭을 추가해 사용한다.
1. 파일 배치 및 로드 순서
/Users/ef/crowny-padella/public/assets/crowny-tokens.css ← 빠델라
/Users/ef/crowny-studio/public/엔진/crowny-tokens.css ← 스튜디오
모든 서비스 HTML의 <head> 맨 첫 번째 <link>로 로드한다:
html<!-- 크라우니 표준 토큰 — 반드시 첫 번째 -->
<link rel="stylesheet" href="/assets/crowny-tokens.css">
<!-- 이후 서비스별 CSS -->
<link rel="stylesheet" href="/assets/panorama.css">
2. 빠델라(world.html) 기존 변수 → 표준 토큰 매핑
world.html 인라인 :root 블록과 world-nav.css의 로컬 변수를 제거하고 표준 토큰 참조로 교체한다.
제거할 기존 선언 (world.html 14번줄):
css:root{--gold:#C9A961;--gold-lt:#E6CC8A;--cream:#FBE9C7;--terra:#8B3A2F;--ink:#241830}
제거할 기존 선언 (world-nav.css 3번줄):
css:root{ --wn-gold:#C9A961; --wn-gold-lt:#E6CC8A; --wn-ink:#2A1810; }
교체 매핑표:
| 기존 변수 | 표준 토큰 | 비고 |
|---|---|---|
--gold | --c-gold | #C9A961 동일 |
--gold-lt | --c-gold-warm | #E6CC8A 동일 |
--cream | --c-cream | #FBE9C7 동일 |
--terra | --c-terra | #8B3A2F 동일 |
--ink | --c-ink | #241830 동일 |
--wn-gold | --c-gold | |
--wn-gold-lt | --c-gold-warm | |
--wn-ink | --c-ink |
css/* 전 */
color: var(--gold-lt);
background: linear-gradient(135deg, var(--gold-lt), var(--gold));
/* 후 */
color: var(--c-gold-warm);
background: linear-gradient(135deg, var(--c-gold-warm), var(--c-gold));
폰트 크기 → 타입스케일 교체:
css/* 전 */ /* 후 */
font-size: 13px; → font-size: var(--fs-sm); /* 9.89px ≈ 10px, 한 단계 작은 것 */
font-size: 16px; → font-size: var(--fs-base);
font-size: 11px; → font-size: var(--fs-xs); /* 6.11px — 레이블/태그용 */
font-size: 15.5px; → font-size: var(--fs-base);
간격 → 피보나치 교체:
css/* 전 */ /* 후 */
padding: 4px 12px; → padding: 6px var(--sp-2); /* 6은 비표준, 8로 올리거나 유지 */
gap: 2px; → gap: calc(var(--sp-1) / 4); /* 극소 간격은 calc 허용 */
border-radius: 20px; → border-radius: var(--r-lg); /* 21px 근접 */
3. 크라우니 스튜디오(studio.crowny.org) 적용
스튜디오는 렌더러가 트리 JSON에서 inline style을 생성한다. 토큰을 렌더러 출력 HTML의 <head>에 삽입하면 익스포트/발행 사이트에서도 동일 비율이 유지된다.
/Users/ef/crowny-studio/server.js 익스포트 함수에서:
js// 기존
const html = renderPage(tree, {motionJS, motionCSS});
// 추가: <head> 첫 줄에 토큰 인라인 또는 link 삽입
// 인라인 방식 (외부의존 0):
const tokensCSS = fs.readFileSync('./public/엔진/crowny-tokens.css','utf8');
// renderPage 내부 <style> 맨 앞에 tokensCSS 삽입
스튜디오 인스펙터 기본값도 표준 토큰으로 고정:
js// SCHEMA 기본값
color: 'var(--c-gold)',
background: 'var(--c-cream)',
fontSize: 'var(--fs-base)',
gap: 'var(--sp-3)',
4. 공통 유틸리티 패턴
css/* 황금분할 2열 */
.layout-golden { display:grid; grid-template-columns: var(--grid-golden); gap: var(--sp-4); }
/* 브랜드 버튼 */
.btn-gold {
background: var(--c-gold);
color: var(--c-ink);
padding: var(--sp-2) var(--sp-4);
border-radius: var(--r-md);
font-size: var(--fs-sm);
font-weight: var(--fw-bold);
letter-spacing: var(--ls-wide);
transition: background var(--dur-fast) var(--ease-phi),
transform var(--dur-fast) var(--ease-phi);
}
.btn-gold:hover { background: var(--c-gold-warm); transform: translateY(-2px); }
/* 카드 */
.card-phi {
background: var(--c-gold-lt);
border-radius: var(--r-lg);
padding: var(--sp-4);
box-shadow: var(--shadow-sm);
}