01
Colors
One primary blue. Everything else is neutral or semantic. No decorative color.
Brand — Primary
Brand Blue
#1A6EE8
CTA · links · active nav
Blue Dark
#0052CC
Hover state
Blue Tint
#E6F1FB
Chip bg · selected state
Blue Mid
#85B7EB
Chip border
Neutral
Ink
#1A1A1A
Headings · names
Ink 2
#444444
Body · job titles
Muted
#888888
Labels · metadata
Border
#E0DDD7
Card borders
Surface
#F7F7F5
Page background
White
#FFFFFF
Card background
Sidebar
#111111
Nav sidebar bg
Semantic
Green
#1A9A60
Qualified · success
Amber
#F5A623
Warning · partial
Red
#E8453C
Disqualified
Neutral
#E8E8E8
Ghost / unreviewed
Rule: #1A6EE8 is the only color used for emphasis, interaction, and brand identity. Semantic colors (green, amber, red) are only for status indicators. Never use color decoratively.
02
Typography
DM Sans for all UI text. Consistent scale, two weights only per level.
Product Manager
Page Title
28px / 600
#1A1A1A / -0.025em
#1A1A1A / -0.025em
Candidate Results
Section Title
22px / 600
#1A1A1A / -0.02em
#1A1A1A / -0.02em
Kyle Han (They/Them)
Card Name
15px / 600 + 400
#1A1A1A
#1A1A1A
Experience
Card Section Label
13px / 600
#1A1A1A
#1A1A1A
Principal Product Manager at Genesys
Body / Job Title
13px / 400
#444444
#444444
Genesys · 2023 – Present
Company Link
12px / 400
#1A6EE8
#1A6EE8
New York, United States · LinkedIn
Meta / Location
11px / 400
#888888
#888888
AVAILABLE · HIRED · ON LOOKOUT
Stat Label
10px / 500 / uppercase
letter-spacing: 0.12em
letter-spacing: 0.12em
Font: DM Sans — loaded from Google Fonts. Fall back to system-ui. Never use Inter, Roboto, or Arial. DM Mono for code, hex values, and version numbers only.
03
Spacing & Tokens
Fixed values, not abstract scales. Be consistent.
Card border-radius10px
Button border-radius20px (pill)
Badge border-radius4px
Input border-radius24px
Card border0.5px #E0DDD7
Divider0.5px #EBEBEB
Card padding16–20px
Page side padding40–48px
Section gap20–24px
Card gap (2-col)20px
Sidebar width72px (icon) / 160px (expanded)
Topbar height56px
Button height (default)36px
Send button32px circle
Avatar circle32–40px
Transitionall 0.15s ease
04
Buttons
Three tiers. Pill-shaped always. Never square buttons.
Hierarchy
Primary (Qualified)bg #1A6EE8 · color #fff
Successbg #1A9A60 · color #fff
Outline (Disqualified)bg #fff · border 1.5px #1A6EE8 · color #1A6EE8
Ghostbg #fff · border 1px #E0DDD7 · color #444
Hover — primarybg #0052CC
Hover — outlinebg #E6F1FB
05
Badges & Tags
Status at a glance. Square radius for data tags, pill for status.
Status pills (candidate qualification)
Qualified
Disqualified
Unreviewed
Data tags (filters, stats)
Available 317
Hired 121
On Lookout 31
By Position ↓
All Status ↓
All Locations ↓
Match indicator (inline in results)
100% Match
85% Partial
Not a Match
06
AI Criteria Chips
The "ownership moment" — AI extracts, recruiter edits.
AI PARSED · CLICK TO EDIT
Role: Sr. Frontend Eng
React · 5+ yrs
San Francisco
Startup (B/C)
Hybrid OK
+ add criteria
Chips use blue tint bg (#E6F1FB) + mid blue border (#85B7EB) + dark blue text (#0C447C). The "+" add chip uses dashed border. Clicking any chip opens an inline edit field — this is the core ownership transfer interaction.
07
Filter Dropdowns
Compact, inline. Never a modal for simple filters.
By Position ▼
All Status ▼
All Locations ▼
All Disciplines ▼
Background#FFFFFF
Border0.5px #E0DDD7
Border radius6px
Hover border1px #1A6EE8
08
Metrics Row
Inline stats. Blue numbers, uppercase labels.
317
Available
121
Hired
31
On Lookout
Numbers use #1A6EE8 at 22px/600. Labels are 10px/500 uppercase, #888. No borders around individual metrics — they float inline. Dividers between groups use thin vertical separators if needed.
09
Candidate Card
The core unit of the platform. Two-column layout inside.
Default state
Kyle Han (They/Them)
Principal Product Manager at Genesys
1/20
Experience
Genesys · 2023–Present
Principal Product Manager
Self employed · 2022–Present
Product Management Consultant
Show all (6)
JD Match — Google UX Designer
Spearheaded launch of a B2B admin portal
7 years experience as UX or Interaction Designer
Experience in representing and advocating for UX
Show all (4)
Selected / Qualified state
Kyle Han (They/Them)
Principal Product Manager at Genesys
100%
2/20
Experience
Genesys · 2023–Present
Principal Product Manager
Why this candidate
Exact role match — 6 years product management
Led healthtech platform for 2M+ users at Pygestream
Open to hybrid per LinkedIn activity
Card anatomy: Header (name + counter) → 2-col body (left: raw experience, right: JD match or AI reasoning) → Footer (action buttons). Selected state gets blue border 1.5px. Card border-radius is always 10px. Internal divider 0.5px #EBEBEB.
11
Chat Input
NL feedback loop. Recruiter refines in plain language.
Let us know why disqualified
04:43 PM
We need someone with more experience in healthtech
04:43 PM
Input border-radius24px
Input border1px #E0DDD7
System bubble bg#E8E8E8 · radius: 12 12 12 2px
User bubble bg#1A6EE8 · radius: 12 12 2 12px
Send button32px circle · #1A6EE8
Timestamp font-size10px / #AAAAAA
This is the differentiating interaction in V2. Recruiter types natural language feedback → AI re-ranks or explains further. Keep the input always visible at the bottom. Never hide it behind a button.
OCBridge Virtual Sourcer · v2.0
Designed by Kelly Peng · GIX MSTI Program · T-Mobile Capstone
This design system covers the Hiring Copilot platform. The core principle: every design decision returns recruiter ownership. Blue is for interaction. Neutral is for information. Semantic colors are for status only.
This design system covers the Hiring Copilot platform. The core principle: every design decision returns recruiter ownership. Blue is for interaction. Neutral is for information. Semantic colors are for status only.