Monochrome Editorial 作品集v1.0 已发布
16.9K
Monochrome Editorial 作品集 Design System本页面为高端编辑类作品集，面向追求极致美学与专业深度的受众。核心体验是通过纯黑白的色彩、戏剧性的衬线字体排版、锐利的几何线条和大量的留白，营造出如同翻阅顶级时尚杂志或建筑专著般的沉浸感。
Typography
Heading systemPlayfair Display / 48px / 600 / - / -Body systemPlayfair Display / 14px / 400 / - / -Playfair Display
LettersAa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk LlNumbers01 02 03 04 05 06 07 08 09
Colors
Primary#000000

50% usage signal

Secondary#FFFFFF

38% usage signal

Tertiary#F5F5F5

6% usage signal

Neutral#E5E5E5

6% usage signal

linear-gradient(to bottom, transparent, transparent 3px, rgba(0,0,0,0.03) 3pxlinear-gradient(to right, rgba(0,0,0,0.03) 1pxlinear-gradient(to bottom, rgba(0,0,0,0.03) 1pxlinear-gradient(to right, transparent, transparent 19px, rgba(255,255,255,0.05) 19px
Layout
LayoutLayeredWidthFull BleedGridMinimalFramingGradient shell
导航与入口主叙事区视觉场与背景层内容/数据表面行动路径
Buttons
Product
Icons
Linear所有元素圆角为 0px，锐利 90 度角。
Elevation & Depth

无阴影。深度通过色彩反转、边框粗细变化、比例对比和负空间创造。

Gradient surfacesGradient surfaces
Surface sampleGradient shell
SurfaceGradient shellBorder1px solid currentColor / low opacityShadow0 25px 50px rgba(0,0,0,.35)Blur12px
Shapes

所有元素圆角为 0px，锐利 90 度角。

6pxradius-19999pxradius-2
Card surfaceInput fieldStatus pill
Do's and Don'ts

Use these constraints as design lint rules for future generations.

Do✅ 使用纯黑 (#000) 和纯白 (#FFF)✅ 使用衬线字体作为主要视觉元素✅ 使用线条和边框构建结构✅ 保持锐利 90 度角
Don't
UI Design Lab Skills
边框渐变SupportColors / Elevation