精选 · 开放 · 免费
Drawhistory
一个双栏编辑式布局，用于宣布公司合并，采用质朴与深色卡片形成对比。
AgencyCase StudyCleanBold TypographyPremium
01
设计气质 DNA
冲击力设计策略整合公告
一张正式而温暖的公司公告卡片
02
色彩
#ff6714Accent
#f2e9e1Ink
#101010BG
#3d3b31BG soft
#808080Muted
rgba(242, 233, 225, 0.4)Line
深色背景与浅色暖调文字之间形成高对比度，并使用单个鲜亮的橙色强调色。
03
字体
geometric-sans · humanist-sans · monospace
- display
104px · 400 - body
16px · 400 - label
14px · 400
按钮和公告横幅使用全大写 · 大型展示标题采用紧凑的字间距 · UI标签使用等宽字体的大写形式
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
卡片内部使用一致的 32px 和 24px 内边距
05
表面 (圆角 / 阴影 / 边线)
sm · 8px
md · 16px
lg · 16px
pill · 9999px
用于分隔内部元素的细微浅色边框
06
布局
1280container
2columns
32pxgutter
768 / 1024breakpoints
两张高卡片居中显示在深色背景上，顶部带有一个全宽横幅
07
动效与交互
150msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
hover 时平滑的颜色和透明度过渡 · 文本装饰过渡
交互元素上的细微过渡 · 所有交互元素上为指针光标
08
组件
- button 基于文本的按钮，采用大写等宽字体和细边框
- card 全高深色卡片，带有充足的内边距和圆角
- chip 顶部公告栏，带有小型橙色方形指示器
- input 截图中不可见
- hero 结合文本和图像的密集编辑式公告区域
09
文案语气与禁用清单
- 语气 专业、富有冲击力且面向未来
- 标题风格 全大写，紧凑字间距，大号几何无衬线字体
- 按钮文案 大写等宽字体配细边框
- 不要使用多彩渐变 — 截图显示的是平坦、纯色的深色表面
- 不要使用粗体字重 — 截图仅显示常规 (400) 字重
- 不要使用居中文本用于段落 — 截图显示所有元素均居中
- 不要使用明亮的背景 — 截图显示的是深色、柔和的质朴色调
- 不要使用复杂的投影 — 截图显示的是无高度感的扁平卡片
- 不要使用装饰性衬线字体 — 截图显示的是简洁的几何和等宽字体
- 避免: 过于随意的语言
- 避免: 杂乱的布局
- 避免: 高饱和度的颜色
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
这是一个设计机构的公告页面，采用高对比度、柔和的调色板。布局特点是两个大型深色卡片（深橄榄色 #3d3b31 和炭灰色 #101010）居中显示在深色背景上。关键颜色为 #f2e9e1（文字）、#101010（背景）和 #ff6714（强调色）。排版依赖几何无衬线字体用于展示，等宽字体用于标签。关键禁忌：绝不要使用粗体字重（所有文字均为常规字重），避免使用明亮或霓虹色，以及不要使用投影来制造高度感。
en · zh-CN · zh-TW · ja · ko