EasyHire AI | AI Recruiting Agent for Global Talent Sourcing Design System & DESIGN.md Report

Palette

Colors

primary

#1D4ED8

6.7 on white · 3.13 on black · 224° 76% 48%

secondary

#0F172A

17.85 on white · 1.18 on black · 222° 47% 11%

accent

#0052D9

6.54 on white · 3.21 on black · 217° 100% 43%

Token Roles 8 tokens

background

#FFFFFF · 21:1 vs black

surface

#E6F0FF · 18.27:1 vs black

text-primary

#0F172A · 17.85:1 vs white

text-secondary

#333333 · 12.63:1 vs white

border

#E6F0FF · 18.27:1 vs black

on-primary

#FFFFFF · 21:1 vs black

on-secondary

#FFFFFF · 21:1 vs black

on-accent

#FFFFFF · 21:1 vs black

Detected Palette 6 colors by frequency in source CSS

#0F172A

used 1× · 222° 47% 11%

#1D4ED8

used 1× · 224° 76% 48%

#FFFFFF

used 1× · 0° 0% 100%

#0052D9

used 1× · 217° 100% 43%

#E6F0FF

used 1× · 216° 100% 95%

#333333

used 1× · 0° 0% 20%

Type System

Typography

headline-lg

inherit

32px · 400 · LH 1

EasyHire AI | AI Recruiting Agent for Global Talent Sourcing

title-lg

inherit

22px · 400 · LH 1.4

Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.

label-md

inherit

14px · 400 · LH 1.4

Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.

label-sm

inherit

12px · 400 · LH 1.4

Typography is the discipline of rendering language visible. Spacing, weight, and rhythm carry meaning long before words are read.

Detected Font Stacks

Inter,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,微软雅黑,Arial,sans-serif

Structure

Layout

Container

Section padding: — · card padding: —

Grid

12-column reference grid · gap —

Spacing Scale

unit

8px

sm

8px

md

16px

lg

48px

detected

8px

detected

16px

detected

20px

detected

48px

Geometry

Shapes

sm

4px

pill

50%

Tokens in Context

Components

card

background{colors.surface}

border1px solid {colors.border}

radius4px

button-primary

background{colors.primary}

radius50%

Animation

Motion

Keyframes 18 found

@keyframes rotating

0%{transform:rotate(0)}to{transform:rotate(360deg)}

@keyframes v-modal-in

0%{opacity:0}

@keyframes v-modal-out

to{opacity:0}

@keyframes dialog-fade-in

0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translate(0)}

@keyframes dialog-fade-out

0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translateY(-20px)}

@keyframes modal-fade-in

0%{opacity:0}to{opacity:1}

@keyframes modal-fade-out

0%{opacity:1}to{opacity:0}

@keyframes viewer-fade-in

0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translate(0)}

@keyframes viewer-fade-out

0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translateY(-20px)}

Transitions

all .1soutline-offset,outline

Proof

Live Preview

Complete Reference

Full design.md Specification

Design Specification — EasyHire AI | AI Recruiting Agent for Global Talent Sourcing

Field	Value
Site / Project	https://easyhireai.com/
Analyzed on	2026-10-16
Analysis mode	Automated code extraction (no AI)

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#0F172A), a vivid accent (#0052D9). All type is set in Inter,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,微软雅黑,Arial,sans-serif.

Logo asset(s): https://easyhireai.com/favicon.ico

Color System

Detected palette (by frequency)

