01
设计气质 DNA
收购公告透明企业创新
一个兼具编辑清晰度和高端克制感的企业公告页面
02
色彩
#7C3AEDAccent#1A1A1AInk#4A4A4AInk soft#FFFFFFBG#888888Mutedrgba(0,0,0,0.1)Line以高对比度单色为基础,搭配一个鲜明的紫色作为品牌识别和主要操作的点缀色。
03
字体
- display
48px · 600 - h2
28px · 600 - body
16px · 400
所有排版均使用人文主义无衬线字体,以保持可读性和亲和力 · 在大型展示文字上使用紧凑的字距,营造更精致、现代的外观 · 通过不同标题级别的字重和尺寸差异,建立清晰的视觉层级
04
间距
4px8px16px24px32px48px64px96px采用一致的 8 点基线网格,垂直间距充足,确保内容清晰分隔并留有视觉呼吸空间。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 8px
lg · 12px
pill · 999px
使用 rgba(0,0,0,0.1) 的 1px 实线细微边框,用于卡片分隔和营造微妙的视觉结构。
0 1px 2px rgba(0,0,0,0.05) · 0 4px 12px rgba(0,0,0,0.08)
06
布局
1200container
12columns
24pxgutter
768 / 1024breakpoints
采用居中的单栏布局,留有充足的留白,优化阅读和视频观看体验。
07
动效与交互
150msmicro
300mssmall
600msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
导航链接上的细微悬停过渡 · 视频播放器控件采用标准的 YouTube 交互模式 · 内容板块的页面加载平滑过渡
在导航链接和按钮等交互元素上,采用细微的透明度变化或颜色偏移。 · 使用标准的 YouTube 视频播放器控件进行播放、暂停和音量调节。
08
组件
- button 实心填充按钮,具有高对比度,主要操作使用紫色点缀色,次要操作使用中性色。
- card 简洁的白色容器,带有细微阴影或边框,用于 CEO 寄语等内容板块。
- chip 在此公告布局中未显著使用。
- input 在此公告布局中未显著使用。
- hero 全宽区域,包含居中的大标题和嵌入式视频播放器,优先确保即时的视觉冲击力。
09
文案语气与禁用清单
- 语气 专业、透明且着眼未来,平衡企业正式感与亲切的热情。
- 标题风格 清晰、直接且富有冲击力的陈述,立即传达公告核心信息。
- 按钮文案 行动导向但保持克制,例如在 Cookie 同意中使用“接受”和“全部允许”等术语,而非激进的销售语言。
- 避免使用多种相互冲突的强调色——截图显示仅使用一个紫色(#7C3AED)作为品牌元素的点缀色
- 避免使用衬线字体——截图全文一致使用简洁的无衬线字体
- 不要添加装饰性渐变或复杂背景——截图保持纯白色背景搭配纯色元素
- 避免使用小而拥挤的间距——截图显示板块间有充足的内边距和清晰的垂直节奏
- 按钮不要做成圆角方形——截图显示的是带有轻微 border-radius 的矩形按钮
- 正文避免使用全大写——截图根据情况适当使用句子式大小写和标题式大小写
- 避免: 过于随意的语言
- 避免: 过多的感叹号
- 避免: 模糊或含糊的术语
11
System Prompt
这是 Limitless AI 被 Meta 收购的公告页面。设计采用简洁、高对比度的布局,白色背景(#FFFFFF)搭配深色文字(#1A1A1A)。主要点缀色是用于标识和关键操作的鲜明紫色(#7C3AED)。字体采用人文主义无衬线字体,展示文字字距紧凑。关键禁忌:绝不使用多种强调色,避免衬线字体,不要添加复杂背景,保持充足间距,使用矩形按钮,避免正文全大写。布局优先考虑可读性和视频观看,具有清晰的视觉层级和专业克制感。