PLAY
PaletteComponentsaiRulesDo/Don't
StyleKit
Neo-Brutalist Playful

PLAY
FUL!

野兽派也可以很有趣。硬边缘 + 彩色 + 弹簧感 = 俏皮野兽派。

5
Accent Colors
4
aiRules
0
Border Radius
3deg
Max Rotation
Color System

5 BOLD
ACCENTS

纯黑底色配 5 种强调色。彩色硬阴影在各色之间跳跃——这就是 Color Ping-Pong。

Playful Red
#ff6b6b
Accent 1
Buttons, alerts, highlights
Vibrant Teal
#4ecdc4
Accent 2
Shadows, badges, borders
Bold Yellow
#ffe66d
Accent 3
Backgrounds, nav, markers
Fresh Mint
#95e1d3
Accent 4
Surface, panels, cards
Warm Coral
#f38181
Accent 5
Tags, labels, decorations
Shadow Color Combos
Components

BUILD
BLOCKS

无圆角。粗边框。彩色阴影。每个组件都有旋转 + 弹簧反馈。

Primary — Toy Spring + Joyful Press

Outline & Ghost variants

Size variants

aiRules — 4 Interaction Laws

FEEL
THE RULES

每条规则都有一个可交互演示。点击、悬停、感受弹簧感——这是让俏皮野兽派区别于普通 Brutalist 的核心。

Rule 1

Toy Spring

cubic-bezier(0.34, 1.56, 0.64, 1)

位移和旋转带有弹簧回弹感。像按压一个弹簧玩具——松开时会过冲再稳定。

spring vs linear

点击查看弹簧运动

ease: cubic-bezier(0.34, 1.56, 0.64, 1)
duration: 300ms
Rule 2

Tilt Exaggeration

rotate-[-2deg] -> hover:rotate-[3deg]

初始轻微倾斜,hover 时切换到反向更大角度(仍在 3 度内)。保持俏皮但可控。

初始 -2deg
-2deg
初始 +1deg
1deg
初始 -1deg
-1deg
初始 +2deg
2deg

Hover each card to see the tilt flip — never exceeds 3deg.

Rule 3

Color Ping-Pong

shadow: Red -> Teal -> Yellow -> ...

硬边阴影在青、粉、黄之间跳跃切换。维持野兽派结构同时增强玩具感。

SHADOW COLOR
current: Red
Red -> Teal -> Yellow -> loop
Rule 4

Joyful Press

active: shadow=0 + translate + scale(0.95)

:active 需要"压扁"反馈:阴影归零 + 等量位移 + 轻微缩放。模拟真实按压感。

0
PRESS COUNT
idle: shadow-[6px_6px_0px] rotate(-1deg)
pressing: translate(6px,6px) shadow=none scale(0.95)
done: spring back with overshoot
App Demo

ACTIVITY
BOARD

一个真实的活动看板 UI,展示俏皮野兽派在产品界面中的应用。彩色卡片 + 彩色边框 + 旋转装饰。

今日任务

设计 Neo-Brutalist 组件库设计
实现 Toy Spring 动画效果开发
编写 Color Ping-Pong 规则文档文档
对 Joyful Press 进行用户测试测试
优化移动端旋转倾斜体验优化
今日进度
2/5
40% complete
连续天数
7
项目标签
设计开发测试文档优化
Design Philosophy

DO /
DON'T

俏皮野兽派有明确的边界。跨越这些边界,风格就会崩塌。遵守它们,你会得到真正的俏皮。

DO

  • 保持无圆角 rounded-none
  • 使用纯黑边框 border-4 border-black
  • 元素添加轻微旋转 rotate-[-2deg] rotate-[1deg]
  • 使用多种强调色,色彩丰富
  • hover 可用 scale-105 放大效果
  • 适当使用几何图形装饰(方块、三角、线条)
  • 阴影可使用彩色 shadow-[...rgba(255,107,107,1)]

DON'T

  • 禁止圆角 — 任何 rounded-sm 及以上
  • 禁止模糊阴影 — 只允许硬切阴影
  • 禁止渐变 — 纯色只允许
  • 禁止旋转超过 3 度
  • 禁止使用柔和的灰色
  • 禁止使用 emoji 或 Unicode 符号字符
  • 禁止过度装饰导致结构感消失
Philosophy

Neo-Brutalist Playful 是原版 Neo-Brutalist 的活泼变体。 在保持硬边缘、无圆角的结构基础上, 通过 轻微旋转、 多彩色块、 弹簧动画和 图标化装饰增加趣味性。

适用场景:年轻化品牌、创意工作室、儿童产品、趣味应用

Key Features

WHY
PLAYFUL?

弹簧物理

cubic-bezier(0.34,1.56,0.64,1) 让所有交互带有玩具弹性,区别于硬切的原版。

硬边缘结构

零圆角。border-4 border-black。这是野兽派的 DNA——不可妥协。

微旋转倾斜

元素轻微倾斜 1-2deg,hover 时切换反向。给静态布局注入活力。

彩色阴影跳跃

阴影颜色在红青黄之间 Ping-Pong 切换。这是最具辨识度的俏皮元素。

压扁反馈

Joyful Press:点击时阴影归零 + 位移 + scale-95,模拟真实物理按压。

几何装饰

方块、三角、线条作为装饰元素。禁止 emoji——纯几何才是野兽派语言。

PLAYFUL

俏皮野兽派——Neo-Brutalist 的活泼变体。 硬边缘 + 彩色 + 弹簧感 = 年轻化品牌的完美选择。

StyleDocumentationShowcaseCover
StyleKitHomeAll Styles
PalettePlayful RedVibrant TealBold YellowFresh MintWarm Coral
Built for StyleKitNeo-Brutalist Playful
Back to StyleKit