精选 · 开放 · 免费

Dokument Studio

一个处于休整期的设计工作室的极简、平静的作品集网站。

01

设计气质 DNA

一个平静、记录详实的设计工作室过往作品档案库。

02

色彩

极度克制，以单色系配色为主，搭配一个功能性的蓝色点缀用于链接。

03

字体

condensed-grotesque · humanist-sans · monospace

• display56px · 700
• body16px · 400
• caption12px · 400

使用窄体 grotesque 字体用于大尺寸展示文本。 · 使用 humanist sans 字体用于可读性强的正文。 · 使用等宽字体搭配宽字距用于小号、大写的辅助文本。

04

间距

以标准的 4px 为基础，搭配大量留白以支持平静、透气的布局。

05

表面 (圆角 / 阴影 / 边线)

无可见边框；分隔完全通过间距和布局实现。

06

布局

单栏主内容区，导航和页脚元素分别置于顶部和底部的极端位置。

07

动效与交互

静态布局，在截图中无可见的动画或过渡效果。

交互元素上微妙的 opacity 变化。 · 标准的链接导航。

08

组件

• button 极简的胶囊形按钮，带有细边框和充足的内边距。
• card 无可见卡片。
• chip 小型、胶囊形的团队成员头像标签。
• input 无可见输入框。
• hero 一个大型、垂直堆叠的窄体排版标志，作为底部的视觉锚点。

09

文案语气与禁用清单

• 语气 平静、专业，略带怀旧感。
• 标题风格 大型、有冲击力的窄体排版。
• 按钮文案 克制，通常只是一个文本链接或一个极简的带边框的胶囊按钮。

• 不要使用明亮或混乱的颜色——截图显示的是克制的单色系配色，搭配一个功能性的蓝色。
• 不要使用活泼或圆润的展示字体——截图显示的是用于展示的、高度窄体且硬朗的 grotesque 字体。
• 不要用多栏或网格布局使界面杂乱——截图显示的是一个非常开阔、以单栏为主导的布局。
• 不要使用厚重的投影或 3D 效果——截图显示的是完全扁平、无边框的美学。
• 不要为正文使用粗体——截图显示所有标准文本都使用 400 的常规字重。
• 不要使用图标或插图等装饰元素——截图完全依赖排版和最小化的头像。
• 避免: 过于兴奋的语气
• 避免: 喧闹的行动号召按钮
• 避免: 复杂的 UI 组件

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko