RoleMesa
A01. Colours

Neutral Colours

Ne-1

#1F1F1F

Ne-2

#475467

Ne-3

#98A2B3

Ne-4

#D0D7E2

Ne-5

#E7ECF3

Ne-6

#F2F4F7

Ne-7

#FAFAFB

Ne-8

#FFFFFF

Neutral Greys

Neutral 900

#171717

Neutral 600

#525252

Neutral 500

#8E8E8E

Neutral 300

#D4D4D4

Neutral 200

#EEEEEE

Brand Colours / Primary

Primary

#1F75FF

Hover Blue

#1A5ECB

Primary 600

#79ACFF

Primary 500

#8FBAFF

Primary 400

#A5C8FF

Primary 300

#BCD6FF

Primary 200

#D2E3FF

Primary 100

#E9F1FF

Primary 50

#F4F8FF

Semantic Colours / Error

Error

#EC2D30

Error HV

#C91C1F

Error 500

#F59697

Error 300

#FFCCD2

Semantic Colours / Alert

Alert

#FE9B0E

Alert HV

#D07C03

Alert 500

#FFCD86

Alert 150

#FFF4D7

Semantic Colours / Done

Done

#0C9D61

Done HV

#0E744A

Done 500

#85CEB0

Done 150

#DBF0E7

Semantic Colours / Info

Info

#034FF2

Info HV

#0B3693

Info 500

#81A7F8

Info 200

#CDDCFC

04Typography

Gilroy

Display Lg | SemiBold

Font size: 48px | Line height: 60px | weight 600 | Letter Spacing: -2% · text-display-lg

H1 | SemiBold

Font size: 36px | Line height: 44px | weight 600 | Letter Spacing: -2% · text-h1

H2 | SemiBold

Font size: 30px | Line height: 38px | weight 600 · text-h2

H3 | SemiBold

Font size: 24px | Line height: 32px | weight 600 · text-h3

Subtitle Lg | Medium

Font size: 20px | Line height: 30px | weight 500 · text-subtitle-lg

Subtitle Sm | Medium

Font size: 16px | Line height: 26px | weight 500 · text-subtitle-sm

Body Text Lg | Regular

Font size: 18px | Line height: 28px | weight 400 · text-body-lg

Body Text Md | Regular

Font size: 16px | Line height: 26px | weight 400 · text-body-md

Body Text Md | SemiBold

Font size: 16px | Line height: 26px | weight 600 · text-body-md-semibold

Body Text Sm | Regular

Font size: 14px | Line height: 24px | weight 400 · text-body-sm

Caption | Regular

Font size: 12px | Line height: 16px | weight 400 · text-caption

Caption | Medium

Font size: 12px | Line height: 16px | weight 500 · text-caption-medium

Label | SemiBold

Font size: 10px | Line height: 14px | weight 600 · text-label

Link — Primary interactive text (Body Sm + colour token)
02Sidebar Tokens Colours

Sidebar Tokens Colours

Active Foreground

#1F75FF

Active Bg

#F4F8FF

Hover Foreground

#1F75FF

Hover Bg

#F4F8FF

Default Foreground

#475467

Default Bg

#FFFFFF

Disabled Foreground

#D0D7E2

03Spacing System
4px
8px
12px
16px
24px
32px
48px
64px
05Radius

xs (4px)

control (6px)

sm (8px)

md (12px)

lg (16px)

xl (24px)

06Shadows

Shadow Inputs

Inputs

Shadow Focus / Hover

Focus / Hover Elements

Card Shadow

Cards, Dashboard Widgets, Tables, Statistics Cards, Menu, Lists

Border 1px / NE-5

Cards, Dashboard Widgets, Tables, Statistics Cards, Menu, Lists, Inputs

07Grid
1
2
3
4
5
6
7
8
9
10
11
12

Desktop 1920px · 12 columns · 31px margin · Mobile 390px · 4 columns · ~15.5px margin

AIcons & Images

Inline icons (A.E)

XS · 12 px

SM · 14 px

MD · 16 px (Default)

LG · 20 px

Button/icon-button glyphs → foundations-button-tokens.ts · Lucide stand-in for custom Figma set

Logo / image tile

Crop presets

  • avatar — 512×512px · aspect 1 · round
  • logo — 512×512px · aspect 1 · rect
  • cover — 1200×400px · aspect 3 · rect
