精选 · 开放 · 免费

Firstandforemost

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

EditorialBold TypographyCleanCalmRefined

Firstandforemost 网站截图

↓ 下载设计系统包 (7 MB)在 OpenDesign 中打开

原站: https://firstandforemost.co

📦 浏览包内文件 →

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

包内真实截图

Firstandforemost — 桌面首屏（hero） — 桌面首屏（hero）

Firstandforemost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Firstandforemost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Firstandforemost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Firstandforemost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Firstandforemost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Firstandforemost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Firstandforemost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Firstandforemost — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Firstandforemost — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

这个网站是为一个名为First and Foremost的品牌机构设计的。它采用温暖的米白色背景（#FFF7F1）和单一的、主导性的鲜艳橙色（#FF4501）用于所有文本和插图。字体是一种人文主义无衬线字体，以巨大尺度使用，主视觉文字达到200px。布局是极简和编辑式的，板块间有充裕的内边距，并配有全宽主视觉区域。关键禁忌包括：绝不使用深色背景，绝不使用多种竞争性颜色，绝不使用纤细、精致的字体。整体感觉是质朴、大胆和负责任的。

把这份品味接进你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko