Starglass

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, 16px tip title; 18px palette input (400)
• InterBody: Inter 400 16px row labels at 1.5; 14px sidebar items; 12px shortcut badges (JetBrains Mono)

Patterns

• command palette (Cmd/Ctrl+K)
• grouped action list with single-key shortcut badges
• selected row with left accent bar
• gradient-glass coach-mark card anchored below palette
• step counter "7 / 7" with Continue pill
• Skip tour chip bottom-right
• dark canvas with blurred colour glow
• sidebar with uppercase group labels

States it is designed for

• Tour step open (this screen)
• Palette without tour (no tip card)
• No results ("No actions match -- try Search people")
• Action running (spinner in row) and action failed (inline error)
• Recent actions group when input empty
• Offline: network actions disabled with reason

Who it is for

• Networkers and founders tracking relationships
• Recruiters and investors keeping contact notes
• Keyboard-first power users

Layout

1. Left sidebar (~120-200px, near-black): wordmark, Search, Home, Review; COLLECTIONS (People, Notes, Reminders); SHARED WITH ME; GROUPS with +; "New Person" pinned bottom
2. Main canvas: dark with soft warm/violet radial glows
3. Command palette (~330px wide, centered upper third): input "Type a command…", GENERAL ACTIONS label, rows with icon + label + shortcut badge
4. Tip card directly below palette with small caret: title, 2-3 lines, step counter left, Continue pill right
5. SKIP pill fixed bottom-right
6. Mobile: palette full-width sheet from top; tip card becomes bottom sheet

Palette

nocturnal, sleek, focused, a little magical. A dark cockpit where the keyboard shortcut feels like a superpower.

• app background#0e0e11
• sidebar background#121215
• command palette surface#1c1c20
• primary text#ededf0
• group labels, secondary rows#9a9aa3
• selected-row bar, focus ring#5bc0d6
• coach-mark base (under gradient)#4a2344
• secondary text on tip#d8c8d8
• background glow (decorative)#6b3a2c
• shortcut badge background#2c2c32

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, 16px tip title; 18px palette input (400)

Body

Inter 400 16px row labels at 1.5; 14px sidebar items; 12px shortcut badges (JetBrains Mono)

Similar to the observed rounded grotesk. Group labels 12px uppercase 600 with 0.08em tracking. The wordmark style is replaced by an invented lowercase logotype.

Spacing and imagery

Medium density: 4px base; palette rows 40px tall with 12px side padding; tip card padding 16px; radius 10px palette, 12px tip card, full pills; palette shadow 0 24px 60px rgba(0,0,0,.6).

No photos. Blurred colour glows in the background, a multi-stop gradient (plum to amber) with glass blur on the tip card, thin outline icons in rows.

Components

• Command palette input
• Group label
• Action row (icon, label, shortcut badge, selected bar)
• Coach-mark card with caret, counter, Continue
• Skip tour pill
• Sidebar nav with sections and add buttons
• New Person button

Interactions

• Cmd/Ctrl+K toggles the palette anywhere
• Arrow keys move selection; Enter runs; single-letter shortcuts run when palette is open and input is empty
• Typing filters rows with fuzzy match and highlights matched characters
• Continue ends the tour and leaves the palette open for practice
• Skip ends the tour at any step
• Palette opens with 120ms scale from 0.98; glow drifts slowly (disabled under reduced motion)

Data

• Command{id, label, group (general|navigation|create), shortcut, icon, requires_network bool}
• Person{id, owner_id, name, company, last_contacted_at}
• Note{id, person_id, body, created_at}
• Reminder{id, person_id, due_at, done}
• TourProgress{user_id, step, completed_at, skipped bool}

Guardrails

Experience

• Show the shortcut in the tip exactly as the user will press it (Cmd on macOS, Ctrl elsewhere)
• Keep the palette usable during the tour (the tip must not cover rows)
• Always offer Skip on every tour step
• Destructive commands (Sign out) sit last and ask no confirmation only if reversible
• Remember recent commands per user

Accessibility

• Palette uses combobox + listbox semantics with aria-activedescendant
• Shortcut badges have aria-hidden and the shortcut is in aria-keyshortcuts on the option
• Tip text is readable against the darkest gradient stop (checked against the base colour)
• Focus returns to the invoking element on close
• Glow animation stops under prefers-reduced-motion
• Counter "Step 7 of 7" exposed as text

Security

• RLS: people, notes and reminders are owner-only unless explicitly shared
• Commands that call the server re-check permissions server-side
• Invite-a-friend command rate-limited and validates email
• Sign out clears local caches of contact data

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 **Starglass**, the final product-tour step of a dark personal relationship manager. The app opens its command palette for the user and places a glassy gradient tip card beneath it that says: press Cmd/Ctrl+K (or the button) to open the palette and run any action from there. The user can practise immediately.