Hex	RGB	HSL	Count
`#0F172A`	15, 23, 42	222° 47% 11%	1
`#1D4ED8`	29, 78, 216	224° 76% 48%	1
`#FFFFFF`	255, 255, 255	0° 0% 100%	1
`#0052D9`	0, 82, 217	217° 100% 43%	1
`#E6F0FF`	230, 240, 255	216° 100% 95%	1
`#333333`	51, 51, 51	0° 0% 20%	1

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Token	Hex	RGB	HSL
`--color-primary`	`#1D4ED8`	29, 78, 216	224° 76% 48%
`--color-accent`	`#0052D9`	0, 82, 217	217° 100% 43%
`--color-background`	`#FFFFFF`	255, 255, 255	0° 0% 100%
`--color-surface`	`#E6F0FF`	230, 240, 255	216° 100% 95%
`--color-text-primary`	`#0F172A`	15, 23, 42	222° 47% 11%
`--color-secondary`	`#0F172A`	15, 23, 42	222° 47% 11%
`--color-text-secondary`	`#333333`	51, 51, 51	0° 0% 20%
`--color-border`	`#E6F0FF`	230, 240, 255	216° 100% 95%
`--color-on-primary`	`#FFFFFF`	255, 255, 255	0° 0% 100%
`--color-on-secondary`	`#FFFFFF`	255, 255, 255	0° 0% 100%
`--color-on-accent`	`#FFFFFF`	255, 255, 255	0° 0% 100%

Typography

Primary typeface: Inter — stack: Inter,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,微软雅黑,Arial,sans-serif

Font stacks (most used first)

Inter,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,微软雅黑,Arial,sans-serif

Derived type scale

Token	Size
headline-lg	32px
title-lg	22px
label-md	14px
label-sm	12px

Font sizes (by frequency)

Size	Count
14px	2
32px	1
22px	1
12px	1

Line heights (by frequency)

Value	Count
1	2
1.25	1
1.35	1
1em	1
0	1

Spacing

Derived spacing scale

Token	Value
unit	8px
sm	8px
md	16px
lg	48px

Raw values (by frequency)

Value	Count
20px	2
48px	1
16px	1
8px	1

Borders & Radius

Derived radius tokens

Token	Value
sm	`4px`
pill	`50%`

Raw values (resolved, by frequency)

Radius	Count
`4px`	2
`0`	1
`50%`	1

Animation & Motion

Transitions

all .1s
outline-offset,outline

Keyframes

@keyframes rotating { 0%{transform:rotate(0)}to{transform:rotate(360deg)} }
@keyframes v-modal-in { 0%{opacity:0} }
@keyframes v-modal-out { to{opacity:0} }
@keyframes dialog-fade-in { 0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translate(0)} }
@keyframes dialog-fade-out { 0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translateY(-20px)} }
@keyframes modal-fade-in { 0%{opacity:0}to{opacity:1} }
@keyframes modal-fade-out { 0%{opacity:1}to{opacity:0} }
@keyframes viewer-fade-in { 0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translate(0)} }
@keyframes viewer-fade-out { 0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translateY(-20px)} }
@keyframes loading-rotate { to{transform:rotate(360deg)} }
@keyframes loading-dash { 0%{stroke-dasharray:1 200;stroke-dashoffset:0}50%{stroke-dasharray:90 150;stroke-dashoffset:-40px}to{stroke-dasharray:90 150;stroke-dashoffset:-120px} }
@keyframes msgbox-fade-in { 0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translate(0)} }
@keyframes progress { 0%{background-position:0 0}to{background-position:32px 0} }
@keyframes indeterminate { 0%{left:-100%}to{left:100%} }
@keyframes striped-flow { 0%{background-position:-100%}to{background-position:100%} }
@keyframes el-skeleton-loading { 0%{background-position:100%}to{background-position:0} }
@keyframes rotate { to{transform:rotate(360deg)} }
@keyframes dash { 0%{stroke-dasharray:1 150;stroke-dashoffset:0}50%{stroke-dasharray:90 150;stroke-dashoffset:-35px}to{stroke-dasharray:90 150;stroke-dashoffset:-124px} }

Source Design Tokens (CSS custom properties)

