精選 · 開放 · 免費

Thebeamslondon

實驗性、以字體排印為驅動的文化場域識別。

01

設計氣質 DNA

探索視覺傳達邊界的現代藝廊節目單。

02

色彩

嚴格的單色調色板，依靠高對比的黑白來達到最大視覺衝擊力。

03

字型

neue-haas-grotesk

• display160px · 400
• heading38px · 400
• body19px · 400

展示級尺寸使用緊湊的負字距調整。 · 所有尺寸維持統一的 400 字重。 · 展示級文字的行距保持緊湊，但較小尺寸的文字則留有充足行距以利閱讀。

04

間距

以結構性的 4px 基礎網格為基準，可向上擴展以容納大型字體排印元素。

05

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

使用細、單像素的黑色線條來分隔區塊並定義輸入欄位邊框。

06

版面

極簡的邊對邊網格，優先處理大型字體排印元素，而非傳統的內容區塊。

07

動效與互動

對重複文字進行持續的水平跑馬燈滾動。 · 互動元素上的微妙可見性過渡效果。

細微的透明度或色彩變化。 · 直接導航或表單提交。

08

組件

• button 極簡的文字連結，末尾帶有 '>' 符號。
• card 不存在，版面採用全寬區塊。
• chip 不存在。
• input 僅有底邊框的單行文字輸入欄位。
• hero 大規模的字體排印處理，透過垂直重複一個短語來創造結構性圖案。

09

文案語氣與禁用清單

• 語氣 直接、自信且具藝術感。
• 標題風格 簡潔、有力的陳述，讓字體排印來完成視覺工作。
• 按鈕文案 低調且功能導向，使用簡單的文字連結。

• 不要使用多種顏色——截圖顯示為嚴格的單色調色板。
• 不要為元件添加 border-radius——截圖顯示為銳利的直角。
• 不要使用襯線字體——截圖顯示一致使用 Neue Haas Grotesk。
• 不要使用投影或柔和的深度效果——截圖依賴平面設計。
• 不要用小型元件使版面雜亂——截圖使用寬敞的空間。
• 不要使用俏皮或裝飾性的圖形符號——截圖僅使用 '+' 和 '>' 等必要符號。
• 避免: 裝飾性元素
• 避免: 彩色漸層
• 避免: 圓角
• 避免: 厚重陰影
• 避免: 襯線字體
• 避免: 表情符號或俏皮圖示

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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