精選 · 開放 · 免費
Dsanddurga
一個高端香氛與生活風格品牌,運用大膽、受野獸派啟發的字體排印和重度網格的編輯式佈局,營造出強烈、前衛的美學。
EditorialPremiumConsumerGalleryStudio
01
設計氣質 DNA
編輯式野獸派高端奢華實用主義
高端雜誌版面與野獸派工業倉庫的結合。
02
色彩
#1A1A1AInk
#555555Ink soft
#F2EDE4BG
#EAE4D9BG soft
#FFFFFFBG quiet
#888888Muted
rgba(26, 26, 26, 0.15)Line
高對比的奶油色底黑色字體,搭配大型攝影英雄元素,避免使用鮮豔色調,以維持精緻、實用的感覺。
03
字型
grotesque-sans
- display
64px · 700 - headline
28px · 700 - body
14px · 400
導覽與小型標籤使用全大寫 · 大型展示文字使用緊湊行高(0.9 - 1.0) · 透過字重與大小寫而非多樣字體家族來維持嚴格的字體層級
04
間距
8px
16px
24px
32px
48px
64px
80px
120px
由攝影版面與大型字體區塊主導的不規則網格節奏,優先考慮視覺衝擊力而非嚴格的垂直節奏。
05
表面 (圓角 / 陰影 / 邊線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
使用1像素實心黑線定義網格單元格與邊框,創造出嚴格、結構化的佈局。
06
版面
1440container
12columns
1pxgutter
768 / 1024breakpoints
嚴格的網格基礎佈局,包含大型、高衝擊力的攝影元素與疊加的文字區塊。常使用由硬邊框分隔的全出血圖片。
07
動效與互動
200msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
文字疊加的細微淡入效果 · 輪播的平滑滑動
連結與按鈕的細微透明度變化。 · 透過輕微縮放或透明度降低提供即時反饋。
08
組件
- button 簡潔的文字連結或膠囊形按鈕,通常為大寫。
- card 由硬邊框定義的網格單元格,包含影像與疊加的文字。
- chip 簡潔的文字標籤或徽章(例如「限量版聯名」)
- input 極簡的文字輸入欄位,搭配細邊框。
- hero 大型、全寬的攝影影像,搭配疊加的大膽文字。
09
文案語氣與禁用清單
- 語氣 自信、直接且略帶神秘感。
- 標題風格 簡短、有力,通常具概念性或挑釁性。
- 按鈕文案 極簡且功能化,通常僅為箭頭或簡單的文字連結。
- 不要使用投影或柔和漸層——截圖顯示為平坦、帶有硬邊框的野獸派美學。
- 不要使用多種字體家族——截圖依賴單一、一致的無襯線字體家族。
- 不要使用鮮豔、飽和的強調色——截圖顯示為黑色、奶油色與攝影的柔和色板。
- 不要在容器上使用圓角——截圖顯示網格單元格為銳利的90度角。
- 不要對大型文字區塊使用置中對齊——截圖常用左對齊或靠左的字體排印。
- 不要將導覽隱藏在複雜的層級結構中——截圖顯示為平坦、可見的頂部導覽列。
- 避免: 過多的驚嘆號
- 避免: 過度描述的形容詞
- 避免: 通用的行銷術語
11
System Prompt
DS&DURGA 是一個總部位於紐約的高端香氛與生活風格品牌。其網站採用野獸派、編輯式的設計手法。主要顏色為奶油色(#F2EDE4)、深黑色(#1A1A1A)與柔和的米白色(#EAE4D9)。字體排印一致使用粗體、緊湊字距的怪誕無襯線字體,並應用於展示與內文。關鍵設計限制:絕不在主要 UI 元素上使用投影或圓角,避免使用鮮豔飽和的強調色,且不使用多種字體家族。佈局嚴格採用帶有硬邊框的網格基礎,優先考慮高衝擊力的攝影與大而有力的文字疊加。
把這份品味接進你的 Agent
把這套設計的機器可讀規格——色彩、字體、動效,整套 DNA——直接交給你的 AI Agent。
OpenDesign 技能 ↗
en · zh-CN · zh-TW · ja · ko