包豪斯与构成主义的影响。强烈的几何形状,极端的色块对比,没有渐变,没有阴影。 纯粹的视觉冲击力。
Black and white form the foundation. Red, blue, yellow are the only permitted accent colors. Maximum 3-4 per design. Zero gradients, zero shadows.
Every component uses solid color blocks, hard edges, and linear-fast transitions. No rounded-lg. No shadows. No gradients.
Primary — Offset Shadow Block + Heavy Press
Circle — rounded-full only
Outlined — hard color swap on hover (Blocky Impact rule)
Every interaction in Geometric Bold follows exactly four named rules from the aiRules spec. Hover or click each demo card to feel the physics.
交互使用纯色硬切与短位移反馈,避免柔和透明度过渡。
Hard solid-color switch on hover. No opacity fade, no blur transition. Immediate color snap + 1-2px translate offset. The difference between this and a soft fade is total — structurally honest.
几何装饰在 hover 时可瞬时旋转/放大,形成结构突变感。
Geometric decorations snap to a new rotation or scale on hover. Not a smooth animation — a structural jump. The shape mutates its form, creating the sensation of mechanical engagement.
active 状态优先用位移与层级回弹表达按压,不依赖柔和缩放。
On active/click, the element shifts +4px down-right as the offset shadow collapses to zero. Not a soft scale — a displacement press. The shadow block disappears and the element lands hard on the surface.
统一使用 duration-100 + ease-linear,拒绝弹簧感和慢速拖尾。
No spring, no cubic-bezier overshoot, no ease-in-out tail. duration-100ms + ease-linear on everything. The comparison below shows linear (correct for this style) vs spring (wrong).
Overshoot bounce = banned in Geometric Bold
Each row uses a different accent. Hover to see Blocky Impact and Shape Snapping in tandem — the row background snaps immediately.
font-black + uppercase everywhere. Numbers serve as design elements. tracking-widest on labels. tracking-tight on display text.
Circles (rounded-full), squares (rounded-none), and triangles (SVG polygon). Combine them to build every composition.
Square + Circle + Triangle
Geometric Bold is a strict discipline. The rules define what this style is. Breaking them breaks the aesthetic.
A design agency portfolio section rendered in full Geometric Bold style. Offset grid, number anchors, hard color contrast throughout.