---
id: "2113178545128186269"
source: https://x.com/bestdesignsonx/status/2113178545128186269
author: "Best Designs On X (@bestdesignsonx)"
media: "photo, 1204x1022"
model: claude-opus-5-5
generated: 2026-10-22
---
# Add Widgets Side Panel

## Summary
A light grey "Add widgets" panel slides over a dashboard whose chart is drawn as a coral halftone dot field; inside, a search field and a list of widget rows, each with a soft icon tile, a title, a one-line description and either a green "On home" state or a plus button. A calm, well-spaced picker that makes a settings task feel friendly.

## Style
- Theme: light
- Mood: calm, friendly, tidy, soft
- Tags: modal, side-panel, widget-picker, list-rows, search, halftone-chart, dashboard
- Category: Components, Dashboard

## Palette
| Role | Hex |
|---|---|
| Panel | #EAEAEA |
| Surface | #F3F3F3 |
| Tile | #FAFAFA |
| Ink | #262729 |
| Muted text | #8D919C |
| Coral dots | #E0705A |
| Coral light | #E5CBC5 |
| Success green | #3FA34D |
| Accent blue | #4A8DE8 |

## Typography
- Panel title: sans, semibold, about 2.4% of frame width. Inter (600).
- Row titles: same sans, regular, dark. Inter (500).
- Descriptions and section label ("Agents"): smaller, grey. Inter (400).
- Status ("On home"): green, regular, with a check icon.

## Layout
- Panel about 65% of the frame width, docked right with a 24px radius and a 2px blue edge; the dashboard shows on the left.
- Header row: title left, square close button right (12px radius).
- Full-width search field with a magnifier icon (10px radius, slightly darker fill).
- Section label, then five rows with about 32px between them: 48px icon tile, two-line text, trailing status or button.

## Elements
- Icon tiles: white squares with 12px radius and a faint shadow, holding small coloured glyphs (a blue zig-zag line, red/amber/green list dots, blue/amber swimlane bars, a blue heatmap grid).
- Add button: white 36px square, 10px radius, plus icon.
- Dark "New" button with a grid icon on the dashboard toolbar.
- Halftone chart: mountain-shaped area chart made of coral dots that fade out toward the bottom.
- A row of small blue dots at the top edge as a decorative progress hint.

## Motion
- Still image; in a product the panel would slide in from the right (300ms, ease-out) with the rows staggering 30ms apart, and a row's plus button would turn into the green "On home" check on click.

## Rebuild it
1. Make the panel a right-side sheet: `fixed right-4 top-4 bottom-4 w-[420px] rounded-3xl bg-neutral-200/90 backdrop-blur ring-2 ring-blue-400/60`.
2. Header with a `text-lg font-semibold` title and a `size-10 rounded-xl bg-white shadow-sm` close button.
3. Search as `rounded-xl bg-neutral-300/60 px-4 h-11` with a magnifier icon.
4. Each row: `grid grid-cols-[48px_1fr_auto] gap-4 items-center`; icon tile `size-12 rounded-xl bg-white shadow-sm`.
5. Trailing state: green check plus "On home", or a `size-9 rounded-lg bg-white shadow-sm` plus button that swaps on click.
6. Draw the halftone chart on a canvas: sample an area-chart shape onto a dot grid and scale dot radius with density.

## Generation prompt
A clean light UI side panel titled "Add widgets" over a dashboard with a coral halftone dot mountain chart: a grey search field, a list of rows with soft white rounded icon tiles, titles and grey descriptions, green check "On home" labels or small white plus buttons, rounded corners, thin blue edge, generous spacing, modern product design, no real brand names.