精選 · 開放 · 免費
Co Projects
一個以巨大幾何形狀為主導的極簡、高對比度作品集網站。
EditorialGeometricMonochromeBoldPortfolio
01
設計氣質 DNA
極簡幾何實驗性野獸派建築感
一座風格強烈的建築模型，或一幅大膽的平面印刷品。
02
色彩
#000000Ink
#FFFFFFBG
rgba(229, 231, 235, 1.0)Line
嚴格的二元色盤：純黑 (#000000) 搭配純白 (#FFFFFF)。
03
字型
geometric-sans · monospace
- display
60px · 400 - body
16px · 400
主要展示與內文使用 'Alpha' 字型家族 · 等寬元素使用 'Takt' 字型家族 · 所有文字元素維持一致的 font-weight 400
04
間距
4px
8px
12px
16px
24px
32px
40px
48px
64px
96px
寬裕的留白，主要元素之間使用大垂直間距
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
使用 rgb(229, 231, 235) 的 1px 細邊框，進行微妙的分隔
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
不對稱的分割佈局，左右兩側為巨大的幾何形狀，頂部為極簡導航
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0.0, 0.2, 1.0)easing
所有過渡效果套用至所有屬性 (transition: all) · 簡化的動效，專注於元素可見性與位置變化
游標在互動元素上變為 pointer · 標準點擊行為，並帶有過渡動畫
08
組件
- button 僅文字的導航連結，游標為 pointer
- card 無傳統卡片；內容以大型幾何構圖呈現
- chip 可見設計中不存在
- input 可見設計中不存在
- hero 主導性的幾何圓形/半圓構圖，搭配極簡文字
09
文案語氣與禁用清單
- 語氣 極簡、直接、具建築感
- 標題風格 大型幾何形狀作為視覺標題
- 按鈕文案 低調的文字連結，而非醒目的按鈕
- 不要加入圓角 — 截圖顯示所有形狀都具有銳利的幾何邊緣
- 不要引入色彩變化 — 截圖顯示嚴格使用黑色 (#000000) 和白色 (#FFFFFF)
- 不要使用多種字重 — 截圖顯示全篇維持一致的 weight 400
- 不要加入投影 — 截圖顯示平面、無深度效果的 2D 構圖
- 不要建立複雜的導航選單 — 截圖顯示頂部為極簡的文字連結
- 不要加入裝飾性插圖 — 截圖僅使用抽象的幾何形狀
- 不要使用漸層背景 — 截圖顯示純白 (#FFFFFF) 背景
- 避免: 裝飾性元素或插圖
- 避免: 漸層或色彩變化
- 避免: 複雜的導航模式
- 避免: 文字密集的介紹
- 避免: 圓角或柔和邊緣
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Co Projects 是一個極簡、實驗性的作品集網站，使用純黑白配色方案，並以巨大的幾何圓形與半圓構圖作為主要視覺語言。設計採用純白 (#FFFFFF) 背景搭配實心黑色 (#000000) 的幾何形狀，以及極簡的導航文字。字型使用 'Alpha' 字型家族，屬於幾何無襯線類別，weight 為 400，展示尺寸 60px，內文 16px。佈局為不對稱式，留白寬裕，垂直間距大。關鍵特徵包括：無色彩變化、無圓角、無陰影、無漸層，以及極少的文字內容。導航由簡單的文字連結（'Co Projects'、'Builder'、'About'）組成，游標為 pointer。所有過渡效果套用至所有屬性。此網站避免裝飾性元素、複雜導航和文字密集的介紹，轉而聚焦於大膽的幾何形狀作為視覺焦點。
en · zh-CN · zh-TW · ja · ko