350만+ 회원이 함께하는 커리어

커리어를 시작하는
가장 가까운 방법.

잡 마켓플레이스에서 채용보상금까지, 같은 시스템으로.

다크 모드는 캔버스가 neutral-960으로 뒤집힐 뿐, 13단계 알파 스케일 구조는 그대로다. 텍스트 위계는 흰색 위에 α 0.88 / 0.61 / 0.43 / 0.28로 합성되고, 브랜드 그라디언트는 심볼·아바타·잡카드 placeholder·hero banner 네 자리에만 머문다.

PRIMARY

Blue 800

RAMPS

14 + 19 + 11

TYPE STYLES

7 × 18 named

RADIUS

8 + full

PREVIEW CARDS

14 figma

ALPHA STEPS

13 ladder

01.

Colors — single primary + alpha-multiplied text

dark: 베이스가 neutral-875 → 흰색으로 뒤집힐 뿐, alias 의미는 동일

BRAND · 화면당 하나의 primary CTA / focus / link

900

blue-900

oklch(0.484 0.205 258)

pressed

800 · brand

blue-800

oklch(0.563 0.232 257)

primary CTA

700 · hover

blue-700

oklch(0.607 0.225 257)

hover (dark)

400 · fg-link

blue-400

oklch(0.715 0.155 255)

fg-brand (dark · 가독성)

975 · subtle

blue-975

oklch(0.149 0.069 257)

bg-brand-subtle (dark)

COOL-TINTED NEUTRALS · 다크 캔버스의 베이스

970 · subtle

neutral-970

oklch(0.135 0.002 286)

bg-subtle (dark)

960 · canvas

neutral-960

oklch(0.148 0.004 277)

bg-canvas (dark)

950 · surface

neutral-950

oklch(0.166 0.005 271)

bg-surface · card

925 · muted

neutral-925

oklch(0.196 0.008 273)

bg-muted · hover

900 · elevated

neutral-900

oklch(0.237 0.008 273)

bg-elevated · popover

SEMANTIC · danger / success / warning (dark: 가독성 위한 lightness 상향)

red-700

oklch(0.546 0.220 27)

button-danger

red-500 dark

fg-danger

oklch(0.715 0.220 27)

dark fg (brightened)

green dark

fg-success

oklch(0.760 0.180 144)

dark fg

warn dark

fg-warning

oklch(0.778 0.158 64)

dark fg

green-600

oklch(0.673 0.211 144)

toast 성공 ic (양 테마)

BRAND GRADIENT · 심볼 + 아바타 + 잡카드 placeholder + hero banner 전용

symbol / avatar / card placeholder

blue-800 → magenta → coral-600 @ 135°

marketing hero banner

navy → blue-800 → magenta @ 120°

ALPHA LADDER · dark에서는 흰색 위에 같은 13단계 알파를 곱한다

581216222835435261748897

88 → fg-default (body) 61 → fg-secondary (label, caption) 43 → fg-tertiary (placeholder) 28 → fg-disabled 8 → border-subtle

SEMANTIC ALIAS · dark theme (alias 의미는 light와 동일, base만 뒤집힌다)

bg-brand blue-800

bg-brand-subtle blue-975

bg-surface neutral-950

bg-elevated neutral-900

fg-strong white @ α 1.0

fg-default white @ α 0.88

fg-secondary white @ α 0.61

fg-tertiary white @ α 0.43

fg-brand (dark) blue-400 (가독성 ↑)

fg-danger (dark) red @ lightness ↑

fg-success (dark) green @ lightness ↑

border-default white @ α 0.22

02.

Typography — Pretendard JP + Wanted Sans for display

7 tiers × 18 named styles · negative tracking ≥17px · two reading densities

display156 / 700
lh 1.286
tracking −3.19%

커리어를 다음 단계로

display336 / 700
lh 1.334
tracking −2.70%

맞춤형 직무 제안을 받아보세요

title132 / 700
lh 1.375
tracking −2.53%

시니어 프론트엔드 개발자

title324 / 700
lh 1.334
tracking −2.30%

담당 업무

heading220 / 700
lh 1.400
tracking −1.20%

자격 요건

headline118 / 600
lh 1.445
tracking −0.20%

경력 5~10년 · 정규직

body116 / 500
lh 1.500
tracking +0.57%

