精選 · 開放 · 免費

Caraway

一個專為無毒廚具打造的現代優質 DTC 電子商務網站。

01

設計氣質 DNA

一個專注於現代家庭生活的優質無毒炊具品牌。

02

色彩

內斂的大地色系調色盤，依賴高品質攝影來創造視覺衝擊。

03

字型

transitional-serif · humanist-sans

• display56px · 700
• body16px · 400
• small12px · 400

使用過渡襯線體作為具有衝擊力的標題，所有功能文字則使用人文無襯線體。 · 內文維持 0.4px 的一致字距以確保可讀性。

04

間距

以 4px 為基礎網格，UI 元素之間保持一致的 11px 和 8px 間距。

05

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

1px solid #1F3438

rgba(0, 0, 0, 0.05) 0px 4px 5px 2px

06

版面

寬幅、圖片密集的版面，具備全出血的主視覺區塊和交替的背景色。

07

動效與互動

按鈕和連結在懸停時有細微的過渡效果。 · 流暢的滾動或頁面過渡。

互動元素上的流暢顏色或透明度過渡。 · 立即的視覺回饋，可能是輕微的縮放或顏色變化。

08

組件

• button 高度圓潤 (40px) 的膠囊形按鈕，採用實心背景或外框樣式。
• card 極簡風格卡片，主要透過大型、高品質的產品或生活攝影來定義。
• chip 用於狀態顯示（例如 'NEW'）的小型圓角標籤。
• input 全寬搜尋欄，兩端圓潤並整合搜尋圖示。
• hero 大型分割畫面主視覺區塊，結合粗體襯線字體與生活風格影像。

09

文案語氣與禁用清單

• 語氣 自信、簡潔且以生活風格為導向，專注於健康與現代設計。
• 標題風格 大膽且具宣言性，使用襯線字體來傳達品質與信任感。
• 按鈕文案 行動導向且清晰，常包含促銷細節。

• 不要使用霓虹或高飽和度的強調色——截圖顯示的是像 #5E6C51 和 #B3C8E1 這樣內斂的柔和大地色調色盤。
• 不要在主要按鈕上使用尖銳的方形圓角——截圖顯示的是具有 40px border-radius 的膠囊形按鈕。
• 不要對標題使用具侵略性的全大寫文字——截圖顯示的是大小寫混用的襯線標題，僅有小型標籤使用大寫。
• 不要對所有東西都使用通用的無襯線字體——截圖顯示的是用於展示標題的獨特過渡襯線體。
• 不要在 UI 中塞入過多文字——截圖顯示的是具有大邊距和清晰視覺層級的寬敞版面。
• 不要使用深色模式或厚重的背景紋理——截圖顯示的是乾淨的淺色模式優先設計，背景為純色或非常細微的漸層。
• 避免: 術語
• 避免: 過於技術性的語言
• 避免: 侵略性的銷售策略

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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