一堆猫应聘系统 Design System & DESIGN.md Report

Detected Language

Design Style

neumorphism

paired inset/outset soft shadows

Palette

Colors

primary

#60A5FA

2.54 on white · 8.26 on black · 213° 94% 68%

secondary

#000000

21 on white · 1 on black · 0° 0% 0%

accent

#F59E0B

2.15 on white · 9.78 on black · 38° 92% 50%

Token Roles 11 tokens

background

#F5F6F8 · 19.42:1 vs black

text-primary

#1F2225 · 15.98:1 vs white

surface

#F8FAFC · 20.07:1 vs black

text-secondary

#64748B · 4.76:1 vs white

border

#666E75 · 5.18:1 vs white

on-primary

#1F2225 · 15.98:1 vs white

on-secondary

#FFFFFF · 21:1 vs black

on-accent

#1F2225 · 15.98:1 vs white

surface-container-lowest

#FFFFFF · 21:1 vs black

surface-container-low

#F5F6F8 · 19.42:1 vs black

surface-container

#E5E7EB · 16.96:1 vs black

Detected Palette 23 colors by frequency in source CSS

#60A5FA

used 7× · 213° 94% 68%

#000000

used 4× · 0° 0% 0%

#FFFFFF

used 4× · 0° 0% 100%

#0F172A

used 4× · 222° 47% 11%

#F59E0B

used 4× · 38° 92% 50%

#2563EB

used 4× · 221° 83% 53%

#4ADE80

used 3× · 142° 69% 58%

#22D3EE

used 2× · 188° 86% 53%

#F43F5E

used 2× · 350° 89% 60%

#6EE7B7

used 2× · 156° 72% 67%

#047857

used 2× · 163° 94% 24%

#022C22

used 2× · 166° 91% 9%

#BFDBFE

used 2× · 213° 97% 87%

#4F46E5

used 2× · 243° 75% 59%

#1E40AF

used 2× · 226° 71% 40%

#F8FAFC

used 2× · 210° 40% 98%

#64748B

used 2× · 215° 16% 47%

#93C5FD

used 1× · 212° 96% 78%

#1668DC

used 1× · 215° 82% 47%

#1F2225

used 1× · 210° 9% 13%

#666E75

used 1× · 208° 7% 43%

#E5E7EB

used 1× · 220° 13% 91%

#F5F6F8

used 1× · 220° 18% 97%

Type System

Typography

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.

Detected Font Stacks

-apple-system,PingFang SC,Microsoft YaHei,sans-serif

Structure

Layout

Container

Section padding: — · card padding: —

Grid

12-column reference grid · gap —

Spacing Scale

unit

8px

md

16px

detected

16px

Depth

Elevation & Depth

level 1

0 14px 30px -18px #0f172a2e,0 0 #60a5fa38

level 2

0 18px 34px -18px #0f172a38,0 0 0 6px #60a5fa1a

level 3

0 0 #60a5fa47,0 14px 32px -22px #0f172a29

level 4

0 0 0 10px #60a5fa00,0 18px 36px -22px #0f172a33

level 5

0 0 0 4px #f59e0b2e,0 14px 28px -18px #f59e0b47

level 6

0 0 0 6px #f59e0b1f,0 18px 32px -18px #f59e0b52

Geometry

Shapes

md

12px

lg

24px

pill

9999px

Tokens in Context

Components

card

background{colors.surface}

border1px solid {colors.border}

radius24px

boxShadow{elevation.md}

button-primary

background{colors.primary}

radius9999px

Animation

Motion

Keyframes 18 found

@keyframes guide-error-flash

0%,to{opacity:0}22%{opacity:1}55%{opacity:.35}

@keyframes annotation-breathe

0%,to{transform:scale(1);box-shadow:0 14px 30px -18px #0f172a2e,0 0 #60a5fa38}50%{transform:scale(1.04);box-shadow:0 18px 34px -18px #0f172a38,0 0 0 6px #60a5fa1a}

@keyframes annotation-blink

0%,to{opacity:1;filter:saturate()}50%{opacity:.45;filter:saturate(1.35)}

@keyframes annotation-sway-x

0%,to{transform:translate(0)rotate(0)}25%{transform:translate(-5px)rotate(-2deg)}75%{transform:translate(5px)rotate(2deg)}

@keyframes annotation-point

0%,to{transform:translate(0)translateY(0)}50%{transform:translate(6px)translateY(-1px)}

@keyframes annotation-float

0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}

