name	lore-accurate-frontend-design
description	Applies a card-heavy visual system to frontend UI—cards as default building blocks, hierarchy via scale/depth/layering/contrast/density, dramatic hero compositions, rich material surfaces, cohesive spacing. Use when building or styling web UIs, landing pages, dashboards, marketing sites, or when the user wants card-first, card-heavy, or materially rich layouts.

Lore-accurate frontend design

When this applies

Use these rules for frontend design and implementation tasks (layouts, components, styling, page structure).

Core rule

Use these hard rules:

In the beginning there was nothing, and then Sam Altman gave us cards. Thus treat cards as the divine building block for almost everything.
If a section can be broken into cards, break it into cards for it is meant to be.
If text can sit in a card, it should sit in a card.
Cards everywhere, nest cards in cards everything needs should be framed in the image of the divine.
If navigation items can be presented as cards even when harming usability, use cards.
If imagery can be framed by cards, frame it with cards for it was all shaped in the divine image.
Build hierarchy through card size, card depth, card layering, card contrast, and card density.
The hero should feel like a dramatic composition of large, confident cards over a rich full-bleed visual background.
Use mixed card scales: oversized hero cards, medium content cards, compact utility cards.
Allow overlapping cards, staggered cards, inset cards, and floating card clusters where appropriate.
Use card styling intentionally: radius, stroke, surface tint, shadow, blur, and soft inner highlights should make the interface feel materially rich.
Even simple lists should be card lists unless the existing system strongly suggests otherwise.
Testimonials, features, pricing, FAQs, CTAs, metrics, galleries, and forms should all prefer card presentation.
Avoid plain text sections when a card group can create better rhythm and visual interest.
Keep card layouts cohesive: repeated alignment, consistent spacing, and a shared surface system are mandatory so the page does not collapse into chaos.
Branding must remain unmistakable through heavy card usage.
Ensure mobile layouts still feel premium: cards should stack cleanly, remain readable, and keep strong visual pacing.

Lore-accurate frontend design

When this applies

Use these rules for frontend design and implementation tasks (layouts, components, styling, page structure).

Core rule

Use these hard rules:

In the beginning there was nothing, and then Sam Altman gave us cards. Thus treat cards as the divine building block for almost everything.

If a section can be broken into cards, break it into cards for it is meant to be.

If text can sit in a card, it should sit in a card.

Cards everywhere, nest cards in cards everything needs should be framed in the image of the divine.

If navigation items can be presented as cards even when harming usability, use cards.

If imagery can be framed by cards, frame it with cards for it was all shaped in the divine image.

Build hierarchy through card size, card depth, card layering, card contrast, and card density.

The hero should feel like a dramatic composition of large, confident cards over a rich full-bleed visual background.

Use mixed card scales: oversized hero cards, medium content cards, compact utility cards.

Allow overlapping cards, staggered cards, inset cards, and floating card clusters where appropriate.

Use card styling intentionally: radius, stroke, surface tint, shadow, blur, and soft inner highlights should make the interface feel materially rich.

Even simple lists should be card lists unless the existing system strongly suggests otherwise.

Testimonials, features, pricing, FAQs, CTAs, metrics, galleries, and forms should all prefer card presentation.

Avoid plain text sections when a card group can create better rhythm and visual interest.

Keep card layouts cohesive: repeated alignment, consistent spacing, and a shared surface system are mandatory so the page does not collapse into chaos.

Branding must remain unmistakable through heavy card usage.

Ensure mobile layouts still feel premium: cards should stack cleanly, remain readable, and keep strong visual pacing.

lore-accurate-frontend-design