精选 · 开放 · 免费
Postfamiliar
为专属红酒俱乐部设计的大胆、高对比度编辑式暗黑模式。
EditorialDark ModeTypographyPremiumCuration
01
设计气质 DNA
精选专属大胆极简编辑式
一本高端、专属的红酒俱乐部杂志，带有粗野主义风格。
02
色彩
#fc3192Accent
#ffffffInk
#000000BG
#888888Muted
rgba(255, 255, 255, 1)Line
严格的高对比度单色，搭配单一醒目的粉红色点缀。
03
字体
grotesque-sans · monospace
- display
230px · 400 - heading
70px · 400 - subhead
46px · 400 - body
16px · 400 - label
20px · 400
标题和按钮广泛使用大写文本。 · 大型展示文字采用紧凑的字距。
04
间距
4px
8px
16px
24px
32px
48px
64px
96px
144px
通过一致的内边距和间距倍数建立垂直节奏。
05
表面 (圆角 / 阴影 / 边线)
sm · 4px
md · 16px
lg · 50px
pill · 999px
所有交互元素均采用高对比度的2px实心白色或黑色边框进行定义。
06
布局
1280container
12columns
24pxgutter
768 / 1024breakpoints
居中、全屏的主视觉区，搭配固定宽度的内容列。
07
动效与交互
220msmicro
300mssmall
400msmedium
cubic-bezier(0.25, 1, 0.5, 1)easing
用于元素显现的透明度过渡。 · 用于悬停状态的变换过渡。
反转颜色或将边框颜色更改为粉红色。 · 通过缩放或透明度提供即时视觉反馈。
08
组件
- button 药丸形状，透明填充，带有2px实心白色边框。
- card 方形，直角，由2px实心白色边框定义。
- chip 极简文字标签，通常为大写并采用宽字距。
- input 药丸形状，带有2px实心白色边框。
- hero 全屏、高对比度的排版主视觉区，使用巨大的展示文字。
09
文案语气与禁用清单
- 语气 权威、专属、极简。
- 标题风格 巨大、粗体、大写无衬线字体。
- 按钮文案 直接、大写、药丸形状的按钮。
- 不要使用投影——截图显示元素由2px实心边框定义。
- 不要使用浅色背景——截图显示纯#000000的暗黑模式背景。
- 不要使用小写标题——截图显示巨大的大写排版。
- 不要使用圆角卡片——截图显示卡片为锐利的90度直角。
- 不要使用柔和、低饱和度的颜色——截图显示高对比度配色方案，带有醒目的粉红色点缀。
- 不要将所有文本居中——截图显示正文为左对齐，导航元素为右对齐。
- 避免: 友好或随意的语言。
- 避免: 圆润、柔和的形状。
- 避免: 复杂的渐变或投影。
- 避免: 杂乱的布局。
- 避免: 用于正文的衬线字体。
- 避免: 低饱和度的配色方案。
10
包内真实截图
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏抓自真实页面 · 真 computed styles
11
System Prompt
一款为专属红酒俱乐部设计的大胆、高对比度编辑式暗黑模式。关键十六进制颜色为#000000（背景）、#ffffff（墨色）和#fc3192（点缀色）。设计采用了怪诞无衬线和过渡衬线字体类别的组合。关键禁止事项：不要使用浅色背景，不要使用圆角卡片，不要使用小写标题。布局依赖于巨大、紧凑字距的排版以及纤细、高对比度的边框来定义结构和层次。
en · zh-CN · zh-TW · ja · ko