精選 · 開放 · 免費
Ozero
一家全端雲端設計工作室,展示大膽、鮮豔的作品
StudioPortfolioBold TypographyCurationGallery
01
設計氣質 DNA
創意極簡實驗性雲端設計
一面展示多元客戶作品的現代藝廊牆面
02
色彩
#1B1B1AInk
#FFFFFFBG
rgba(27,27,26,1.0)Line
高對比的藝廊美學,運用留白與醒目的專案影像
03
字型
humanist-sans
- display
106px · 400 - display
88px · 400 - heading
64px · 400 - body
16px · 400
font-size: 64px; line-height: 1.0; letter-spacing: -0.64px · font-size: 106px; line-height: 1.0; letter-spacing: -1.76px · font-family: Inter, Arial, sans-serif
04
間距
4px
8px
10px
12px
16px
20px
24px
32px
60px
64px
專案容器內留有寬裕的 padding
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
主容器之間無可見邊框
06
版面
大型專案圖片的非對稱砌體網格
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
懸停時的透明度漸隱 · transition: all 0.4s
互動元素的透明度變化 · 觸發導覽
08
組件
- button 導覽列中的純文字導覽連結
- card 大型全出血圖片容器,偶爾帶有文字覆蓋層
- chip 無可見組件
- input 無可見組件
- hero 全視窗的專案影像砌體網格
09
文案語氣與禁用清單
- 語氣 極簡且自信
- 標題風格 超大尺寸、字距緊縮的展示型字體
- 按鈕文案 簡潔、大寫的文字連結
- 不使用裝飾性邊框——截圖顯示的是乾淨、無邊框的佈局
- 不使用容器陰影——截圖顯示的是扁平、基於影像的構圖
- 不使用小型、密集的網格——截圖顯示的是大型、寬廣的專案影像
- 不使用襯線字體——截圖顯示僅使用 Inter 無線體
- 不使用柔和或粉彩色作為整體頁面背景——截圖顯示的是高對比的黑白配色
- 不使用標準卡片組件——截圖顯示的是全出血的圖片區塊
- 避免: 過多文字說明
- 避免: 裝飾性元素
- 避免: 複雜介面
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
Ozero 是一個全端雲端設計工作室網站,採用大膽、藝廊風格的作品集。佈局是非對稱的砌體網格,展示大型、全出血的專案圖片,並保留極簡的留白。主要背景為白色 (#FFFFFF),文字為黑色 (#1B1B1A)。導覽列是右上角對齊的簡潔連結列表,使用大寫無線體文字。字體採用人文主義無線體 (Inter),以超大展示尺寸並搭配緊湊字距。關鍵設計元素包括桌面版的雙欄佈局、容器內寬裕的 padding,以及乾淨、無邊框的表面。動效僅限於平滑的透明度過渡。嚴格禁止:不添加陰影或裝飾性邊框,不使用小型網格,不使用襯線字體。此網站代表一個高品質、極簡的創意作品集,專注於視覺作品。
en · zh-CN · zh-TW · ja · ko