精選 · 開放 · 免費
Studiothomas
極簡主義設計工作室網站,依賴巨大的字體排版與單一鮮明的橘色強調色。
StudioEditorialCleanBold Typography
01
設計氣質 DNA
設計工作室大膽極簡高端自信
一個展示大膽作品、並帶有強烈標誌色的畫廊。
02
色彩
#FF4F00Accent
#000000Ink
#EBE9E3BG
#FFFFFFBG soft
#767676Muted
rgba(0,0,0,1.0)Line
高對比的單色基底,搭配單一鮮明的橘色焦點。
03
字型
geometric-sans
- display
120px · 400 - h1
86px · 400 - h2
40px · 400 - body
16px · 400
使用已指定的 Moderat 字體家族。 · 廣泛使用字重 400 作為標題與內文。 · 大型標題保持緊湊的字距。
04
間距
4px
8px
16px
20px
24px
32px
40px
64px
100px
寬裕的留白,搭配明確的填充區塊(40px, 100px)。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
銳利的 1px 黑色線條,謹慎用於分隔線。
06
版面
1200container
12columns
20pxgutter
768 / 1024breakpoints
全寬的主視覺區塊,接著是邊對邊的專案影像。
07
動效與互動
150msmicro
300mssmall
750msmedium
cubic-bezier(0.55, 0.055, 0.675, 0.19)easing
互動元素上的顏色與透明度過渡。 · 基於變換的游標或 hover 效果。
使用 ease-in-out 的顏色過渡。 · 細微的線性透明度變化。
08
組件
- button 極簡的導覽,搭配簡單的文字或細線漢堡選單圖示。
- card 邊對邊的圖片區塊,覆蓋上文字排版。
- hero 大面積的實色區塊,文字置中。
09
文案語氣與禁用清單
- 語氣 自信、極簡、專業。
- 標題風格 大寫或句首字母大寫的幾何無襯線字體。
- 按鈕文案 細微的文字連結。
- 不要使用多種強調色——截圖顯示的是嚴格的橘色強調色(#FF4F00)。
- 不要使用襯線字體——截圖顯示的是幾何無襯線字體(Moderat)。
- 不要在主要區塊上添加陰影或圓角——截圖顯示的是銳利邊緣。
- 不要為標題使用粗體字重——截圖顯示的是字重 400。
- 不要添加裝飾性圖示或圖形——截圖顯示的是純字體排版設計。
- 不要為標題使用寬字距——截圖顯示的是緊湊的負字距。
- 避免: 雜亂
- 避免: 裝飾性漸層
- 避免: 圓角
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(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
這是一個極簡主義設計機構網站,以巨大的幾何無襯線字體排版為特色,並採用嚴格的色調:米白色(#EBE9E3)、黑色(#000000),以及鮮明的橘色(#FF4F00)。佈局使用寬裕的留白與全寬區塊來展示作品。對於任何新頁面,請確保大字體排版仍是主體,謹慎使用特定的橘色強調色,並切勿使用襯線字體、佈局區塊上的圓角,或標題的粗體字重。
en · zh-CN · zh-TW · ja · ko