Key insights
- Padding is the biggest tell: going from a cramped 12px to 40px with a 24px border-radius instantly reads as intentional instead of cheap.
- Build a real type hierarchy — push the title to 600 weight and ~38px, then shrink the body and drop it to 55% opacity so the eye lands on the title first.
- Stack two shadows for believable depth: a tight, darker one for contrast plus a wide, soft one for ambient elevation.
- Add a hairline border at roughly 12% opacity to define the card's edge against a dark background.
- A hover state — lift the card ~8px, scale to 1.02, and deepen the shadow — signals it's clickable and adds the final layer of polish.
- Same content, four changes: spacing, typography, shadows, and hover are the entire gap between a card that looks free and one that looks premium.
Do / Don't
- Do: Layer a tight shadow for contrast with a soft ambient one for depth, plus a subtle border around 12% opacity.
- Do: Set the description to ~55% opacity so the title clearly wins the hierarchy.
- Do: Give the card a hover lift (~8px up, slight scale, deeper shadow) so it feels interactive.
- Don't: Cram content against the edges with tiny padding and near-zero border-radius — it reads as an unstyled default.
- Don't: Give the title and body the same weight and full opacity, so nothing guides the eye.
