精選 · 開放 · 免費
Locomotive
一個數位優先的設計機構，透過高對比、字體驅動的佈局展示作品。
agencymotion
01
設計氣質 DNA
數位優先設計機構創新有意義
一個在編輯優雅與大膽技術精準度之間取得平衡的高端設計工作室。
02
色彩
#E05F15Accent
#000000Ink
#FFFFFFBG
rgba(0,0,0,1.0)Line
使用極簡黑白的高對比調色盤，點綴單一高飽和度的橘色強調色。
03
字型
didone-serif · grotesque-sans
- display
110px · 400 - headline
70px · 400 - body
26px · 400 - caption
15px · 400
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
寬敞開放的佈局，配有充裕的內邊距（垂直 40px）與元素間一致的間距（20px）。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 0px
極簡但精確的 2px 實線邊框，用於分隔線與結構化標籤。
06
版面
1920container
12columns
24pxgutter
768 / 1024breakpoints
不對稱的網格佈局，強調大型主視覺影像與文字與視覺元素的重疊。
07
動效與互動
150msmicro
200mssmall
300msmedium
cubic-bezier(0.215, 0.61, 0.355, 1)easing
滑鼠懸停時透明度與背景色變化的流暢過渡。 · 互動式 UI 元素的精確、快速變換。 · 可能複雜的畫布或 WebGL 效果，用於背景影像的沉浸式體驗。
帶有精確緩動曲線的細微透明度或背景色變化。 · 透過變換或透明度轉移提供即時回饋。
08
組件
- button 以文字為基礎的導覽連結，帶有細微的方向箭頭或自訂字體，無傳統按鈕樣式。
- card 在主視覺區域極小或不存在；依賴大型沉浸式影像而非封裝的卡片。
- hero 全出血或主導性的攝影/影片背景，搭配重疊的大型襯線字體。
09
文案語氣與禁用清單
- 語氣 專業、創新且自信，帶有一絲趣味性。
- 標題風格 大膽、大尺寸的襯線字體，給人編輯式且高端的感覺。
- 按鈕文案 細膩、以文字為焦點的行動呼籲，自然融入導覽或佈局中。
- 不要在任何元件上使用圓角——截圖顯示為銳利、半徑 0px 的方框與卡片。
- 不要使用陰影或複雜的深度效果——截圖依賴純粹的字體與顏色對比。
- 不要使用多色調色盤——截圖嚴格使用黑、白與單一橘色強調色。
- 不要使用小而緊湊的字體作為標題——截圖使用巨大的、110px 比例的展示文字。
- 不要使用標準、厚重的按鈕元件——截圖使用文字連結與細微邊框進行互動。
- 不要在文字後使用複雜背景——截圖使用高對比的實色背景或簡潔的影像。
- 避免: 避免使用隨意或過度友善的語言。
- 避免: 避免使用複雜的漸層或陰影效果。
- 避免: 避免使用雜亂的佈局或過多的 UI 元件。
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
Locomotive 是一個高端的數位優先設計機構，其視覺識別由大尺寸的 Didone 襯線展示字體、高對比的單色調色盤（黑色 #000000 與白色 #FFFFFF），以及單一鮮豔的橘色強調色（#E05F15）所定義。佈局依賴大膽的字體（最大 110px）與充裕的留白。互動細膩，使用透明度與背景色過渡，搭配精確的 cubic-bezier 緩動。關鍵限制：避免圓角（保持半徑為 0px）、避免陰影，且切勿使用厚重、傳統的按鈕元件。該系統強調乾淨、編輯式且高度具表現力的美學，優先考慮大規模影像與字體，而非複雜的 UI 小工具。
en · zh-CN · zh-TW · ja · ko