精選 · 開放 · 免費
Thoughtlab
類別優先的品牌 + 產品工作室
StudioPremiumAgencyDark ModeTypography
01
設計氣質 DNA
品牌策略產品工作室類別設計旗艦體驗26 年
一家高端的品牌顧問公司，致力於設計市場類別，並打造旗艦數位產品以實踐其理念。
02
色彩
#fc1c46Accent
#ffffffInk
#ccccccInk soft
#000000BG
#4c4c4cMuted
rgba(204, 204, 204, 0.2)Line
高對比的單色調基底，搭配單一醒目的紅色強調色。
03
字型
grotesque-sans
- display
91px · 700 - h1
72px · 700 - h2
27px · 400 - body
14px · 400
在展示級字號上使用緊密的負追蹤。 · 保持文字與背景之間的高對比度。 · 所有文字嚴格遵循 grotesque-sans 字體類別。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
採用一致的 4px 基礎網格作為內邊距與外邊距，並在區段間使用大量垂直間距（例如 198px, 288px）以創造戲劇性的區隔。
05
表面 (圓角 / 陰影 / 邊線)
sm · 2px
md · 4px
lg · 8px
pill · 9999px
1px solid rgba(204, 204, 204, 0.2)
rgb(128, 128, 128) 0px 0px 5px 0px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
全寬的首屏區塊，文字左對齊，大型圖形元素（如 3D 球體）佔據中央/右側。
07
動效與互動
220msmicro
400mssmall
750msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
滾動觸發的漸顯效果，使用流暢的透明度與變換過渡。 · 針對複雜元素的緩慢寬度/變換動畫。
細微的透明度變化或游標轉換。 · 透過狀態變化提供即時回饋。
08
組件
- button 膠囊形的主要按鈕，採用高對比配色。
- card 極簡的卡片設計，通常無邊框或僅帶有細微邊框。
- chip 不適用
- input 不適用
- hero 全視窗的深色首屏，搭配巨大的字體與中央的 3D 抽象元素。
09
文案語氣與禁用清單
- 語氣 權威、自信且高端。
- 標題風格 直接、宣言式且巨大。
- 按鈕文案 簡潔且以行動為導向（例如「聯繫我們」）。
- 不要使用淺色背景——截圖顯示為嚴格的深色（黑色）背景。
- 不要使用多樣化的配色盤——截圖僅顯示黑、白、灰及一個紅色強調色。
- 不要使用襯線字體——截圖僅顯示 grotesque-sans 字體。
- 不要使用小而細的標題——截圖顯示巨大、粗體且追蹤緊密的展示級文字。
- 不要使用複雜的邊框或陰影——截圖顯示平面化的表面，僅帶有極簡、細微的邊框。
- 不要廣泛使用圓角——截圖顯示主要為銳角或極輕微的圓角邊緣。
- 避免: 俏皮或隨意的語言。
- 避免: 小而畏縮的字體。
- 避免: 過於複雜的導航。
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個高端品牌與產品工作室的網站，具有 premium、深色模式的美學。設計採用嚴格的單色調色盤，以黑色 (#000000) 和白色 (#ffffff) 為主，使用灰色 (#cccccc, #4c4c4c) 增加層次，並以單一鮮明的紅色強調色 (#fc1c46) 用於行動呼籲。字體全部為 grotesque-sans，採用巨大、粗體且追蹤緊密的標題，搭配簡潔、極簡的內文。佈局寬敞而富有戲劇性，使用全視窗區塊和大量垂直內邊距，以營造尺度感與重要性。關鍵注意事項：避免淺色背景、避免使用廣泛的配色盤、避免使用襯線字體、避免使用小標題、避免複雜的 UI 模式，並避免雜亂或擁擠的構圖。網站透過其極簡而具衝擊力的視覺語言，傳達權威性與類別領導地位。
en · zh-CN · zh-TW · ja · ko