2026 Portfolio Design Tokens
디자인 토큰 정리
2026 포트폴리오에서 반복해서 쓰는 색, 여백, 타이포그래피, 형태 값을 목적별 토큰으로 나눠 정리했습니다. 이름은 값 자체보다 화면 안에서 맡는 역할이 먼저 읽히도록 잡았습니다.
Color
색상 토큰
Primitive는 색상 원재료, Semantic은 실제 UI 역할을 나타냅니다.
--primary-*
var(--primary-600)
브랜드의 중심 색을 단계형 스케일로 두어 버튼, 링크, 포커스 링이 같은 계열에서 움직이게 합니다.
--grayscale-*
var(--grayscale-100)
배경부터 본문까지 넓게 쓰는 중립 색이라 숫자 스케일로 명암 관계를 바로 읽게 했습니다.
--color-surface
var(--color-surface)
카드와 패널의 실제 역할 이름입니다. 테마가 바뀌어도 컴포넌트 코드는 surface만 바라봅니다.
--color-text-muted
var(--color-text-muted)
보조 설명과 메타 정보처럼 시선을 한 단계 낮춰야 하는 텍스트를 명확히 분리합니다.
--accent-hot / --accent-mint
linear-gradient(135deg, var(--accent-hot), var(--accent-mint))
강조점이 필요할 때 쓰는 보조 색입니다. 감정적 이름 대신 accent 역할과 온도감만 남겼습니다.
--gallery-*
var(--gallery-bg)
개인·실무 갤러리는 별도 편집 톤을 갖기 때문에 portfolio 토큰과 충돌하지 않게 namespace를 나눴습니다.
Spacing
여백 토큰
칩과 라벨은 12px~14px 최소 단위를 지키고, 화면·섹션·카드 여백은 PC/TB/MB 순으로 밀도를 낮춥니다.
Typography
폰트 토큰
폰트는 Display가 화면의 리듬을 잡고, Title과 Body가 정보 밀도를 조절하며, Label/Chip은 UI 최소 단위를 지킵니다.
Display-1
홈 히어로와 가장 강한 액티비티 타이틀에만 쓰는 최상위 토큰입니다.
The structure feels light.
Display-2 / Display-3
큰 시각 신호는 유지하되 Display-1보다 먼저 튀지 않도록 2~3단계로 낮춥니다.
The structure feels light.
Display-4 / Display-5 / Display-6
섹션 제목, 주요 카드 제목, 작은 모듈 제목의 우선순위를 분리합니다.
The structure feels light.
Title-1 / Title-2 / Title-3
카드·리스트 안에서 Display보다 낮은 정보 제목으로 사용합니다.
The structure feels light.
Body-1 / Body-2
본문은 16px 이상을 기준으로 두고, 보조 설명만 15px 밀도로 낮춥니다.
The structure feels light.
Label / Chip
메타 라벨은 14px, 칩은 최소 단위인 12px로 고정해 작은 UI의 밀도를 통일합니다.
The structure feels light.
Shape & Effect
형태와 효과 토큰
라운드와 그림자는 컴포넌트의 위계, 터치 영역, 포커스 상태를 일관되게 맞춥니다.
--radius-card
0.95rem
주요 카드와 버튼의 공통 모서리입니다. 포트폴리오의 부드러운 톤을 기본값으로 둡니다.
--radius-pill
999px
태그, 세그먼트, 작은 상태값처럼 알약형 UI임을 이름만으로 알 수 있습니다.
--shadow-soft
0 18px 44px ...
기본 떠오름 상태입니다. 과한 장식보다 계층을 보여주는 용도라 soft로 부릅니다.
--shadow-ring
0 0 0 3px ...
키보드 포커스와 선택 상태처럼 둘러싸는 피드백을 ring으로 분리했습니다.