精選 · 開放 · 免費
Dezeen
一個以影像為主導的乾淨編輯平台，專注於建築與設計，並帶有標誌性的藍色強調。
editorialarchitecture
01
設計氣質 DNA
建築設計雜誌精選攝影
一本高級設計雜誌被帶到網路上，優先考慮大型編輯攝影與乾淨的排版。
02
色彩
#556e9bAccent
#000000Ink
#ffffffBG
#f0f0f0BG soft
#757575Muted
rgba(85, 110, 155, 1)Line
高對比的黑白基底，搭配標誌性的灰藍色強調。
03
字型
humanist-sans · transitional-serif
- display
56px · 700 - h1
40px · 700 - body
18px · 400 - small
14px · 700
標題與導覽使用無襯線字體。 · 文章內文使用襯線字體。 · 字重 700 大量用於強調與導覽。 · 大型展示文字維持緊湊的字距。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
寬裕的留白分隔編輯區塊。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
段落分隔線使用銳利的 3px 邊框。
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
嚴格的網格，主要文章欄位在左側，次要內容欄位在右側。
07
動效與互動
200msmicro
400mssmall
800msmedium
ease-in-outeasing
背景與色彩變化的平滑過渡。
互動元素的背景色彩變化。 · 即時回應。
08
組件
- button 極簡的、基於文字或實心的區塊，帶有銳利的角落。
- card 以圖片為主的區塊，帶有疊加的文字與銳利的邊框。
- chip 簡單的文字標籤，使用粗體字重。
- input 乾淨的矩形欄位，帶有細邊框。
- hero 大型攝影影像，帶有疊加的文字。
09
文案語氣與禁用清單
- 語氣 權威、精緻且乾淨。
- 標題風格 簡短、具描述性且有衝擊力。
- 按鈕文案 低調且直接。
- 不要在卡片上使用圓角——截圖顯示為銳利的 0px 邊框。
- 不要使用彩色的強調色調——截圖以黑色、白色與單一的霧面藍色（#556e9b）為主。
- 不要使用無襯線字體作為長文——截圖在文章內文使用襯線字體。
- 不要在容器上加入陰影——截圖顯示為平坦的表面。
- 不要使用複雜的佈局——截圖使用嚴格、乾淨的網格。
- 不要使用活潑的排版——截圖依賴高對比、嚴肅的字重。
- 避免: 俚語
- 避免: 過於隨意的語言
- 避免: 裝飾性字體
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 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Dezeen 是一個高級的建築與設計編輯平台。其設計 DNA 建立在高對比的黑白配色方案上，並帶有標誌性的霧面藍色（#556e9b）強調。排版使用人文主義無襯線字體作為標題，以及過渡襯線字體作為內文，維持精緻且具權威性的語調。關鍵規則：使用銳利的 0px 邊框，避免圓角，並維持嚴格的編輯網格。絕不使用活潑或裝飾性的元素；美學是乾淨、精選且攝影導向的。
en · zh-CN · zh-TW · ja · ko