精选 · 开放 · 免费
Soulwire
一个为创意编码者和工程师设计的极简、等宽字体作品集。
DeveloperPortfolioDark ModeMonospaceClean
01
设计气质 DNA
创意编码者生成式设计交互式极简
一个终端风格的个人作品集
02
色彩
#E2E6E8Ink
#16191BBG
rgba(226,230,232,1.0)Line
严格的单色配色方案,采用近乎黑色的背景和浅灰色文本
03
字体
monospace
所有文本均为等宽字体 · 全文使用轻量字重(300) · 章节标签使用大写字母和字间距
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
线性且可预测,章节间有充足的留白
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 999px
无可见边框
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
在全宽深色背景上居中的内容栏
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.23, 1, 0.32, 1)easing
元素出现时的透明度过渡
交互元素上显示指针光标 · 标准浏览器行为
08
组件
- button 简单的等宽字体文本链接,带指针光标
- card 无
- chip 无
- input 无
- hero 一个左对齐的文本块,包含大标题和简短介绍
09
文案语气与禁用清单
- 语气 专业、直接且极简
- 标题风格 简单、对话式且醒目
- 按钮文案 纯文本等宽字体链接
- 不要使用衬线字体——截图中仅显示等宽字体
- 不要使用明亮或饱和的颜色——截图显示严格的灰度配色方案
- 不要添加阴影或深度感——截图显示完全扁平的表面
- 不要为元素添加圆角——截图显示直角或无边角
- 不要使用传统的导航栏——截图显示链接集成在布局中
- 不要使用居中文本对齐——截图显示左对齐的内容块
- 避免: 营销术语
- 避免: 过度装饰
- 避免: 填充性套话
10
包内真实截图
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个为创意编码者设计的极简开发者作品集,采用深色单色配色方案(背景色 #16191B,文字色 #E2E6E8)和严格的等宽字体排版系统(Roboto Mono)。布局为居中的单栏结构,具有充足的留白,无边框或阴影。关键注意事项:不要引入任何衬线或无衬线字体,不要使用任何饱和或高色彩强度的强调色,不要为元素添加任何三维深度或圆角。
en · zh-CN · zh-TW · ja · ko