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

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

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

원티드는 흰 캔버스 위에서 단 하나의 원티드 블루로 가장 중요한 액션만 강조해요. 텍스트 위계는 별도 그레이 hex가 아니라 13단계 알파 스케일로 합성되고, 브랜드 그라디언트는 심볼과 아바타에만 머문다 — CTA에는 적용되지 않는다.

PRIMARY

Blue 800

RAMPS

14 + 19 + 11

TYPE STYLES

7 × 18 named

RADIUS

8 + full

PREVIEW CARDS

40 figma

ALPHA STEPS

13 ladder

01.

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

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

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

INPUTS · 44 height · radius-8 · focus glow 3px rgba blue 16%

이메일 회사 이메일 권장

비밀번호 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 코칭 + 시장 데이터 + 회사 매칭을 한 구독으로 묶었어요.

02.

Selection & navigation — radio · tag · badge · avatar · tooltip · segmented · tabs · pagination · stepper · breadcrumb

components.css 번들 · 모두 --w-* 토큰으로 light/dark 적응

RADIO · switch와 짝 · 20px

후보자 리크루터

TAG · # 접두 정적 라벨

성장가능성스타트업유연근무스톡옵션

BADGE · 시맨틱 + dot + count

D-3 NEW 마감임박 합격 검토중 비공개 지연 5

AVATAR · 브랜드 그라디언트 · company · 그룹

원 W 김 ABC

TOOLTIP · 다크 버블

지원 마감 D-3

SEGMENTED · 상호배타 뷰 전환

TABS · 언더라인 active

PAGINATION · invert-fill active

STEPPER · 수량 입력

BREADCRUMB · 경로

03.

Data & loading — list-cell · card · table · accordion · divider · progress · skeleton · spinner

표면은 헤어라인 보더 · 그림자는 elevated에만

LIST CELL · leading / body / trailing

W 원티드랩서울 강남 · 채용중 12 ›

T 토스서울 역삼 · 채용중 34 ›

CARD · 기본(헤어라인) + shadow 변형

헤어라인 카드

그림자 없이 1px border-subtle로 구조를 만든다.

elevated 카드

--shadow 변형만 shadow-2를 얹는다.

TABLE · tabular-nums 숫자 열 · row hover

회사	포지션	경력	채용보상금
원티드랩	프론트엔드	5–10년	1,500,000
토스	프로덕트 디자이너	3–7년	2,000,000
당근	백엔드 (Go)	무관	1,200,000

ACCORDION · 회전 chevron

지원 자격

경력 5년 이상, 대규모 트래픽 서비스 경험.

우대 사항

디자인 시스템 운영 경험.

DIVIDER · subtle / strong / thick

subtle

strong

PROGRESS · SKELETON · SPINNER

04.

Overlays & feedback — modal · bottom-sheet · dropdown menu · inline alert

scrim 50% · elevated는 shadow-pop / shadow-4

MODAL · 중앙 다이얼로그

지원을 취소할까요?

작성한 지원서는 저장되지 않아요.

BOTTOM SHEET · 모바일

정렬 기준

추천순 · 최신순 · 마감임박순

DROPDOWN MENU

INLINE ALERT · info / success / warning / danger

맞춤 제안 도착새 포지션 3건이 등록됐어요.

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

이력서 확인누락된 항목이 있어요.

오류잠시 후 다시 시도해 주세요.

EMPTY STATE · 56px 아이콘 원형 + CTA

아직 받은 제안이 없어요

이력서를 등록하면 맞춤 포지션을 추천해 드려요.