Millpond

A mock-up of the screen, drawn from its layout, palette and typefaces. A build follows the full prompt below.

Start from this screenRead the build prompt

Typefaces

The catalog's own faces. A screen composed into a template is drawn in that template's typefaces.

• InterHeadings: Inter 600, 24px, tracking -0.01em for title; KPI values 26px 600 tabular
• InterBody: Inter 400, 16px/1.5; card labels 14px 500; axis 12px

Patterns

• sidebar quick search with keyboard hint
• breadcrumb top bar
• page actions (print, copy link, add chart)
• filter bar with auto-refresh toggle and time range
• KPI cards with sparkline, delta and overflow menu
• full-width time-series chart card
• dashed segment for incomplete latest bucket
• user-composable chart grid

States it is designed for

• loading skeletons
• no traffic in range
• latest bucket incomplete (dashed line segment with note)
• extreme delta (e.g. +30,000%) shown with 'from a small base' hint
• auto-refresh on / paused
• chart removed (undo toast)
• error card with retry
• read-only viewer (add chart hidden)

Who it is for

• site operators
• DevOps engineers
• growth and marketing analysts watching launches

Layout

1. Sidebar: account switcher, quick search with keyboard hint, back-to-sites, nav tree with Analytics expanded (Dashboards [New], HTTP traffic, Domain overview [Beta], Web analytics, Performance, Workers)
2. Top bar: site name + plan badge, breadcrumb, assistant/Support/profile
3. Header row: title left; Print, Copy link, primary 'New chart' right
4. Filter row: Add filter left; Auto-refresh toggle and time range right
5. KPI row: 4 cards (label, value, delta arrow + %, overflow menu, area sparkline)
6. Main chart card: title, legend with total, line chart with time axis
7. Grid of additional chart cards (2 columns)
8. Below 1100px KPI 2x2; below 640px single column; header actions collapse into a menu

Palette

Busy but orderly; single blue data hue lets volume patterns dominate.

• canvas#fbfbfb
• surface#ffffff
• text#1d1d1f
• muted#595959
• border#d9dde3
• primary#2563eb
• on-primary#ffffff
• series#2f6fdf
• sparkline-fill#dbe7fb
• grid#eceef1
• focus#1d4ed8

Every checked pair, measured again

As vibld’s tokens

The palette on the fifteen colour tokens vibld styles a project with, each text colour on the fill it is read on. Marked tokens are solved from the palette, because no swatch held that role at 4.5:1.

• background
• card
• muted
• primary
• secondary
• accent
• destructive *

Type scale

Display

Inter 600, 24px, tracking -0.01em for title; KPI values 26px 600 tabular

Body

Inter 400, 16px/1.5; card labels 14px 500; axis 12px

Similar to the observed neo-grotesk. 'New' and 'Beta' pills 12px 500.

Spacing and imagery

Medium density; 4px base; content padding 16px; KPI cards 16px padding, 8px gap; radius 6px cards and buttons; no shadows; 1px borders; chart gridlines hairline.

Area sparklines with pale fill; one bold line chart; stroke icons in nav and buttons.

Components

• quick search with shortcut
• sidebar nav tree with badges
• breadcrumb
• print / copy link buttons
• primary add chart button
• filter builder
• auto-refresh toggle
• time range select
• KPI sparkline card
• overflow menu
• line chart card
• add-chart dialog

Interactions

• Cmd/Ctrl+K opens quick search
• Auto-refresh polls every 30s with a pulsing dot and pauses when the tab is hidden
• Copy link copies a URL encoding filters and range, with a 'Link copied' toast
• Card overflow: view details, duplicate, remove
• Chart cards can be reordered by drag (dnd-kit) or keyboard move up/down
• Brushing on the main chart zooms the time range

Data

• Dashboard{id, site_id, name, layout jsonb, created_by}
• ChartCard{id, dashboard_id, metric (requests|visits|cache_hit|bytes), viz (line|area|bar|kpi), filters jsonb, position}
• TrafficBucket{site_id, bucket_start, requests, visits, cached, bytes}

Guardrails

Experience

