精选 · 开放 · 免费
Co Projects
一个极简、高对比度的个人作品集网站，由巨大的几何形态主导。
EditorialGeometricMonochromeBoldPortfolio
01
设计气质 DNA
极简几何实验性原始主义建筑感
一件冷峻的建筑模型或一幅大胆的平面印刷品。
02
色彩
#000000Ink
#FFFFFFBG
rgba(229, 231, 235, 1.0)Line
严格二元色板：纯黑（#000000）搭配纯白（#FFFFFF）。
03
字体
geometric-sans · monospace
- display
60px · 400 - body
16px · 400
主要标题和正文使用 'Alpha' 字体系列 · 等宽元素使用 'Takt' 字体系列 · 所有文本元素保持一致的 font-weight: 400
04
间距
4px
8px
12px
16px
24px
32px
40px
48px
64px
96px
充足的留白，主要元素之间留有较大的垂直间距
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 0px
lg · 0px
pill · 0px
使用 rgb(229, 231, 235) 的 1px 细边框进行微妙分隔
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
非对称分割布局，左右两侧为巨大的几何图形，顶部为极简导航
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0.0, 0.2, 1.0)easing
所有过渡均应用于所有属性（transition: all） · 简化的动态效果，聚焦于元素可见性和位置的变化
交互元素上的光标变为指针 · 标准点击行为并带有过渡动画
08
组件
- button 仅文本的导航链接，光标为指针
- card 无传统卡片；内容以大型几何构图呈现
- chip 在可见设计中不存在
- input 在可见设计中不存在
- hero 以几何圆形/半圆形构图为主导，配有极简文本
09
文案语气与禁用清单
- 语气 极简、直接、建筑感
- 标题风格 大型几何图形作为视觉标题
- 按钮文案 低调的文本链接，而非突出的按钮
- 不要添加圆角——截图显示所有形状均为尖锐的几何边缘
- 不要引入色彩变化——截图严格使用黑色（#000000）和白色（#FFFFFF）
- 不要使用多种字重——截图显示全文统一使用400字重
- 不要添加投影——截图显示平面的2D构图，无深度效果
- 不要创建复杂的导航菜单——截图显示顶部为简单的文本链接
- 不要添加装饰性插图——截图仅使用抽象的几何形态
- 不要使用渐变背景——截图显示纯白色（#FFFFFF）背景
- 避免: 装饰性元素或插图
- 避免: 渐变或色彩变化
- 避免: 复杂的导航模式
- 避免: 文字过多的介绍
- 避免: 圆角或柔和边缘
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
Co Projects 是一个极简的实验性个人作品集网站，采用冷峻的黑白配色，并以巨大的几何圆形和半圆形构图作为主要视觉语言。设计特点为纯白色（#FFFFFF）背景，搭配实心黑色（#000000）几何图形和极简导航文本。字体使用属于几何无衬线类别、字重为400的 'Alpha' 字体系列，展示字体大小为60px，正文字体大小为16px。布局为非对称式，留白充足且垂直间距较大。关键特征包括：无色彩变化、无圆角、无阴影、无渐变，以及极少的文本内容。导航由简单的文本链接（'Co Projects'、'Builder'、'About'）组成，光标为指针。所有过渡均应用于所有属性。该网站避免装饰性元素、复杂导航和文字密集的介绍，转而聚焦于大胆的几何形态作为视觉焦点。
en · zh-CN · zh-TW · ja · ko