sunkenintime/card-first-design/lore-accurate-frontend-design

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.