精選 · 開放 · 免費

Mono Frm Fm

一個基於網格、具有畫廊氛圍的簡潔硬體展示網站。

01

設計氣質 DNA

一個現代硬體裝置的畫廊展覽目錄。

02

色彩

高對比的單色調色板，使用銳利的黑色邊框來定義網格。

03

字型

grotesque-sans · humanist-sans

• display43px · 300
• heading39px · 300
• subhead25px · 300
• body16px · 300
• caption12px · 300

幾乎所有文字（包括標題）都使用輕字重（300）。 · 按鈕和標籤使用大寫字母。 · 保持緊湊的垂直節奏，搭配寬裕的行高。

04

間距

一個一致的 4px 基礎網格控制所有間距，主要的網格區塊則使用大量的內距。

05

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

2px solid #292929

06

版面

嚴格、不對稱的 CSS Grid，使用粗重的 2px 黑色邊框分隔每一個元素。

07

動效與互動

旋轉圓形文字動畫 · 內容揭示的流暢高度轉場

極簡的視覺回饋；互動專注於呈現內容，而非狀態改變。 · 觸發內容展開或導覽。

08

組件

• button 極簡的外框按鈕，無圓角、大寫文字、輕字重。
• card 嚴格矩形的容器，由版面網格邊框定義，無陰影或圓角。
• hero 一個不對稱的多面板版面，結合產品圖、描述文字和一個旋轉的圓形文字元素。

09

文案語氣與禁用清單

• 語氣 沉思、優雅且精緻。
• 標題風格 富有詩意且令人嚮往，使用輕字重。
• 按鈕文案 直接、大寫且低調。

• 不要使用圓角——截圖顯示所有元素都有銳利的 90 度邊緣。
• 不要使用陰影——截圖完全依賴實心邊框來營造深度。
• 不要使用粗體字重——截圖僅使用輕字重（300）。
• 不要使用鮮豔的強調色——截圖堅持使用嚴格的單色調色板。
• 不要使用有機或不對稱的內距——截圖使用基於 4px 的嚴格網格間距。
• 不要使用流動或漸層背景——截圖使用純色的 #FFFFFF 和 #292929 區塊。
• 避免: 圓角的 UI 元素
• 避免: 陰影
• 避免: 明亮的強調色
• 避免: 俏皮的語言
• 避免: 雜亂的版面

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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