:root {
  --color: inherit;
  --el-button-font-weight: var(--el-font-weight-primary);
  --el-button-border-color: var(--el-border-color);
  --el-button-bg-color: var(--el-fill-color-blank);
  --el-button-text-color: var(--el-text-color-regular);
  --el-button-disabled-text-color: var(--el-disabled-text-color);
  --el-button-disabled-bg-color: var(--el-fill-color-blank);
  --el-button-disabled-border-color: var(--el-border-color-light);
  --el-button-divide-border-color: #ffffff80;
  --el-button-hover-text-color: var(--el-color-primary);
  --el-button-hover-bg-color: var(--el-color-primary-light-9);
  --el-button-hover-border-color: var(--el-color-primary-light-7);
  --el-button-active-text-color: var(--el-button-hover-text-color);
  --el-button-active-border-color: var(--el-color-primary);
  --el-button-active-bg-color: var(--el-button-hover-bg-color);
  --el-button-outline-color: var(--el-color-primary-light-5);
  --el-button-hover-link-text-color: var(--el-text-color-secondary);
  --el-button-active-color: var(--el-text-color-primary);
  --el-checkbox-font-size: 14px;
  --el-checkbox-font-weight: var(--el-font-weight-primary);
  --el-checkbox-text-color: var(--el-text-color-regular);
  --el-checkbox-input-height: 14px;
  --el-checkbox-input-width: 14px;
  --el-checkbox-border-radius: var(--el-border-radius-small);
  --el-checkbox-bg-color: var(--el-fill-color-blank);
  --el-checkbox-input-border: var(--el-border);
  --el-checkbox-disabled-border-color: var(--el-border-color);
  --el-checkbox-disabled-input-fill: var(--el-fill-color-light);
  --el-checkbox-disabled-icon-color: var(--el-text-color-placeholder);
  --el-checkbox-disabled-checked-input-fill: var(--el-border-color-extra-light);
  --el-checkbox-disabled-checked-input-border-color: var(--el-border-color);
  --el-checkbox-disabled-checked-icon-color: var(--el-text-color-placeholder);
  --el-checkbox-checked-text-color: var(--el-color-primary);
  --el-checkbox-checked-input-border-color: var(--el-color-primary);
  --el-checkbox-checked-bg-color: var(--el-color-primary);
  --el-checkbox-checked-icon-color: var(--el-color-white);
  --el-checkbox-input-border-color-hover: var(--el-color-primary);
  --el-popup-modal-bg-color: var(--el-color-black);
  --el-popup-modal-opacity: .5;
  --el-dialog-width: 50%;
  --el-dialog-margin-top: 15vh;
  --el-dialog-bg-color: var(--el-bg-color);
  --el-dialog-box-shadow: var(--el-box-shadow);
  --el-dialog-title-font-size: var(--el-font-size-large);
  --el-dialog-content-font-size: 14px;
  --el-dialog-font-line-height: var(--el-font-line-height-primary);
  --el-dialog-padding-primary: 16px;
  --el-dialog-border-radius: var(--el-border-radius-base);
  --el-loading-spinner-size: 42px;
  --el-loading-fullscreen-spinner-size: 50px;
  --el-menu-active-color: var(--el-color-primary);
  --el-menu-text-color: var(--el-text-color-primary);
  --el-menu-hover-text-color: var(--el-color-primary);
  --el-menu-bg-color: var(--el-fill-color-blank);
  --el-menu-hover-bg-color: var(--el-color-primary-light-9);
  --el-menu-item-height: 56px;
  --el-menu-sub-item-height: calc(var(--el-menu-item-height) - 6px);
  --el-menu-horizontal-height: 60px;
  --el-menu-horizontal-sub-item-height: 36px;
  --el-menu-item-font-size: var(--el-font-size-base);
}

Do's and Don'ts

Do

Do reserve the accent #0052D9 for interactive highlights and key moments — it is used sparingly on the source page.
Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
Do align spacing to the 8px base unit derived from the page.

Don't

Don't introduce colors outside the detected palette — every hue above was found in the source.
Don't add gradients — the source page uses flat fills exclusively.
Don't add drop shadows; the source page relies on borders and surface shifts for depth, not elevation.

Design Tokens (copy-paste)

:root {
  --color-primary: #1D4ED8;
  --color-accent: #0052D9;
  --color-background: #FFFFFF;
  --color-surface: #E6F0FF;
  --color-text-primary: #0F172A;
  --color-secondary: #0F172A;
  --color-text-secondary: #333333;
  --color-border: #E6F0FF;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --font-sans: Inter,Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,微软雅黑,Arial,sans-serif;
  --font-size-headline-lg: 32px;
  --font-size-title-lg: 22px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-sm: 4px;
  --radius-pill: 50%;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 48px;
  --container-max: 800px;
}