Card-Based Design

"Bite-sized consumption. Encapsulating discrete pieces of information into distinct visual containers."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Encapsulation: Every card is self-contained. It has an image, a title, a short description, and usually an action (like a button or a 'like' icon).
2. Responsive Flow: Cards easily reflow on different screen sizes (from a 4-column grid on desktop to a single column on mobile).
3. Clear Boundaries: Cards must visually pop off the background.

Visual DNA

• Colors: Very flexible. The background should be slightly darker or distinct from the card color. Sophisticated Neutral works well for a premium feel.
• Typography: Clear hierarchy within the card (Header, Subheader, Body).
• Styling: Standard border-radius: 8px and a medium drop shadow.