Style Atlas after the comparison structure and responsive behavior are working. This keeps design choices from hiding row, spacing, or content problems.
Start with card behavior
Equal Cards keeps cards visually consistent when their content lengths differ. Pin CTA keeps the call-to-action area at the bottom of the cards. Use Featured Lift or a featured border to emphasize one option, and use Zebra Rows when alternating row backgrounds make a dense comparison easier to follow.
Choose the header style
Header: Full is suited to cards that need the complete heading area. Title creates a simpler heading, while Off removes the header when the content does not need one. Head Height can remain automatic, and Head Pad Y adjusts vertical space. A fixed badge slot helps keep badges aligned when only some cards use one.
Set spacing before typography
Use the radius controls for the card corners, then adjust cell, card, and header padding. Row Gap controls separation between comparison rows, while Item Pad changes the inner spacing of individual items. Make the smallest useful change and preview again before changing several values at once.
Build a clear color system
Column Fill offers tint and solid treatments. Atlas provides separate colors for the main column elements, surfaces, feature and zebra rows, states, extra text, buttons, and the full or title-only headers. Use the same semantic colors consistently and verify text contrast in normal, featured, yes, no, and muted states.
Adjust type by content role
The typography controls separate main header and plan text, price and feature data, and cell and button text. Keep body-size values readable and avoid using a large price or heading size that forces cards to wrap unnecessarily at narrow widths.
Finish with borders and shadows
Atlas can draw outer and inner borders, horizontal and vertical separators, and a separate featured border. Set the border color and width deliberately. Enable shadows only when they improve separation from the page background; borders are usually clearer for dense tables.
Review the complete component
Check a normal card, a featured card, a long row, a short row, a badge, and a button. Then repeat the review at a narrow width. Continue with Troubleshooting Atlas and improving accessibility if alignment, contrast, or labels need attention.