精選 · 開放 · 免費
Instrument
Instrument 是一家頂級的數位公司，結合大膽的字體排印、3D 視覺效果與精緻的編輯式版面配置。
agencybrand
01
設計氣質 DNA
數位優先創意科技設計公司
一家數位優先的設計公司，在此創意與科技相遇。
02
色彩
#070708Ink
#525252Ink soft
#E8E8E9BG
#F0F0F1BG soft
#D4D4D5BG quiet
#808080Muted
rgba(7,7,8,0.5)Line
以高對比的單色調為基礎，搭配主視覺中活潑的 3D 漸層點綴。
03
字型
grotesque-sans · sans-serif · monospace
- display
352px · 400 - headline
36px · 400 - body
16px · 400
所有主要 UI 與內文均使用 Instrument-Sans。 · 使用 Instrument-Serif 作為優雅的編輯式強調。 · 使用 Instrument-Mono 顯示技術性中繼資料或標籤。 · 顯示用標題採用緊密字距與高對比設定。
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
以 4px 網格為基礎，搭配寬裕的留白，營造編輯式的呼吸空間。
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 24px
lg · 32px
pill · 999px
1px solid rgba(7,7,8,0.5)
0 0 0 1px rgba(7,7,8,0.5)
06
版面
1440container
12columns
24pxgutter
768 / 1024breakpoints
採用網格佈局，包含大尺寸的全幅主視覺與堆疊式內容區塊。
07
動效與互動
150msmicro
250mssmall
350msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
互動狀態下的平滑色彩過渡。 · 滑鼠懸停時細微的變形位移，以創造景深。
色彩反轉或細微的背景變化。 · 立即的視覺回饋，無縮放彈跳效果。
08
組件
- button 藥丸形的主要按鈕，採用高對比的文字/背景色。
- card 大型編輯式卡片，展示 3D 或攝影內容。
- chip 用於導航的小型藥丸狀標籤，帶有細邊框。
- input 極簡風格的表單輸入框，僅帶底部邊框。
- hero 全幅的 3D 動態場景，中央設有播放按鈕。
09
文案語氣與禁用清單
- 語氣 自信、極簡且專業。
- 標題風格 粗體、全大寫且字距緊密。
- 按鈕文案 直接且以行動為導向。
- 避免使用多色漸層——調色盤以單色調為主，並有特定的點綴場景。
- 避免所有元素都使用圓角——主視覺使用銳利邊緣與圓形。
- 避免使用厚重的投影——改用細微的 1px 邊框來區隔。
- 避免內文置中對齊——版面嚴格採用左對齊。
- 避免使用休閒或友善的字型——堅持使用銳利、怪誕風的 Instrument 字族。
- 避免介面過於擁擠——善用寬裕的留白與清晰的層級。
- 避免: 雜亂的版面
- 避免: 一般的圖庫圖片
- 避免: 花俏的多色漸層
- 避免: 不必要的邊框或陰影
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
此網站為一家頂級數位優先設計公司的作品集。它以大膽的單色調為基礎（#E8E8E9 背景，#070708 文字），並在主視覺中加入活潑的 3D 彩色點綴。字體排印以自訂的怪誕風無襯線字族（Instrument-Sans）為主導，用於大尺寸、字距緊密的標題與簡潔的內文。關鍵原則：絕對不要使用置中對齊的內文（嚴格左對齊），絕對不要使用厚重的投影（改用 1px 邊框），絕對不要破壞極簡、高對比的單色美學。版面配置具有編輯感且寬敞，採用 4px 網格與 12 欄系統。
en · zh-CN · zh-TW · ja · ko