@keyframes annotation-heartbeat

0%,to{transform:scale(1)}20%{transform:scale(1.08)}38%{transform:scale(.98)}55%{transform:scale(1.06)}

@keyframes annotation-wave-skew

0%,to{transform:skew(0)rotate(0)}25%{transform:skew(-5deg)rotate(-1.5deg)}75%{transform:skew(5deg)rotate(1.5deg)}

@keyframes annotation-jitter

0%,to{transform:translate(0)}20%{transform:translate(-1px,1px)}40%{transform:translate(1px,-1px)}60%{transform:translate(-2px)}80%{transform:translate(2px,1px)}

Applied Animations

none!important

Proof

Live Preview

Complete Reference

Full design.md Specification

Design Specification — 一堆猫应聘系统

Field	Value
Site / Project	https://dfd.yiduimao.cn/recruitment?token=0e905bff076151cb9789ab3d45c88389
Analyzed on	2026-11-02
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 (#F5F6F8), ink text (#1F2225), a vivid accent (#F59E0B). All type is set in -apple-system,PingFang SC,Microsoft YaHei,sans-serif. Detected style signatures: neumorphism.

Color System

Detected palette (by frequency)

Hex	RGB	HSL	Count
`#60A5FA`	96, 165, 250	213° 94% 68%	7
`#000000`	0, 0, 0	0° 0% 0%	4
`#FFFFFF`	255, 255, 255	0° 0% 100%	4
`#0F172A`	15, 23, 42	222° 47% 11%	4
`#F59E0B`	245, 158, 11	38° 92% 50%	4
`#2563EB`	37, 99, 235	221° 83% 53%	4
`#4ADE80`	74, 222, 128	142° 69% 58%	3
`#22D3EE`	34, 211, 238	188° 86% 53%	2
`#F43F5E`	244, 63, 94	350° 89% 60%	2
`#6EE7B7`	110, 231, 183	156° 72% 67%	2
`#047857`	4, 120, 87	163° 94% 24%	2
`#022C22`	2, 44, 34	166° 91% 9%	2
`#BFDBFE`	191, 219, 254	213° 97% 87%	2
`#4F46E5`	79, 70, 229	243° 75% 59%	2
`#1E40AF`	30, 64, 175	226° 71% 40%	2
`#F8FAFC`	248, 250, 252	210° 40% 98%	2
`#64748B`	100, 116, 139	215° 16% 47%	2
`#93C5FD`	147, 197, 253	212° 96% 78%	1
`#1668DC`	22, 104, 220	215° 82% 47%	1
`#1F2225`	31, 34, 37	210° 9% 13%	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-background`	`#F5F6F8`	245, 246, 248	220° 18% 97%
`--color-text-primary`	`#1F2225`	31, 34, 37	210° 9% 13%
`--color-primary`	`#60A5FA`	96, 165, 250	213° 94% 68%
`--color-accent`	`#F59E0B`	245, 158, 11	38° 92% 50%
`--color-surface`	`#F8FAFC`	248, 250, 252	210° 40% 98%
`--color-secondary`	`#000000`	0, 0, 0	0° 0% 0%
`--color-text-secondary`	`#64748B`	100, 116, 139	215° 16% 47%
`--color-border`	`#666E75`	102, 110, 117	208° 7% 43%
`--color-on-primary`	`#1F2225`	31, 34, 37	210° 9% 13%
`--color-on-secondary`	`#FFFFFF`	255, 255, 255	0° 0% 100%
`--color-on-accent`	`#1F2225`	31, 34, 37	210° 9% 13%

Surface ramp (derived from detected light neutrals)

Token	Hex
`--color-surface-container-lowest`	`#FFFFFF`
`--color-surface-container-low`	`#F5F6F8`
`--color-surface-container`	`#E5E7EB`

Typography

Primary typeface: -apple-system — stack: -apple-system,PingFang SC,Microsoft YaHei,sans-serif

Font stacks (most used first)

-apple-system,PingFang SC,Microsoft YaHei,sans-serif

Derived type scale

Token	Size
label-md	14px

Font sizes (by frequency)

Size	Count
14px	1

Spacing

Derived spacing scale

Token	Value
unit	8px
md	16px

Raw values (by frequency)

Value	Count
16px	1

Borders & Radius

Derived radius tokens

Token	Value
md	`12px`
lg	`24px`
pill	`9999px`

Raw values (resolved, by frequency)

Radius	Count
`12px`	1
`20px 28px 18px 24px/18px 24px 20px 26px`	1
`24px 20px 26px 18px/24px 18px 24px 20px`	1
`999px`	1

Shadows

Derived elevation

Token	Value
sm	`0 14px 30px -18px #0f172a2e,0 0 #60a5fa38`
md	`0 0 0 6px #f59e0b1f,0 18px 32px -18px #f59e0b52`
lg	`inset 0 0 0 1px #4ade802e,0 0 0 3px #4ade8014,0 18px 32px -20px #022c2285`

All detected shadows

0 14px 30px -18px #0f172a2e,0 0 #60a5fa38
0 18px 34px -18px #0f172a38,0 0 0 6px #60a5fa1a
0 0 #60a5fa47,0 14px 32px -22px #0f172a29
0 0 0 10px #60a5fa00,0 18px 36px -22px #0f172a33
0 0 0 4px #f59e0b2e,0 14px 28px -18px #f59e0b47
0 0 0 6px #f59e0b1f,0 18px 32px -18px #f59e0b52
0 0 #6ee7b74d,0 14px 28px -18px #04785757
0 0 0 10px #6ee7b700,0 18px 32px -18px #04785761
inset 0 0 0 1px #4ade801a,0 14px 26px -20px #022c2275
inset 0 0 0 1px #4ade802e,0 0 0 3px #4ade8014,0 18px 32px -20px #022c2285

Animation & Motion

Keyframes

@keyframes guide-error-flash { 0%,to{opacity:0}22%{opacity:1}55%{opacity:.35} }
@keyframes annotation-breathe { 0%,to{transform:scale(1);box-shadow:0 14px 30px -18px #0f172a2e,0 0 #60a5fa38}50%{transform:scale(1.04);box-shadow:0 18px 34px -18px #0f172a38,0 0 0 6px #60a5fa1a} }
@keyframes annotation-blink { 0%,to{opacity:1;filter:saturate()}50%{opacity:.45;filter:saturate(1.35)} }
@keyframes annotation-sway-x { 0%,to{transform:translate(0)rotate(0)}25%{transform:translate(-5px)rotate(-2deg)}75%{transform:translate(5px)rotate(2deg)} }
@keyframes annotation-point { 0%,to{transform:translate(0)translateY(0)}50%{transform:translate(6px)translateY(-1px)} }
@keyframes annotation-float { 0%,to{transform:translateY(0)}50%{transform:translateY(-7px)} }
@keyframes annotation-heartbeat { 0%,to{transform:scale(1)}20%{transform:scale(1.08)}38%{transform:scale(.98)}55%{transform:scale(1.06)} }
@keyframes annotation-wave-skew { 0%,to{transform:skew(0)rotate(0)}25%{transform:skew(-5deg)rotate(-1.5deg)}75%{transform:skew(5deg)rotate(1.5deg)} }
@keyframes annotation-jitter { 0%,to{transform:translate(0)}20%{transform:translate(-1px,1px)}40%{transform:translate(1px,-1px)}60%{transform:translate(-2px)}80%{transform:translate(2px,1px)} }
@keyframes annotation-beacon { 0%,to{transform:scale(1);box-shadow:0 0 #60a5fa47,0 14px 32px -22px #0f172a29}65%{transform:scale(1.05);box-shadow:0 0 0 10px #60a5fa00,0 18px 36px -22px #0f172a33} }
@keyframes annotation-pendulum { 0%,to{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)} }
@keyframes annotation-glitch-shift { 0%,to{filter:saturate();text-shadow:1px 0 #22d3eef2,-1px 0 #f43f5ee6,0 0 10px #ffffff29;transform:translate(0)}20%{transform:translate(-1px,1px)}40%{text-shadow:2px 0 #22d3eef2,-2px 0 #f43f5ee6,0 0 10px #ffffff29;transform:translate(1px,-1px)}60%{filter:hue-rotate(8deg);transform:translate(-2px)}80%{transform:translate(2px,1px)} }
@keyframes annotation-scanline { 0%{background-position:0 0}to{background-position:160px 0} }
@keyframes annotation-focus-pop { 0%,to{transform:scale(1);box-shadow:0 0 0 4px #f59e0b2e,0 14px 28px -18px #f59e0b47}50%{transform:scale(1.05);box-shadow:0 0 0 6px #f59e0b1f,0 18px 32px -18px #f59e0b52} }
@keyframes annotation-neon-flicker { 0%,19%,21%,23%,80%,to{opacity:1;filter:brightness()}20%,24%{opacity:.72;filter:brightness(1.22)}22%{opacity:.9}81%{opacity:.78} }
@keyframes annotation-radar-sweep { 0%,to{transform:scale(1);box-shadow:0 0 #6ee7b74d,0 14px 28px -18px #04785757}60%{transform:scale(1.06);box-shadow:0 0 0 10px #6ee7b700,0 18px 32px -18px #04785761} }
@keyframes annotation-holo-shift { 0%{filter:hue-rotate();background-position:0%}50%{filter:hue-rotate(18deg);background-position:100%}to{filter:hue-rotate();background-position:0%} }
@keyframes annotation-grid-pulse { 0%,to{filter:brightness();box-shadow:inset 0 0 0 1px #4ade801a,0 14px 26px -20px #022c2275}50%{filter:brightness(1.12);box-shadow:inset 0 0 0 1px #4ade802e,0 0 0 3px #4ade8014,0 18px 32px -20px #022c2285} }

Animations

none!important

Source Design Tokens (CSS custom properties)

:root {
  --un-rotate: 0;
  --un-rotate-x: 0;
  --un-rotate-y: 0;
  --un-rotate-z: 0;
  --un-scale-x: 1;
  --un-scale-y: 1;
  --un-scale-z: 1;
  --un-skew-x: 0;
  --un-skew-y: 0;
  --un-translate-x: 0;
  --un-translate-y: 0;
  --un-translate-z: 0;
  --un-scroll-snap-strictness: proximity;
  --un-border-spacing-x: 0;
  --un-border-spacing-y: 0;
  --un-ring-offset-shadow: 0 0 #0000;
  --un-ring-shadow: 0 0 #0000;
  --un-shadow: 0 0 #0000;
  --un-ring-offset-width: 0px;
  --un-ring-offset-color: #fff;
  --un-ring-width: 0px;
  --un-ring-color: #93c5fd80;
  --ydm-primary: #1668dc;
  --ydm-text: #1f2225;
  --ydm-text-secondary: #666e75;
  --ydm-border: #e5e7eb;
  --ydm-page-bg: #f5f6f8;
  --ydm-radius-lg: 12px;
  --ydm-radius-md: 8px;
  --ydm-scrollbar-size: 6px;
  --ydm-scrollbar-thumb-size: 4px;
  --ydm-scrollbar-radius: 999px;
  --ydm-scrollbar-thumb: #64748b47;
  --ydm-scrollbar-thumb-hover: #64748b7a;
  --body-bg: var(--ydm-page-bg);
  --body-color: var(--ydm-text);
}

Do's and Don'ts

Do

Do reserve the accent #F59E0B for interactive highlights and key moments — it is used sparingly on the source page.
Do keep the canvas at #F5F6F8; 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.

Design Tokens (copy-paste)

:root {
  --color-background: #F5F6F8;
  --color-text-primary: #1F2225;
  --color-primary: #60A5FA;
  --color-accent: #F59E0B;
  --color-surface: #F8FAFC;
  --color-secondary: #000000;
  --color-text-secondary: #64748B;
  --color-border: #666E75;
  --color-on-primary: #1F2225;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #1F2225;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F5F6F8;
  --color-surface-container: #E5E7EB;
  --font-sans: -apple-system,PingFang SC,Microsoft YaHei,sans-serif;
  --font-size-label-md: 14px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 9999px;
  --shadow-sm: 0 14px 30px -18px #0f172a2e,0 0 #60a5fa38;
  --shadow-md: 0 0 0 6px #f59e0b1f,0 18px 32px -18px #f59e0b52;
  --shadow-lg: inset 0 0 0 1px #4ade802e,0 0 0 3px #4ade8014,0 18px 32px -20px #022c2285;
  --space-md: 16px;
}