极简单色Minimalist Monochrome
只有黑白，没有阴影与圆角，靠 1/2/4px 的黑线分级，按下即反色。极致的克制带来极强的排版存在感。
典型场景阅读应用 · 高级时装 · 编辑型产品
效果示例
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
只有黑白，没有阴影与圆角，靠 1/2/4px 的黑线分级，按下即反色。极致的克制带来极强的排版存在感。
关键词
效果与动效
Instant inversion active state (tap → bg-black text-white, zero transition-none), no shadows (strictly 2D), full-bleed horizontal rules (4px black section dividers), subtle paper noise texture (opacity: 0.03), slide-in page transitions with hard edge
设计系统变量
--color-bg#FFFFFF--color-fg#000000--color-muted#F5F5F5--color-muted-fg#525252--color-border#000000--color-border-light#E5E5E5--radius0px--shadownone--border-hairline1px solid #E5E5E5--border-thin1px solid #000000--border-thick2px solid #000000--border-heavy4px solid #000000--font-displayPlayfair Display--font-bodySource Serif 4--font-monoJetBrains Mono配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Pure Black #000000, Pure White #FFFFFF
辅色 / Secondary
Muted #F5F5F5, Dark Gray #525252, Border Light #E5E5E5
强调色在页面底色上的对比度约 21.0:1，可用于正文与图标。
适用场景
适合 / Best For
- Luxury fashion e-commerce mobile
- editorial publications
- high-end portfolio apps
- experimental/avant-garde brands
- digital exhibitions
避开 / Do Not Use For
- Entertainment
- colorful brands
- friendly consumer apps
- anything requiring visual warmth or gradient
框架兼容
能力矩阵
实现要点
落地清单
- 0px border-radius on ALL elements,
- No shadows anywhere,
- Instant inversion on every tap (transition-none),
- 4px black line separates hero from content,
- Safe area respected (pt-safe pb-safe),
- h-14 touch targets,
- Sticky section headers with border-b,
- Typography hero: word spans full screen width,
- Paper noise texture on backgrounds,
- Menu word-label instead of icon
CSS / 技术关键词
border-radius: 0px (ALL elements including modals), box-shadow: none, active:bg-black active:text-white transition-none, border-b-4 border-black (section dividers), divide-y divide-black (lists), font-family: Playfair Display (headers) + Source Serif 4 (body) + JetBrains Mono (labels), background-image: noise SVG opacity-[0.03]
AI 提示词
Design a Minimalist Monochrome mobile interface using monochrome, black white, editorial, austere, typographic, sharp, zero radius, high contrast. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.