원티드는 350만 명의 회원이 함께하는 커리어 플랫폼이에요. 잡 마켓플레이스부터 채용보상금까지, 같은 시스템으로 운영합니다.

body1-read16 / 500
lh 1.625
tracking +0.57%

산문 단락에는 default 1.5 대신 read 변형의 1.625 line-height를 사용합니다. 두 가지 reading density가 별도의 토큰으로 정의되어 있어, UI 표면(카드 본문, 라벨)과 long-form 산문이 같은 사이즈에서도 다른 호흡을 갖습니다.

label114 / 500
lh 1.429
tracking +1.45%

회사명 · 직무 · 지역

caption112 / 500
lh 1.334
tracking +2.52%

12px caption은 +2.52% 트래킹으로 가독성을 보존합니다.

03.

Spacing & shape — 4-pt scale · discrete radii

6 / 10 / 14 / 18 / 22는 존재하지 않는다 — 사다리만 운영

SPACING SCALE · 0 / 2 / 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 96 / 128

hairline gap

icon · cluster gap

component default

card inner gap

card padding · mobile gutter

field padding

section padding · desktop gutter

block separation

subsection

marketing section

hero rhythm

128

page-cap rhythm

RADII · radius-{2,4,8,12,16,20,24,32,full}

radius-22px · 미세 토큰

radius-44px · checkbox

radius-88px · button md · 입력 · 카드

radius-1212px · button xl · 카드 디테일 로고

radius-1616px · hero banner

radius-2020px

radius-2424px

radius-3232px

radius-full9999px · chip · avatar · search · toggle

no 6 · 10 · 14 · 18 · 22

"약간 둥근" 같은 임의값을 도입하지 않습니다.
사다리만 운영합니다.

ELEVATION · dark에서는 alpha를 0.30~0.42로 강화 (검은 배경 위에서 보이도록)

shadow-1로고 타일 · 토글 노브

shadow-2디테일 로고 타일

shadow-3일반 elevated

shadow-4모달 (대형)

shadow-poppopover · dropdown · toast

04.

Components — 잡카드의 채용보상금이 시그너처

버튼은 동사 · 칩 active는 invert-fill · 카드는 헤어라인 보더

BUTTONS · 5 variants × 4 sizes (label은 동사로)

INPUTS · 44 height · radius-8 · focus glow 3px rgba blue 20% (dark는 채도 더 살림)

이메일 회사 이메일 권장

비밀번호 8자 이상 · 영문+숫자

전화번호 올바른 형식이 아니에요

회사명

직무

상태 (잠김)

CHIPS · invert-fill active · brand variant · #태그 패턴

전체 개발 디자인 기획·PM 마케팅 영업·세일즈 데이터 HR

서울 전체 경력 3~7년 재택 가능 정규직 성장가능성 스타트업 유연근무 스톡옵션

TOGGLE · CHECKBOX · 18 / 40 · radius-4 / radius-full

이메일 수신 동의

마케팅 정보 수신

알림 받기

비공개 모드

FEEDBACK · toast (bg-inverse + green-600 ic) · alert (subtle bg + semantic fg)

지원이 완료되었어요

지원이 완료되었어요. 결과는 1주일 안에 알려드려요.

잠시 후 다시 시도해 주세요. 일시적인 오류가 발생했어요.

이력서를 한 번 더 확인해 주세요. 누락된 항목이 있어요.

맞춤형 직무 제안이 도착했어요. 지금 확인해 보세요.

JOB CARD · SSOT components-job-cards.html 1:1 · 채용보상금이 fg-brand로 항상 노출되는 시그너처

D-3

원티드랩 · 서울 강남

시니어 프론트엔드 개발자

경력 5-10년 · 정규직

채용보상금 1,500,000원

토스 · 서울 역삼

프로덕트 디자이너

경력 3-7년 · 정규직

채용보상금 2,000,000원

당근 · 서울 서초

백엔드 엔지니어 (Go)

경력 무관 · 정규직

채용보상금 1,200,000원

MARKETING HERO BANNER · navy → blue-800 → magenta @ 120° (두 테마 모두 동일)

원티드 PRO

커리어 코칭과 함께,
이번 분기의 다음 단계로.

1:1 코칭 + 시장 데이터 + 회사 매칭을 한 구독으로 묶었어요.