01
设计气质 DNA
职业平台职位搜索就业工具专业简洁
一个简洁、易用的职业管理门户，将专业实用性与友好、亲切的界面相结合。
02
色彩
#6B21A8Accent#1A1A1AInk#4A4A4AInk soft#FFFFFFBG#F8F8F8BG soft#999999Mutedrgba(0, 0, 0, 0.1)Line以纯净白色为基底，搭配深紫色作为行动号召与层次划分的点缀，保持专业清晰度。
03
字体
- display
48px · 500 - heading
24px · 500 - body
16px · 400 - caption
14px · 400
标题使用中等字重，以保持亲和力 · 展示文本保持紧凑的行高 · 使用统一的字间距以确保可读性
04
间距
4px8px12px16px20px24px32px48px64px80px基于4px网格的统一间距，采用标准的间距增量
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(0,0,0,0.1)
0 1px 3px rgba(0,0,0,0.08) · 0 4px 12px rgba(0,0,0,0.06)
06
布局
1200container
12columns
24pxgutter
768 / 1024breakpoints
采用标准的12列网格，留有充裕的白色空间，使内容得以呼吸
07
动效与交互
150msmicro
250mssmall
400msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
交互元素上的微妙悬停状态 · 下拉菜单的平滑过渡 · 内容加载时的柔和淡入效果
细微的背景色变化或阴影提升 · 通过轻微的缩放或颜色变化提供即时视觉反馈
08
组件
- button 采用圆角设计的实心紫色主按钮，次级按钮采用描边或幽灵样式
- card 白色卡片配以细微边框与阴影，内含职位列表，元数据层次清晰
- chip 药丸状标签，采用微妙背景色标注职位属性（全职、现场办公等）
- input 简洁的输入框，配有浅色边框和清晰的占位符文本
- hero 分栏布局，左侧为大型标题，右侧为关键统计数据，包含搜索功能
09
文案语气与禁用清单
- 语气 专业且平易近人，清晰且以行动为导向
- 标题风格 直接、聚焦于益处的陈述，使用有力动词
- 按钮文案 清晰的行动导向标签（获取匹配、了解更多）
- 避免使用过度装饰性元素 — 截图展示了简洁、功能性的设计
- 避免使用渐变背景 — 截图使用了纯白色与紫色点缀
- 避免使用多种强调色 — 截图展示了统一的紫色作为主强调色
- 避免界面过于拥挤 — 截图展示了充裕的白色空间与清晰的层次
- 避免使用复杂的字体组合 — 截图全程保持单一字体族
- 避免仅通过尺寸创建沉重的视觉层次 — 截图有效运用了字重与颜色
- 避免: 过于随意的语言
- 避免: 技术术语
- 避免: 激进的销售口吻
- 避免: 模棱两可的行动号召标签
11
System Prompt
这是一个专业的职业平台界面，将职位搜索与就业服务相结合。其关键视觉特征包括：纯净的白色背景、深紫色（#6B21A8）作为行动号召与高亮的主强调色，以及深灰色（#1A1A1A）的文本以确保出色的可读性。字体采用人文主义无衬线字体，标题（中等字重）与正文（常规字重）之间有清晰的字重区分。布局遵循结构化的12列网格，间距统一，基于4px比例。关键设计原则包括：保持充裕的白色空间、统一使用紫色作为交互元素颜色，以及保持界面功能性与简洁性。避免使用多种强调色、装饰性元素或复杂的视觉图案。该设计优先考虑清晰度与可访问性，同时保持现代、专业的外观，适合职业导向的平台。