动感粗野主义（移动）Kinetic Brutalism (Mobile)
酸性黄 + 纯黑、2px 硬边、0 圆角，无限跑马灯与按下反色。冲击力极强，适合短时浏览的潮流场景。
典型场景潮流电商 · 音乐/球鞋 · 活动应用
效果示例
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
酸性黄 + 纯黑、2px 硬边、0 圆角，无限跑马灯与按下反色。冲击力极强，适合短时浏览的潮流场景。
关键词
效果与动效
Infinite marquee (Reanimated, Linear easing, 5s loop, hard clip), hero parallax (scale 1.0→1.3 + fade), sticky section header push, card flood inversion on press (bg→#DFE104, text→#000000), haptic Medium on every press, scroll-triggered interpolate transforms, 0px radius, 2px borders, 100ms color transitions
设计系统变量
--bg#09090B--fg#FAFAFA--muted#27272A--muted-fg#A1A1AA--accent#DFE104--accent-fg#000000--border#3F3F46--radius0px--border-width2px--shadownone--marquee-speed5000ms--press-duration100ms--fontSpace Grotesk or Inter配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Acid Yellow #DFE104, Rich Black #09090B
辅色 / Secondary
Off-white #FAFAFA, Dark Gray #27272A, Zinc #A1A1AA, Border Zinc #3F3F46
强调色在页面底色上的对比度约 14.1:1，可用于正文与图标。
适用场景
适合 / Best For
- Immersive storytelling apps
- brand flagship mobile
- music/culture platforms
- sports apps
- underground zines
- limited-edition product drops
- performance dashboards
避开 / Do Not Use For
- Calm informational apps
- healthcare
- finance contexts needing trust
- children's
- any context where aggressive typography feels inappropriate
框架兼容
能力矩阵
实现要点
落地清单
- Infinite marquee rows (Reanimated, no fade edges),
- Hero parallax scroll (scale+opacity Interpolate),
- All display text uppercase,
- 0px border-radius,
- 2px borders,
- Acid yellow card flood on press,
- Haptic Medium on every interaction,
- Font scale helper (windowWidth/375*size),
- Safe area for massive headers,
- Reduced motion stops marquees
CSS / 技术关键词
borderRadius: 0, borderWidth: 2, borderColor: '#3F3F46', backgroundColor: '#09090B', color: '#FAFAFA', fontWeight: '800 or 900', letterSpacing: -1 (large) or 2 (labels), lineHeight: 0.9–1.1 * fontSize, Reanimated withRepeat marquee timing 5000ms Easing.linear, Interpolate scroll→scale + opacity, Haptics.impactAsync(Medium), scale press: 0.95, 100ms color transitions
AI 提示词
Design a Kinetic Brutalism (Mobile) mobile interface using kinetic, brutalism, motion, marquee, acid yellow, uppercase, oversized, aggressive typography. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.