The card component is arguably the most used layout pattern in modern web design. Product cards, blog post cards, dashboard cards, profile cards, notification cards. Each uses color to define boundaries, create hierarchy within the card, and communicate status.
Card Surface Color
Cards need a surface color that is distinct from the page background but not dramatically different. On a white page, cards are either the same white (distinguished by shadow alone) or a very slightly different tone. On a light gray page, white cards create a subtle elevation effect. The difference should be minimal: 2 to 5% lightness shift at most.
Card Borders
Borders define card boundaries. A 1px border in a light gray (#e2e8f0) provides subtle definition without visual weight. Some designs skip borders entirely and rely on shadows, which creates a softer, more modern look. Either works, but be consistent across all cards in your system.
Category and Status Badges
Cards often include colored badges (category tags, status indicators, priority labels). These should use colors from your extended palette: primary for the most important category, supporting for secondary, and semantic colors (green, amber, red) for status. Keep badges small so they inform without dominating.
Hover and Selected States
Interactive cards (clickable to navigate somewhere) need hover states. A subtle background tint, a border color change, or a shadow lift all work. The key: the hover state should make the card feel interactive without dramatically changing its appearance. A 5% background tint of your primary color is enough.