精选 · 开放 · 免费

Drink818

高端龙舌兰品牌网站，采用优雅、柔和的质朴色调，结合衬线体与等宽字体排版。

01

设计气质 DNA

一家高端精品龙舌兰品牌网站，具有精致、质朴的美学。

02

色彩

质朴而精致的调色板，采用温暖的奶油背景、深炭灰文本，以及用于次要版块的柔和橄榄绿。

03

字体

transitional-serif · monospaced

• display34px · 700
• body20px · 400

导航和法律文本使用全大写样式。 · 整个界面应用宽阔的字间距，营造精致感。 · 过渡衬线体用于表现性文本，而等宽字体几乎用于所有 UI 元素。

04

间距

统一的 4px 基础网格用于内边距、外边距和组件间距。

05

表面 (圆角 / 阴影 / 边线)

1px solid rgba(14, 17, 17, 0.12) 用于输入框和细微分隔线。

0px 9999px 0px 9999px rgba(0, 0, 0, 0.4) 用于模态遮罩 · 0px 0px 10px 3px rgba(122, 122, 122, 0.2) 用于微妙抬升效果

06

布局

居中的单列布局，配有充裕的垂直间距和大幅排版。

07

动效与交互

背景尺寸和不透明度变化使用平滑过渡。 · 页面元素使用基于 Transform 的动画，配合自定义 cubic-bezier 缓动。

交互元素在 hover 时发生微妙的背景尺寸或不透明度过渡。 · 标准的 active 状态，提供即时反馈。

08

组件

• button 奶油色或绿色的纯色背景，搭配等宽字体大写文本和较小的圆角。
• card 未大量出现，但通过带有充裕内边距的版块区块暗示。
• chip 不存在。
• input 等宽字体大写文本，带有浅色边框和微妙的圆角。
• hero 大型图片背景或纯色色块，搭配巨大、加粗的衬线体排版。

09

文案语气与禁用清单

• 语气 精致、自信且在法律上严谨。
• 标题风格 加粗、全大写、富有表现力的衬线体排版。
• 按钮文案 直接、大写、功能性，使用简洁的等宽字体。

• 不要使用明亮、高饱和度的强调色——截图显示的是柔和的质朴调色板，包含橄榄绿和奶油色。
• 不要为 UI 使用圆润、几何化的无衬线字体——截图仅使用过渡衬线体和等宽字体。
• 不要使用狭小、拥挤的间距——截图显示了充裕的内边距和元素间的巨大间隙。
• 不要使用复杂、多栏的内容布局——截图显示了干净、居中的单列布局。
• 不要为主要导航或 CTA 使用小写文本——截图显示了始终如一的大写字母使用。
• 不要为主要 UI 元素使用投影来营造深度——截图使用纯色，仅在遮罩上使用非常细微的阴影。
• 避免: 避免过于 playful 或随意的语言。
• 避免: 避免明亮、高饱和度的霓虹色。
• 避免: 避免没有充裕间距的密集文本块。

10

包内真实截图

抓自真实页面 · 真 computed styles

11

System Prompt

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