Monochrome zebra striping done right: alternating white and #FAFAFA rows inside a hairline container, so long log-style listings stay scannable without a single colored pixel.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build a Vercel-style compact zebra table for log-like data.
1. Container: rounded-lg with a 1px #E2E8F0 border. Header #F8FAFC with 12px #64748B labels.
2. Zebra: even rows #F8FAFC, odd rows white. Because stripes carry the row rhythm, internal row borders are omitted.
3. Density: 40px rows, 13px text, monospace for IDs, hashes, timestamps and durations.
4. Color discipline: text is #0F172A and #64748B only. Status uses 8px dots (green #06B6D4, red #EE0000, gray #64748B) followed by plain text.
5. Hover: row brightens to #F8FAFC with a 100ms transition.
6. Column alignment: text left, numbers and durations right, status center-left with the dot.Monochrome zebra striping done right: alternating white and #FAFAFA rows inside a hairline container, so long log-style listings stay scannable without a single colored pixel.
Click headers to sort, rows to select — hover styling matches the exported rules.
Click headers to sort, rows to select — hover styling matches the exported rules.