이 문서는 themes/(0000-0000-0000-0001)/assets/css/core/theme-vars.css와 그 하위 모듈을 실제 렌더링 관점에서 읽는 검증 페이지다.
아래 내용은 디자인을 설명하는 메모가 아니라, 프런트엔드에서 어떤 토큰이 어떤 결과를 내는지 확인하기 위한 실물 예시다.
해석 기준
빠른 시각 점검
아래 카드들은 theme-vars가 실제 화면에 어떻게 번역되는지 한 번에 보이도록 만든 샘플이다.
모듈 인덱스
아래 접힘 블록은 각 파일이 어떤 책임을 갖는지 빠르게 확인하기 위한 목록이다.
모든 값은 코드가 아니라 중앙 토큰의 결과로 읽어야 한다.
00-foundation.css · 레이아웃 기준
변수
값
역할
–page-max-width
1120px
페이지 레이아웃
–content-max-width
760px
본문/콘텐츠
–nav-max-width
1120px
내비게이션
–page-padding
24px
페이지 레이아웃
–page-padding-mobile
16px
페이지 레이아웃
–gap
24px
gap
–gap-mobile
16px
gap
–content-gap
24px
본문/콘텐츠
–nav-width
var(–nav-max-width)
내비게이션
–breakpoint-sm
340px
breakpoint
–breakpoint-md
768px
breakpoint
–breakpoint-lg
900px
breakpoint
–breakpoint-xl
1120px
breakpoint
–cover-responsive-breakpoint-md
768px
cover
–cover-responsive-width-md
720px
cover
–main-width
var(–content-max-width)
main
–header-height
64px
헤더
–footer-height
64px
푸터
–space-2xs
4px
space
–space-xs
6px
space
–space-sm
8px
space
–space-md
12px
space
–space-lg
16px
space
–space-xl
20px
space
–space-2xl
24px
space
–space-3xl
32px
space
10-typography.css · 타이포그래피
20-shape.css · 반경과 컨트롤
변수
값
역할
–radius-xs
4px
반경
–radius-sm
8px
반경
–radius-md
12px
반경
–radius-lg
16px
반경
–radius-xl
20px
반경
–radius-full
9999px
반경
–radius
var(–radius-md)
반경
–border-width-thin
1px
보더
–border-width-strong
2px
보더
–control-size-sm
32px
컨트롤
–control-size-md
40px
컨트롤
–control-size-lg
44px
컨트롤
–control-padding-x
14px
컨트롤
–control-padding-y
10px
컨트롤
–control-icon-size
18px
컨트롤
–control-gap
10px
컨트롤
–transition-fast
120ms ease
transition
–transition-base
200ms ease
transition
–transition-slow
300ms ease
transition
–interactive-transition
transform 0.1s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease
interactive
–focus-outline-width
2px
focus
–focus-outline-offset
2px
focus
–control-press-scale
0.98
컨트롤
–viewport-full-height
100vh
viewport
–page-min-height
calc(var(–viewport-full-height) - var(–header-height) - var(–footer-height))
페이지 레이아웃
–profile-page-min-height
calc(var(–viewport-full-height) - var(–header-height) - var(–footer-height) - (var(–gap) * 2))
profile
–autofill-shadow-spread
50px
autofill
–shadow-sm
0 1px 2px rgba(72, 32, 19, 0.08)
그림자
–shadow-md
0 10px 28px rgba(72, 32, 19, 0.10)
그림자
–shadow-lg
0 18px 50px rgba(72, 32, 19, 0.14)
그림자
–z-index-floating
99
z
–z-index-overlay
120
z
30-components.css · 컴포넌트 토큰
40-colors-light.css · 라이트 팔레트
brand
변수
값
–color-brand-primary
rgb(184, 58, 32)
–color-brand-primary-hover
rgb(156, 47, 27)
–color-brand-primary-active
rgb(129, 38, 22)
–color-brand-primary-muted
rgba(184, 58, 32, 0.16)
–color-brand-primary-contrast
rgb(255, 255, 255)
–color-brand-secondary
rgb(214, 94, 29)
–color-brand-secondary-hover
rgb(188, 77, 22)
–color-brand-secondary-active
rgb(162, 63, 17)
–color-brand-secondary-muted
rgba(214, 94, 29, 0.16)
–color-brand-secondary-contrast
rgb(255, 255, 255)
–color-brand-primary
rgb(255, 176, 138)
–color-brand-primary-hover
rgb(255, 156, 112)
–color-brand-primary-active
rgb(255, 138, 88)
–color-brand-primary-muted
rgba(255, 176, 138, 0.18)
–color-brand-primary-contrast
rgb(22, 16, 14)
–color-brand-secondary
rgb(255, 198, 150)
–color-brand-secondary-hover
rgb(255, 176, 120)
–color-brand-secondary-active
rgb(255, 155, 92)
–color-brand-secondary-muted
rgba(255, 198, 150, 0.18)
–color-brand-secondary-contrast
rgb(22, 16, 14)
neutral
변수
값
–color-neutral-page-background
rgb(255, 250, 246)
–color-neutral-surface
rgb(255, 255, 255)
–color-neutral-surface-quiet
rgb(251, 244, 239)
–color-neutral-surface-strong
rgb(240, 231, 224)
–color-neutral-surface-elevated
rgb(255, 252, 249)
–color-neutral-text
rgb(37, 29, 24)
–color-neutral-text-muted
rgb(111, 95, 86)
–color-neutral-text-subtle
rgb(170, 154, 144)
–color-neutral-border
rgb(228, 216, 208)
–color-neutral-border-strong
rgb(208, 194, 185)
–color-neutral-code-bg
rgb(248, 240, 235)
–color-neutral-code-block-bg
rgb(39, 24, 19)
–color-neutral-code-block-fg
rgb(246, 231, 224)
–color-neutral-code-inline-bg
rgba(124, 53, 29, 0.08)
–color-neutral-code-inline-fg
rgb(37, 29, 24)
–color-neutral-scrollbar-thumb
rgb(127, 105, 95)
–color-neutral-scrollbar-thumb-hover
rgb(162, 140, 128)
–color-neutral-scrollbar-thumb-border
rgb(255, 250, 246)
–color-neutral-scrollbar-thumb-border-alt
rgb(251, 244, 239)
–color-neutral-scrollbar-thumb-border-gist
rgb(255, 250, 246)
–color-neutral-scrollbar-thumb-alt
rgb(127, 105, 95)
–color-neutral-scrollbar-thumb-alt-hover
rgb(162, 140, 128)
–color-neutral-scrollbar-thumb-gist
rgb(177, 156, 145)
–color-neutral-scrollbar-thumb-gist-hover
rgb(120, 99, 88)
–color-neutral-page-background
rgb(22, 16, 14)
–color-neutral-surface
rgb(31, 24, 21)
–color-neutral-surface-quiet
rgb(40, 31, 27)
–color-neutral-surface-strong
rgb(52, 41, 36)
–color-neutral-surface-elevated
rgb(35, 27, 24)
–color-neutral-text
rgb(245, 236, 230)
–color-neutral-text-muted
rgb(201, 184, 173)
–color-neutral-text-subtle
rgb(136, 120, 111)
–color-neutral-border
rgb(69, 56, 50)
–color-neutral-border-strong
rgb(92, 75, 66)
–color-neutral-code-bg
rgb(40, 31, 27)
–color-neutral-code-block-bg
rgb(24, 18, 16)
–color-neutral-code-block-fg
rgb(246, 231, 224)
–color-neutral-code-inline-bg
rgba(255, 176, 138, 0.08)
–color-neutral-code-inline-fg
rgb(245, 236, 230)
–color-neutral-scrollbar-thumb
rgb(122, 103, 94)
–color-neutral-scrollbar-thumb-hover
rgb(154, 134, 124)
–color-neutral-scrollbar-thumb-border
rgb(22, 16, 14)
–color-neutral-scrollbar-thumb-border-alt
rgb(31, 24, 21)
–color-neutral-scrollbar-thumb-border-gist
rgb(255, 250, 246)
–color-neutral-scrollbar-thumb-alt
rgb(122, 103, 94)
–color-neutral-scrollbar-thumb-alt-hover
rgb(154, 134, 124)
–color-neutral-scrollbar-thumb-gist
rgb(173, 154, 144)
–color-neutral-scrollbar-thumb-gist-hover
rgb(132, 112, 102)
semantic
변수
값
–color-semantic-success
rgb(22, 128, 74)
–color-semantic-warning
rgb(205, 122, 22)
–color-semantic-danger
rgb(199, 57, 52)
–color-semantic-info
rgb(184, 58, 32)
–color-semantic-selection-bg
rgba(184, 58, 32, 0.18)
–color-semantic-selection-fg
rgb(37, 29, 24)
–color-semantic-focus-ring
rgba(184, 58, 32, 0.42)
–color-semantic-success
rgb(94, 213, 128)
–color-semantic-warning
rgb(255, 199, 98)
–color-semantic-danger
rgb(255, 146, 136)
–color-semantic-info
rgb(255, 176, 138)
–color-semantic-selection-bg
rgba(255, 176, 138, 0.22)
–color-semantic-selection-fg
rgb(22, 16, 14)
–color-semantic-focus-ring
rgba(255, 176, 138, 0.48)
50-colors-dark.css · 다크 팔레트
brand
변수
값
–color-brand-primary
rgb(255, 176, 138)
–color-brand-primary-hover
rgb(255, 156, 112)
–color-brand-primary-active
rgb(255, 138, 88)
–color-brand-primary-muted
rgba(255, 176, 138, 0.18)
–color-brand-primary-contrast
rgb(22, 16, 14)
–color-brand-secondary
rgb(255, 198, 150)
–color-brand-secondary-hover
rgb(255, 176, 120)
–color-brand-secondary-active
rgb(255, 155, 92)
–color-brand-secondary-muted
rgba(255, 198, 150, 0.18)
–color-brand-secondary-contrast
rgb(22, 16, 14)
neutral
변수
값
–color-neutral-page-background
rgb(22, 16, 14)
–color-neutral-surface
rgb(31, 24, 21)
–color-neutral-surface-quiet
rgb(40, 31, 27)
–color-neutral-surface-strong
rgb(52, 41, 36)
–color-neutral-surface-elevated
rgb(35, 27, 24)
–color-neutral-text
rgb(245, 236, 230)
–color-neutral-text-muted
rgb(201, 184, 173)
–color-neutral-text-subtle
rgb(136, 120, 111)
–color-neutral-border
rgb(69, 56, 50)
–color-neutral-border-strong
rgb(92, 75, 66)
–color-neutral-code-bg
rgb(40, 31, 27)
–color-neutral-code-block-bg
rgb(24, 18, 16)
–color-neutral-code-block-fg
rgb(246, 231, 224)
–color-neutral-code-inline-bg
rgba(255, 176, 138, 0.08)
–color-neutral-code-inline-fg
rgb(245, 236, 230)
–color-neutral-scrollbar-thumb
rgb(122, 103, 94)
–color-neutral-scrollbar-thumb-hover
rgb(154, 134, 124)
–color-neutral-scrollbar-thumb-border
rgb(22, 16, 14)
–color-neutral-scrollbar-thumb-border-alt
rgb(31, 24, 21)
–color-neutral-scrollbar-thumb-border-gist
rgb(255, 250, 246)
–color-neutral-scrollbar-thumb-alt
rgb(122, 103, 94)
–color-neutral-scrollbar-thumb-alt-hover
rgb(154, 134, 124)
–color-neutral-scrollbar-thumb-gist
rgb(173, 154, 144)
–color-neutral-scrollbar-thumb-gist-hover
rgb(132, 112, 102)
semantic
변수
값
–color-semantic-success
rgb(94, 213, 128)
–color-semantic-warning
rgb(255, 199, 98)
–color-semantic-danger
rgb(255, 146, 136)
–color-semantic-info
rgb(255, 176, 138)
–color-semantic-selection-bg
rgba(255, 176, 138, 0.22)
–color-semantic-selection-fg
rgb(22, 16, 14)
–color-semantic-focus-ring
rgba(255, 176, 138, 0.48)
60-language.css · 언어별 타이포그래피 프로필
프로필
예시 언어
기본 폰트
단어 분리
줄바꿈
라틴/유럽권
en, fr, de, es, it, pt, nl, sv, no, da, fi, pl, cs, sk, hu, ro, tr, hr, sl, sq, af
–font-sans-latin-europe
normal
auto
한국어
ko
–font-sans-korean
keep-all
strict
일본어
ja
–font-sans-japanese
keep-all
strict
중국어 간체
zh-Hans / zh-CN / zh-SG
–font-sans-chinese-simplified
keep-all
strict
중국어 번체
zh-Hant / zh-TW / zh-HK / zh-MO
–font-sans-chinese-traditional
keep-all
strict
베트남어
vi
–font-sans-vietnamese
normal
auto
남아시아권
hi / bn / ta / te / ml / gu / kn / pa / ur
–font-sans-southasia
normal
auto
RTL 문자권
ar / he / fa / ckb / ku
–font-sans-rtl
normal
auto
70-global.css · 전역 선택/아이콘/배경
변수
값
역할
실제로 확인해야 하는 것
html[lang]값에 따라 폰트 스택이 실제로 바뀌는가- 라이트와 다크 모두에서 브랜드 대비가 유지되는가
- 버튼, CTA, 카드, 입력 계열의 반경과 그림자가 같은 축을 따르는가
- 선택 영역과 SVG 아이콘의 기본 채움색이 전역 토큰을 읽는가