精選 · 開放 · 免費
Use All Five
一個高端的數位設計與科技工作室網站,採用擴展式漸層與大膽字體。
studiodigital
01
設計氣質 DNA
數位工作室設計工作室科技創意創新
一個融合大膽字體與空靈漸層的高端設計工作室作品集
02
色彩
#000000Ink
#FFFFFFBG
#969696Muted
rgba(0,0,0,1.0)Line
白色或柔和粉蠟筆漸層上的高對比黑色文字。
03
字型
geometric-sans
- display
67px · 500 - h1
40px · 400 - body
18px · 400
大尺寸展示字體採用緊密的負字母間距。 · 內文保持高度可讀性,搭配充裕行高。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
充裕留白與內距,以強化大尺寸字體與影像。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
極少或無;依賴色彩對比與間距區隔。
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
不對稱、分欄版面,一側為大尺寸字體,另一側為內容或影像。
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
文字與影像在 scroll 時淡入。 · 連結 hover 狀態時的流暢過渡。
細微透明度變化或簡潔的底線/箭頭動畫。 · 即時狀態變更。
08
組件
- button 純文字連結搭配箭頭,無實體背景。
- card 以影像為主的案例區塊,標題與描述間距寬鬆。
- hero 全螢幕、以字體為主的首頁區塊,背景為柔和的多段粉蠟筆漸層。
09
文案語氣與禁用清單
- 語氣 自信、專業、具遠見。
- 標題風格 大膽、宣告式的語句,關於可能性與創造。
- 按鈕文案 純文字連結搭配箭頭(「瀏覽我們的作品 →」)。
- 不要使用實色區塊背景 — 截圖顯示擴展式粉蠟筆漸層。
- 不要使用高粗細、窄體字體 — 截圖顯示一般/中等字重的幾何無襯線體。
- 不要使用小而緊密的網格 — 截圖顯示寬敞、開放的版面與充裕留白。
- 不要使用主色調按鈕 — 截圖顯示純文字連結搭配箭頭。
- 不要對元素使用陰影 — 截圖顯示扁平表面,極少或無邊框。
- 不要使用複雜的多欄文字版面 — 截圖顯示單一清晰欄位或分欄版面。
- 避免: 避免術語或過度技術性的流行詞。
- 避免: 避免雜亂版面或繁複背景。
- 避免: 避免小而難以閱讀的文字。
- 避免: 避免多個強調色相互競爭注意力。
- 避免: 避免厚重陰影或 3D 效果。
- 避免: 避免使用實體按鈕等標準 UI 模式。
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
一個高端的數位設計與科技工作室作品集。主要特色是擴展式多段粉蠟筆漸層(柔和蜜桃色、青色、薰衣草紫)與大膽的黑色幾何無襯線字體。版面高度不對稱且留白豐富。不使用實色按鈕或陰影;行動呼籲為純文字連結。關鍵禁忌:不要使用實色區塊背景,不要使用高粗細字重,不要使用標準 UI 按鈕。
en · zh-CN · zh-TW · ja · ko