OpenDesign·你的设计资产库

网页参考

Firstandforemost

一个品牌机构网站,将巨大、有冲击力的字体与温暖、质朴的色调和有机插图相平衡。

EditorialBold TypographyCleanCalmRefined
Firstandforemost 网站截图

01

设计气质 DNA

大胆质朴负责任集体品牌塑造

一个重视影响力和自然的设计机构的现代编辑式布局。

02

色彩

#FF4501Ink
#FFF7F1BG
rgba(255,69,1,1.0)Line

一个克制的、高对比度的调板,使用单一鲜艳橙色作为主要前景色,置于温暖、柔和的米白色背景之上,营造出自然且富有冲击力的观感。

03

字体

humanist-sans

  • display200px · 900
  • heading80px · 700
  • title36px · 400
  • body16px · 400

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

充裕的垂直内边距(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。布局是极简和编辑式的,板块间有充裕的内边距,并配有全宽主视觉区域。关键禁忌包括:绝不使用深色背景,绝不使用多种竞争性颜色,绝不使用纤细、精致的字体。整体感觉是质朴、大胆和负责任的。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗

复制给 Agent

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