Creative style · 03
Neo-Brutalism
新粗野主义
An expressive, high-contrast language of chunky type, hard shadows, and color blocks.
Live preview
See it in context.
MAKE NOISE. SHIP FAST.
A launchpad for ideas that refuse to behave.
Style characteristics
- Thick black borders
- Hard offset shadows
- Bold typography
- Strong color blocks
- Playful geometry
- High contrast
Best for
Avoid for
Build direction
Prompt for your agent.
Chinese Prompt
Neo-Brutalism / 新粗野主义
VISUAL DIRECTION
设计大胆、直接、有趣的新粗野主义产品界面。保留清晰的信息结构。
LAYOUT
- 使用清晰的信息层级和一致的页面结构
- Desktop 使用多列布局；Tablet 减少列数；Mobile 自动转为单列
- 保持主要操作、搜索、数据卡片和内容列表在合理视线内
COLOR
- Off-white base；使用高饱和 yellow / pink / blue / green 色块
- 纯黑文字和描边
TYPOGRAPHY
- Heavy compact sans serif headline
- 正文保持高可读性和强对比
COMPONENTS
- Button、Input、Card 都具备明确的边界
- 使用简单几何元素与轻微不对称布局
BORDER & RADIUS
- 2–3px pure black outline
- 小圆角或直角
SHADOW
- 使用 5–7px crisp black offset shadow
SPACING
- 使用一致的 4px / 8px spacing system
- 让模块之间有明确节奏，避免无意义的留白或拥挤
INTERACTION
- 使用 150–200ms transition
- Hover 只改变必要的颜色、边框、阴影或位置
- Focus 状态清晰；按钮和输入区域可触控
RESPONSIVE
- Desktop 保持高效信息密度
- Tablet 合理减少列数
- Mobile 单列重排，禁止横向溢出
AVOID
- Soft gradients / Blur / Glass
- Delicate borders / Low contrast
- Over-polished Apple-like refinement
English Prompt
Neo-Brutalism / 新粗野主义
VISUAL DIRECTION
设计大胆、直接、有趣的新粗野主义产品界面。保留清晰的信息结构。
LAYOUT
- Use a clear information hierarchy and consistent page structure
- Use multi-column desktop layouts; reduce columns on tablet; stack on mobile
- Keep primary actions, search, data cards, and content lists within a useful first view
COLOR
- Off-white base；使用高饱和 yellow / pink / blue / green 色块
- 纯黑文字和描边
TYPOGRAPHY
- Heavy compact sans serif headline
- 正文保持高可读性和强对比
COMPONENTS
- Button、Input、Card 都具备明确的边界
- 使用简单几何元素与轻微不对称布局
BORDER & RADIUS
- 2–3px pure black outline
- 小圆角或直角
SHADOW
- 使用 5–7px crisp black offset shadow
SPACING
- Use a consistent 4px / 8px spacing system
- Give modules deliberate rhythm; avoid meaningless whitespace or crowding
INTERACTION
- Use 150–200ms transitions
- Change only necessary color, border, shadow, or position on hover
- Keep focus states clear and controls touch-friendly
RESPONSIVE
- Preserve efficient information density on desktop
- Reduce columns thoughtfully on tablet
- Reflow to one column on mobile; never allow horizontal overflow
AVOID
- Soft gradients / Blur / Glass
- Delicate borders / Low contrast
- Over-polished Apple-like refinement