Vibrant · Block-Based

大色块大字号
大能量

五种霓虹撞色、48px 起步的大间距、32px+ 的大标题,加上持续滚动的点阵图案——把年轻的能量直接铺满屏幕。

三块高能积木

每个区块就是一整块颜色:内容坐在色块上,间距拉到 48px,远看像一张海报。

霓虹撞色

荧光绿撞电紫、艳粉撞亮青,互补与三元配色制造 7:1 以上的强对比冲击。

块状布局

整块整块地排版:大圆角矩形、正圆与三角形几何体,间距 48px 起,呼吸感十足。

动态图案

背景点阵以 16 秒循环持续漂移,悬停时色块瞬间换色,界面永远在动。

按钮与控件

悬停即换色:绿变青、紫变粉,250ms 的大胆色彩位移代替微妙渐隐。

按钮状态
开关与徽标 NEW · 新能量上线

表单示例

深色面板收住四周的高饱和,聚焦时用亮青色 3px 焦点环点亮当前输入框。

配色板

五个主角色加三个替补色,同屏最多使用 4–6 种,保持撞色而不混乱。

字体级阶

展示层使用 Space Grotesk 的几何骨架,正文使用 Inter,标题一律 32px 起。

显示级 · Space Grotesk 700 · 64px

大字冲击

标题 · Space Grotesk 700 · 32px

块与块之间留足 48px

正文 · Inter 400 · 18px

高饱和色块负责情绪,深色底负责阅读,大字号让信息一眼命中。

标签 · Space Grotesk 700 · 14px

Vibrant / 高饱和