### Stack
React + TypeScript + Vite, Tailwind CSS, shadcn/ui Command (cmdk) and Popover on Radix, lucide-react, Motion for entrance and glow drift, TanStack Query, Supabase for auth, people, notes, reminders and tour progress.

### Pages & layout
1. **Sidebar** (near-black): invented lowercase logotype; Search, Home, Review; COLLECTIONS: People, Notes, Reminders; SHARED WITH ME: Shared people; GROUPS with a + button; "New Person" pinned at the bottom.
2. **Canvas**: very dark with two soft radial glows (warm amber bottom-left, violet lower-middle).
3. **Command palette** (520px max, upper third): large input "Type a command…", a GENERAL ACTIONS label, rows for Create note (N), Add a person (P), Ask the assistant, Search (/), Invite a friend, Support, Sign out. The selected row gets a 2px accent bar on the left and a slightly lighter background.
4. **Tip card** below the palette with a caret: title "Command palette", two lines of body, "7 / 7" left, a small "Continue" pill right.
5. **Skip** pill fixed bottom-right. On mobile the palette is a top sheet and the tip a bottom sheet.

### Design system
- Colors: `--canvas: #0e0e11` (app background), `--sidebar: #121215` (sidebar background), `--surface: #1c1c20` (command palette surface), `--fg: #ededf0` (primary text), `--muted: #9a9aa3` (group labels, secondary rows), `--accent: #5bc0d6` (selected-row bar, focus ring), `--tip: #4a2344` (coach-mark base (under gradient)), `--tip-fg: #d8c8d8` (secondary text on tip), `--glow: #6b3a2c` (background glow (decorative)), `--kbd: #2c2c32` (shortcut badge background).
- Tip card fill: linear gradient from `--tip` through #5a2d3d to #5d3a2a at 85% opacity with 16px backdrop blur; text contrast is verified against the base colour.
- Fonts: Inter (similar to the observed grotesk); palette input 18px/400; rows 16px/1.5; sidebar 14px; group labels 12px uppercase 600, 0.08em; shortcut badges JetBrains Mono 12px.
- Spacing: 4px base; 40px rows; 16px card padding.
- Radius: palette 10px; tip 12px; badges 4px; pills full.
- Shadows: palette `0 24px 60px rgba(0,0,0,.6)`.
- Motion: palette 120ms scale/fade; tip rises 8px after 150ms; glows drift over 20s; all static under reduced motion.

### Components & interactions
Sidebar, CommandPalette (fuzzy filter, highlighted matches, groups, recent actions when empty, running and failed row states), ShortcutBadge, TourTip (caret anchored to palette bottom edge), SkipPill, NewPersonButton. Cmd/Ctrl+K toggles the palette; arrows move; Enter runs; with an empty input a single letter triggers that row's shortcut. Continue marks the tour complete and leaves the palette open. Skip completes with `skipped = true`.

### Data & state
Tables: `people(id, owner_id, name, company, last_contacted_at)`, `notes(id, person_id, body, created_at)`, `reminders(id, person_id, due_at, done)`, `tour_progress(user_id, step, completed_at, skipped)`. The command list is a typed static registry. Mock 12 invented contacts. Handle states: tour open, palette without tour, no results, action running/failed, recent actions, offline (network commands disabled with a reason).

### Accessibility
Use combobox/listbox semantics with aria-activedescendant; each option exposes `aria-keyshortcuts`. The tip is `role="dialog"` labelled by its title, and its counter reads "Step 7 of 7". Focus returns to the trigger on close. Stop glow motion under reduced motion. Focus rings are the cyan accent at 2px.
Verified contrast: row text on palette: #ededf0 on #1c1c20 = 14.54:1; muted group label on palette: #9a9aa3 on #1c1c20 = 6.09:1; sidebar text: #ededf0 on #121215 = 16.00:1; tip title on tip base: #ffffff on #4a2344 = 13.00:1; tip body on tip base: #d8c8d8 on #4a2344 = 8.16:1; selected bar / focus ring on palette: #5bc0d6 on #1c1c20 = 8.05:1; shortcut badge text: #ededf0 on #2c2c32 = 11.88:1.

### Security
RLS: people, notes and reminders are owner-only, with a share table for explicit grants. Server-side commands re-check authorisation. The invite command validates email with zod and is rate-limited. Sign out clears TanStack Query caches and local storage.

### Performance & SEO
Keep the command registry synchronous so the palette opens instantly. Render glows with CSS gradients, not images. Debounce server search to 150ms. App routes are noindex.

### Guardrails
- Invented logotype and names; the assistant row is labelled generically.
- The tip never covers palette rows.
- Acceptance criteria: (1) Cmd/Ctrl+K opens the palette on every screen; (2) the tour step appears once and Continue and Skip persist; (3) shortcuts and arrows work; (4) all states render; (5) screen readers announce the active option and shortcut.

Open the builderAll templatesThis palette on its own