01
设计气质 DNA
大胆质朴负责任集体品牌塑造
一个重视影响力和自然的设计机构的现代编辑式布局。
02
色彩
#FF4501Ink#FFF7F1BGrgba(255,69,1,1.0)Line一个克制的、高对比度的调板,使用单一鲜艳橙色作为主要前景色,置于温暖、柔和的米白色背景之上,营造出自然且富有冲击力的观感。
03
字体
- display
200px · 900 - heading
80px · 700 - title
36px · 400 - body
16px · 400
04
间距
4px8px16px24px32px48px64px96px充裕的垂直内边距(160px)分隔主要板块,内部间距紧凑。
05
表面 (圆角 / 阴影 / 边线)
sm · 0px
md · 8px
lg · 80px
pill · 999px
1px solid rgba(255,69,1,1.0),用于轮廓和分隔线。
rgba(153, 18, 2, 0.36) -32px 32px 80px 0px
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
单栏布局,带有固定头部和全宽主视觉区域。
07
动效与交互
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing
透明度过渡(1秒) · 变换(0.5秒 ease-in-out)
光标在交互元素上变为指针;细微的透明度过渡。 · 标准指针交互。
08
组件
- button 简单的文本链接,带有悬停效果,无实心背景按钮可见。
- card 无明显卡片;内容以开放式布局呈现。
- chip 无标签可见。
- input 无输入框可见。
- hero 巨大、超大的字体横跨整个视口宽度,底部配有橙色植物插图。
09
文案语气与禁用清单
- 语气 直接、专业、以使命为导向。
- 标题风格 巨大、粗体、声明式。
- 按钮文案 极简而低调,使用简单的文本链接。
- 不要使用多种竞争性颜色——调板严格限定为橙色和米白色。
- 不要使用纤细、精致的字体——设计依赖于厚重、粗体的字重。
- 不要对所有内容使用标准网格布局——主视觉区域通过巨大字体打破网格。
- 不要使用深色背景——网站严格采用暖色调的浅色设计。
- 不要使用复杂、杂乱的UI组件——设计是极简且开放的。
- 不要使用狭小、拥挤的间距——布局使用充裕的留白和内边距。
- 避免: 企业术语
- 避免: 侵略性的销售语言
- 避免: 深色模式
10
包内真实截图
11
System Prompt
这个网站是为一个名为First and Foremost的品牌机构设计的。它采用温暖的米白色背景(#FFF7F1)和单一的、主导性的鲜艳橙色(#FF4501)用于所有文本和插图。字体是一种人文主义无衬线字体,以巨大尺度使用,主视觉文字达到200px。布局是极简和编辑式的,板块间有充裕的内边距,并配有全宽主视觉区域。关键禁忌包括:绝不使用深色背景,绝不使用多种竞争性颜色,绝不使用纤细、精致的字体。整体感觉是质朴、大胆和负责任的。










