OpenDesign·你的设计资产库

网页参考

Boom Supersonic

一个大胆、以摄影为驱动的航空航天网站,通过戏剧性的深色叠加和精准的排版,展现超音速速度。

Aerospace
Boom Supersonic 网站截图

01

设计气质 DNA

航空航天速度超音速工程创新

高性能航空航天工程与现代极简主义的融合。

02

色彩

#FFF555Accent
#FFFFFFInk
#000000BG
#88898AMuted
rgba(255, 255, 255, 0.2)Line

以高对比度的黑白为基础,单一的亮黄色仅用于极少量的强调点缀。

03

字体

geometric-sans

  • display72px · 700
  • h148px · 500
  • body16px · 400
  • caption12px · 400

所有文本使用 Styrene A(或类似的几何无衬线字体) · 展示性尺寸采用紧凑的字间距和行高 · 小文本和标签使用宽松的字间距(1.2px)

04

间距

4px
8px
12px
16px
24px
32px
48px
64px
80px
96px
140px

采用充足的内边距,配合较大的垂直间距(96px,140px),在版块之间营造出戏剧性的呼吸空间。

05

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

sm · 4px
md · 6px
lg · 8px
pill · 999px

0 4px 24px rgba(0, 0, 0, 0.3)

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全出血摄影区域与结构化内容网格交替,功能亮点部分常采用双栏分割布局。

07

动效与交互

150msmicro
300mssmall
700msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

交互元素的平滑 hover 过渡效果(0.15秒) · 滚动触发显现的较长 transform 动画(0.7秒)

按钮和链接上微妙的背景或颜色过渡。 · 通过颜色变化提供即时视觉反馈。

08

组件

  • button 主按钮“加入 Boom”,白色背景、黑色文字、尖锐边角(4px 圆角),hover 时带有深色边框。次要按钮使用透明背景搭配白色边框。
  • card 图片为主的卡片,无可见边框,依靠摄影内容定义边界。
  • chip 小型大写字母文本标签,用于导航或分类,采用宽松的字间距。
  • input 极简输入框,仅有细微的底边框,无可见容器。
  • hero 全视口摄影或视频背景,搭配深色叠加层(rgba(0,0,0,0.5)),居中的大号白色排版,以及滚动指示器。

09

文案语气与禁用清单

  • 语气 自信、前瞻且技术精准。
  • 标题风格 简短、有力的陈述,如“速度即超能力”,采用粗体大号排版。
  • 按钮文案 直接且以行动为导向(例如“加入 Boom”)。
  • 不要使用繁杂或拥挤的布局——截图显示元素间留有充足的留白和呼吸空间。
  • 不要使用广泛的色彩范围——截图显示严格的白、黑、灰配色,仅搭配单一的黄色强调色。
  • 不要在主按钮上使用圆角——截图显示最多 4px 圆角的尖锐边角。
  • 不要使用小而拥挤的排版——截图显示采用紧凑字间距的大型粗体展示性文本。
  • 不要使用复杂的背景图案——截图显示纯黑背景或全出血摄影。
  • 不要使用过度装饰性的字体——截图显示仅使用干净的几何无衬线字体。
  • 避免: 俏皮或随意的语言
  • 避免: 过多的感叹号
  • 避免: 缺乏上下文的过度专业术语解释

10

包内真实截图

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

Boom Supersonic 是一家专注于开发世界最快商用飞机的航空航天公司。网站采用高对比度配色方案,包括黑色(#000000)、白色(#FFFFFF)和灰色(#88898A),并以单一的亮黄色(#FFF555)作为强调。排版采用干净的几何无衬线字体(Styrene A),标题使用粗体、紧凑字间距的展示性尺寸,小型标签则使用更宽的字间距。关键特性包括带有深色叠加的全出血摄影背景、充足的内边距(96px 至 140px)以及极简的用户界面元素。关键禁忌:切勿使用繁杂布局、避免使用广泛的色彩范围、不要使用圆角按钮,并始终保持大而粗的排版风格。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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