精選 · 開放 · 免費
Airstudios
為專業錄音室打造的藝術感強烈網站
EditorialExperimentalStudioTypographyPhotographic
01
設計氣質 DNA
錄音室音樂創意聲音
高端錄音室的數位形象
02
色彩
#1A1B1BInk
#FA516ABG
#4A4A44BG quiet
rgba(26,27,27,1.0)Line
以鮮明主背景搭配深色文字,營造高對比視覺效果
03
字型
grotesque-sans
- display
56px · 300 - body
14px · 300
大量使用細字體 (300) · 導覽與強調處採用大寫文字
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
一致的內邊距與外邊距
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
謹慎使用 1px 實線作為結構劃分
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
置中版面配置,頁尾採用欄位式組織
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
主視覺圖形採用生成式動畫 · 背景色彩平滑過渡
細微變化 · 即時回應
08
組件
- button 可見截圖中極簡或無按鈕設計
- card 未見卡片設計
- chip 未見標籤設計
- input 未見輸入欄位
- hero 全螢幕主視覺區塊,搭配動態抽象生成藝術與極簡文字
09
文案語氣與禁用清單
- 語氣 專業且具藝術感
- 標題風格 極簡且大膽
- 按鈕文案 內斂且功能導向
- 勿使用厚重字重 — 截圖顯示幾乎專注使用細字體 (300)
- 勿使用複雜陰影效果 — 截圖呈現平面、乾淨的表面處理
- 勿在按鈕或卡片上使用圓角 — 戳圖顯示銳利、筆直的邊緣
- 勿將內文字體置中對齊 — 截圖顯示左對齊文字
- 勿使用過多內邊距 — 截圖顯示緊湊、高效的間距
- 勿使用襯線字體 — 戳圖顯示一致性使用 grotesque sans-serif 字體
- 避免: 雜亂感
- 避免: 未經平衡的明亮主色調
- 避免: 厚重字體
10
包內真實截圖
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
Airstudios 是一個採用大膽、鮮明美學的高端錄音室網站。主背景色為珊瑚粉紅 (#FA516A),行動版或替代狀態使用深橄欖色 (#4A4A44)。文字顏色為極深的灰黑色 (#1A1B1B)。字體為細字體 (300) 的 grotesque sans-serif(辨識為 Akzidenz-Grotesk)。網站大量運用生成式抽象線條藝術作為焦點。關鍵注意事項:1) 勿使用厚重或粗體字重,因設計依賴輕盈、通透的字體排印。2) 勿為容器或按鈕添加圓角;美學風格為銳利且幾何感。3) 勿使用複雜陰影或漸層;保持表面平面且乾淨。
en · zh-CN · zh-TW · ja · ko