OpenDesign·你的设计资产库

网页参考

About Meta

一个高端的企业形象,通过沉浸式摄影展现人与人的连接。

CorporateTechnologyGradientPremiumBold Typography
About Meta 网站截图

01

设计气质 DNA

连接未来人文创新社交

一个光洁的玻璃与钢铁校园,摄影与技术在此交汇。

02

色彩

#0064E0Accent
#1C1E21Ink
#1C2B33Ink soft
#FFFFFFBG
#F8F9FBBG soft
#385898Muted
rgba(28,30,33,1.0)Line

高对比度的品牌蓝,搭配中性的企业灰与生动的生活方式摄影。

03

字体

geometric-sans · humanist-sans

  • display48px · 500
  • headline36px · 500
  • body18px · 400
  • small14px · 400

主标题使用 Optimistic Display 字体。 · 正文及界面元素使用 Optimistic Text 字体。

04

间距

4px
8px
12px
16px
24px
32px
48px
64px
72px
96px
160px

主视觉区域与卡片网格之间,采用充裕的留白进行分隔。

05

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

sm · 4px
md · 24px
lg · 32px
pill · 100px

界面元素采用 1px solid rgb(28, 30, 33) 边框,并频繁使用留白进行分隔。

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全宽主视觉区域,搭配悬浮图片,后接三列卡片网格。

07

动效与交互

200msmicro
333mssmall
800msmedium
cubic-bezier(0.53, 0, 0.28, 1)easing

交互元素采用细微的不透明度与背景色过渡。

按钮与链接的背景色变化,采用 0.2s ease-out 过渡。 · 可点击区域采用细微的不透明度降低(0.3s)。

08

组件

  • button 圆润的主按钮,白色文字搭配品牌蓝,使用中等字重。
  • card 以图片为主的卡片,圆角(24px/32px),文字描述位于下方。
  • chip 在此视图中不突出显示。
  • input 在此视图中不突出显示。
  • hero 全宽沉浸式区域,搭配大字号排版与重叠的摄影卡片。

09

文案语气与禁用清单

  • 语气 乐观、富有远见、以人为本。
  • 标题风格 关于连接未来的大型、加粗、简洁陈述。
  • 按钮文案 简单直接的指令,如“我们的使命”或“了解更多”。
  • 避免使用尖锐的方角——截图显示图片和卡片采用充裕的 24px 和 32px 圆角。
  • 避免使用深色模式美学——截图显示以白色背景为主,搭配生动的摄影点缀。
  • 避免使用僵化、依赖网格的布局——截图显示主视觉区域采用重叠、悬浮的图片卡片。
  • 避免使用纤细、优雅的衬线字体——截图显示主标题采用稳健、中等字重的几何无衬线字体。
  • 避免使用柔和、低对比度的文字——截图显示采用深炭灰色文字以获得最佳可读性。
  • 避免使用小而局促的按钮——截图显示采用大型、圆润的主操作按钮。
  • 避免: 避免使用过于技术性的术语。
  • 避免: 避免使用攻击性的销售语言。

10

包内真实截图

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

11

System Prompt

本站是一个高端的企业作品集,通过高质量摄影和大胆排版展现 Meta 的技术与愿景。主要强调色是品牌蓝(#0064E0),搭配干净的白色和浅灰色(#F8F9FB)背景。字体排版使用定制的几何无衬线字体(Optimistic Display)作为标题,以及人文无衬线字体(Optimistic Text)作为正文。关键禁忌包括:避免使用尖角,因为卡片使用 24px-32px 圆角;避免深色模式,因为网站以浅色为主;避免僵化的网格布局,因为主视觉区采用重叠的悬浮图片。设计优先考虑人与人的连接和乐观的未来主义。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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