Asymmetric Grid rejects uniform column widths, enforces hard edges, overlaps elements with brutal precision, and treats visual tension as a primary design material.
Hard contrast combinations
Every component uses hard-edge shadows, no border-radius, and brutal hover states that make elements jump off the page.
Primary — Hard Pop with physical shadow
Outline — border shifts to accent on hover
Size variants — hard shadow scales with size
Click or hover each card to experience the named rule in action. These govern every component generated by the AI rule system.
ease-out + duration-200/300 + high-contrast hard shadow (8px 8px 0px color). Click the button below to trigger the pop:
Card internals shift at different delays (0ms, 75ms, 100ms) creating a parallax offset illusion. Hover the card:
Each internal element moves at its own pace, creating a layered depth that feels spatial and alive.
active state zeros translate + shadow, simulating physical press. Hold the button:
The 8-column dominant side holds primary content. The 4-column side is a narrow accent — never equal, always unbalanced.
Variable
Column Widths
“打破传统网格的均匀分布，通过不等宽列、 元素重叠和留白对比创造视觉张力。”
Asymmetric Grid Philosophy
打破对称
Intentionally use unequal column widths. Every layout must feel dynamically off-balance, never perfectly centered.
视觉张力
Large-small contrast and positional offset create kinetic energy. Static and dynamic zones must coexist.
留白即内容
Generous empty zones amplify dense zones. The contrast between empty and full is a design tool.
Allow elements to overlap using z-index. Depth is achieved through stacking, not shadow alone.
On hover, elements break their grid cell with scale + z-50 + translate. They escape the structure.