B01.Buttons
Sizes
SM 24 px
MD 36 px (Default)
LG 42 px
Default
Hover
Pressed
Disabled
FilledPrimary
FilledLeft icon
FilledRight icon
Sizes
SM 24 px
MD 36 px (Default)
LG 42 px
Default
Hover
Pressed
Disabled
FilledSecondary
FilledLeft icon
FilledRight icon
Sizes
SM 24 px
MD 36 px (Default)
LG 42 px
Default
Hover
Pressed
Disabled
FilledDanger
FilledLeft icon
FilledRight icon
Sizes
SM 24 px
MD 36 px (Default)
LG 42 px
Default
Hover
Pressed
Disabled
OutlineOutline
OutlineLeft icon
OutlineRight icon
Sizes
SM 24 px
MD 36 px (Default)
LG 42 px
Default
Hover
Pressed
Disabled
LinkLink
LinkLeft icon
LinkRight icon
B02. Icon Buttons
Sizes
SM 24 px
MD 36 px (Default)
LG 42 px
Default
Hover
Pressed
Disabled
FilledPrimary
Sizes
SM 24 px
MD 36 px (Default)
LG 42 px
Default
Hover
Pressed
Disabled
FilledDanger
Sizes
SM 24 px
MD 36 px (Default)
LG 42 px
Default
Hover
Pressed
Disabled
OutlineOutline
Sizes
SM 24 px
MD 36 px (Default)
LG 42 px
Default
Hover
Pressed
Disabled
GhostGhost
B03. Button Group Segment Control
B04. Menu Tabs

Default

Hover

Selected

Disabled

C01. Radio Buttons

Default · row 24 px · control 16px · dot 8px

DefaultHover / PressedDisabled
Unchecked
Checked

Interactive group

C02. CheckBox

Default · row 24 px · control 16px · glyph 12px · radius 4px

DefaultHoverCheckedIndeterminateDisabled

Interactive

C03. Date & Time Picker

Date & Time Picker · Figma 421:1500

Trigger · 40 px · gap 12 · icon 16 · Time 189 px · Date 276 px

TypeDefaultHoverFocusFilled
Time
Date

Calendar · 276 px · day 31 px · Mon-start

Default
Today
Selected
Outside

Date

Time

Date & time

Token classes

picker-trigger group box-border flex min-h-0 shrink-0 items-center h-10 gap-3 rounded-control bg-ne-8 px-3 py-[7px] text-body-sm font-normal leading-6 transition-[border-color,box-shadow,color,background-color] duration-150 focus-visible:outline-none disabled:cursor-not-allowed disabled:bg-ne-6 disabled:text-ne-3w-full max-w-[276px]w-full max-w-[189px]
C04. Drop Down / Selection

Default

Hover

Pressed

Selected

Hover Selected

Empty

Filled

Label

Item 6

Item 7

Item 8

Item 9

Item 10

Empty

Disabled

Selected

Selected

C05. Multi Selection
C06. Text Area

Default · min 250 px · design 400px wide · radius 6 · inset field

DefaultHoverFocusErrorDisabled

Helper message

Token classes

surface-field flex w-full text-ne-1 placeholder:text-ne-3 min-h-textarea-default px-3 py-2 text-body-sm leading-6 hover:border-primary hover:shadow-input disabled:hover:border-ne-6 aria-[invalid=true]:hover:border-destructive disabled:cursor-not-allowed disabled:bg-ne-6 disabled:text-ne-3 disabled:opacity-100 disabled:shadow-nonesurface-field flex w-full text-ne-1 placeholder:text-ne-3 min-h-textarea-default px-3 py-2 text-body-sm leading-6 hover:border-primary hover:shadow-input disabled:hover:border-ne-6 aria-[invalid=true]:hover:border-destructive disabled:cursor-not-allowed disabled:bg-ne-6 disabled:text-ne-3 disabled:opacity-100 disabled:shadow-none surface-field-errorsurface-field-error
C07. Inputs

Default · control 40 px · label 28px + control 40px = 68px · design 346px

Enabled
Hovered
Focused
Error
Disabled
Placeholder

Helper Message

Helper Message

Helper Message

Helper Message

Input Text

Helper Message

Helper Message

Helper Message

Helper Message

Empty

Helper Message

Helper Message

Helper Message

Helper Message

Label off · control 40 px

Enabled
Hovered
Focused
Error
Disabled
Placeholder

Helper Message

Helper Message

Helper Message

Helper Message

Input Text

Helper Message

Helper Message

Helper Message

Helper Message

Empty

Helper Message

Helper Message

Helper Message

Helper Message

Token classes

surface-field box-border flex w-full min-h-0 shrink-0 text-ne-1 placeholder:text-ne-3 h-input-control px-3 text-body-sm leading-6 file:border-0 file:bg-transparent file:text-body-sm file:font-medium hover:border-primary hover:shadow-input disabled:hover:border-ne-5 aria-[invalid=true]:hover:border-destructive disabled:cursor-not-allowed disabled:border-ne-5 disabled:bg-ne-6 disabled:text-ne-3 disabled:placeholder:text-ne-3 disabled:opacity-100 disabled:shadow-nonesurface-field box-border flex w-full min-h-0 shrink-0 text-ne-1 placeholder:text-ne-3 h-input-control px-3 text-body-sm leading-6 file:border-0 file:bg-transparent file:text-body-sm file:font-medium hover:border-primary hover:shadow-input disabled:hover:border-ne-5 aria-[invalid=true]:hover:border-destructive disabled:cursor-not-allowed disabled:border-ne-5 disabled:bg-ne-6 disabled:text-ne-3 disabled:placeholder:text-ne-3 disabled:opacity-100 disabled:shadow-none surface-field-errorsurface-field-error
C08. Search Input / Editable

