精選 · 開放 · 免費
Idheal Fr
IDHEAL 運用粗體、結構性字體與簡潔的編輯網格，呈現關於住宅與都市規劃的研究。
EditorialTypographyCurationCleanGrid
01
設計氣質 DNA
機構教育住宿研究IDHEAL
高端學術期刊或藝術展覽圖錄
02
色彩
#FF00BCAccent
#000000Ink
#FFFFFFBG
#E5E5E5BG soft
#D9D9D9BG quiet
#51633CMuted
rgba(0,0,0,1)Line
高對比單色基底，搭配銳利的彩色強調色進行分類
03
字型
grotesque-sans · transitional-serif · monospace
- display
56px · 700 - body
16px · 400
UI 元素與標題使用 Helvetica Neue · 敘事正文使用 New Century Schoolbook
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
基於網格系統，垂直間距一致以利閱讀
05
表面 (圓角 / 陰影 / 邊線)
sm · 10px
md · 15px
lg · 38px
pill · 999px
使用 1px 細實線黑色或彩色邊框於標籤元件
4px 2px 4px rgba(0,0,0,0.2) · 2px -1px 6px rgb(237,237,237)
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
結構式網格，以巨大字母劃分內容區塊
07
動效與互動
200msmicro
300mssmall
800msmedium
lineareasing
背景顏色與字號變化的平滑過渡
可點擊元素上的細微背景顏色變化 · 立即的狀態改變
08
組件
- button 帶實線邊框與細微陰影的輪廓式膠囊按鈕
- card 由結構線分隔的平面內容區塊
- chip 彩色圓點後接小寫文字，置於圓角膠囊內
- input 極簡風格，可能為輪廓式或底線式
- hero 大規模字體排列，字母跨越整個視口
09
文案語氣與禁用清單
- 語氣 學術、權威且精確
- 標題風格 粗體、全大寫且高度結構化
- 按鈕文案 簡潔、直接，多為小寫或句首大寫
- 主要容器勿使用柔軟的圓角——截圖顯示為銳利邊緣與嚴格網格線
- 背景勿使用多色漸層——截圖顯示為平面、純色的白、灰或區塊
- 勿使用厚重的投影來營造深度感——截圖顯示極簡的方向性陰影或完全無陰影
- 佈局勿採用置中、流動式排列——截圖顯示為嚴格的不對稱網格，字母形成欄位
- 主要英雄標識勿使用小寫字母——截圖顯示「IDHEAL」為全大寫
- 導覽勿隱藏於複雜 UI 後——截圖顯示為帶有圖示的簡潔漢堡選單
- 避免: 嬉鬧的語言
- 避免: 過度的裝飾元素
- 避免: 雜亂的佈局
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
為學術或研究機構設計一個高度結構化的編輯式介面。使用嚴格的網格，讓粗體、超大字體同時作為內容與佈局結構。主色板為單色調（黑、白、#E5E5E5），搭配如 #FF00BC 之銳利強調色作為標示。字體應對比使用粗體 grotesque-sans 標題與精緻的 transitional-serif 正文。避免置中佈局、厚重陰影及嬉鬧或圓潤的 UI 元素。維持簡潔、高對比且具知性美感的風格。
en · zh-CN · zh-TW · ja · ko