01
设计气质 DNA
连接未来人文创新社交
一个光洁的玻璃与钢铁校园,摄影与技术在此交汇。
02
色彩
#0064E0Accent#1C1E21Ink#1C2B33Ink soft#FFFFFFBG#F8F9FBBG soft#385898Mutedrgba(28,30,33,1.0)Line高对比度的品牌蓝,搭配中性的企业灰与生动的生活方式摄影。
03
字体
- display
48px · 500 - headline
36px · 500 - body
18px · 400 - small
14px · 400
主标题使用 Optimistic Display 字体。 · 正文及界面元素使用 Optimistic Text 字体。
04
间距
4px8px12px16px24px32px48px64px72px96px160px主视觉区域与卡片网格之间,采用充裕的留白进行分隔。
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 圆角;避免深色模式,因为网站以浅色为主;避免僵化的网格布局,因为主视觉区采用重叠的悬浮图片。设计优先考虑人与人的连接和乐观的未来主义。
