A spreadsheet wearing a document's clothes: full cell grid in whisper-gray lines, tag-style multi-select chips, and a ghost '+ New' row at the bottom. Every cell looks editable because it is.
Export Snippets
Switch formats without compressing the preview layout.
AI Prompt
Natural-language design direction for AI coding tools.
Build a Notion-style database grid table.
1. Grid: 1px #E2E8F0 lines in BOTH directions — this is the rare table where vertical lines belong.
2. Header: 14px at #0F172A80 with a small property-type icon before each label. Not bold, not uppercase.
3. Cells: 14px #0F172A, 8px padding, min-height 32px. Hovering a cell shows a subtle #0F172A0A wash; clicking makes it editable in place.
4. Tags: multi-select chips with Notion's pastel set (e.g. #D3E5EF blue, #DBEDDB green, #FAE3DD red), 12px text, 3px radius, 2px 6px padding.
5. First column is the "title" column: 500 weight with a page icon, opens the record.
6. Bottom: a ghost "+ New" row at 50% opacity that solidifies on hover.A spreadsheet wearing a document's clothes: full cell grid in whisper-gray lines, tag-style multi-select chips, and a ghost '+ New' row at the bottom. Every cell looks editable because it is.
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.