精选 · 开放 · 免费

Victoiredouy

一个简洁、以字体为核心的作品集或编辑网站，以巨大的展示标题搭配深黑背景呈现。

01

设计气质 DNA

一本高对比度黑白编辑杂志，采用超大、紧凑的展示字体。

02

色彩

严格的单色配色方案，使用近黑背景和近白文字，以实现最大对比度和编辑冲击力。

03

字体

condensed-grotesque-sans · monospaced

• display177px · 400
• heading54px · 400
• body15px · 400

使用 Space Mono 作为正文和导航字体。 · 使用紧凑型怪诞无衬线体作为巨大的展示标题。 · 对大段展示文字应用紧凑的负字间距。 · 对导航和某些标签使用大写转换。

04

间距

宽松且富有变化，主要区块之间采用显著的垂直内边距分隔。

05

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

细薄的 2px 边框，主要用于交互状态和细微分隔。

0px 1px 2px rgba(0,0,0,0.5) · 0px 0px 0px 1px rgba(250,250,250,0.1)

06

布局

全宽列布局，旨在容纳超大字体。

07

动效与交互

交互元素上的平滑颜色过渡。 · 用于 UI 状态变化的缓动 opacity 和 transform 过渡。

交互元素上的细微颜色或 background-color 变化。 · 标准的激活状态。

08

组件

• button 极简的、基于文本的按钮，使用大写等宽字体和细边框。
• card 无可见组件。
• chip 无可见组件。
• input 无可见组件。
• hero 一个巨大的、填满屏幕的字体英雄区块，采用超大紧凑文字。

09

文案语气与禁用清单

• 语气 极简且严谨。
• 标题风格 巨大、紧凑字距、紧凑大写的展示字体。
• 按钮文案 低调的等宽字体标签。

• 不要使用圆角 — 截图显示为尖锐、零半径的边缘。
• 不要使用鲜艳的强调色 — 截图显示为严格的单色配色方案。
• 不要使用轻薄或衬线展示字体 — 截图显示为厚重、紧凑的无衬线展示字体。
• 不要为标题使用宽松的行高 — 截图显示为紧密排列、几乎相触的展示行。
• 不要为展示文字使用宽松的字间距 — 截图显示为紧凑、负的字间距。
• 不要在文字上使用投影 — 截图显示为扁平、高对比度的排版。
• 避免: 彩色渐变
• 避免: 圆角
• 避免: 文字投影
• 避免: 俏皮或装饰性元素

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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