Dot Foundations

Dot 토큰과 시각 기초의 전체 구조를 빠르게 확인합니다.

토큰 계층

토큰은 primitive → semantic → component 순으로 해석한다. React 컴포넌트는 primitive 색이나 raw 값 대신 semantic 토큰을 사용한다.

Surface

토큰	역할
`surface-canvas`	앱 본문 배경
`surface-raised`	기본 콘텐츠 표면
`surface-subtle`	필터·보조 영역·hover
`surface-emphasis`	선택 또는 중요한 중립 강조
`surface-brand-subtle`	브랜드 설명·AI 맥락의 제한적 배경

Ink와 Border

토큰	역할
`ink-strong`	제목, 핵심 값
`ink-default`	본문, 기본 레이블
`ink-subtle`	설명, 메타데이터
`ink-disabled`	비활성 텍스트
`line-subtle`	행과 섹션의 기본 구분
`line-strong`	선택·강조·입력 경계

상태색은 success, warning, destructive, info만 사용한다. 상태는 색상과 함께 아이콘·레이블·문장을 제공한다.

Brand

Glow는 공식 4-stop 색을 보존한다.

0% #F33474
33% #E738C0
67% #8D3AFA
100% #1F28FF

구현에서는 기존 OKLCH triplet 토큰과 .bg-dot-gradient, .text-dot-gradient만 사용한다. 기본 Primary, 배경, 내비게이션, 표의 행에는 적용하지 않는다.

Typography

Pretendard Variable을 기본으로 하고 Inter와 시스템 sans-serif를 fallback으로 사용한다. 패키지는 폰트 파일이나 외부 CDN을 강제하지 않으므로 소비 제품이 승인된 폰트를 직접 제공한다.

역할	권장 계층	용도
`display`	28/38, 700	드문 온보딩·브랜드 소개
`page-title`	24/34, 700	페이지 제목
`section-title`	17/26, 650	주요 섹션 제목
`body`	14/22, 400–500	본문과 폼
`label`	13/18, 600	입력·상태 레이블
`caption`	12/18, 500	메타데이터
`metric`	24/32, 700	운영 지표

제목은 장식적인 letter-spacing을 쓰지 않는다.
숫자 비교 영역은 tabular-nums를 사용한다.
12px 미만의 정보 텍스트는 사용하지 않는다.
한 줄 길이는 설명 문장에서 약 72자를 넘기지 않는다.

Spacing과 Density

4px 기반 간격을 사용하되 의미 단위로 선택한다.

4–8px: 아이콘과 텍스트, 밀접한 레이블
12–16px: 한 컴포넌트 내부의 필드·행
20–24px: 관련된 콘텐츠 그룹
32–40px: 페이지 섹션

행 높이는 compact 40px, default 48px, comfortable 56px을 기준으로 한다. 같은 목록 안에서는 한 density만 사용한다.

Shape와 Elevation

Radius는 단일 --radius에서 파생한다.
기본 표면은 border와 fill로 구분하며 shadow를 사용하지 않는다.
Shadow는 dialog, popover, toast처럼 다른 레이어 위에 떠야 하는 요소에만 사용한다.
카드 중첩은 최대 1단계다. 카드 안의 반복 데이터는 border row로 나눈다.

Layout

페이지 본문 최대 폭은 작업 성격에 따라 content(1120px)와 wide(1440px)를 사용한다.
페이지 구조는 PageScaffold → PageHeader → context/toolbar → content 순서다.
읽기 화면은 1열을 기본으로 하고, 편집 화면은 넓은 화면에서 outline + editor 2열을 허용한다.
7일 일정은 7열이 안전하게 들어갈 때만 grid로 보여주며 작은 화면에서는 agenda list로 전환한다.

Motion

움직임은 상태 변화, 공간 관계, 진행 상황만 설명한다.
hover/focus 전환은 120–180ms, overlay는 180–240ms 범위의 ease-out을 사용한다.
layout을 반복해서 흔드는 애니메이션과 장식적 무한 반복은 사용하지 않는다.
prefers-reduced-motion: reduce에서는 비필수 transition과 animation을 제거한다.
Dot Processing Lottie는 실제 AI 생성·채점·분석 중일 때만 사용한다. 일반 네트워크 로딩에는 Skeleton 또는 spinner를 사용한다.

Focus와 접근성

모든 interactive element는 키보드로 도달 가능하고 가시적인 focus ring을 가진다.
icon-only action에는 aria-label 또는 Tooltip을 제공한다.
hover에서만 드러나는 필수 조작을 만들지 않는다.
최소 터치 영역은 40×40px이다.
오류는 해당 필드 가까이에 원인과 복구 방법을 제공한다.
로딩·저장·검증 결과는 적절한 live region 또는 toast로 전달한다.

세부 문서