Best For
中世纪 / 原子时代 / 有机曲线
中世纪现代
Mid-Century Modern
C
68/100Fair
1950s Atomic Age design aesthetics with geometric patterns, organic curves, and saturated colors. Inspired by Eames chairs, atomic clocks, and starburst motifs.
中世纪原子时代有机曲线星芒复古现代retrovintagenostalgic复古怀旧
Primary Move
Use saturated warm tones bg-[#e8572a] text-[#2a6e5e] paired with cream base bg-[#f5f0e1]
Watch Out
Do not use fluorescent or neon colors bg-pink-500 text-cyan-400
Showcase Entry
Live preview of the showcase page. Click to explore the full experience.
Color Palette
Primary
#e8572a
Secondary
#f5f0e1
Accent 1
#2a6e5e
Accent 2
#c4a35a
Prompts
Hard + Soft Prompts
Use one-click prompts to generate 中世纪现代 style UIs. Hard mode enforces strict constraints; soft mode keeps overall style direction while allowing flexibility.
Hard Prompt
Strict constraints for high style consistency
STYLEKIT_STYLE_REFERENCE
style_name: 中世纪现代
style_slug: mid-century-modern
style_source: /styles/mid-century-modern
# Hard Prompt
请严格遵守以下风格规则并保持一致性，禁止风格漂移。
## 执行要求
- 优先保证风格一致性，其次再做创意延展。
- 遇到冲突时以禁止项为最高优先级。
- 输出前自检：颜色、排版、间距、交互是否仍属于该风格。
## Style Rules
# Mid-Century Modern (中世纪现代) Design System
> 50年代原子时代设计美学，几何图案、有机曲线、饱和色彩。Eames椅、原子钟、星芒图案为灵感。
## 核心理念
Mid-Century Modern（中世纪现代主义）是20世纪40-60年代盛行的设计运动，诞生于战后乐观主义与太空时代的交汇点。它追求形式与功能的完美统一，相信好的设计应该服务于日常生活。
核心美学源自"有机现代主义"理念：几何形态与自然曲线的融合。椭圆、肾形、星芒、原子模型等图案反复出现，体现了那个时代对科学进步与自然和谐的双重信仰。
配色上偏爱饱和但不刺眼的暖色调——焦橙、芥末黄、橄榄绿、孔雀蓝——搭配奶油白和深炭灰的中性底色。这些颜色从自然界与现代材料中提取，既温暖又克制。
排版注重清晰与可读性，偏好无衬线字体，字重适中，间距宽松。标题往往采用大写加宽字距，正文则保持舒适的行高。
在界面设计中，Mid-Century Modern 强调留白、网格对齐与视觉层次。卡片和容器使用微妙的圆角（而非尖锐直角），阴影柔和克制，整体传达一种既复古又永不过时的优雅感。
---
## Token 字典（精确 Class 映射）
### 边框
```
宽度: border-2
颜色: border-[#3d3d3d]
圆角: rounded-lg
```
### 阴影
```
小: shadow-[2px_2px_0_#3d3d3d]
中: shadow-[4px_4px_0_#3d3d3d]
大: shadow-[6px_6px_0_#3d3d3d]
悬停: hover:shadow-[6px_6px_0_#3d3d3d]
聚焦: focus:shadow-[0_0_0_3px_rgba(232,87,42,0.15)]
```
### 交互效果
```
悬停位移: undefined
过渡动画: transition-all duration-200 ease-in-out
按下状态: active:translate-y-[2px]
```
### 字体
```
标题: font-sans font-bold tracking-wide uppercase
正文: font-sans
```
### 字号
```
Hero: text-5xl md:text-7xl lg:text-8xl
H1: text-3xl md:text-5xl
H2: text-2xl md:text-3xl
H3: text-lg md:text-xl
正文: text-sm md:text-base
小字: text-xs md:text-sm
```
### 间距
```
Section: py-16 md:py-24 lg:py-32
容器: px-6 md:px-12 lg:px-20
卡片: p-6 md:p-8
```
---
## [FORBIDDEN] 绝对禁止
以下 class 在本风格中**绝对禁止使用**，生成时必须检查并避免：
### 禁止的 Class
- `font-serif`
- `rounded-none`
- `rounded-full`
- `shadow-2xl`
- `bg-gradient-to-r`
- `bg-gradient-to-l`
- `bg-gradient-to-b`
- `bg-gradient-to-t`
- `bg-black`
- `bg-[#ff71ce]`
- `bg-[#01cdfe]`
- `bg-[#00ff00]`
- `text-[#ff71ce]`
- `text-[#01cdfe]`
### 禁止的模式
- 匹配 `^font-serif$`
- 匹配 `^rounded-(?:none|full)$`
- 匹配 `^shadow-2xl$`
- 匹配 `^bg-gradient-`
- 匹配 `^bg-(?:pink|cyan|lime)-`
- 匹配 `^text-(?:pink|cyan|lime)-`
### 禁止原因
- `font-serif`: Mid-Century Modern uses clean sans-serif typography (font-sans)
- `rounded-none`: MCM uses organic curves with medium rounding (rounded-lg, rounded-xl)
- `rounded-full`: MCM uses moderate rounding, not pill shapes
- `bg-gradient-to-r`: MCM uses flat solid color blocks, not gradients
- `bg-black`: MCM uses warm cream and charcoal, never pure black
> WARNING: 如果你的代码中包含以上任何 class，必须立即替换。
---
## [REQUIRED] 必须包含
### 按钮必须包含
```
rounded-lg
font-sans font-semibold uppercase tracking-wider
transition-all duration-200
```
### 卡片必须包含
```
rounded-xl
border-2 border-[#3d3d3d]
bg-[#f5f0e1]
```
### 输入框必须包含
```
rounded-lg
border-2 border-[#3d3d3d]/30
bg-white
text-[#3d3d3d]
font-sans tracking-wide
focus:border-[#e8572a]
focus:outline-none
```
---
## [COMPARE] 错误 vs 正确对比
### 按钮
[WRONG] **错误示例**（使用了圆角和模糊阴影）：
```html
<button class="rounded-lg shadow-lg bg-blue-500 text-white px-4 py-2 hover:bg-blue-600">
点击我
</button>
```
[CORRECT] **正确示例**（使用硬边缘、无圆角、位移效果）：
```html
<button class="rounded-lg font-sans font-semibold uppercase tracking-wider transition-all duration-200 bg-[#ff006e] text-white px-4 py-2 md:px-6 md:py-3">
点击我
</button>
```
### 卡片
[WRONG] **错误示例**（使用了渐变和圆角）：
```html
<div class="rounded-xl shadow-2xl bg-gradient-to-r from-purple-500 to-pink-500 p-6">
<h3 class="text-xl font-semibold">标题</h3>
</div>
```
[CORRECT] **正确示例**（纯色背景、硬边缘阴影）：
```html
<div class="rounded-xl border-2 border-[#3d3d3d] bg-[#f5f0e1] p-6 md:p-8">
<h3 class="font-sans font-bold tracking-wide uppercase text-lg md:text-xl">标题</h3>
</div>
```
### 输入框
[WRONG] **错误示例**（灰色边框、圆角）：
```html
<input class="rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500" />
```
[CORRECT] **正确示例**（黑色粗边框、聚焦阴影）：
```html
<input class="rounded-lg border-2 border-[#3d3d3d]/30 bg-white text-[#3d3d3d] font-sans tracking-wide focus:border-[#e8572a] focus:outline-none px-3 py-2 md:px-4 md:py-3" placeholder="请输入..." />
```
---
## [TEMPLATES] 页面骨架模板
使用以下模板生成页面，只需替换 `{PLACEHOLDER}` 部分：
### 导航栏骨架
```html
<nav class="bg-white border-b-2 md:border-b-4 border-black px-4 md:px-8 py-3 md:py-4">
<div class="flex items-center justify-between max-w-6xl mx-auto">
<a href="/" class="font-black text-xl md:text-2xl tracking-wider">
{LOGO_TEXT}
</a>
<div class="flex gap-4 md:gap-8 font-mono text-sm md:text-base">
{NAV_LINKS}
</div>
</div>
</nav>
```
### Hero 区块骨架
```html
<section class="min-h-[60vh] md:min-h-[80vh] flex items-center px-4 md:px-8 py-12 md:py-0 bg-{ACCENT_COLOR} border-b-2 md:border-b-4 border-black">
<div class="max-w-4xl mx-auto">
<h1 class="font-black text-4xl md:text-6xl lg:text-8xl leading-tight tracking-tight mb-4 md:mb-6">
{HEADLINE}
</h1>
<p class="font-mono text-base md:text-xl max-w-xl mb-6 md:mb-8">
{SUBHEADLINE}
</p>
<button class="bg-black text-white font-black px-6 py-3 md:px-8 md:py-4 border-2 md:border-4 border-black shadow-[4px_4px_0px_0px_rgba(255,0,110,1)] md:shadow-[8px_8px_0px_0px_rgba(255,0,110,1)] hover:shadow-none hover:translate-x-[2px] hover:translate-y-[2px] transition-all text-sm md:text-base">
{CTA_TEXT}
</button>
</div>
</section>
```
### 卡片网格骨架
```html
<section class="py-12 md:py-24 px-4 md:px-8">
<div class="max-w-6xl mx-auto">
<h2 class="font-black text-2xl md:text-4xl mb-8 md:mb-12">{SECTION_TITLE}</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
<!-- Card template - repeat for each card -->
<div class="bg-white border-2 md:border-4 border-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] md:shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] p-4 md:p-6 hover:shadow-[4px_4px_0px_0px_rgba(255,0,110,1)] md:hover:shadow-[8px_8px_0px_0px_rgba(255,0,110,1)] hover:-translate-y-1 transition-all">
<h3 class="font-black text-lg md:text-xl mb-2">{CARD_TITLE}</h3>
<p class="font-mono text-sm md:text-base text-gray-700">{CARD_DESCRIPTION}</p>
</div>
</div>
</div>
</section>
```
### 页脚骨架
```html
<footer class="bg-black text-white py-12 md:py-16 px-4 md:px-8 border-t-2 md:border-t-4 border-black">
<div class="max-w-6xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<span class="font-black text-xl md:text-2xl">{LOGO_TEXT}</span>
<p class="font-mono text-sm mt-4 text-gray-400">{TAGLINE}</p>
</div>
<div>
<h4 class="font-black text-lg mb-4">{COLUMN_TITLE}</h4>
<ul class="space-y-2 font-mono text-sm text-gray-400">
{FOOTER_LINKS}
</ul>
</div>
</div>
</div>
</footer>
```
---
## [CHECKLIST] 生成后自检清单
**在输出代码前，必须逐项验证以下每一条。如有违反，立即修正后再输出：**
### 1. 圆角检查
- [ ] 搜索代码中的 `rounded-`
- [ ] 确认只有 `rounded-none` 或无圆角
- [ ] 如果发现 `rounded-lg`、`rounded-md` 等，替换为 `rounded-none`
### 2. 阴影检查
- [ ] 搜索代码中的 `shadow-`
- [ ] 确认只使用 `shadow-[Xpx_Xpx_0px_0px_rgba(...)]` 格式
- [ ] 如果发现 `shadow-lg`、`shadow-xl` 等，替换为正确格式
### 3. 边框检查
- [ ] 搜索代码中的 `border-`
- [ ] 确认边框颜色是 `border-black`
- [ ] 如果发现 `border-gray-*`、`border-slate-*`，替换为 `border-black`
### 4. 交互检查
- [ ] 所有按钮都有 `hover:shadow-none hover:translate-x-[2px] hover:translate-y-[2px]`
- [ ] 所有卡片都有 hover 效果（阴影变色或位移）
- [ ] 都包含 `transition-all`
### 5. 响应式检查
- [ ] 边框有 `border-2 md:border-4`
- [ ] 阴影有 `shadow-[4px...] md:shadow-[8px...]`
- [ ] 间距有 `p-4 md:p-6` 或类似的响应式值
- [ ] 字号有 `text-sm md:text-base` 或类似的响应式值
### 6. 字体检查
- [ ] 标题使用 `font-black`
- [ ] 正文使用 `font-mono`
> CRITICAL: **如果任何一项检查不通过，必须修正后重新生成代码。**
---
## [EXAMPLES] 示例 Prompt
### 1. 复古家居品牌官网
原子时代风格的家居品牌展示页
```
用 Mid-Century Modern 风格创建一个家居品牌官网，要求：
1. 背景：奶油白 #f5f0e1
2. 标题：炭灰无衬线字体 + 宽字距
3. 装饰：星芒图案 + 有机曲线形状
4. 按钮：焦橙色 + 中等圆角
5. 整体温暖、均衡、留白充足
```
### 2. SaaS 着陆页
生成 中世纪现代风格的 SaaS 产品着陆页
```
Create a SaaS landing page using Mid-Century Modern style with hero section, feature grid, testimonials, pricing table, and footer.
```
### 3. 作品集展示
生成 中世纪现代风格的作品集页面
```
Create a portfolio showcase page using Mid-Century Modern style with project grid, about section, contact form, and consistent visual language.
```Soft Prompt
Flexible constraints for quick ideation
STYLEKIT_STYLE_REFERENCE
style_name: 中世纪现代
style_slug: mid-century-modern
style_source: /styles/mid-century-modern
# Soft Prompt
保持整体风格气质即可，允许实现细节灵活调整，但不要偏离核心视觉语言。
## Style Signals
- 中世纪
- 原子时代
- 有机曲线
- 星芒
- 复古现代
- retro
## Prefer
- 使用饱和暖色调 bg-[#e8572a] text-[#2a6e5e] 搭配奶油底 bg-[#f5f0e1]
- 使用中等圆角 rounded-lg rounded-xl 模拟有机曲线
- 使用宽松字距 tracking-wide tracking-wider 营造复古排版感
- 添加微妙柔和的阴影 shadow-md shadow-lg 增加层次
## Avoid
- 禁止使用荧光色或霓虹色 bg-pink-500 text-cyan-400
- 禁止使用衬线字体 font-serif 或手写字体
- 禁止使用渐变背景 bg-gradient-to-r 破坏平面色块感
## Output Guidance
- 先保证整体风格识别度，再优化细节。
- 避免过度炫技，保持可读性与可维护性。Component Templates
Component Preview
按钮
中世纪现代风格按钮
Global Styles
Global CSS
css
/* Mid-Century Modern 全局样式 */
:root {
--mcm-orange: #e8572a;
--mcm-cream: #f5f0e1;
--mcm-teal: #2a6e5e;
--mcm-gold: #c4a35a;
--mcm-charcoal: #3d3d3d;
}
/* 有机形状 */
.mcm-organic {
border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%;
}
/* 星芒装饰 */
.mcm-starburst {
background-image: conic-gradient(
from 0deg,
transparent 0deg 30deg,
rgba(196, 163, 90, 0.08) 30deg 33deg,
transparent 33deg 60deg
);
}
/* 复古分隔线 */
.mcm-divider {
height: 3px;
background: var(--mcm-orange);
border-radius: 999px;
max-width: 80px;
}
/* 卡片悬浮效果 */
.mcm-card-hover {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mcm-card-hover:hover {
transform: translateY(-4px);
box-shadow: 6px 6px 0 var(--mcm-charcoal);
}
/* 肾形容器 */
.mcm-kidney {
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
@keyframes mid-century-modern-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes mid-century-modern-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.mid-century-modern-card {
position: relative;
overflow: hidden;
}
.mid-century-modern-card::before {
content: "";
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.3s ease;
background: linear-gradient(135deg, rgba(232, 87, 42, 0.05), transparent);
pointer-events: none;
}
.mid-century-modern-card:hover::before {
opacity: 1;
}
.mid-century-modern-frosted {
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
background: rgba(232, 87, 42, 0.08);
}
.mid-century-modern-accent-corner {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}
.mid-century-modern-animate-in {
animation: mid-century-modern-fade-in 0.5s ease-out both;
}IDE Integration
IDE Config Export
Download config files for your AI coding assistant to generate code following this style.
Style Pack
Export Style Pack
Get the complete machine-readable style assets including Design Tokens, Tailwind presets, CSS variables, and shadcn/ui themes.
Metadata
Style metadata including version information
Design Tokens
Compatible with Figma / Style Dictionary / Tokens Studio
Tailwind Preset
Tailwind CSS theme preset, import directly in config
Global CSS
CSS variables and base styles
shadcn Theme
shadcn/ui theme configuration
CSS Variables
Pure CSS variables, works with any project
SKILL.md
Loadable skill pack for Cursor / Claude Code / VS Code
Design Philosophy
Mid-Century Modern is a design movement that flourished from the 1940s to 1960s, born at the intersection of post-war optimism and the Space Age. It pursues the perfect unity of form and function, believing that good design should serve everyday life.
Accessibility
Accessibility Score
WCAG 2.1 compliance analysis based on color contrast ratios and typography readability.
68
Overall Score
Grade: C - Fair
Contrast Ratios
Score: 58/100Avg Ratio: 6.01:1
AA FailAAA Fail
| Context | Colors | Ratio | AA | AAA |
|---|---|---|---|---|
| Text on background | /#3d3d3d / #f5f0e1 | 9.53:1 | ||
| Secondary text on background | /#3d3d3d / #f5f0e1 | 9.53:1 | ||
| Muted text on background | /#3d3d3d / #f5f0e1 | 9.53:1 | ||
| Text on secondary background | /#3d3d3d / #ffffff | 10.86:1 | ||
| Secondary text on secondary | /#3d3d3d / #ffffff | 10.86:1 | ||
| Button primary | /#f5f0e1 / #e8572a | 3.16:1 | ||
| Text on accent 1 | /#3d3d3d / #e8572a | 3.01:1 | ||
| Alt text on accent 1 | /#3d3d3d / #e8572a | 3.01:1 | ||
| Text on accent 2 | /#3d3d3d / #2a6e5e | 1.81:1 | ||
| Alt text on accent 2 | /#3d3d3d / #2a6e5e | 1.81:1 | ||
| Text on accent 3 | /#3d3d3d / #c4a35a | 4.52:1 | ||
| Alt text on accent 3 | /#3d3d3d / #c4a35a | 4.52:1 |
Readability
Score
90/100
Font Size
text-sm md:text-base
Font Weight
font-sans font-bold tracking-wide uppercase
Line Height
default
Scores are based on WCAG 2.1 guidelines. AA requires 4.5:1 contrast for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.
Further Reading
Prompt examples, FAQ, and extended use cases
This section is better for readers who already like the direction and want more depth.