De Stijl 风格派（De Stijl / 新造型主义 / 蒙德里安风格）
De Stijl is the Dutch abstract movement that reduced painting and design to a strict grammar of horizontal and vertical black lines enclosing rectangles of red, yellow, and blue on a white ground. Every curve, diagonal, and representational reference is rejected; balance is achieved asymmetrically by shifting the weight of color blocks across an invisible orthogonal grid. The look is inseparable from Piet Mondrian's mature Neo-Plasticist canvases and from Theo van Doesburg's magazine and architectural projects of 1917–1931.
风格派（De Stijl）是一场荷兰抽象运动，把绘画与设计压缩成一套严格语法：水平与垂直的黑线框住白色底上的红、黄、蓝矩形。一切曲线、对角线、再现性参照都被排除；平衡靠色块在隐形正交网格上的非对称位移来实现。这种外观与 Piet Mondrian 成熟的新造型主义画布，以及 Theo van Doesburg 在 1917–1931 年间的杂志与建筑项目密不可分。
Scope: This entry covers the De Stijl look as it appears in graphic and UI design — the black-grid, primary-rectangle, no-curve vocabulary. It is not the whole of Dutch modernism; Constructivism shares the geometric spirit but adds diagonals and industrial imagery, while Bauhaus shares the primaries but freely uses circles, triangles, and all-lowercase type.
范围：本条覆盖风格派在平面与 UI 设计中的样貌——黑网格、原色矩形、零曲线语汇。它不是荷兰现代主义的全部；构成主义共享几何精神，但加入对角线与工业意象，而包豪斯共享三原色，却自由使用圆、三角与全小写几何字体。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Horizontal and vertical black grid水平与垂直的黑网格 geometry defining定义特征
The composition is held together by straight black lines running only at 0° and 90° — no diagonals, no curves. Lines are usually 2–4px thick and act as both structure and edge.
构图只由 0° 和 90° 的黑色直线维系，没有对角线、没有曲线。线通常粗 2–4px，同时充当结构与边界。
-
Rectangles only只使用矩形 geometry defining定义特征
Every colored or outlined shape is a rectangle. Circles, triangles, blobs, icons, and rounded corners are excluded — right angles are the only geometry.
所有有色或描边的形状都是矩形。圆、三角、流体形、图标、圆角都被排除——直角是唯一的几何语言。
-
Primaries plus black and white三原色加黑与白 color defining定义特征
The palette is locked to unmixed red, yellow, and blue on a white ground, bounded by black lines. No gradients, no tints, no greys, no expanded palette.
调色板严格锁定为未调和的红、黄、蓝，衬以白色底、黑色线。没有渐变、没有色调、没有灰色、没有扩展色。
-
Asymmetric equilibrium非对称平衡 layout defining定义特征
Large color blocks on one side of the canvas are offset by clusters of smaller blocks or denser black lines on the other — balance without mirror symmetry.
画面一侧的大色块由另一侧的小色块簇或更密的黑线来抵消——平衡不靠镜像对称，而靠视觉重量的非对称分布。
-
Flat matte planes扁平哑光色块 surface defining定义特征
All fills are opaque, flat, and texture-free. Shadows, glows, gradients, glass, and depth effects would break the Neo-Plasticist discipline.
所有填充都不透明、平涂、无纹理。阴影、辉光、渐变、玻璃或纵深效果都会打破新造型主义纪律。
-
Uniform ink line weight统一的墨线粗细 geometry supporting辅助特征
Grid lines keep a consistent thickness throughout the composition — typically 2–4px — so the rhythm of the rectangles reads as a single system.
网格线在整个构图中保持一致的粗细——通常 2–4px——让矩形的节奏读起来像同一个系统。
-
Every corner is 90°所有角都是 90° geometry supporting辅助特征
No rounded corners, chamfers, or arcs. The strictness of the right angle is part of the style's visual signature.
没有圆角、倒角或弧线。直角的严苛是这个风格的视觉签名之一。
-
Curves and diagonals曲线与对角线 geometry avoid避免
Any circle, triangle, slanted line, or organic shape immediately reads as Constructivist, Bauhaus, or Memphis rather than De Stijl.
任何圆、三角、斜线或有机形状都会立刻被读成构成主义、包豪斯或孟菲斯，而不是风格派。
Often confused with: Bauhaus最容易混淆：包豪斯（Bauhaus）
De Stijl风格派（De Stijl / 新造型主义 / 蒙德里安风格）
Bauhaus包豪斯（Bauhaus）
This is De Stijl because the vocabulary is strictly orthogonal: only horizontal and vertical black lines, only rectangles, no curves — Bauhaus would have introduced circles, triangles, and diagonals.
这是风格派，因为它的语汇严格正交：只有水平与垂直的黑线、只有矩形、零曲线——包豪斯则会引入圆、三角和对角线。
It would become Bauhaus if the black grid opened up to circles, triangles, and diagonal bars, and the type switched to all-lowercase geometric lettering.
如果黑网格开始容纳圆、三角和对角线，并且字体切换成全小写几何字体，它就变成包豪斯了。
In code — optional starting points代码写法 —— 可选起点
Palette and strict orthogonal grid variables
:root {
--stijl-red: #e3000f;
--stijl-yellow: #f9d71c;
--stijl-blue: #0057a8;
--stijl-ink: #0a0a0a;
--stijl-paper: #ffffff;
--stijl-line: 3px;
}
.stijl { background: var(--stijl-paper); font-family: 'Helvetica Neue', Arial, sans-serif; }Mondrian-style cell: a rectangle bounded by black borders
.stijl-cell {
border: var(--stijl-line) solid var(--stijl-ink);
border-radius: 0;
background: var(--stijl-paper);
}
.stijl-cell.red { background: var(--stijl-red); }
.stijl-cell.yellow { background: var(--stijl-yellow); }
.stijl-cell.blue { background: var(--stijl-blue); }Asymmetric composition with CSS Grid
.stijl-grid {
display: grid;
grid-template-columns: 2fr 1fr 1.5fr;
grid-template-rows: 1fr 1.2fr 0.8fr;
gap: var(--stijl-line);
background: var(--stijl-ink);
}
.stijl-grid > * { border: none; }Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Build the surface as De Stijl (Neo-Plasticism). Canvas: white #ffffff, ink lines #0a0a0a. Palette is restricted to three flat primaries — red #e3000f, yellow #f9d71c, blue #0057a8 — plus paper white; no gradients, shadows, tints, or textures. Every shape is a rectangle; every line is horizontal or vertical at 2–4px thick; border-radius must be 0px everywhere. Compose with CSS Grid or absolute positioning, using the black lines as both gap filler and bounding edges. Asymmetric balance is essential: place one large primary block off-center and counter it with a cluster of smaller blocks or denser black divisions on the opposite side. Type should be a neutral sans-serif (Helvetica Neue, Arial, or similar), sentence case, kept small and unobtrusive; avoid display fonts, all-lowercase geometric lettering, or ornament. Buttons are solid rectangles of red, yellow, or blue with 2–4px black borders; hover swaps the fill to another primary or to white, never adds depth or rounding. Motion, if any, is a hard cut or a linear translate along the horizontal/vertical axis; no easing curves, no fades, no rotation. Do not drift into Bauhaus: the moment you add circles, triangles, diagonals, or all-lowercase geometric type, you have left De Stijl. Preserve text contrast (ink on paper and yellow, paper on red/blue), visible focus outlines as black 2px offsets, and honor prefers-reduced-motion by removing any movement.
按风格派（De Stijl / 新造型主义）创建界面。画布：白色 #ffffff，墨线 #0a0a0a。调色板严格限制为三种平涂原色——红 #e3000f、黄 #f9d71c、蓝 #0057a8——外加纸白；禁止渐变、阴影、色调或纹理。每个形状都是矩形；每条线都是水平或垂直，粗细 2–4px；所有 border-radius 必须为 0px。用 CSS Grid 或绝对定位来构图，把黑线同时当作间隙填充和矩形边界。非对称平衡是关键：把一块大原色块放在偏离中心的位置，另一侧用小色块簇或更密的黑分割线来平衡。字体用中性无衬线（Helvetica Neue、Arial 或类似），句首大写，保持小而低调；避免展示字体、全小写几何字体或装饰。按钮是红/黄/蓝的实心矩形，带 2–4px 黑边框；hover 时把填充换成另一种原色或白色，绝不增加纵深或圆角。如需动效，只能用硬切或沿水平/垂直轴的线性平移；不要缓动曲线、不要淡入淡出、不要旋转。不要滑向包豪斯：一旦加入圆、三角、对角线或全小写几何字体，就不再是风格派。保持文字对比度（墨线在纸/黄上，纸白在红/蓝上），焦点框用 2px 黑色偏移 outline，并响应 prefers-reduced-motion 关闭所有移动。
Accessibility & misuse可访问性与误用
The strict black/white ground gives strong contrast, but primary-on-primary adjacencies — especially red next to blue — can vibrate and fail for users with color-vision differences. Never use color alone to indicate state; pair active elements with a shape change, a black border shift, or an extra grid line.
严格黑白底提供强对比，但原色相邻——尤其是红蓝并置——会产生振动，对色觉差异用户不友好。绝不要单独用颜色表示状态；需把激活态与形状变化、黑线位移或额外网格线配对。
Uniform thin grid lines can be hard to perceive or to target as interactive boundaries. Keep interactive elements (buttons, progress tracks, volume bars) large enough for touch — at least 44×44px — and give them a visible focus indicator that does not rely on the black grid alone.
统一的细网格线可能难以辨识，也难以作为可交互边界命中。保持交互元素（按钮、进度轨道、音量条）足够大——至少 44×44px——并给它们可见的焦点指示器，不要只依赖黑网格。
Asymmetric layouts raise cognitive load because the visual weight is deliberately off-balance. Keep labels and controls predictable in source order, avoid decorative rectangles that look actionable, and provide clear aria-labels on icon-only buttons.
非对称布局会提升认知负荷，因为视觉重量被刻意放偏。保持标签和控件在源码顺序中可预测，避免让装饰性矩形看起来像可操作项，并为纯图标按钮提供清晰的 aria-label。
Origin起源
De Stijl was founded in Amsterdam in 1917 by the painter and critic Theo van Doesburg, who launched the magazine De Stijl as the movement's mouthpiece; the painters Piet Mondrian and Bart van der Leck, the architect J.J.P. Oud, and the designer Vilmos Huszár were among its earliest contributors. Mondrian's mature 'Neo-Plasticist' canvases — red, yellow, and blue rectangles locked into white fields by black verticals and horizontals — became the style's public face, while Van Doesburg pushed the same grammar into architecture and typography. The magazine ceased publication in 1931, and the movement dissolved as its members diverged, but its reduction to pure form and primary color became one of the lasting reference points for modern graphic design.
风格派于 1917 年在阿姆斯特丹由画家兼批评家 Theo van Doesburg 创立，他创办了《De Stijl》杂志作为该运动的阵地；画家 Piet Mondrian、Bart van der Leck，建筑师 J.J.P. Oud，设计师 Vilmos Huszár 等人是最初的贡献者。Mondrian 成熟的「新造型主义」画布——红、黄、蓝矩形被黑色纵横线锁进白色场域——成为该风格最公众化的面孔，而 Van Doesburg 则将同一语法推进到建筑与字体设计。杂志于 1931 年停刊，运动也随着成员分歧而解散，但其对纯粹形式与原色的简化成为现代平面设计最持久的参照点之一。