精選 · 開放 · 免費
Jam3
透過創意與科技轉型品牌的全球數位代理商。
agencycreative
01
設計氣質 DNA
全球數位創意代理商
一家高端全球數位代理商
02
色彩
#3C0C60Accent
#2D2D2DInk
#5A5A5AInk soft
#EAE8E4BG soft
#F5F5F5BG quiet
#DEDFE5Muted
rgba(234,232,228,0.3)Line
高對比字型，以深色/淺色模式為基礎，搭配單一深紫色強調色。
03
字型
grotesque-sans
- display
67px · 800 - headline
48px · 800 - title
23px · 500 - body
15px · 400 - caption
10px · 400
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
彈性間距，搭配寬裕的水平內邊距與章節間明顯的垂直分隔。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 20px
lg · 70px
pill · 100px
1px solid rgba(234,232,228,0.4)
0px 20px 40px -16px rgba(0,0,0,0.3) · 0px 30px 30px -16px rgba(0,0,0,0.3)
06
版面
1440container
12columns
24pxgutter
768 / 1024breakpoints
全版攝影主視覺，搭配置中內容覆蓋層與結構化編輯卡片網格。
07
動效與互動
200msmicro
300mssmall
600msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing
透明度淡入 · 流暢的 box-shadow 轉場 · 使用 max-height 的版面移動
卡片上的細膩透明度變化與 box-shadow 擴展。 · 流暢的捲動或導覽轉場。
08
組件
- button 膠囊形按鈕，帶有實色邊框或背景。
- card 簡潔的編輯卡片，具有大型圖像與結構化字型。
- chip 圓形膠囊徽章。
- input 底線式文字輸入框。
- hero 全出血攝影主視覺，覆蓋上巨大的粗體字型。
09
文案語氣與禁用清單
- 語氣 自信、權威且具創新性。
- 標題風格 粗體、具衝擊力，採用小寫或句子式大小寫。
- 按鈕文案 直接且具行動力，搭配膠囊形按鈕。
- 不要使用襯線字型——截圖顯示的是粗體、幾何 grotesque-sans 字型。
- 不要使用明亮的霓虹背景——截圖顯示的是深暗色調與淺中性灰色。
- 不要到處使用銳利的直角——截圖顯示頻繁使用完全圓潤的膠囊形狀。
- 不要使用纖細、精緻的字型——截圖顯示所有標題皆採用粗體、厚重的字重。
- 不要使用雜亂的導覽——截圖顯示的是簡潔、極簡的頂部導覽列。
- 不要使用多色按鈕——截圖顯示的是大多為單色或白色/外框按鈕。
- 避免: 泛泛的企業用語
- 避免: 雜亂的介面
- 避免: 浮誇的形容詞
- 避免: 過於複雜的導覽
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 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Jam3 是一家全球數位代理商。設計採用高級、高對比的調色盤，包含深炭色、淺灰色與標誌性的深紫色強調色。字型依賴粗體、幾何 grotesque-sans 以製造衝擊力。主視覺區塊使用全出血攝影。重要禁忌：不要使用襯線字型，不要為所有元素使用銳利邊角，也不要在標題使用纖細字重。介面必須呈現粗體、簡潔且專業的感覺。
en · zh-CN · zh-TW · ja · ko