# DeepSeek hiring page · Google-style design revision

> Readable version: [DeepSeek招聘页-谷歌设计优化方案.html](../../调查报告/DeepSeek招聘页-谷歌设计优化方案.html)
>
> The page under review is the current [DeepSeek招聘职位技能分析.html](../../调查报告/DeepSeek招聘职位技能分析.html). Stance: Google Web quality line (Search / Careers / Material 3). Brand still belongs to DeepSeek; do not make the page into Google.com, and do not keep wearing Claude Academy’s clothes.
>
> **Shipped (2026-09-08):** P0–P2 have been written into the interactive page (white background / Roboto / Chip / direction Tab / highlight can be turned off / short note cards). What follows is still the diagnosis and proposal as written at the time.

**Grade C+ (before implementation).** The task skeleton is right; identity is worn wrong; contrast and touch targets fail; three keyword grammars are stacked onto the original text.

## Diagnosis

| Layer | Current | Change to |
|---|---|---|
| Identity | Cream paper + serif + terracotta | White background, sans-serif, one primary color |
| Canvas | Whole page `overflow: hidden` | Document flow; the list can scroll on its own |
| Density | Dashboard too dense → prose too sparse | Scannable structure on an 8dp grid |
| Emphasis | Bold / italic /【】 all on at once | Clean by default; at most 6 Chips; highlight can be turned off |
| Color | Categories rely on color dots | Categories in text; primary color serves CTA only |
| a11y | Rows a bit short; select filters | 48dp, Chip, focus ring, AA contrast |

Principle: use Google’s system (grid, type scale, contrast, task flow); wear the clothes DeepSeek should wear (cold, clean).

## Token (P0)

- Surface `#FFFFFF` / variant `#F8F9FA`
- Type `#202124` / secondary `#5F6368`
- Primary `#1A73E8`, container `#E8F0FE` (if insisting on DeepSeek black and white: fill buttons with `#202124`, keep links blue)
- Typeface: Roboto + Noto Sans SC; role names Google Sans / Roboto Medium 22–28; serif forbidden
- Row height 48–56dp; radius 8 / buttons 24

## Four surfaces

1. **Top bar:** Tabs indicated by a bottom edge. Copy “Roles / skill notes.” Apply is the primary button.
2. **List:** Search stays at 48 height; categories are horizontally scrolling Chips; each row is title + “Beijing · intern/full-time”; selected blue 50.
3. **JD:** Skills lifted, at most 6 Chips; multi-direction becomes one direction at a time; “highlight skills” switch uses blue 50, no 【】.
4. **Notes page:** 4–5 short cards + the first 8 skill bars. Do not put the heatmap back. Clicking a bar returns to the filtered list; keep that.

## Keywords

Original text is clean by default. Cultural words (open source, long-termism) are not marked. When skills need to be scanned, turn the Toggle on; do not use pseudo-element brackets.

## Phasing

- **P0** Change identity: drop cream/serif/terracotta, unlock overflow, row height 48.
- **P1** Scanning: Chip filters, skills lifted, direction anchors, copy.
- **P2** Short note cards + WCAG + font subsetting.

P0 can change only `assets/ds-talent.css`; the JSON structure need not be touched.