Mid-Century Modern 中世纪现代风格（Mid-Century Modern）
Mid-Century Modern is the post-war design language of the 1940s–1960s translated to screens: warm, optimistic, and deliberately human after decades of ornament and austerity. It pairs clean geometric construction with organic boomerang-and-starburst shapes, sets them on walnut-and-cream grounds with mustard, avocado, burnt orange and teal accents, and holds the layout in asymmetrical balance rather than mirror symmetry. The type is a friendly geometric sans — Futura, Avant Garde, Century Gothic — with medium weight and airy spacing, never gilded all-caps. Revived constantly for lifestyle brands and editorial UI, it reads like a well-designed living room: ordered but never cold.
中世纪现代风格是把 1940–1960 年代战后设计语言搬到屏幕上：在过度装饰与紧缩之后，它温暖、乐观、刻意保持人情味。它把干净的几何构造和有机的回旋镖、星爆形结合在一起，放在胡桃木与奶咖底色上，点缀芥末黄、牛油果绿、焦橙和蓝绿色，并用非对称平衡而非镜像对称来组织版面。字体是友好的几何无衬线 —— Futura、Avant Garde、Century Gothic —— 中等字重、宽松的间距，绝不是镀金全大写。它常被生活方式品牌和编辑式 UI 复兴，读起来像一间设计精良的客厅：有序，但不冷。
Scope: This entry covers the visual style as a UI and branding skin — the post-war American and Scandinavian furniture/graphic look of c. 1945–1969. The actual furniture movement and its individual designers are background context; 'Mid-Century Modern' as an applied UI style should not be reduced to generic retro pastiche.
范围：本条覆盖中世纪现代风格作为 UI 和品牌皮肤的样貌 —— 约 1945–1969 年美国和斯堪的纳维亚的家具/平面视觉。具体的家具运动及其设计师属于背景信息；作为应用 UI 风格的「中世纪现代」不应被简化为泛泛的复古拼贴。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Warm earth palette暖调大地色盘 color defining定义特征
Muted mustard #e5a532, avocado #8fa15a, burnt orange #c65d26 and teal #3c7a89 on cream #f4efe6 or oatmeal #e8e1d5. The palette is low-contrast and warm; jewel tones on black belong to Art Deco.
芥末黄 #e5a532、牛油果绿 #8fa15a、焦橙 #c65d26、蓝绿 #3c7a89 铺在奶咖 #f4efe6 或燕麦 #e8e1d5 上。色盘低对比、偏暖；黑底上的宝石色属于装饰艺术。
-
Organic geometry有机几何 geometry defining定义特征
Boomerangs, amoebas, elongated ellipses, starbursts and tapered angles replace pure circles and squares. The shapes feel machine-made but biomorphic — not the rigid stepped ziggurats of Art Deco.
回旋镖、阿米巴形、拉长椭圆、星爆和尖角取代纯粹的圆和方。形状看起来像机器制造却带有生物形态 —— 不是装饰艺术那种僵硬的阶梯金字塔。
-
Asymmetrical balance非对称平衡 layout defining定义特征
Composition is off-center: a large panel left, a small block upper right, balanced by whitespace and color weight rather than a vertical mirror axis. Symmetry instantly reads as Deco or classical.
构图偏置：左侧大块面板，右上角小方块，靠留白和色彩重量平衡，而不是沿垂直中轴镜像。对称会立刻读成装饰艺术或古典风格。
-
Clean geometric type干净几何字体 typography defining定义特征
Headings and labels in a geometric sans — Futura, Avant Garde, Century Gothic, Jost — medium weight, mixed case, letter-spacing 0.05–0.12em. Not all-caps, not serif, not grotesk-neutral.
标题和标签使用几何无衬线 —— Futura、Avant Garde、Century Gothic、Jost —— 中等字重、大小写混排、字间距 0.05–0.12em。不要全大写、不要衬线、不要中性 grotesk。
-
Atomic starburst motif原子星爆纹样 imagery defining定义特征
Atomic starbursts or sun rays radiate from a center, drawn as thin strokes 1–2px wide in brass or walnut. The motif is decorative seasoning, not structural frame.
原子星爆或太阳光芒从中心向外放射，以黄铜或胡桃木色的 1–2px 细线绘制。纹样是装饰点缀，不是结构性的边框。
-
Walnut and cream ground胡桃木与奶咖底色 color supporting辅助特征
The ground is warm neutral — paper cream #f4efe6, oatmeal #e8e1d5, or a light woodgrain texture in tan and walnut. Pure white or cool grey drains the warmth.
底色是暖中性色 —— 纸奶咖 #f4efe6、燕麦 #e8e1d5，或浅木纹质感的棕褐色与胡桃色。纯白或冷灰会抽走暖意。
-
Tapered hairpin supports尖细发夹支撑 geometry supporting辅助特征
UI cards and controls sit on thin angled 'legs' or splayed stems — 2–4px lines at 60–75° — giving the low-slung, furniture-like profile of the era.
UI 卡片和控件落在细长的「腿」或分叉的支架上 —— 2–4px 的线以 60–75° 倾斜 —— 营造出那个时代低矮的家具轮廓。
-
Gilded lacquer symmetry镀金漆器对称 typography avoid避免
Mirror symmetry, black lacquer, gold gradients and all-caps gilded lettering are Art Deco's signature; they override MCM's lighter, off-center warmth.
镜像对称、黑漆底色、金色渐变和全大写镀金字体是装饰艺术的标志；它们会覆盖中世纪现代的轻盈与偏置暖意。
Often confused with: Art Deco最容易混淆：装饰艺术（Art Deco）
Mid-Century Modern中世纪现代风格（Mid-Century Modern）
Art Deco装饰艺术（Art Deco）
This is Mid-Century Modern because the geometry is warm and organic — boomerangs, amoebas and starbursts on cream or woodgrain — and the layout is off-center and balanced rather than mirror-symmetrical; the metal is matte brass or walnut, not gilded luxury.
这是中世纪现代风格，因为它的几何形状温暖而有机 —— 奶咖或木纹上的回旋镖、阿米巴和星爆 —— 版面偏置平衡而非镜像对称；金属是哑光黄铜或胡桃木，不是镀金的奢华。
It would become Art Deco if the palette shifted to black lacquer and gold, the layout locked to a strict vertical mirror axis, and the lettering went all-caps with gilded gradient strokes.
如果色盘变成黑漆与金色，版面锁定在严格的垂直中轴上，字体也改成全大写并加上镀金渐变描边，就变成装饰艺术了。
In code — optional starting points代码写法 —— 可选起点
Warm MCM palette and geometric type
:root {
--mcm-cream: #f4efe6;
--mcm-walnut: #5c3a21;
--mcm-mustard: #e5a532;
--mcm-avocado: #8fa15a;
--mcm-orange: #c65d26;
--mcm-teal: #3c7a89;
}
.mcm {
background: var(--mcm-cream);
color: var(--mcm-walnut);
font-family: Futura, 'Avant Garde', 'Century Gothic', Jost, sans-serif;
}Atomic starburst motif
.starburst {
width: 96px; height: 96px;
background: repeating-conic-gradient(
from 0deg at 50% 50%,
transparent 0deg 8deg,
var(--mcm-mustard) 8deg 10deg
);
border-radius: 50%;
}Geometric heading utility
font-medium tracking-wide text-[#5c3a21] font-['Futura','Avant_Garde','Century_Gothic',Jost,sans-serif]Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Build the surface as Mid-Century Modern. Canvas: warm cream #f4efe6 or oatmeal #e8e1d5; text in walnut brown #5c3a21. Accent palette: mustard #e5a532, avocado #8fa15a, burnt orange #c65d26, teal #3c7a89 — flat or very subtle gradients, never metallic gold. Layout: asymmetrical balance, not mirror symmetry; place a large content panel left and a smaller block upper right, tied together by generous whitespace. Geometry: use boomerangs, elongated ellipses, amoebas and atomic starbursts (repeating-conic-gradient thin rays) as decoration; controls can sit on thin angled stems 2–4px at 60–75° to evoke hairpin legs. Typography: geometric sans (Futura, Avant Garde, Century Gothic, Jost), medium weight, mixed case, letter-spacing 0.05–0.12em; headings may be larger, never all-caps gilded. Buttons: flat fills with rounded corners 8–14px, hover swaps accent color. Depth: no drop shadows or 1px hairline gold frames; depth comes from overlapping flat color shapes. Motion: gentle ease transitions 250–350ms; avoid bounce. Do not drift into Art Deco: no black lacquer, no gold gradients, no strict symmetry, no all-caps display lettering. Maintain 4.5:1 contrast for walnut text on cream and use accent text only at large sizes.
按中世纪现代风格（Mid-Century Modern）创建这个界面。画布：暖奶咖 #f4efe6 或燕麦 #e8e1d5；文字用胡桃棕 #5c3a21。强调色：芥末黄 #e5a532、牛油果绿 #8fa15a、焦橙 #c65d26、蓝绿 #3c7a89 —— 平涂或极淡渐变，不要金属金。版面：非对称平衡，不要镜像对称；左侧放大型内容面板，右上角放小方块，用大量留白串联。几何：用回旋镖、拉长椭圆、阿米巴和原子星爆（repeating-conic-gradient 细射线）做装饰；控件可以坐在 2–4px、60–75° 的细斜线上，模拟发夹腿。字体：几何无衬线（Futura、Avant Garde、Century Gothic、Jost），中等字重，大小写混排，字间距 0.05–0.12em；标题可以更大，不要全大写镀金。按钮：平涂填充，圆角 8–14px，悬停时换强调色。纵深：不要投影或 1px 金色细线边框；纵深来自重叠的平涂色块。动效：柔和的 ease 过渡 250–350ms，不要回弹。不要滑向装饰艺术：没有黑漆、没有金色渐变、没有严格对称、没有全大写展示字体。保证奶咖底上的胡桃棕文字达到 4.5:1，强调色文字只用在大尺寸上。
Accessibility & misuse可访问性与误用
Walnut #5c3a21 on cream #f4efe6 passes 4.5:1 comfortably, but the accent palette — mustard #e5a532, avocado #8fa15a and burnt orange #c65d26 — sits close to the ground and can fall below the threshold for small text. Use those colors for large display type, icons and decorative shapes only, and keep functional text in walnut or teal #3c7a89.
胡桃棕 #5c3a21 在奶咖 #f4efe6 上能轻松过 4.5:1，但强调色 —— 芥末黄 #e5a532、牛油果绿 #8fa15a、焦橙 #c65d26 —— 与底色接近，小字号时可能低于阈值。把这些颜色留给大标题、图标和装饰形状，功能性文字用胡桃棕或蓝绿 #3c7a89。
Geometric sans type with wide tracking can fragment word shapes and slow reading for dyslexic and low-vision users. Reserve loose letter-spacing for short headings and labels; set body copy with normal spacing and mixed case, and avoid all-caps blocks entirely.
几何无衬线配宽字间距会打散词形，给阅读障碍和低视力用户增加负担。宽松字间距只用于短标题和标签；正文用正常间距和大小写混排，并且完全避免全大写块。
Atomic starbursts and busy boomerang patterns can produce visual vibration and distract from content; keep decorative layers at low opacity, mark them aria-hidden when they are purely ornamental, and stop any rotating or pulsing animation under prefers-reduced-motion. Every interactive element needs a visible focus outline that does not rely on color alone.
原子星爆和复杂的回旋镖纹样可能产生视觉颤动、干扰内容；装饰层保持低透明度，纯装饰时标记 aria-hidden，并在 prefers-reduced-motion 下停止任何旋转或脉冲动画。每个可交互元素都需要一个不靠颜色 alone 的可见焦点轮廓。
Origin起源
The style grew out of the post-World War II boom, roughly 1945–1969, as American and Scandinavian designers combined Bauhaus discipline with organic, mass-producible forms. In the United States, Charles and Ray Eames, Eero Saarinen and George Nelson shaped the Herman Miller look; in Denmark and Finland, Arne Jacobsen and Alvar Aalto brought in warm woods and human proportions. The term itself was coined later by Cara Greenberg in her 1984 book 'Mid-Century Modern: Furniture of the 1950s'. In UI it survives as a shorthand for warm, optimistic retro-modernism.
这种风格诞生于二战后的繁荣期，约 1945–1969 年，美国和斯堪的纳维亚设计师把包豪斯的纪律性与有机、可批量生产的形式结合起来。在美国，Charles 与 Ray Eames、Eero Saarinen 和 George Nelson 塑造了 Herman Miller 的面貌；在丹麦和芬兰，Arne Jacobsen 与 Alvar Aalto 引入了温暖的木材和人性化比例。这个名称本身要晚一些，由 Cara Greenberg 在 1984 年的著作《Mid-Century Modern: Furniture of the 1950s》中创造。在 UI 中，它作为温暖、乐观的复古现代主义代名词延续至今。