OpenDesign·你的设计资产库

网页参考

Howtotalktowhitekidsaboutracism

一个大胆、以文本为核心的社论网站,使用纯黑画布和富有表现力的排版来传达强有力的社会信息。

EditorialBold TypographyDark ModeCalmTypography

预览暂时不可用,请通过原站查看。

01

设计气质 DNA

社会评论个人献词大胆声明社论风格

一份鲜明的个人宣言或数字化的宣传单页。

02

色彩

#EAEAEAInk
#000000BG
#777777Muted
rgba(234, 234, 234, 0.15)Line

严格的单色配色方案,优先突出文本与信息,仅使用黑、白、灰来营造严肃、专注的氛围。

03

字体

hand-drawn · transitional-serif

  • display48px · 400
  • heading28px · 400
  • body18px · 400
  • caption12px · 400

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

大面积居中的留白,在中央文本块周围营造出沉思、专注的韵律。

05

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

sm · 0px
md · 0px
lg · 0px
pill · 999px

主视图中无可见边框,强化了扁平、鲜明的美学风格。

06

布局

1280container
1columns
768 / 1024breakpoints

全黑背景上的单一垂直居中文本栏,形成极简、专注的社论式布局。

07

动效与交互

220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

'Loading..'文本暗示存在一个简单的、基于状态的过渡或动画。

文本链接上的微妙颜色变化(例如变为更浅的灰色)。 · 标准链接行为。

08

组件

  • button 简单的文本链接(例如 'Share'、'Facebook'),无可见边框或填充。
  • card 无可见组件。
  • chip 无可见组件。
  • input 无可见组件。
  • hero 整个视口即为主视觉区域,以居中的优雅排版呈现个人献词。

09

文案语气与禁用清单

  • 语气 个人化的、真挚的、宣言式的。
  • 标题风格 大胆、富有表现力,常为手绘或高度风格化。
  • 按钮文案 极简且信息导向(例如 'Share'、'Loading..')。
  • 不要使用彩色配色方案——截图显示的是纯黑背景配白/灰色文本。
  • 不要使用圆角——布局是锐利、几何化的,无可见边框半径。
  • 不要添加阴影或深度——界面是完全扁平的,仅使用颜色进行对比。
  • 不要对正文使用无衬线字体——正文使用过渡衬线体,以营造传统社论感。
  • 不要用多栏或网格使布局杂乱——它是单一的居中文本栏。
  • 不要使用俏皮或装饰性的图标——界面完全依赖排版和简单的文本链接。
  • 不要使用明亮的强调色来突出重点——层级关系完全通过字号、字重和位置来建立。
  • 避免: 明亮、饱和的颜色
  • 避免: 圆角UI元素
  • 避免: 装饰性图标
  • 避免: 复杂的多栏布局
  • 避免: 视觉杂乱

11

System Prompt

这是一个鲜明的社论风格网站,设计为一项大胆的社会宣言。其主要定位是个人宣言,使用纯黑画布(#000000)和米白色文本(#EAEAEA)来营造严肃、专注的氛围。排版是关键特征,混合了手绘展示字体和过渡衬线正文字体。关键禁忌:不要引入色彩强调;配色方案严格单色。不要使用圆角或阴影;表面是扁平且锐利的。不要用多栏使布局杂乱;它是单一的、居中的文本栏。整体感觉是冷静、精致且富有排版表现力的。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效,整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明,可复制给 Agent。