• Always show the comparison period behind each delta
• Mark the incomplete last bucket clearly
• Keep 'New chart' as the only primary button
• Make shared links reproduce the exact view
• Use compact numbers on cards but full numbers in tooltips
• Pause auto-refresh while the user is brushing or a dialog is open

Accessibility

• KPI deltas announce direction and comparison in text
• Charts have summaries and a table view
• Drag-to-reorder has keyboard alternatives and live announcements
• Auto-refresh status is announced once when toggled, not on every poll
• Focus ring 2px blue on all controls
• Keyboard shortcut is documented and can be disabled

Security

• RLS: dashboards and chart cards editable by members with editor role, readable by viewers
• Shared links require sign-in and membership; no public tokens by default
• Validate chart config JSON against a zod schema server-side
• Polling rate-limited; server caches buckets

Build prompt

The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.

Copy the baseline and build prompt

### How to use these prompts
Paste an entry's build prompt into your coding agent as the first message. Each prompt names its own stack, tokens and acceptance criteria; the rules below apply to all of them and can be prepended once per project.

### Engineering baseline
- TypeScript strict mode, no `any`, small typed components, feature folders, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- Validate every input with a shared zod schema on the client and again on the server or edge function. Never trust client-side checks alone.
- Show loading, empty and error states for every async view. Surface errors in plain language with a retry, and log details to the console in development only.
- Keep secrets out of the bundle. Only publishable keys (for example a Supabase anon key) belong in client code; service-role keys, API keys and webhooks live in server or edge-function environment variables.

### Data and auth baseline (full-stack entries)
- Enable Row Level Security on every table before inserting data. Default-deny, then add owner-scoped policies (`auth.uid() = user_id`) and explicit role checks for admin views.
- Store roles in a separate table checked by a security-definer function, never in a user-editable profile field.
- Upload files to private storage buckets with size and MIME limits, and serve them through signed URLs.
- Rate-limit public endpoints (forms, auth, AI calls) and add a honeypot field or captcha to anonymous forms.
- Take payments through a hosted checkout and verify webhooks by signature. Never handle raw card data.

### Accessibility and UX baseline
- Target WCAG 2.2 AA: 4.5:1 contrast for normal text and 3:1 for large text, input borders, focus rings and meaningful icons or chart lines. Every palette in this catalog lists its verified pairs; re-check with a contrast tool after any colour change.
- Keep body text at 16px or larger with 1.5 line height, nothing below 12px, no light weights under 24px, and uppercase only for short labels.
- Give every interactive element a visible focus ring, full keyboard support, semantic landmarks, labelled form fields, and alt text on meaningful images.
- Respect `prefers-reduced-motion` for every animation. Give drag-and-drop and carousels keyboard and button alternatives.
- Build mobile-first and test at 375px, 768px and 1280px.

### Content guardrails
- Use original copy, fictional sample data and placeholder or licensed imagery. Do not reuse another product's name, logo, screenshots or marketing text.
- Label demo testimonials and metrics as samples. Collect the minimum personal data the feature needs.

### SaaS screen baseline
- Design every screen for its full set of states: first-run empty, loading skeleton, partial data, error with retry, permission-denied, and success feedback. Each entry lists the states its screen needs.
- Keep destructive actions (delete, revoke, downgrade, remove member) behind a confirmation that names the object, and prefer undo over a second dialog where the action is reversible.
- Enforce authorisation on the server for every action a screen exposes. Hiding a button is not access control; check the role again in the API or RLS policy.
- Never show secrets (API keys, tokens) in full after creation. Show them once, then mask them, and offer rotate and revoke.
- Keep the app shell (navigation, workspace switcher, account menu) consistent across screens, and preserve filters, sort and scroll position when the user navigates back.

### Goal
Build **Millpond**, a Traffic overview dashboard for a site behind an edge network. Four KPI cards (total requests, visits, cache hit rate, data transferred) with sparklines sit above a large requests-over-time chart; users can add, reorder and remove chart cards, share the exact view and turn on auto-refresh.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Command, Dialog, DropdownMenu, Switch, Select, Toast), lucide-react, Recharts (AreaChart, LineChart, Brush), dnd-kit for card reordering, TanStack Query (with refetchInterval), date-fns. Supabase Auth and Postgres.

