@boospatch/ui 토큰 시각화. palette → semantic → component 3계층, 5분할 파일.
Anchor: primary-400 = #06b281 (변경 금지). 50/600~900은 oklch 보간 [TBD].
primary-50oklch(0.97 0.012 167)TBDprimary-100#e7f8f4primary-200#ade2d5primary-300#6fcbb3primary-400#06b281primary-500#18997dprimary-600oklch(0.50 0.10 169)TBDprimary-700oklch(0.40 0.08 170)TBDprimary-800oklch(0.30 0.06 170)TBDprimary-900oklch(0.20 0.04 170)TBD기존 hex 보존, 550은 frontend 호환.
gray-50#f8f9fcgray-100#f0f2f6gray-200#e4e6eagray-300#b7babegray-400#9a9da2gray-500#7e8186gray-550#808181gray-600#63666cgray-700#494d52gray-800#31353agray-900#1a1e23palette alias.
--color-success→ var(--color-primary-400)--color-warning→ var(--color-amber-500)TBD--color-danger→ var(--color-signal-error-500)--color-info→ var(--color-signal-info-500)primary와 별도 레이어. 운영 서비스 사용 중 — 값·토큰명 유지. 그라디언트 사용 금지.
--color-accent-secondary#484961secondary CTA 배경 (Button color="secondary")--color-additional-purple#8d63e9단일 보라 액센트 — 그라디언트 사용 금지--color-marker-ai-500#8024ffMaps 마커 AI 리포트 시안 보라 (tone="ai")다크모드 미리. 컴포넌트는 surface/fg를 직접 참조.
whitegray-50gray-100gray-900--color-fg→ var(--color-gray-900)--color-fg-muted→ var(--color-gray-600)--color-fg-subtle→ var(--color-gray-400)--color-fg-on-primary→ var(--color-white)size + weight + line-height + letter-spacing 한 번에 패키지된 디자이너 프리셋.
Display
36pxtext-display· 800 · -0.4pxHero
32pxtext-hero· 800H1
24pxtext-h1· 800H2
20pxtext-h2· 700Body L
18pxtext-body-l· 500Body
16pxtext-body· 500Body Bold
16pxtext-body-bold· 700Caption
13pxtext-caption· 500Tag
11pxtext-tag· 700용도 토큰에 안 맞을 때 또는 Tailwind utility 직접 호출 시. 토글 결과는 위 섹션에서 동기화.
text-xs12pxline-height 1.5text-sm13pxline-height 1.5text-base16pxline-height 1.5text-md18pxline-height 1.5text-lg20pxline-height 1.4text-xl24pxline-height 1.3text-2xl28pxline-height 1.3text-3xl32pxline-height 1.25text-4xl36pxline-height 1.2이름 그대로 정적 px. density 모드와 무관 — 메인 레포 호환 전용. 이 레포 코드에서는 alias 직접 사용 금지(의미/용도 토큰 사용).
--text-1010px--text-1212px--text-1414px--text-1616px--text-1919px--text-2222px--text-25_525.5px--text-3030px--text-3535pxfont-weight 4종 + tabular-nums 데모. typescale과 무관한 정적 자료.
font-weight 4종 (한글 가독성을 위해 light/thin은 사용 금지)
regular 400
--font-weight-regular
medium 500
--font-weight-medium
bold 700
--font-weight-bold
extrabold 800
--font-weight-extrabold
tabular-nums (가격·평수·평당가 정렬용)
기본: 3,800,000,000원 / 84.21㎡ / 평당 4,500만원tabular: 3,800,000,000원 / 84.21㎡ / 평당 4,500만원부동산 정보 밀도용 미세 토큰(0.5/1.5/2.5) 추가. SaaS 4-base 위에 누적.
0.52px14px1.56px28px2.510px312px416px624px832px1248pxsm
4px
md
8px
lg
12px
xl
16px
--z-index-base0--z-index-low10--z-index-medium100--z-index-high300--z-index-modal1000--z-index-priority9999PillMarker · DotMarker · ClusterBubble · MapTooltip 전용 컴포넌트 토큰. tone='brand'(녹색)/tone='ai'(보라) 양쪽 노출.
PillMarker — default / brand / ai
DotMarker — brand / ai / neutral (16px)
brandaineutralClusterBubble — count별 radius + tone
brand · 1brand · 12brand · 42ai · 1ai · 12ai · 42MapTooltip — 카드 wrap (181px · radius-lg · 0.5 black shadow)
--duration-tooltip-dwell200ms — marker → tooltip mouse 이동 허용 시간스위치로 토큰 컨텍스트 전환. 미리보기 영역(우측)만 PlatformScope로 감싸 지역 cascade — 카탈로그 표·매트릭스는 영향 없음.
Web 토큰
PC 데스크탑 기본값 (default)
Typescale
--text-display36 / lh 1.2 / w800
32 / lh 1.25 / w800
--text-hero32 / lh 1.25 / w800
28 / lh 1.3 / w800
--text-h124 / lh 1.3 / w800
22 / lh 1.35 / w800
--text-h220 / lh 1.4 / w700
18 / lh 1.45 / w700
Spacing (밀도형)
--spacing-0.52px
4px
--spacing-1.56px
8px
--spacing-2.510px
12px
기타
--color-ringoklch(primary-400 / 0.4)
transparent
App 전용 신규 토큰
--elevation-1—
0 1px 2px / 0 1px 1px (gray-900 6%/4%)
--elevation-2—
0 4px 8px / 0 2px 4px (gray-900 8%/4%)
--elevation-3—
0 12px 24px / 0 4px 8px (gray-900 12%/6%)
--safe-area-inset-top—
47px (iPhone 14 노치)
--safe-area-inset-bottom—
34px (홈 인디케이터)
--touch-target-min—
44px (iOS HIG / Material 권장)
서울특별시 강남구 역삼동
신축 아파트
전용 84㎡ · 25층 · 남향
18억 5천만원
매매
9억
elevation-2 · 살짝 떠오른 floating 카드
※ DeviceFrame은 *시각 검수 보조*. 실 RN 빌드 미리보기 아님 — RN 착수 시 elevation/safe-area는 실기기 검수 필수.