← OpenDesign
CURATED · OPEN · FREE
Nothing
A stark, monochromatic aesthetic centered on typographic precision and high-contrast UI elements.
hardware product
01
Identity DNA
minimalist technical premium monochromatic dot-matrix
a high-precision technical blueprint or a luxury industrial component
02
Color
#000000Ink
#585A5AInk soft
#F5F5F5BG
#FFFFFFBG soft
#E5E7EBMuted
rgba(229,231,235,1)Line
High-contrast monochrome with a strict adherence to a neutral gray scale.
03
Typography
geometric-serif · grotesque-sans · dot-matrix
display-large 40px · 400display-medium 24px · 400body 16px · 400caption 11px · 400
04
Spacing
4px
8px
16px
24px
32px
48px
64px
96px
Standard 4px base grid
05
Surfaces
sm · 6px
md · 8px
lg · 12px
pill · 9999px
1px solid #E5E7EB
0px 0px 0px 1px rgba(229,231,235,1)
06
Layout
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
Modal centered vertically and horizontally with generous padding.
07
Motion & Interaction
100ms micro
200ms small
400ms medium
cubic-bezier(0.4, 0, 0.2, 1) easing
Fade in/out with opacity · Subtle transform on hover
Opacity or subtle transform changes on interactive elements. · Standard pointer cursor on all clickable elements.
08
Components
button Primary: Black filled pill with white text. Secondary: Text with a 1px solid underline. card Modal container with a subtle 1px border and pill-shaped buttons. chip Text-based labels with standard sans-serif styling. input Minimalist text inputs with clean lines. hero Centered, vertically stacked layout dominated by display typography.
09
Voice & Don'ts
Tone Informative and direct. Headlines Short, all-caps statements. CTAs Clear, action-oriented, uppercase. don't use rounded containers — screenshot shows pill-shaped buttons (radius: 9999px) and slightly rounded modal corners (6px-8px). don't use multiple colors — screenshot shows a strictly monochrome palette of black, white, and a single neutral gray. don't use decorative sans-serif fonts — screenshot shows a geometric serif for display and a standard grotesque sans for body. don't use heavy drop shadows — screenshot shows subtle borders or very soft, diffuse shadows for depth. don't use centered text for long paragraphs — screenshot shows strictly centered short-form UI copy. don't use lowercase for primary CTAs — screenshot shows all-caps for buttons and display text. Avoid: Ambiguous phrasing Avoid: Overly friendly or casual language Avoid: Complex sentences
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 minimalist, high-contrast design system for a premium hardware brand. Key colors are pure black (#000000) and a light neutral gray (#F5F5F5). Typography uses a geometric serif for display and a clean grotesque sans for body. Critical donts: avoid colorful accents, don't use complex shadows, and never use lowercase for CTAs. The layout is strictly centered and monochromatic.
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: A strong example of technical minimalism, stripping away all non-essential visual noise.