Bauhaus 包豪斯（Bauhaus）
Bauhaus is the visual language of the 1919–1933 German school that set out to unify art, craft, and industrial production: compositions are built from the primary shapes — circle, triangle, square — filled with unmixed primaries red, yellow, and blue against black and white, while headlines drop capital letters for Herbert Bayer's all-lowercase geometric alphabet. A century later it is still the default shorthand for geometric modernism in posters, logos, and landing pages.
包豪斯是 1919–1933 年德国那所设计学校的视觉语言，目标是统一艺术、工艺与工业生产：构图全部由基本几何形 —— 圆、三角、方 —— 搭建，填充不掺调的三原色红、黄、蓝，衬以黑白；标题则丢掉大写字母，改用 Herbert Bayer 式的全小写几何字母。一个世纪后，它仍是海报、Logo 和落地页里「几何现代主义」的默认代称。
Scope: Covers the Bauhaus look as it appears in graphic and UI design — primary-shape construction, a primaries-plus-ink palette, lowercase geometric type. It is not the whole of modernism: Swiss Style is the later grid-locked successor, and De Stijl shares the primaries but locks them into orthogonal black grids.
范围：本条覆盖平面与 UI 设计里的包豪斯面貌 —— 基本几何形构成、三原色加墨黑的配色、全小写几何字体。它不等于整个现代主义：瑞士国际主义风格是后来网格化的继任者；风格派（De Stijl）同样用三原色，但把它们锁进正交的黑色网格里。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Circle, triangle, square only只用圆、三角、方 geometry defining定义特征
Every decorative element is one of the three pure shapes — no blobs, stars, or freehand curves. Kandinsky's 1923 mapping still reads: yellow triangle, red square, blue circle.
每个装饰元素都是三种纯几何形之一 —— 没有 blob、星星或手绘曲线。康定斯基 1923 年的对应关系至今有效：黄三角、红方块、蓝圆形。
-
Primaries plus black and white三原色加黑白 color defining定义特征
Unmixed red (#e3000f), yellow (#ffd300) and blue (#0057a8) on paper white with ink black — flat opaque fills, no tints, no mid-greys, no gradients.
不掺调的红（#e3000f）、黄（#ffd300）、蓝（#0057a8）铺在纸白底上配墨黑 —— 扁平不透明填充，没有中间色、灰色或渐变。
-
All-lowercase geometric type全小写几何字体 typography defining定义特征
Headlines and labels run with text-transform: lowercase in a constructed geometric sans (Futura, Century Gothic) — Bayer's universal-alphabet gesture: capitals abolished, letters built from circles and straight strokes.
标题和标签用 text-transform: lowercase，配构造感几何无衬线（Futura、Century Gothic）—— 拜尔 universal 字体的姿态：废除大写，字母由圆和直线搭成。
-
Asymmetric diagonal tension不对称的对角张力 layout supporting辅助特征
Shapes overlap off-center and collide at angles — diagonal rules and unbalanced placement give the page constructivist energy instead of grid-locked calm.
几何形偏离中心地重叠、带着角度碰撞 —— 对角线和失衡的构图给页面构成主义的能量，而不是网格锁死的平静。
-
Ink bars and rules墨黑色条与细线 geometry supporting辅助特征
Solid black bars 4–8px thick and thin rules cut across and around the color shapes, acting as scaffolding and punctuation.
4–8px 粗的实心黑条和细线切割、穿插在彩色几何形之间，像脚手架，也像标点。
-
Flat matte color planes扁平哑光的色面 surface defining定义特征
Zero depth rendering: no shadows, glows, gradients, or textures — each shape is a single solid color with a hard edge.
零深度渲染：没有阴影、辉光、渐变或纹理 —— 每个形状都是一块边缘锐利的纯色。
-
Mechanical geometric motion机械式几何运动 motion variable可变特征
When things move, they translate or rotate on straight paths in 150–250ms with linear or crisp easing — machine-like, never springy.
要动就沿直线路径平移或旋转，150–250ms，linear 或干脆的缓动 —— 像机器零件，绝不回弹。
-
Ornament and soft depth装饰与软纵深 depth avoid避免
Drop shadows, cute rounded corners, gradients, serifs, or decorative flourishes break it instantly — in Bauhaus the construction is the only ornament.
投影、圆滚滚的可爱圆角、渐变、衬线或装饰性点缀会立刻破功 —— 包豪斯里，构成本身就是唯一的装饰。
Often confused with: Swiss Style最容易混淆：瑞士国际主义风格（Swiss / International Typographic Style）
Bauhaus包豪斯（Bauhaus）
Swiss Style (International Typographic Style)瑞士国际主义风格（Swiss / International Typographic Style）
This is Bauhaus because the layout is an expressive construction of pure circle, triangle and square in red, yellow and blue with all-lowercase geometric lettering — the composition itself performs, instead of an invisible grid organizing neutral content.
这是包豪斯，因为版面是一场由纯圆、纯三角、纯方块搭成的表现性构成，配红黄蓝和全小写几何字体 —— 是构图本身在表演，而不是一张隐形网格在组织中性的内容。
It would become Swiss Style if the shape play were replaced by documentary photography, the lettering went back to mixed-case neutral grotesk locked to a strict mathematical grid, and the palette drained to black, white and grey plus a single accent — objectivity replacing expression.
如果把几何构成换成纪实摄影，字体改回大小写混合的中性 grotesk 并锁进严格的数学网格，配色抽干到黑白灰加一处点缀色 —— 用客观取代表现 —— 就变成瑞士国际主义风格了。
Compare: Bauhaus vs Swiss Style (International Typographic Style) →对比页 →
In code — optional starting points代码写法 —— 可选起点
Palette + lowercase geometric type
:root{
--bauhaus-red:#e3000f; --bauhaus-yellow:#ffd300; --bauhaus-blue:#0057a8;
--bauhaus-ink:#141414; --bauhaus-paper:#f2eee3;
}
.bauhaus{
background:var(--bauhaus-paper); color:var(--bauhaus-ink);
font-family:"Futura","Century Gothic","Avenir Next",sans-serif;
text-transform:lowercase; /* bayer's universal alphabet: no capitals */
}The three shapes in pure CSS
.circle{ width:64px; height:64px; border-radius:50%; background:var(--bauhaus-blue); }
.square{ width:56px; height:56px; background:var(--bauhaus-red); }
.triangle{ width:0; height:0; border-left:32px solid transparent;
border-right:32px solid transparent; border-bottom:55px solid var(--bauhaus-yellow); }Same construction as utilities
lowercase font-sans bg-[#f2eee3] text-[#141414] — circle: rounded-full bg-[#0057a8]; triangle: w-0 h-0 border-x-[32px] border-x-transparent border-b-[55px] border-b-[#ffd300]Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Build the surface as a Bauhaus composition. Canvas: warm paper #f2eee3, ink #141414. Closed palette: red #e3000f, yellow #ffd300, blue #0057a8 — flat opaque fills only; no tints, gradients, shadows, or textures; corner radius 0–4px. Every decorative element is a pure circle, square, or CSS border-trick triangle (yellow triangle, red square, blue circle); overlap them asymmetrically with one or two diagonal ink bars 4–8px thick — the geometry is the only ornament. Type: constructed geometric sans (Futura, Century Gothic, Avenir Next; web: Jost/Montserrat); headlines/labels use text-transform: lowercase — never a capital; body copy may keep sentence case. Buttons are solid primary blocks with hard edges; hover swaps the fill to another primary, never adds depth. Motion is mechanical: translate/rotate on straight paths, 150–250ms, linear or crisp ease, no spring. Do not drift into Swiss Style: no documentary photography, no mixed-case grotesk on a strict grid, no drained monochrome palette. Keep 4.5:1 text contrast (ink on paper/yellow, paper on red/blue) and a visible focus outline.
按包豪斯构成来搭建这个界面。画布：暖纸白 #f2eee3，墨黑 #141414。封闭配色：红 #e3000f、黄 #ffd300、蓝 #0057a8 —— 只用扁平不透明填充；不要中间色、渐变、阴影或纹理；圆角保持 0–4px。每个装饰元素都是纯粹的圆、方块或 CSS border 技巧三角（黄三角、红方块、蓝圆形）；让它们不对称地重叠，再加一两条 4–8px 粗的对角墨黑色条 —— 几何本身就是唯一的装饰。字体：构造感几何无衬线（Futura、Century Gothic、Avenir Next；Web 上用 Jost/Montserrat）；标题/标签用 text-transform: lowercase —— 绝不出现大写字母；正文可以保留正常大小写。按钮是硬边的实心原色块；hover 把填充换成另一个原色，绝不加纵深。动效是机械式的：沿直线路径平移/旋转，150–250ms，linear 或干脆的缓动，不要弹簧。不要滑向瑞士国际主义风格：不要纪实摄影，不要严格网格上大小写混合的中性 grotesk，不要抽干的黑白灰配色。文字对比度保持 4.5:1（纸白/黄底上用墨黑；红/蓝底上用纸白），焦点框要可见。
Accessibility & misuse可访问性与误用
Red-on-blue and blue-on-red pairings vibrate and fall well below 4.5:1 — never set text or small functional shapes in one primary on another. Ink on paper and on yellow passes easily; paper-white on red (#e3000f) or blue (#0057a8) must be measured per combination. Yellow on white fails badly: reserve yellow for shapes, never for text or thin icons.
红配蓝、蓝配红会视觉震颤，对比度也远低于 4.5:1 —— 永远别把文字或小的功能性形状用一种原色压在另一种原色上。墨黑配纸白、墨黑配黄轻松达标；纸白配红（#e3000f）或蓝（#0057a8）必须逐组实测。黄配白惨不忍睹：黄色只留给形状，别用它写字或画细图标。
All-lowercase headlines remove the word-shape cues that mixed case provides — acceptable for short display lines, but keep body copy, form labels, and anything longer than a phrase in sentence case, and build hierarchy with size and weight rather than relying on capitals.
全小写标题抹掉了大小写混合所提供的词形线索 —— 短展示行可以接受，但正文、表单标签和任何超过一个短语的文字都要用正常大小写，并用字号和字重来拉开层级，而不是依赖大写。
Overlapping saturated shapes and diagonal layouts raise cognitive load and can mask interaction order: give every interactive element a visible focus outline (2–3px ink with offset), never communicate state by primary color alone — pair it with a shape or icon change — and honor prefers-reduced-motion for any rotating or sliding geometry.
重叠的饱和色形和对角构图会抬高认知负荷、掩盖交互顺序：给每个可交互元素一个可见的焦点框（2–3px 墨黑 outline 加 offset），别只靠原色变化传达状态 —— 要同时改变形状或图标 —— 任何旋转或滑动的几何动效都要响应 prefers-reduced-motion。
Origin起源
The Staatliches Bauhaus was founded in Weimar in 1919 by architect Walter Gropius, merging the city's art academy and crafts school to unite art, craft, and industrial production; it moved to Dessau in 1925 and Berlin in 1932 before closing in 1933 under Nazi pressure. Wassily Kandinsky and Paul Klee taught its formal grammar — Kandinsky's 1923 questionnaire fixed the yellow triangle, red square, and blue circle — while Herbert Bayer's 1925 'universal' alphabet pushed the all-lowercase geometric lettering. After the closure its masters emigrated — Gropius to Harvard, László Moholy-Nagy to found Chicago's New Bauhaus in 1937 — turning a fourteen-year school into the world's default modernist vocabulary.
国立包豪斯学校（Staatliches Bauhaus）1919 年由建筑师 Walter Gropius 在魏玛创立，合并了当地的美术学院与工艺学校，目标是统一艺术、工艺与工业生产；1925 年迁往德绍，1932 年迁往柏林，1933 年在纳粹压力下关闭。Wassily Kandinsky 与 Paul Klee 在那里教授形式语法 —— 康定斯基 1923 年的问卷确定了黄三角、红方块、蓝圆形的对应关系 —— Herbert Bayer 1925 年的 universal 字体则把全小写几何字母推成了标志。学校关闭后大师们流亡 —— 格罗皮乌斯去了哈佛，László Moholy-Nagy 1937 年在芝加哥创办新包豪斯 —— 把这所只存在了十四年的学校，变成了全世界默认的现代主义词汇表。