Search / editable · 40 px · leading 20px · clear 16px · hit 24px

Empty

Filled

With clear

Disabled

Interactive

Leading search icon · optional clear when typing

Token classes

surface-field box-border flex w-full min-h-0 shrink-0 text-ne-1 placeholder:text-ne-3 h-input-control px-3 text-body-sm leading-6 file:border-0 file:bg-transparent file:text-body-sm file:font-medium hover:border-primary hover:shadow-input disabled:hover:border-ne-5 aria-[invalid=true]:hover:border-destructive disabled:cursor-not-allowed disabled:border-ne-5 disabled:bg-ne-6 disabled:text-ne-3 disabled:placeholder:text-ne-3 disabled:opacity-100 disabled:shadow-nonesize-icon-lg[&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hiddenabsolute right-3 top-1/2 flex size-6 -translate-y-1/2 items-center justify-center text-ne-3 transition-colors hover:text-ne-2
C09. Wide Form Layout Pattern

Main + sidebar · 1114 + 410 px · sidebar 280–410px · section p 26px

Publishing

Token classes

grid items-start gap-6 lg:gap-5 grid-cols-1 lg:grid-cols-[minmax(0,1fr)_minmax(280px,410px)]grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-4rounded-control border border-ne-6 bg-ne-8 p-form-wide-section shadow-card
D01. Tabs

Default · bar 60 px · trigger 40px · content gap 24px

Default · 2–7 tabs

Tab panel content

Icons · bar 42px

Icon tab panel

Token classes

inline-flex w-full items-end gap-0 border-b border-ne-5 bg-transparent p-0 sm:w-auto h-tab-barinline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-none border-b-2 border-transparent px-4 text-body-sm font-medium leading-none transition-[color,border-color] duration-150 focus-visible:outline-none focus-visible:shadow-focus-blue disabled:pointer-events-none disabled:text-ne-3 data-[state=active]:border-primary data-[state=active]:text-primary data-[state=inactive]:text-ne-2 data-[state=inactive]:hover:text-primary h-tab-trigger flex-1 sm:flex-noneinline-flex w-full items-end gap-0 border-b border-ne-5 bg-transparent p-0 sm:w-auto h-tab-bar-iconsinline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-none border-b-2 border-transparent px-4 text-body-sm font-medium leading-none transition-[color,border-color] duration-150 focus-visible:outline-none focus-visible:shadow-focus-blue disabled:pointer-events-none disabled:text-ne-3 data-[state=active]:border-primary data-[state=active]:text-primary data-[state=inactive]:text-ne-2 data-[state=inactive]:hover:text-primary h-tab-trigger flex-1 sm:flex-none [&_svg]:size-btn-icon-mdmt-6 focus-visible:outline-none
D04. Header

Workspace header · 1640 px · shell gap 24px · row gap 16px

With breadcrumb · actions · tabs

Pipeline

Track candidates across stages.

BoardList

Title only

Analytics

Recruiting performance overview.

Page shell wrapper

Jobs

Open roles in your organization.

Page content slot

Token classes

space-y-6flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-betweenmin-w-0 space-y-1text-h2 text-ne-1 sm:text-h1max-w-2xl text-body-sm text-ne-3flex shrink-0 flex-wrap gap-2max-w-fullportal-page mx-auto w-full max-w-[1512px] space-y-6max-w-2xl text-body-sm text-ne-3
D02. Pagination

Cell · 28×28 · bar 36px · list 56px · simple 38px

Default

3

Selected

3

Ellipsis

…

Nav

‹

Disabled

3

Type=Simple, List=false · 156×38

Type=Basic, List=false · 400×36

Type=Advanced, List=false · 541×36

Type=Basic, List=true · 900×56

Showing 21–40 of 86 results

Token classes

inline-flex shrink-0 items-center justify-center transition-colors focus-visible:outline-none focus-visible:shadow-focus-blue disabled:pointer-events-none disabled:text-ne-4 size-pagination-cell rounded-control text-caption-medium font-medium leading-noneflex h-pagination-bar items-center gap-paginationflex h-pagination-bar items-centerflex min-h-pagination-advanced flex-col gap-3 sm:flex-row sm:items-center sm:justify-betweenflex h-pagination-simple items-center gap-3text-body-sm leading-6 text-ne-2
D05. Scroll Model

Fixed chrome · main scroll · max 1512 px content · lock portal-scroll-lock

HeaderFixed

Only the main column scrolls. App shell sets portal-scroll-lock on html.

Content block 1
Content block 2
Content block 3
Content block 4
Content block 5
Content block 6
Content block 7
Content block 8
Content block 9
Content block 10
Content block 11
Content block 12

Token classes

flex h-dvh max-h-dvh w-full overflow-hidden bg-portal-canvas/90 dark:bg-background/90flex h-dvh max-h-dvh min-w-0 flex-1 flex-col overflow-hiddenscrollbar-subtle portal-main min-h-0 flex-1 overflow-y-auto overflow-x-hiddenmx-auto w-full max-w-scroll-content px-scroll-content-x pb-scroll-content-b pt-scroll-content-t lg:px-scroll-content-x-lg lg:pb-scroll-content-b-lg lg:pt-scroll-content-t-lgportal-scroll-lock
D03. SideBar / Elements

Shell · 280 px · px 16 · py 24 · Figma 2032:23377 · nav 44px · account 248px · Figma 2032:23377

Nav item states · Figma Link

DefaultHoverActive
DashboardDashboardDashboard

Plan status · Figma 431:5188

FreeStartPro

Section label

Hiring

Token classes

z-20 hidden h-dvh max-h-dvh shrink-0 flex-col w-sidebar border-r border-ne-5 bg-ne-8 text-ne-1 px-4 py-6 lg:flexgroup flex w-full items-center gap-2.5 rounded-sm px-3 py-2.5 text-body-sm font-medium leading-6 transition-colors duration-150 focus-visible:outline-none focus-visible:shadow-focus-blueflex w-full items-start px-3 text-[10px] font-semibold uppercase leading-[14px] text-ne-2relative flex w-full max-w-sidebar-account items-end justify-center gap-3 overflow-hidden rounded-sm border border-ne-5 bg-ne-8 p-3 transition-[border-color,box-shadow,background-color] duration-150 focus-visible:outline-none
D06. Workspace Header

Workspace header · 1640 px · shell gap 24px · row gap 16px

With breadcrumb · actions · tabs

Pipeline

Track candidates across stages.

BoardList

Title only

Analytics

Recruiting performance overview.

Page shell wrapper

Jobs

Open roles in your organization.

Page content slot

Token classes

space-y-6flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-betweenmin-w-0 space-y-1text-h2 text-ne-1 sm:text-h1max-w-2xl text-body-sm text-ne-3flex shrink-0 flex-wrap gap-2max-w-fullportal-page mx-auto w-full max-w-[1512px] space-y-6max-w-2xl text-body-sm text-ne-3
E01. Avatar

XS · 24 px · S · 32 px · M · 40 px (Default) · L · 48 px · XL · 56 px · Initial · Image

Initials

SCXS
SCSM
SCMD
SCLG
SCXL

Image

SCXS
SCSM
SCMD
SCLG
SCXL

Token classes

relative flex shrink-0 overflow-hidden rounded-full bg-primary-100 text-primaryflex h-full w-full items-center justify-center rounded-full bg-primary-100 font-medium text-primaryaspect-square h-full w-full object-coversize-avatar-md text-body-sm leading-none
E02. Status Label

Default · status label 24 px · 7 tones · dot SM · 6 px · MD · 8 px

Tones with dot

OfferRejectedScreeningOffer pendingNewInterviewArchived

Without dot

OfferRejectedScreeningOffer pending

Pipeline status keys

newreviewingoffer pendinghiredrejectedwithdrawn

STATUS_TONE_MAP · 15 keys

Dot sizes

SM
MD

Token classes

inline-flex max-w-full min-w-0 items-center h-tag-chip gap-1.5 rounded-control px-2.5 text-caption-medium font-medium leading-[18px]bg-info/12 text-infoshrink-0 rounded-full bg-success size-1.5inline-flex max-w-full min-w-0 items-center h-tag-chip gap-1.5 rounded-control px-2.5 text-caption-medium font-medium leading-[18px] bg-info/10 text-info
E03. Usage / Limit Banner

Long · 720×48 · Short · 320×144 · 3 severities

Long strip

You are nearing your candidate unlock limit Upgrade to Pro for unlimited unlocks this month.
You've reached your active jobs limit (5/5) on the Starter plan.
Usage resets on the 1st of each month Track billing from Settings.

Short card

Premium AI automations

Your plan includes limited AI each month.

Outreach limit reached

Upgrade for more messages this month.

Token classes

rounded-control borderflex min-h-12 w-full flex-col justify-center gap-3 px-4 py-2 sm:flex-row sm:items-center sm:justify-between sm:py-0border-primary/25 bg-primary-50 text-ne-1flex min-w-0 items-start gap-2 sm:items-centerrounded-control border border-destructive/30 bg-destructive/5 text-ne-1 min-w-0 text-body-sm leading-6
E04. Badge / Tag

Default · tag 24 px · radius 6 · 14 tones · Editable tag · removable

Tag tones

PlanSkillsPlatformSourcedAgencySecondary

Badge sizes

Default 28 pxTag 24 px

Match / gap tones

matchpartialgap

Editable / removable tag

Item 1
inline-flex max-w-full min-w-0 items-center transition-colors h-tag-chip px-3 rounded-control text-caption-medium font-medium leading-[18px] bg-ne-6 text-ne-2Editable tag · removable · inline-flex items-center gap-1 rounded-control px-2 py-0.5 text-caption-medium leading-[18px] border border-primary-200 bg-primary-50 text-primary
E05. Empty State

Default · empty state ~838×214 · Editable action slot

Default with editable action

No candidates yet

Post a job or import talent to fill this pipeline.

Title only · custom icon

No jobs match your filters

Try adjusting location or skills.

Minimal · inbox default

Nothing here yet

Token classes

flex w-full flex-col items-center justify-center min-h-[214px] rounded-control border border-dashed border-ne-5 bg-ne-7/40 px-6 py-10 text-centermb-3 flex items-center justify-center size-avatar-md rounded-control bg-primary-50 text-primarytext-body-sm font-medium leading-6 text-ne-1mt-1 max-w-sm text-body-sm leading-6 text-ne-3mt-4 · default icon Inbox
E06. Metric / Stat Tile

Default · stat tile ~170×76 · stat title + value + hint

Open roles

12

+2 this week

Avg. time to hire

18d

Match

92%

SLA

2d left

Stage review

Linked · interactive hover

Active jobs

5

View pipeline

Token classes

block min-h-stat-tile rounded-control border-0 bg-ne-8 px-4 py-3 shadow-card transition-[box-shadow,background-color] duration-150hover:bg-primary-50/40 hover:shadow-cardtext-caption-medium leading-[18px] text-ne-3mt-1 text-subtitle-lg font-semibold leading-7 tracking-tight text-ne-1mt-0.5 text-caption-medium leading-[18px] text-ne-3
E07. List Row

Flat · 52 px · Card · explore · sm 52 px · Grid · pipeline · 78 px · Figma 568:4097

Flat · editable actions

SC

Sarah Chen

Product Designer · Remote

Active row

Explore card

AR

Senior Backend Engineer

Acme Corp · London

Pipeline grid · interactive

Token classes

group w-full transition-colors duration-150flex min-h-list-row items-center gap-3 border-b border-ne-5/40 px-3 py-2flex min-w-0 flex-1 items-center gap-3grid min-h-list-row-grid items-center gap-4 border-b border-ne-6 bg-ne-8 px-3 py-3 last:border-0
E08. Card / Panel / Editable

Default panel · 373×206 · rounded-[8px] · Ne-8 · elevate shadow · Editable footer · actions slot

Default

White surface · subtle border

Default recruiting panel primitive.

Elevated

White surface · subtle border

Default recruiting panel primitive.

Interactive

White surface · subtle border

Default recruiting panel primitive.

Inset

White surface · subtle border

Default recruiting panel primitive.

Ghost

White surface · subtle border

Default recruiting panel primitive.

Editable panel · form footer

Team name

Update how this appears on job posts.

Token classes

rounded-[8px] bg-ne-8 text-ne-1 backdrop-filter-noneborder border-ne-5 shadow-cardflex flex-col gap-1 border-b border-ne-5/80 px-panel-section-x py-panel-section-y sm:flex-row sm:items-start sm:justify-betweenpx-panel-section-x py-panel-section-yflex items-center border-t border-ne-5/80 px-panel-section-x py-panel-section-ytext-body-sm font-semibold leading-6 tracking-tight text-ne-1text-body-sm leading-6 text-ne-3
E09. Match / Score

Match score panel · ~369×346

Match score breakdown

Visual fit across skills, keywords, location, rate, and availability.

86%
  • Skills92%
  • Location78%
  • Rate64%

Inline variant · stacked bar

Nested section

  • Availability55%
  • Keywords88%

    • Token classes

    rounded-md border-0 bg-ne-8 p-4 shadow-cardh-2 overflow-hidden rounded-full bg-ne-6bg-successflex h-2.5 overflow-hidden rounded-full bg-ne-6rounded-md border-0 bg-ne-8 p-4 shadow-card space-y-4space-y-3
    F01. Tooltip

    Small · ~67×48 · Default · md · Big · ~320×80 · top/bottom/left/right

    Token classes

    z-[300] rounded-control bg-ne-1 px-3 py-2 text-ne-8 shadow-card animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1max-w-xs text-caption-medium leading-[18px]max-w-[5rem] text-center text-caption-medium leading-[18px]max-w-[20rem] text-body-sm leading-6fill-ne-1
    F02. Toast

    Toast frame · 350×56

    Toast message

    Toast message

    Toast message

    Toast message

    Toast message

    Token classes

    group toast relative flex h-14 w-[350px] max-w-[min(350px,calc(100vw-2rem))] items-center gap-3 overflow-clip rounded-sm border border-ne-5 bg-ne-8 px-4 py-3 text-body-md font-normal leading-[26px] text-[#2D3438] shadow-cardmin-w-0 text-body-md font-normal leading-[26px] text-[#2D3438]flex min-w-0 flex-1 flex-col justify-center gap-0.5shrink-0flex size-avatar-sm shrink-0 items-center justify-center overflow-clip rounded-fullflex size-6 shrink-0 items-center justify-center overflow-clip border-0 bg-transparent p-0 text-ne-2 transition-opacity duration-150 hover:opacity-80 focus-visible:outline-none focus-visible:shadow-focus-blue
    F03. Popover

    Popover surface · ~320×420

    Scroll area · list body

    Token classes

    z-[200] rounded-control border-0 bg-ne-8 p-0 text-ne-1 shadow-card outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2flex items-center justify-between gap-2 border-b border-ne-5 px-3 py-3px-3 py-3flex items-center justify-end gap-2 border-t border-ne-5 px-3 py-3max-h-[216px] overflow-y-auto overscroll-contain picker-scroll p-1
    F04. Mobile Nav Drawer

    Mobile nav drawer · ~390×570 · 280 px panel

    Token classes

    fixed inset-0 z-50 lg:hiddenabsolute inset-0 bg-ne-1/40absolute left-0 top-0 flex h-full flex-col overflow-hidden bg-sidebar px-4 py-6 text-sidebar-foreground shadow-card w-[min(100vw,17.5rem)]flex shrink-0 items-center gap-2 overflow-hidden justify-betweenflex min-h-0 flex-1 flex-colmt-auto shrink-0
    F05. Modal Dialog

    Modal dialog · Desktop 522 · Mobile 320

    Desktop

    Hello, there!

    Lorem ipsum dolor sit amet consectetur. Eu id ut aliquet aliquam ultrices volutpat eu. Urna pretium dolor faucibus id eget mauris at integer adipiscing.

    Mobile

    Hello, there!

    Lorem ipsum dolor sit amet consectetur. Eu id ut aliquet aliquam ultrices volutpat eu. Urna pretium dolor faucibus id eget mauris at integer adipiscing.

    Token classes

    fixed inset-0 z-[110] bg-ne-1/40 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0fixed left-1/2 top-1/2 z-[111] flex w-full -translate-x-1/2 -translate-y-1/2 flex-col items-stretch gap-3 overflow-visible rounded-md border border-ne-5 bg-ne-8 p-5 text-ne-1 shadow-card duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95w-[522px] max-w-[min(522px,calc(100vw-2rem))]w-[320px] max-w-[min(320px,calc(100vw-2rem))] [&_[data-slot=modal-footer]]:justify-endflex w-full flex-col items-center justify-center gap-2 overflow-visible pt-[18px]flex w-full flex-col items-stretch gap-[22px] overflow-visible text-leftflex w-full shrink-0 items-center justify-center gap-2.5 overflow-visible [&_button]:min-w-[90px] [&_button]:flex-1w-full text-center text-h3 font-semibold leading-8 text-ne-1w-full text-center text-body-md font-normal leading-[26px] text-ne-2absolute right-[27px] top-[27px] z-10 inline-flex size-5 items-center justify-center overflow-visible border-0 bg-transparent p-0 text-ne-2 transition-opacity hover:opacity-80 focus-visible:outline-none focus-visible:shadow-focus-blueinline-flex h-[42px] min-w-[90px] flex-1 items-center justify-center rounded-xs bg-primary-50 p-2 text-subtitle-sm font-medium leading-[26px] text-primary shadow-none hover:bg-primary-100 focus-visible:outline-none focus-visible:shadow-focus-blue disabled:pointer-events-none disabled:opacity-50inline-flex h-[42px] min-w-[90px] flex-1 items-center justify-center rounded-xs bg-primary p-2 text-subtitle-sm font-medium leading-[26px] text-primary-foreground shadow-none hover:bg-primary-hover focus-visible:outline-none focus-visible:shadow-focus-blue disabled:pointer-events-none disabled:opacity-50
    F06. Menu / Kanban Card

    Menu surface · 200px · Caption Medium items

    Default

    View Profile
    Edit Candidate
    Schedule Interview
    Move To...
    Download Resume
    Delete Candidate

    Hover

    View Profile
    Edit Candidate
    Schedule Interview
    Move To...
    Download Resume
    Delete Candidate

    Disabled

    View Profile
    Edit Candidate
    Schedule Interview
    Move To...
    Download Resume
    Delete Candidate

    Live dropdown

    Kanban card · action menu

    Sarah Chen

    Product Designer · Remote

    92%

    Token classes

    z-50 w-[200px] min-w-[200px] overflow-hidden rounded-md border border-ne-5 bg-ne-8 p-0 text-ne-2 shadow-cardz-50 w-[200px] min-w-[200px] overflow-hidden rounded-md border border-ne-5 bg-ne-8 p-0 text-ne-2 shadow-card data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2relative flex w-full cursor-default select-none items-center gap-1.5 px-3 py-2 text-caption-medium font-medium leading-4 text-ne-2 outline-none transition-colors first:pt-3 last:pb-3 focus:bg-primary-50 focus:text-primary-hover-blue data-[highlighted]:bg-primary-50 data-[highlighted]:text-primary-hover-blue data-[disabled]:pointer-events-none data-[disabled]:text-ne-3 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0px-3 py-2 text-caption-medium font-medium leading-4 text-ne-3my-0 h-px bg-ne-5text-error focus:bg-error-300/40 focus:text-error data-[highlighted]:bg-error-300/40 data-[highlighted]:text-error
    F07. Inspector Drawer

    Inspector drawer · full-height right panel · resizable

    Token classes

    fixed inset-0 z-[80] bg-ne-1/40 transition-opacity duration-200 ease-outfixed inset-y-0 right-0 z-[90] flex flex-col border-l border-ne-5 bg-ne-8 text-ne-1 shadow-cardabsolute inset-y-0 left-0 z-10 w-1.5 cursor-col-resize touch-noneflex h-16 shrink-0 items-center justify-between gap-3 border-b border-ne-5 px-4truncate text-body-md-semibold font-semibold leading-6 tracking-tight text-ne-1mt-0.5 truncate text-caption-medium leading-[18px] text-ne-3flex shrink-0 items-center gap-0.5flex min-h-0 flex-1 flex-col overflow-y-auto px-4 py-4
    G01. Task Card

    Task card · 240×136

    Schedule panel interview

    Due tomorrow · Sarah Chen

    Pending

    Send offer letter

    Completed · Alex Rivera

    Done

    Token classes

    flex min-h-[136px] w-full max-w-[240px] flex-col rounded-md border-0 bg-ne-8 p-3 shadow-card transition-shadow duration-150hover:shadow-cardflex items-start gap-2.5min-w-0 flex-1 space-y-1mt-2.5 flex flex-wrap items-center gap-1.5
    G03. Pipeline Kanban Column

    Pipeline kanban column · ~356×894

    Default · with cards

    Screening

    Phone / First Call

    2
    Card slot

    Drop Candidate Here

    Drop target · focused

    Interview

    0

    Release to move here

    Token classes

    kanban-column flex min-h-0 min-w-0 w-full flex-col gap-3 rounded-xl border border-ne-5 bg-ne-8 px-4 py-6 shadow-card transition-all duration-200border-primary/35 ring-2 ring-primary/20flex min-w-0 items-center gap-6truncate text-subtitle-lg font-medium leading-[30px] text-ne-1truncate text-caption-medium leading-4 text-ne-3inline-flex size-6 shrink-0 items-center justify-center rounded-control bg-primary-100 text-caption-medium font-medium tabular-nums text-primarykanban-column-body flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto overflow-x-hiddenflex h-[140px] shrink-0 flex-col items-center justify-center gap-2 rounded-[10px] border border-dashed border-ne-3 transition-colors duration-200border-primary bg-primary-50/50text-center text-caption-medium text-ne-3font-medium text-primary
    G04. Pipeline Kanban Card

    Pipeline kanban card · ~324×auto

    Default

    Staff Engineer · Remote

    92%

    Hover

    Staff Engineer · Remote

    Dragging

    Staff Engineer · Remote

    Focus

    Staff Engineer · Remote

    Placeholder

    Staff Engineer · Remote

    With action menu

    Sarah Chen

    Product Designer · Remote

    92%

    Drag overlay

    Dragging

    Token classes

    kanban-card w-full max-w-full shrink-0 overflow-hidden rounded-xl border border-ne-5 bg-ne-8 transition-[border-color,box-shadow,background-color,transform] duration-200border-ne-5 bg-ne-8 shadow-none hover:border-primary-hover-blue hover:bg-primary-50 hover:shadow-focus-blue focus-visible:border-primary-hover-blue focus-visible:bg-ne-8 focus-visible:shadow-focus-blueborder-primary-hover-blue bg-primary-50 shadow-focus-bluekanban-card-drag z-50 rotate-[3deg] border-ne-5 bg-ne-8 opacity-100 shadow-cardflex min-w-0 flex-1 cursor-grab touch-none items-center gap-2 active:cursor-grabbingshrink-0flex min-w-0 flex-1 flex-col justify-centerflex items-center justify-between gap-2 px-3 pb-3 pt-2kanban-card-drag w-[324px] max-w-[min(100%,324px)] rotate-[3deg] border-ne-5 bg-ne-8 opacity-100 shadow-card
    G02. Filters

    Filter rail · 312×auto · Figma 530:2652

    Token classes

    flex w-full shrink-0 flex-col gap-5 rounded-[8px] border border-ne-5 bg-ne-8 px-4 py-6 shadow-[0px_2px_8px_0px_rgba(15,23,42,0.04),0px_6px_20px_0px_rgba(15,23,42,0.04)] lg:w-[13.5rem] xl:w-[19.5rem]flex w-full flex-col gap-2text-[10px] font-semibold uppercase leading-[14px] tracking-wide text-ne-2space-y-1max-w-xs rounded-lg border border-ne-5 bg-ne-8 p-4 shadow-card
    G05. Pipeline ToolBar

    Pipeline toolbar · ~1085×64 · Figma 532:4500

    Default

    Group By:

    Selected

    Token classes

    flex w-full flex-nowrap items-center gap-3 overflow-x-auto rounded-lg border border-ne-5 bg-ne-8 p-3flex min-w-0 flex-1 flex-nowrap items-center gap-3ml-auto flex shrink-0 items-center gap-3
    G06. Candidate / Explore list row

    Candidate explore list row · 1400 · Contact / Unlock

    Contact

    Anna Smith

    Added May 12, 2026

    LinkedIn

    2 Days Ago

    Product Designer

    +5 Years

    Calgary, AB, Canada

    Open to Relocate

    FigmaResearchUX Design
    UI DesignUser Interview+14

    98% Match

    Unlock

    Anna Smith

    Added May 12, 2026

    UpWork

    2 Days Ago

    Product Designer

    +5 Years

    Calgary, AB, Canada

    Open to Relocate

    FigmaResearchUX Design
    UI DesignUser Interview+14

    98% Match

    Token classes

    flex w-full max-w-[1400px] items-center rounded-sm border border-ne-6 bg-ne-8 p-3inline-flex h-6 shrink-0 items-center justify-center gap-1 rounded-xs border border-primary bg-ne-8 px-2 py-0.5 text-caption-medium font-medium leading-4 text-primaryinline-flex h-9 w-[110px] shrink-0 items-center justify-center gap-1 rounded-xs px-2 py-[7px] text-subtitle-sm font-medium leading-[26px] bg-primary text-primary-foregroundexplore-row flex flex-col gap-3 rounded-sm border border-ne-6 bg-ne-8 p-3 transition-[box-shadow,background-color] duration-200 hover:shadow-card sm:min-h-[72px] sm:flex-row sm:items-center sm:gap-4
    G07. Inspector Candidate Body

    Inspector candidate body · ~790×698 · Figma 562:9243

    Shell · tabs chrome · Figma 562:9243

    OverviewActivity

    Match Breakdown

    Overview body composes identity, stats, match ring, skills, and footer actions.

    Editable · stage update

    Pipeline stage

    Resizable · drawer body slot

    Drawer content

    Scrollable body inside resizable inspector panel.

    Token classes

    flex h-full min-h-0 w-full min-w-0 flex-col overflow-hidden rounded-[10px] border border-ne-5 bg-ne-8 shadow-[0px_8px_24px_0px_rgba(15,23,42,0.06),0px_2px_8px_0px_rgba(15,23,42,0.04)]flex h-full min-h-0 w-full min-w-0 flex-colflex w-full flex-col gap-3 rounded-[10px] border border-ne-5 p-3text-body-sm font-medium leading-[26px] text-ne-1grid grid-cols-2 gap-3 sm:grid-cols-4space-y-4flex flex-wrap items-center gap-2
    G08. Hiring Swimline

    Hiring swimlane · header ~66 px

    Staff Engineer

    6 candidates · 2 in offer

    Collapsed swimlane body — grouped job pipelines

    Token classes

    overflow-hidden rounded-xl border border-ne-5 bg-ne-7/40flex min-h-[66px] items-center gap-2 border-b border-ne-5/60 bg-ne-8 px-3 py-2min-w-0 flex-1flex shrink-0 items-center gap-2p-3
    G09. Pipeline List View

    Pipeline list view · ~1400×346 · Figma 568:4179

    • Sarah Chen

      Toronto, ON

      Staff Engineer

      +8 Years

      Screening
      92%
      2d in stage
      View

    Token classes

    scroll-x-only overflow-x-auto rounded-xl border border-ne-5 bg-ne-8hidden items-center gap-4 border-b border-ne-5 bg-ne-7 px-3 py-3 text-[12px] font-medium uppercase leading-4 tracking-wide text-ne-2 md:griddivide-y divide-ne-6min-w-[56rem] grid-cols-[auto_minmax(10rem,1.2fr)_minmax(8rem,1fr)_8.75rem_minmax(7rem,9rem)_minmax(11rem,12rem)_auto]