Cards
Card · default · hoverable기본 Card
정적 카드
border-line + bg-bg + rounded-2xl. hover/포커스 효과 없음.
Hoverable Card
상호작용 카드
마우스를 올리면 border-line-strong + shadow-md.
Inputs
Input · Textarea · Field · 4 states도움말 텍스트입니다 (text-fg-muted).
focus 상태 = primary border + ring-4 ring-primary-soft.
일반 텍스트 색상은 text-fg.
opacity-50 + cursor-not-allowed.
resize-y로 수직 리사이즈만 허용.
Data Visualization
KpiTile · TrendIndicator · Sparkline이번 달 지원
42
↑ 12건
평균 점수
7.5
전환율
34%
↓ 3.2%p
누적 합격
5
↑ 2건
TrendIndicator + (positive)
↑ 12건TrendIndicator - (negative)
↓ 3.2%pSparkline (7 datapoints)
State
EmptyState · Skeleton (loading)아직 이력서가 없어요
Skeleton (loading list)
Overlays
Modal · Drawer · Toast (interactive triggers)Typography
Type ramp · .t-display-1 ↔ .t-caption-2.t-display-1Build offers, not resumes
.t-display-2Build offers, not resumes
.t-display-3Build offers, not resumes
.t-title-1이력서를 합격까지
.t-title-2이력서를 합격까지
.t-title-3이력서를 합격까지
.t-heading-1이력서를 합격까지
.t-heading-2이력서를 합격까지
.t-headline-1이력서를 합격까지
.t-headline-2이력서를 합격까지
.t-body-1AI가 도와주는 이력서·면접·취업 준비, 한·영 양방향
.t-body-2AI가 도와주는 이력서·면접·취업 준비, 한·영 양방향
.t-label-1AI가 도와주는 이력서·면접·취업 준비
.t-label-2AI가 도와주는 이력서·면접·취업 준비
.t-caption-1이번 달 12,418명이 합격
.t-caption-2이번 달 12,418명이 합격
Tokens
Atomic palette swatchesBlue (brand)
blue-50
var(--color-atomic-blue-50)
blue-100
var(--color-atomic-blue-100)
blue-200
var(--color-atomic-blue-200)
blue-300
var(--color-atomic-blue-300)
blue-400
var(--color-atomic-blue-400)
blue-450
var(--color-atomic-blue-450)
blue-500
var(--color-atomic-blue-500)
blue-550
var(--color-atomic-blue-550)
blue-600
var(--color-atomic-blue-600)
blue-700
var(--color-atomic-blue-700)
blue-800
var(--color-atomic-blue-800)
blue-900
var(--color-atomic-blue-900)
blue-1000
var(--color-atomic-blue-1000)
blue-1100
var(--color-atomic-blue-1100)
Neutral (grayscale)
neutral-25
var(--color-atomic-neutral-25)
neutral-50
var(--color-atomic-neutral-50)
neutral-75
var(--color-atomic-neutral-75)
neutral-100
var(--color-atomic-neutral-100)
neutral-150
var(--color-atomic-neutral-150)
neutral-200
var(--color-atomic-neutral-200)
neutral-300
var(--color-atomic-neutral-300)
neutral-400
var(--color-atomic-neutral-400)
neutral-450
var(--color-atomic-neutral-450)
neutral-500
var(--color-atomic-neutral-500)
neutral-600
var(--color-atomic-neutral-600)
neutral-650
var(--color-atomic-neutral-650)
neutral-700
var(--color-atomic-neutral-700)
neutral-750
var(--color-atomic-neutral-750)
neutral-800
var(--color-atomic-neutral-800)
neutral-825
var(--color-atomic-neutral-825)
neutral-850
var(--color-atomic-neutral-850)
neutral-875
var(--color-atomic-neutral-875)
neutral-900
var(--color-atomic-neutral-900)
neutral-925
var(--color-atomic-neutral-925)
neutral-950
var(--color-atomic-neutral-950)
Status
positive
positive-bg
negative
negative-bg
cautionary
cautionary-bg
informative
informative-bg
Radii
r-2
r-4
r-6
r-8
r-10
r-12
r-16
r-20
r-24
r-32
r-64
Shadows
shadow-sm
shadow-md
shadow-lg
shadow-xl
shadow-pop