精選 · 開放 · 免費

Studio Otto

一個簡潔、文字密集的作品集，透過嚴謹的單色與無襯線網格來展示創意專案。

01

設計氣質 DNA

高端、極簡的藝廊型錄，或簡潔的建築作品集。

02

色彩

嚴格的單色調色盤，透過大量的負空間與排版來最大化對比與可讀性。

03

字型

grotesque-sans

• body11px · 400
• display11px · 400

標題與分類使用大寫轉換 · 所有文字元素採用緊湊、緊縮的行高 · 嚴格的單色排版層次僅透過字重、大小寫與字距來定義

04

間距

緊湊、微距間距系統， heavily 依賴 5px 與 15px 的內距增量，以形成密集網格。

05

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

銳利的 1px 實線黑色邊框，偶爾用於結構性分隔。

06

版面

密集、不對稱的多欄網格，具有強烈的垂直對齊與緊密的文字環繞。

07

動效與互動

懸停狀態下平滑的 0.6 秒背景過渡

互動文字元素上細微的背景過渡或狀態變更。 · 透過游標指示器直接導航。

08

組件

• button 基於文字的互動元素，使用游標指示器，通常是大寫的無襯線連結。
• card 由排版與留白而非容器定義的不對稱網格單元。
• chip 無
• input 無
• hero 利用大量負空間將主要文字與圖片網格推至底部或非中心位置。

09

文案語氣與禁用清單

• 語氣 抽離、專業且嚴格資訊化。
• 標題風格 簡短、大寫、加寬字距的無襯線分類標籤。
• 按鈕文案 隱含的、基於文字的導航，無傳統按鈕元件。

• 避免使用陰影——截圖顯示完全平坦、無邊框的元素。
• 避免使用 border-radius——截圖顯示所有可見表面嚴格的矩形性。
• 避免使用寬幅的排版比例——截圖顯示高度統一、小尺寸的文字。
• 避免使用高飽和度的強調色——截圖顯示嚴格的單色黑白調色盤。
• 避免使用大型、置中的首頁標題——截圖顯示文字區塊緊貼在密集、底部偏重的網格中。
• 避免使用寬鬆的內距——截圖顯示緊湊的 5px 與 15px 增量，創造出密集的視覺節奏。
• 避免: 情感化語言
• 避免: 裝飾性元素
• 避免: 傳統 UI 元件

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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