精選 · 開放 · 免費

Drink818

高端龍舌蘭品牌網站，採用優雅、柔和的大地色調，並結合襯線體與 monospaced 字型。

01

設計氣質 DNA

一個講究、富有大地氣息美學的高端精品龍舌蘭品牌網站。

02

色彩

採用溫暖奶油色背景、深炭色文字，以及用於次要區塊的柔和橄欖綠，構成精緻的大地色調。

03

字型

transitional-serif · monospaced

• display34px · 700
• body20px · 400

導覽列與法律文字採用全大寫樣式。 · 介面廣泛運用寬鬆的字距，呈現精緻感。 · 主要文字使用過渡襯線體，而幾乎所有 UI 元素則採用 monospaced 字型。

04

間距

採用一致的 4px 基礎網格，用於 padding、margin 與元件間距。

05

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

1px solid rgba(14, 17, 17, 0.12) 用於輸入欄位與細微分隔線。

0px 9999px 0px 9999px rgba(0, 0, 0, 0.4) 用於 modal 覆蓋層 · 0px 0px 10px 3px rgba(122, 122, 122, 0.2) 用於細微的浮起效果

06

版面

居中的單欄版面，搭配寬裕的垂直間距與大型字體。

07

動效與互動

background-size 與 opacity 變化時採用流暢的過渡效果。 · 頁面元素使用基於 Transform 的動畫，搭配自訂 cubic-bezier 緩動曲線。

互動元素在 hover 時有細微的 background-size 或 opacity 過渡效果。 · 標準的 active 狀態，提供即時反饋。

08

組件

• button 採用實心奶油色或綠色背景，搭配 monospaced 全大寫文字與微小的 border-radius。
• card 並非主要特色，但可透過具寬裕 padding 的區塊區塊暗示其存在。
• chip 未出現。
• input monospaced 全大寫文字，搭配淺色邊框與細微的 border-radius。
• hero 大型圖片背景或實心色塊，搭配巨大的粗體襯線字型。

09

文案語氣與禁用清單

• 語氣 精緻、自信且法律用語精確。
• 標題風格 粗體、全大寫且富有表現力的襯線字型。
• 按鈕文案 直接、全大寫且功能性的文字，採用乾淨的 monospaced 字型。

• 勿使用明亮、高飽和度的強調色——截圖顯示的是以橄欖色與奶油色為主的柔和大地色調。
• 勿在 UI 中使用圓潤的幾何無襯線字型——截圖中僅使用過渡襯線體與 monospaced 字型。
• 勿使用狹小擁擠的間距——截圖中顯示的是寬裕的 padding 與元件之間的大間距。
• 勿使用複雜的多欄版面配置內容——截圖中顯示的是乾淨、居中的單欄版面。
• 勿在主要導覽或 CTA 中使用小寫文字——截圖中顯示的是持續使用大寫字母。
• 勿在主要 UI 元素上使用陰影來創造深度——截圖中使用平面色彩，僅在覆蓋層上使用極其細微的陰影。
• 避免: 避免過於俏皮或隨意的語言。
• 避免: 避免使用明亮、高飽和度的霓虹色。
• 避免: 避免缺乏寬裕間距的密集文字區塊。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

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