### Pages & layout
1. **Shell**: sidebar with account switcher, quick search (Cmd K), Back to sites, nav tree (Analytics expanded with Dashboards [New] active). Top bar with site 'fernhill-supply.example' (invented), plan badge, breadcrumb 'Dashboards / Traffic at a glance'.
2. **/analytics/dashboards/:id** (this screen): title; Print, Copy link, 'New chart'; filter row with Auto-refresh and 'Last 24 hours'; KPI row (e.g. 6.0M requests up 172%, 198k visits up 175%, 6.8% cache hit, 129 GB transferred); 'Requests over time' chart; two-column grid of further cards (status codes bar, top paths table).
3. **Add chart dialog**: pick metric, visualisation, filters; live preview.
4. Responsive: KPI 2x2 then 1 column; header actions into an overflow menu under 640px.

### Design system
- Colors: `--canvas: #fbfbfb`, `--surface: #ffffff`, `--text: #1d1d1f`, `--muted: #595959`, `--border: #d9dde3`, `--primary: #2563eb`, `--on-primary: #ffffff`, `--series: #2f6fdf`, `--sparkline-fill: #dbe7fb`, `--grid: #eceef1`, `--focus: #1d4ed8`.
- Fonts: Inter (similar to observed). Title 24px/600; KPI 26px/600 tabular; body 16px/1.5; labels 14px/500; axis 12px.
- Spacing: 4px base; 16px padding; 8px card gaps.
- Radius: 6px.
- Shadows: none; dragging card gets `0 8px 24px rgba(0,0,0,.12)`.
- Motion: 150ms; live dot pulse 1.6s; all disabled with reduced motion.

### Components & interactions
`QuickSearch` (Command palette), `NavTree`, `PageActions`, `FilterRow`, `LiveRefreshSwitch`, `TimeRangeSelect`, `KpiCard` (label, value, DeltaText, overflow menu, Sparkline), `ChartCard` (title, legend with total, chart, incomplete-bucket dashed segment, drag handle), `AddChartDialog`. Hover on KPI cards darkens the border; overflow menus are keyboard accessible.

### Data & state
`dashboards`, `chart_cards`, `traffic_buckets` as in the data model; memberships with role (viewer|editor|admin). View state (filters, range) in the URL; layout persisted on reorder with debounce. Mock 24h of 10-minute buckets with bursts.

### Accessibility
Each chart has a summary sentence and a 'Show data' table toggle. Delta text reads e.g. 'up 172 percent versus previous 24 hours'. Reorder by keyboard via Move up/Move down menu items with an aria-live confirmation. Switch has a visible label.
Verified contrast: body text on canvas: #1d1d1f on #fbfbfb = 16.26:1; muted label on card: #595959 on #ffffff = 7.0:1; primary button label: #ffffff on #2563eb = 5.17:1; series line on card: #2f6fdf on #ffffff = 4.71:1; series line on sparkline fill: #2f6fdf on #dbe7fb = 3.77:1; focus ring on canvas: #1d4ed8 on #fbfbfb = 6.48:1; button border on card: #595959 on #ffffff = 7.0:1.

### Security
RLS: `dashboards` and `chart_cards` select for members, insert/update/delete for editor+ (`exists` on memberships with role). Validate `filters` and `layout` JSON with zod in an RPC. Shared links carry only view params, never tokens. Server-side caching limits polling load.

### Performance & SEO
Downsample to <= 300 points per series; virtualise the card grid if over 20 cards; lazy-load the Add chart dialog; pause polling on hidden tabs. Noindex.

### Guardrails
- Invented site names and numbers
- Do not add a second primary button
- Mark incomplete data honestly
- Typed code, errors surfaced per card
- Acceptance criteria: (1) KPI cards show value, delta and sparkline; (2) Copy link reproduces filters and range; (3) cards can be added, reordered (mouse and keyboard) and removed with undo; (4) viewers cannot edit (RLS); (5) layout works at 390px.

Open the builderAll templatesThis palette on its own