精选 · 开放 · 免费
Delba de Oliveira
一个简洁、以排版为核心的开发者教育专家作品集。
portfoliodev
01
设计气质 DNA
极简开发者教育编辑风格简洁文本密集
排版精良的学术论文
02
色彩
#2A2A29Ink
#FAF9F7BG
#666666Muted
rgba(0, 0, 0, 0.1)Line
在温暖的中性背景上实现高对比度
03
字体
transitional-serif · monospace
- display
40px · 500 - headline
24px · 600 - body
18px · 400 - small
16px · 400
统一使用一个衬线字体家族用于标题和正文，以保持编辑美学。 · 确保标题具有强烈的视觉重量层级。 · 为行内链接使用下划线，以保持文本块内的可读性。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
章节之间采用宽松的垂直间距，列表内部则保持紧凑的节奏。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
无边框，仅在移动端布局顶部有一条细微的边框。
06
布局
1200container
12columns
48pxgutter
768 / 1024breakpoints
桌面端为双列非对称网格，移动端为单列。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
极少或无可见的动效。
链接在悬停时可能会改变颜色或下划线样式。 · 标准的链接导航。
08
组件
- button 实心黑色背景，白色文字，边角略有圆角。
- card 无卡片。内容以扁平的、基于文本的列表形式呈现。
- chip 无。
- input 无。
- hero 极简的纯文本首屏，包含一个大号衬线字体标题和一段简短的介绍性段落。
09
文案语气与禁用清单
- 语气 专业、直接、清晰。
- 标题风格 清晰、描述性的章节标题。
- 按钮文案 对话式且以行动为导向。
- 不要使用装饰性渐变——截图显示为扁平的纯色背景。
- 不要使用圆角容器边框——截图显示为清晰的直角边缘。
- 不要使用明亮、高饱和度的强调色——截图显示为严格的单色配色方案。
- 不要为正文使用无衬线字体——截图显示标题和正文均使用衬线字体。
- 不要使用复杂的卡片或面板——截图显示为简单的、无边框的内容区块。
- 不要为UI元素添加投影——截图显示为完全扁平的设计。
- 避免: 避免使用行话过多或过于复杂的语言。
- 避免: 避免使用分散内容注意力的装饰性元素。
- 避免: 避免使用随意俚语或过于热情的语气。
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
此设计是一个精致、编辑风格的开发者教育专家作品集。它采用以黑色和深灰色为主的单色系配色方案，背景为温暖的近白色（#FAF9F7）。排版是核心元素，标题和正文均使用过渡衬线字体。布局为桌面端简洁的双列非对称网格，注重可读性。关键禁忌包括：避免使用装饰性渐变、避免使用圆角容器边框、不要使用高饱和度的强调色。
en · zh-CN · zh-TW · ja · ko