新粗野移动端Neo Brutalism (Mobile)
奶油底 + 4px 黑边 + 硬偏移阴影，卡片轻微倾斜，按下位移模拟物理按键。俏皮但保持可读。
典型场景消费品牌 · 社交应用 · 年轻向活动
效果示例
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现（数据标注：浅色 支持，深色 不建议）。
风格描述
奶油底 + 4px 黑边 + 硬偏移阴影，卡片轻微倾斜，按下位移模拟物理按键。俏皮但保持可读。
关键词
效果与动效
Thick 4px black borders on all major elements, hard offset shadows (4–8px, no blur), mechanical press: translateX/Y equal to shadow offset, slightly rotated cards/badges (-2deg/2deg), high-saturation color blocking, spring/linear animations only
设计系统变量
--bg#FFFDF5--ink#000000--accent-primary#FF6B6B--accent-secondary#FFD93D--accent-muted#C4B5FD--white#FFFFFF--border-primary4px solid #000000--shadow-offset-small4px--shadow-offset-medium8px--radius0px--radius-pill999px--fontSpace Grotesk配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Cream #FFFDF5, Hot Red #FF6B6B, Vivid Yellow #FFD93D
辅色 / Secondary
Soft Violet #C4B5FD, Pure Black #000000, White #FFFFFF
强调色在页面底色上的对比度约 2.7:1，仅适合装饰与大色块，不要用于文字。
适用场景
适合 / Best For
- Creative tools
- collab platforms
- Gen Z marketing & e-commerce
- portfolio sites
- sticker-book style content apps
避开 / Do Not Use For
- Serious enterprise apps
- conservative industries
- sober fintech
- accessibility-first contexts (must tune contrast)
框架兼容
能力矩阵
实现要点
落地清单
- 4px borders on major elements,
- Hard offset shadow implemented via extra View,
- Mechanical press hides shadow,
- Cream canvas background,
- Pop-art color palette used,
- Cards/badges slightly rotated,
- No gradients or soft shadows,
- Only bold/black type weights,
- Badges slapped with absolute positioning,
- Anti-patterns (no subtle gray, no blur) avoided
CSS / 技术关键词
borderWidth: 4 (primary), 2 (secondary), borderRadius: 0 or 999 (badges only), backgroundColor: '#FFFDF5', shadow implemented as offset View, transform: [{translateX:4},{translateY:4}] on PressIn, fontFamily: 'SpaceGrotesk-Bold', fontWeight: '700/900', transform: [{ rotate: '-1deg' }] on cards, padding: 20
AI 提示词
Design a Neo Brutalism (Mobile) mobile interface using neo brutalism, pop art, stickers, thick borders, cream background, hot red, vivid yellow, soft violet. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.