精選 · 開放 · 免費

Joyntcbd

針對利基市場、具強烈視覺風格的街頭服飾打造的深色主題電子商務平台，擁有大膽、飽和的 UI 點綴色。

01

設計氣質 DNA

專注於利基市場、具強烈視覺風格的高能量數位精品店

02

色彩

高對比深色主色調，搭配潔白的內容背景與鮮活的藍色作為互動元素的點綴色。

03

字型

geometric-sans · humanist-sans

• display24px · 700
• body16px · 400
• caption12px · 600

使用幾何無襯線字體（SharpGrotesk 風格）作為大膽、具表現力的標題文字。 · 使用人文無襯線字體（Roobert 風格）作為內文與標準 UI 元素。 · 在深色背景上使用純白色（#ffffff）以維持高對比度的文字可讀性。

04

間距

採用一致的 4px 網格，搭配標準的 8/16/24px 間距。

05

表面 (圓角 / 陰影 / 邊線)

1px solid rgba(233, 233, 236, 1)

0px 2px 4px 0px rgba(21, 21, 35, 0.2) · 0px 0px 10px 0px rgba(0, 0, 0, 0.4) · 0px -16px 16px 0px rgb(21, 21, 35)

06

版面

標準電子商務網格佈局，配有置頂導航欄、全幅英雄/產品區塊，以及多欄式產品詳情佈局。

07

動效與互動

hover 狀態下的細微透明度與變換過渡（0.1s-0.15s ease-in-out）。 · 適用於廣泛互動狀態的標準 'all' 屬性過渡。

輕微的縮放或顏色變化，通常配有快速的 100毫秒-150毫秒過渡效果。 · 透過狀態變化提供即時的視覺回饋。

08

組件

• button 主要操作按鈕採用圓角矩形（12px radius），次要標籤與膠囊採用膠囊形狀（999px radius）。
• card 乾淨、白色背景的卡片，配有細微邊框與適度的陰影效果，用於產品展示。
• chip 小型、膠囊形狀的標籤，用於產品風格與分類。
• input 圓角搜尋欄位，配有高對比度邊框與顯眼的圖示按鈕。
• hero 全幅、視覺豐富的橫幅區塊，結合攝影圖像與大膽的文字覆蓋。

09

文案語氣與禁用清單

• 語氣 直接、具交易性且充滿活力。
• 標題風格 大膽、簡潔，常使用全大寫或混合大小寫以強調。
• 按鈕文案 以行動為導向且具高對比度（例如：深藍背景上的白色文字）。

• 不要使用純白色導覽欄——截圖顯示的是深藍/海軍藍的主要導航欄。
• 不要所有元素都使用銳利的方形邊角——截圖顯示了 12px 圓角與膠囊形狀元件的混合使用。
• 不要依賴單一的單色調色盤——截圖顯示了鮮活的藍色點綴色（#4e64df）搭配深色與白色背景。
• 不要使用襯線字體或手寫字體——截圖顯示了嚴格的幾何與人文無襯線字體層級。
• 不要到處使用纖細的 1px 邊框——截圖使用了顯眼的 2px 邊框與厚重的陰影來營造層次感。
• 不要讓整個背景保持白色——截圖使用了深色主題的導航欄，以及各種米白色（#f4f4f5）與帶藍色調（#f1f3fe）的區塊。
• 避免: 過度詩意的語言
• 避免: 過於柔和的色調
• 避免: 極簡主義術語

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko