http://localhost /OCBridge React Library
Components / Actions

Button

Triggers a single, immediate action. Blue is reserved for the highest-priority action.

JSX · Copy

      

    

  







  
  
  
v2.0 · Virtual Sourcer







  
OCBridge · Hiring Copilot

  
Design
System

  
The single source of truth for the Virtual Sourcer platform. Every color, type style, and component — defined once, used everywhere.

  

    

      
6

      
Color roles

    

    

      
8

      
Type styles

    

    

      
12

      
Components

    

    

      
1

      
Brand blue

    

  








  
  

  
  


    
    

      

        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

        

        

          
Candidate Results

          
Section Title

          
22px / 600
#1A1A1A / -0.02em

        

        

          
Kyle Han (They/Them)

          
Card Name

          
15px / 600 + 400
#1A1A1A

        

        

          
Experience

          
Card Section Label

          
13px / 600
#1A1A1A

        

        

          
Principal Product Manager at Genesys

          
Body / Job Title

          
13px / 400
#444444

        

        

          
Genesys · 2023 – Present

          
Company Link

          
12px / 400
#1A6EE8

        

        

          
New York, United States · LinkedIn

          
Meta / Location

          
11px / 400
#888888

        

        

          
AVAILABLE · HIRED · ON LOOKOUT

          
Stat Label

          
10px / 500 / uppercase
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

              
New York, United States · LinkedIn

            

            
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

              
New York, United States · LinkedIn

            

            

              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.