디자인 토큰 | CoUI
LogoCoUI

디자인 토큰

coui_core 공유 토큰 — 색 · 타이포 · 간격 · 형태 · 효과 · 레이어링 · 모션

디자인 토큰#

CoUI 의 시각 결정은 coui_core 한 곳에 있습니다. Flutter 와 Web 이 같은 이름(CoreColors, CoreSpace, CoreTypography …)을 읽고, 라이트/다크와 서페이스 스타일이 그 값을 바꿉니다.

앱 코드에 hex · raw 8 · Duration(milliseconds: 150) 을 넣지 마세요. 테마가 따라오지 않고, 한 플랫폼만 어긋납니다.

디자이너는 같은 축을 Figma Foundation 에서 볼 수 있습니다. 캔버스는 투영이고, 값이 갈리면 코드가 이깁니다. 파일은 Figma 라이브러리 에서 엽니다.

언제 쓰나#

토큰을 고르세요

  • 컴포넌트 xxxStyle / 앱 테마에 색·간격·타입·모션을 줄 때
  • 커스텀 레이아웃에서 padding / gap / radius 가 필요할 때 (Gap.space16(), CoreRadius.radius8)
  • 텍스트 역할을 정할 때 (Text('…').bodyMedium.onSurface)

토큰 밖 값은 쓰지 마세요

  • 이름에 없는 숫자가 필요하면 가장 가까운 토큰을 고르거나, 토큰 확장을 요청합니다
  • 시맨틱 색(primary, onSurface)이 아니라 hex 를 박으면 다크 모드가 깨집니다

자세한 테마 주입은 테마 를 보세요.

coui_core 맵#

원시토큰은 enum 이 아니라 namespace + static const 입니다. Style 필드 타입은 double / CoreColor 이고, default 값만 아래 이름을 참조합니다.

축Namespace쓰는 곳문서Figma Foundation
색 CoreColors → CoreColor.token(...) 배경·글자·보더 색상 01. Color
타이포 CoreTypography + Text chain 제목·본문·라벨 타이포그래피 02. Typography
간격 CoreSpace padding / gap / margin 레이아웃, Gap 03. Layout & Space
치수 CoreSize / CoreIconSize 아이콘·컨트롤 높이 아이콘 08. Icon
형태 CoreRadius · CoreStrokeWidth 모서리 · 선 굵기 형태 04. Shape
효과 CoreShadow · CoreOpacity · CoreFocusRing 그림자 · 상태 투명도 · 포커스 링 효과 05. Effect
레이어링 CoreZIndex Web 겹침 순서 (Flutter 는 트리 순서) 레이어링 07. Layering
모션 CoreDuration · CoreEasing 전환. 컴포넌트는 alias (fast / move) 애니메이션 06. Motion

색·타입은 역할(시맨틱)이고, 간격·반경·모션은 숫자 스케일입니다. 전역 "input radius" 같은 별칭은 없습니다 — 각 컴포넌트가 자기 Style default 에서 primitive 를 고릅니다. 그림자·상태 투명도는 시맨틱 프리셋(CoreShadow.md, CoreOpacity.hover)이 있고, z-index 는 원시 사다리만 있습니다.

Foundation 개요는 00. Overview 입니다.

플랫폼별 읽는 법#

같은 결정을 세 계층이 다르게 읽습니다. 값은 coui_core 가 정하고, 단위는 플랫폼이 정합니다.

// Flutter — logical pixel / ColorScheme
CoreSpace.space16
CoreColor.token(CoreColors.primary)
theme.colorScheme.primary

// Web — Tailwind 키 또는 CSS 변수
CoreSpace.scale.space16          // → 'space16'  →  p-space16
'rgb(var(--coui-on-surface))'

모션은 raw ms150 보다 alias 를 쓰세요. CoreDuration.fast 는 "왜 그 길이인지"를 말하고, reduced-motion 오버라이드가 한 어휘로 닿습니다. 

Duration(milliseconds: CoreDuration.fast)   // 150ms — 툴팁, hover
Duration(milliseconds: CoreDuration.normal) // 200ms — 드롭다운, 아코디언

다음에 볼 곳#