精選 · 開放 · 免費

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

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

組件

09

文案語氣與禁用清單

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。佈局簡潔且具編輯風格，區塊間有寬裕內距，並設有全寬首頁橫幅。關鍵的禁用事項包括：絕不使用深色背景、絕不使用多種競爭色彩、絕不使用纖細 delicate 的字體。整體感覺是大地色調、大膽且負責任。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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