Signal Grid
A dense analytics cockpit: tight grids, tabular numbers and charts that do the talking.
This style
$9$19
One-time, no subscription · instant download · client use · 7-day refund before download
The idea
A packed, light-grey dashboard aesthetic where charts, tables and KPIs share a strict 4px grid. Small type, tabular figures and a disciplined categorical palette let an enormous amount of information stay readable. It feels like a control room that has been properly designed.
Signal Grid treats the marketing page as a dashboard. A light grey canvas carries a faint 8px grid; white panels hold charts, KPI tiles and tables, all locked to a strict 4px rhythm. It borrows from mid-century control-room design, financial terminals and modern analytics tooling: density is a feature, but only when hierarchy is ruthless. Small type, tabular figures and a fixed categorical palette keep everything legible. It should feel like information you can trust at a glance.
Principles
- Density with hierarchy: one dominant number per panel.
- Every number uses tabular figures and a unit.
- Colour encodes data first; decoration never borrows a data colour.
- Lock everything to a 4px grid; panels align edge to edge.
- Show a real chart wherever you would have used an icon.
Motion
Charts draw their lines left to right in 800ms and bars grow from the baseline in a 30ms stagger when they enter view. KPI numbers count up with tabular figures so the width never jumps.
Do & don't
Do
- ✓ Use tabular numerals everywhere numbers appear.
- ✓ Give every panel a label, a unit and a timestamp.
- ✓ Use a sparkline at the top of each feature column.
Don't
- ✕ Don't use shadows; borders do the separating.
- ✕ Don't use pie or donut charts with more than four slices.
- ✕ Don't use data colours for decoration.
+ 3 more of each, and component rules, in the full DESIGN.md.
What's in the DESIGN.md
- 01Overview & principles
- 02Colors (tokens + proportions)
- 03Typography (families + 12-role scale)
- 04Layout & spacing scale
- 05Elevation & depth
- 06Shapes & radii
- 07Motion (easing, durations, signature)
- 08Imagery + generation prompt
- 09Components (button, card, nav, input, badge)
- 10Do's and don'ts
- 11Responsive behaviour
- 12Iteration guide + agent checklist
Plus theme.css (Tailwind v4 @theme), tokens.json (W3C) and the preview page source — 359 lines of DESIGN.md in total.
More like this
All SaaS & Bento →
FreeBento Daylight
No. 039A sunlit bento box of product tiles: soft grey canvas, white cells, one confident blue.
Bento Midnight
No. 040Charcoal tiles on a blueprint grid, lit from inside by a single violet glow.
Hairline Noir
No. 041Near-black, one ice-blue accent and hairlines drawn with a 0.5mm technical pen.
Indigo Clarity
No. 042White space, deep indigo and crisp product screenshots that explain themselves.
Soft Intelligence
No. 044Calm AI product pages: pearly gradients, a literary serif and a chat window as the hero.
Lime Voltage
No. 067Black, electric lime and huge condensed caps. A startup that wants you to notice.