← OpenDesign CURATED · OPEN · FREE
Postfamiliar
Bold, high-contrast dark mode editorial for an exclusive wine club.
Editorial Dark Mode Typography Premium Curation
01
Identity DNA
Curated Exclusive Bold Minimal Editorial
A high-end, exclusive wine club magazine with a brutalist edge.
02
Color
#fc3192Accent
#ffffffInk
#000000BG
#888888Muted
rgba(255, 255, 255, 1)Line
Strict high-contrast monochrome with a single vibrant pink accent.
03
Typography
grotesque-sans · monospace
display 230px · 400heading 70px · 400subhead 46px · 400body 16px · 400label 20px · 400Uppercase text used extensively for headlines and buttons. · Tight tracking on large display text.
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
144px
Vertical rhythm established through consistent padding and gap multiples.
05
Surfaces
sm · 4px
md · 16px
lg · 50px
pill · 999px
High-contrast 2px solid white or black borders define all interactive elements.
06
Layout
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
Centered, full-screen hero with a fixed-width content column.
07
Motion & Interaction
220ms micro
300ms small
400ms medium
cubic-bezier(0.25, 1, 0.5, 1) easing
Opacity transitions for reveals. · Transform transitions for hover states.
Invert colors or change border color to pink. · Immediate visual feedback via scale or opacity.
08
Components
button Pill-shaped, transparent fill with a 2px solid white border. card Square with sharp corners, defined by a 2px solid white border. chip Minimal text labels, often uppercase with wide tracking. input Pill-shaped with a 2px solid white border. hero Full-screen, high-contrast typographic hero with massive display text. 09
Voice & Don'ts
Tone Authoritative, exclusive, and minimalist. Headlines Massive, bold, uppercase sans-serif. CTAs Direct, uppercase, pill-shaped buttons. don't use drop shadows — screenshot shows elements defined by 2px solid borders instead. don't use a light background — screenshot shows a solid #000000 dark mode background. don't use lowercase headlines — screenshot shows massive uppercase typography. don't use rounded card corners — screenshot shows sharp, 90-degree corners on cards. don't use muted, desaturated colors — screenshot shows a high-contrast palette with a vibrant pink accent. don't use centered text for everything — screenshot shows left-aligned body copy and right-aligned navigation elements. Avoid: Friendly or casual language. Avoid: Rounded, soft shapes. Avoid: Complex gradients or drop shadows. Avoid: Cluttered layouts. Avoid: Serif fonts for body text. Avoid: Desaturated color palettes. 10
Inside the pack — real screenshots
桌面首屏（hero） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 桌面滚动分段（90% viewport 步进，作为视觉证据） 移动首屏 Captured from the live site · real computed styles
11
System prompt
A bold, high-contrast dark mode editorial design for an exclusive wine club. Key hex colors are #000000 (background), #ffffff (ink), and #fc3192 (accent). The design uses a combination of grotesque-sans and transitional-serif font categories. Critical donts: Do not use light backgrounds, do not use rounded card corners, do not use lowercase headlines. The layout relies on massive, tight-tracked typography and thin, high-contrast borders to define structure and hierarchy.
More from the library en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
Why we curated this: This design is a strong example of a bold, editorial dark mode aesthetic that uses typography and contrast as its primary visual drivers.
