精選 · 開放 · 免費

Vividand

一個以大膽字體排印與 3D 玻璃細節定義的高端暗色模式代理商作品集。

AgencyPremiumFintechDark ModeBold Typography
Vividand 網站截圖
↓ 下載設計系統包 (51 MB)在 OpenDesign 中開啟

原站: https://vividand.co

📦 瀏覽包內檔案 →

01

設計氣質 DNA

高端策略性代理商金融科技大膽

一座建構無形框架的高端建築工作室。

02

色彩

#FFFDF9Ink
#6F879CInk soft
#101010BG
#1a1a1aBG soft
rgba(255, 253, 249, 0.2)Line

深木炭色奠定佈局基礎，而高對比的米白色文字確保絕對的可讀性與高端質感。

03

字型

geometric-sans

次要導覽與標籤使用大寫字母 · 大型展示文字維緊湊字距

04

間距

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

主要區塊間採用充裕的垂直間距（48px-96px），營造出通透的電影感。

05

表面 (圓角 / 陰影 / 邊線)

sm · 15px
md · 15px
lg · 15px
pill · 999px

僅使用最小化、1px 的低透明白色實線作為水平分隔線。

06

版面

1280container
12columns
24pxgutter
768 / 1024breakpoints

首頁採用不對稱分割佈局；全寬列表搭配左對齊文字與水平分隔線。

07

動效與互動

220msmicro
400mssmall
800msmedium
cubic-bezier(0.52, 0.01, 0, 1)easing

文字區塊的緩慢淡入效果 · 3D 元素的輕柔 cubic-bezier 變換 · UI 轉場的清晰線性透明度變化

互動元素的細微透明度變化。 · 最小化的視覺回饋；依賴轉場效果。

08

組件

09

文案語氣與禁用清單

10

包內真實截圖

Vividand — 桌面首屏（hero）
桌面首屏（hero）
Vividand — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Vividand — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Vividand — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Vividand — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Vividand — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Vividand — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Vividand — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Vividand — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Vividand — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Vividand — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Vividand — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Vividand — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Vividand — 移动首屏
移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

一個為 Vivid+Co 設計的高端代理商作品集，以深木炭色背景（#101010）與高對比米白色字體排印（#FFFDF9）為特色。視覺系統採用幾何無襯線字體，營造大膽、現代的美感。其特點包括 3D 玻璃渲染細節與簡潔的水平分隔線。關鍵限制：避免使用襯線字體、避免使用明亮的強調色、避免使用厚重的陰影，並保持充裕的垂直間距以維持電影感、高端的質感。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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