Z 世代混沌极繁Gen Z Chaos / Maximalism
故意冲突的荧光色、贴纸堆叠、抖动与跑马灯，拒绝统一网格。像信息爆炸的社交媒体信息流，适合短时高频刺激。
典型场景潮流社区 · 快闪活动 · 亚文化内容
编号57
年代2023+ Internet Core
复杂度High
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
故意冲突的荧光色、贴纸堆叠、抖动与跑马灯，拒绝统一网格。像信息爆炸的社交媒体信息流，适合短时高频刺激。
关键词
Chaosclutterstickersrawcollagemixed medialoudinternet cultureironic
别名
Gen Z Chaos
效果与动效
Marquee scrolls, jitter, sticker layering, GIF overload, random placement, drag-and-drop
设计系统变量
--chaos-pink#FF00FF--chaos-green#00FF00--chaos-yellow#FFFF00--chaos-blue#0000FF--jitter-amount5deg--saturate150%配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Clashing Brights: #FF00FF, #00FF00, #FFFF00, #0000FF
辅色 / Secondary
Gradients, rainbow, glitch, noise, heavily saturated mix
强调色在页面底色上的对比度约 6.3:1，可用于正文与图标。
适用场景
适合 / Best For
- Gen Z lifestyle brands
- music artists
- creative portfolios
- viral marketing
- fashion
避开 / Do Not Use For
- Corporate
- government
- healthcare
- banking
- serious tools
框架兼容
css-in-js
能力矩阵
浅色模式支持
深色模式支持
移动适配需额外处理
转化导向强High (Viral)
渲染成本高animation / large-images
无障碍风险高contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Colors clash intentionally,
- Stickers/overlays present,
- Layout chaotic but usable,
- GIFs optimized,
- Mobile scrollable,
- Performance acceptable
CSS / 技术关键词
mix-blend-mode: multiply/screen, transform: rotate(random), animation: jitter, marquee text, position: absolute for scattered elements, filter: saturate(150%), z-index chaos
AI 提示词
Design a Gen Z chaos maximalist interface. Use: clashing bright colors, sticker overlays, collage aesthetic, raw/unpolished feel, mixed media, ironic elements, loud typography, GIF-heavy, internet culture references.