精選 · 開放 · 免費
R/GA
一個大膽、高對比的代理機構網站,利用巨幅字體與嚴謹的單色調色盤,來投射創意權威與科技信心。
agencybrand
01
設計氣質 DNA
創新科技系統品牌創意
一家精密的工業設計事務所
02
色彩
#FF0000Accent
#FFFFFFInk
#3C3B3BInk soft
#000000BG
#999999Muted
rgba(230, 230, 230, 1)Line
純黑與純白之間的極端對比,並輔以單一銳利的紅色點綴。
03
字型
grotesque-sans
- display
120px · 700 - heading
27px · 700 - body
16px · 400
主視覺文字採用全大寫,字距緊湊且字重厚重。 · 內文使用清晰易讀的 grotesque-sans 字體。 · 大型展示文字的行高較緊湊,內文行高則較舒適。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
主要區塊之間採用寬裕的垂直間距,內容區塊內部則緊密編排。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
極簡處理,通常使用 1px 淺灰色 (#E6E6E6) 線條作為分隔線。
06
版面
1440container
12columns
24pxgutter
768 / 1024breakpoints
全寬主視覺區塊後接續乾淨、左對齊的內容區塊,背景為白色。
07
動效與互動
250msmicro
300mssmall
300msmedium
cubic-bezier(0.4, 0.0, 0.2, 1)easing
互動元素上的色彩與透明度過渡效果。
導覽連結上的色彩過渡(0.3s ease-in-out)。 · 所有互動元素使用標準指標游標。
08
組件
- button 簡潔的文字式導覽連結,頁首中採用全大寫。
- card 無可見元件,佈局為區塊式。
- chip 無可見元件。
- input 無可見元件。
- hero 巨幅、全視窗的黑色區塊,配以主導性的全大寫白色字體。
09
文案語氣與禁用清單
- 語氣 自信、具權威感且前瞻性。
- 標題風格 宣告式的、全大寫的語句,闡述能力與宗旨。
- 按鈕文案 簡單直接的邀請語句,例如「看看我們如何提供協助」。
- 勿使用漸層——設計採用實心、平塗的色塊。
- 勿使用柔和陰影——表面由對比與簡潔線條來定義。
- 勿在主要容器上使用圓角——美學風格是銳利且矩形的。
- 勿使用柔和、低對比度的色彩——調色盤嚴格限定為黑、白及單一紅色點綴。
- 勿在主要佈局中使用裝飾性插圖——字體是首要的視覺元素。
- 勿使用置中對齊的文字——標題與內文皆為左對齊。
- 避免: 可愛或過度隨意的語言。
- 避免: 裝飾性或過度複雜的視覺元素。
- 避免: 雜亂的佈局或低對比度的文字。
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
一個高端數位代理機構網站,隸屬於 R/GA。它將自己定位為智慧時代的創意創新公司。視覺系統建立在極端對比之上:主視覺區塊採用純黑 (#000000) 背景,內容區域則採用純白 (#FFFFFF)。主要字體為粗體、字距緊湊的 grotesque-sans (Helvetica variable),標題採用全大寫,內文則使用簡潔的無襯線字體。單一銳利的紅色 (#FF0000) 僅在標誌中少量使用。關鍵禁忌:絕不使用漸層或陰影,絕不圓角處理主要容器,並避免任何低對比或柔和的色彩組合。佈局寬敞且左對齊,強調巨幅、主導性的字體。
en · zh-CN · zh-TW · ja · ko