包豪斯Bauhaus (包豪斯)
红黄蓝三原色 + 黑白，圆形/三角/方形构成，硬边阴影与无圆角，机械式按下反馈。形式服从功能，几何感强烈。
典型场景文化机构 · 设计展览 · 教育产品
效果示例
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
红黄蓝三原色 + 黑白，圆形/三角/方形构成，硬边阴影与无圆角，机械式按下反馈。形式服从功能，几何感强烈。
关键词
效果与动效
Hard offset shadows (4px 4px 0px black), mechanical press active:translate, no smooth hover — instant 0ms transitions, dot grid pattern on sections, slide-over transitions
设计系统变量
--color-red#D02020--color-blue#1040C0--color-yellow#F0C020--color-bg#F0F0F0--color-fg#121212--border-width2px--shadow-hard4px 4px 0px 0px #121212--radius-block0px--radius-pill9999px--font-displayOutfit--font-weight-hero900配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Primary Red #D02020, Primary Blue #1040C0, Primary Yellow #F0C020
辅色 / Secondary
Background #F0F0F0 (Off-white), Foreground #121212 (Stark Black), Muted #E0E0E0
强调色在页面底色上的对比度约 4.7:1，可用于正文与图标。
适用场景
适合 / Best For
- Mobile-first apps needing high personality
- onboarding flows
- branding-forward product screens
- artisan/design brands
- editorial mobile experiences
避开 / Do Not Use For
- Enterprise dashboards
- accessibility-critical contexts (requires extra a11y work)
- data-heavy screens
- conservative industries
框架兼容
能力矩阵
实现要点
落地清单
- Geometric shapes only (circle/square),
- Primary color blocking applied,
- Hard offset shadows 4px,
- border-2 border-black on all elements,
- Mechanical press active state,
- Outfit Black 900 uppercase headlines,
- Safe area (pt-safe pb-safe) respected,
- Thumb-friendly h-12/h-14 touch targets,
- No hover states (mobile-only),
- Vertical rhythm single-column stack
CSS / 技术关键词
border-radius: 0px (cards/inputs) or 9999px (buttons/FAB), box-shadow: 4px 4px 0px 0px #121212, active:translate-x-[2px] active:translate-y-[2px] active:shadow-none, border: 2px solid #121212, font-family: Outfit, font-weight: 900 uppercase tracking-tighter (headlines)
AI 提示词
Design a Bauhaus (包豪斯) mobile interface using bauhaus, geometric, constructivist, primary colors, hard shadow, bold, tactile, functional. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.