精選 · 開放 · 免費

Svz

以大膽的字體排印與深色精緻感，打造高端數位設計公司形象。

AgencyPortfolioBold TypographyDark ModePremium

Svz 網站截圖

↓ 下載設計系統包 (11 MB)在 OpenDesign 中開啟

原站: https://www.svz.io

📦 瀏覽包內檔案 →

01

設計氣質 DNA

數位設計公司品牌建立大膽高端

一個高端設計公司的作品集，具備大膽、編輯風格的字體排印與深沉、精緻的氛圍。

02

色彩

#FF4D5CAccent

#fcfcfcInk

#f3efefInk soft

#080808BG

#262525BG soft

#0d0d0dBG quiet

rgba(255,255,255,0.1)Line

高對比深色模式，搭配充滿活力的珊瑚色強調色

03

字型

transitional-serif · humanist-sans

display64px · 700
display32px · 400
body14px · 400

導覽與標籤使用大寫字母 · 混合使用襯線與無襯線字體以創造字體排印對比 · 大型展示文字使用緊湊的字距調整

04

間距

4px

8px

12px

16px

24px

32px

48px

64px

96px

基於 4px 基礎格線的一致性間距，並留有充裕的空白

05

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

sm · 2px

md · 4px

lg · 8px

pill · 999px

1px solid rgba(255,255,255,0.1)

rgba(255, 255, 255, 0.2) 0px 2px 5px 0px inset

06

版面

1280container

12columns

24pxgutter

768 / 1024breakpoints

全寬深色區塊，內容容器置中

07

動效與互動

220msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

流暢的淡入過渡效果 · 背景元素視差滾動 · hover 狀態動畫

顏色過渡與透明度變化 · 透過狀態變化提供視覺回饋

08

組件

button 帶有邊框的按鈕，文字為大寫並配有箭頭圖示
card 深色卡片，帶有細微邊框與 hover 狀態
chip 小型的大寫標籤或標示
input 極簡的無邊框輸入框
hero 全螢幕深色區塊，配有大型字體標題與幾何背景元素

09

文案語氣與禁用清單

語氣自信、高端、略帶挑釁
標題風格 大膽、全大寫的展示字體，混合襯線與無襯線風格
按鈕文案 直接、行動導向，並帶有箭頭指示

不要使用淺色背景——畫面截圖顯示以深色（#080808）主題為主
不要為內文使用裝飾性字體——畫面截圖顯示 UI 元素使用簡潔的無襯線字體
不要為按鈕添加圓角——畫面截圖顯示為帶有微小半徑的矩形按鈕
不要使用柔和的顏色作為強調——畫面截圖顯示深色背景上的高對比白色文字
不要為標題使用小字型——畫面截圖顯示 64px 的大型展示文字
不要避免使用大寫導覽——畫面截圖顯示全大寫的導覽項目
避免: 休閒用語
避免: 過度專業的術語
避免: 通用企業用語

10

包內真實截圖

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Svz — 移动首屏 — 移动首屏

擷取自真實頁面 · 真 computed styles

11

System Prompt

高端數位設計公司作品集，具備深沉精緻的氛圍。主要顏色：#080808 背景、#fcfcfc 白色文字、#FF4D5C 珊瑚色強調。字體混合使用過渡式襯線展示字體與人文主義無襯線內文字體。關鍵禁忌：切勿使用淺色背景、避免裝飾性內文字體、維持高對比、使用大寫導覽、按鈕保持矩形並最小化半徑。定位：為具前瞻性的品牌打造大膽的設計公司形象。佈局採用 12 欄格線系統，留有充裕的空白。

把這份品味接進你的 Agent

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

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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