Interface Lab

Monochrome Editorial Portfoliov1.0 Published

16.9K

Monochrome Editorial Portfolio 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

Navigation & EntryPrimary NarrativeVisual Field & BackgroundContent / Data SurfaceAction Path

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

Interface Lab Skills

Border GradientssupportColors / Elevation