Zinnia Keys

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 500, 28px H1, -0.01em
• InterBody: Inter 400 16px / 1.5; captions 14px

Patterns

• split card over textured gradient background
• masked secret with reveal and copy
• segmented control for setup path
• tabbed prompt snippets with copy
• full-width primary button with rate-limit note

States it is designed for

• Key generating: skeleton in key card and disabled copy
• Key creation failed: inline error with Retry and support link
• Clipboard blocked: fallback 'select text' hint
• Returning user (key already viewed): key shown as prefix only with 'Create new key' link
• Long prompt: code box scrolls vertically with max height

Who it is for

• developers using AI coding assistants
• backend engineers
• new API customers

Layout

1. Full-bleed saturated blue textured background (generated noise/wave pattern)
2. Centred card (max 540px, radius 12px) split into two columns
3. Left column: centred H1 'Ready to build' and a two-line explanation
4. Right column (tinted panel): API key card (icon, title, 'created just now', masked key with reveal and copy); segmented control 'In my codebase / In my agent'; inner card with assistant tabs, instruction line with copy icon, grey code box with the prompt; full-width blue primary button; small note with credits and rate limit
5. Below 720px columns stack, left message on top; background simplifies to a flat gradient

Palette

Celebratory but businesslike: a vivid blue field frames a quiet white card that hands over the keys.

• backdrop#2e62e8
• surface#ffffff
• panel#f5f5f6
• text#141414
• muted#5e6068
• code-bg#ececee
• primary#1d6ae5
• on-primary#ffffff
• key-icon#1e8a4e
• input-border#8a8c93
• focus#1d6ae5

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 500, 28px H1, -0.01em

Body

Inter 400 16px / 1.5; captions 14px

Key and prompt in JetBrains Mono 14px. Similar to the observed neo-grotesk.

Spacing and imagery

Compact inside a generous backdrop; 4px base; card padding 24px; inner cards 16px; radius 12px card, 10px inner cards, 8px segmented control and button; shadow 0 20px 50px rgba(10,30,90,.25) on the main card.

Abstract generated texture (organic blotches in two blues) behind the card; no photos; key icon in a green rounded square.

Components

• SuccessMessage
• ApiKeyCard (masked, reveal, copy, created time)
• SegmentedControl (codebase/agent)
• AssistantTabs
• PromptSnippet with copy
• InstallSnippet (package manager command + env var)
• PrimaryButton 'Go to dashboard'
• RateLimitNote

Interactions

• Reveal toggles the full key for 30s then re-masks automatically
• Copy buttons show 'Copied' feedback and announce it
• Segmented control swaps between SDK install steps and assistant prompt; tabs switch prompt wording per assistant
• Primary button navigates to the dashboard; key is never shown again in full after leaving

Data

• ApiKey{id, user_id, prefix, secret_hash, viewed_at, created_at}
• SetupSnippet{target (codebase|agent), variant, body}
• Account{id, credits, rate_limit_per_min}

Guardrails

Experience

• Say plainly that this is the only time the full key is visible
• Default the segmented control to the path most users choose and remember the choice
• Keep the primary button reachable without scrolling on a 700px-tall viewport
• Show credits and rate limit in one short sentence under the button
• Never put the real secret inside the assistant prompt; reference an environment variable instead

Accessibility

• Segmented control is a radiogroup; assistant tabs use ARIA tabs with arrow keys
• Copy feedback via aria-live='polite'
• Reveal button has aria-pressed and a label that includes 'API key'
• Card text sits on solid white; the textured background is decorative only
• Focus ring 2px #1d6ae5 with white offset, visible on the panel

Security

• Store only a hash; show plaintext once, mark viewed_at, then never return it again
• RLS: api_keys owner-only select of non-secret columns
• Snippets reference an env variable name, never inline the key
• Rate-limit key creation and reveal endpoints; audit key creation

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 **Zinnia Keys**, the 'ready to build' final onboarding step of a developer data API. It shows the new API key once, offers two setup paths (add to my codebase, or hand a prompt to my AI coding assistant), and sends the user to the dashboard.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix ToggleGroup, Tabs), lucide-react, TanStack Query, zod. Supabase Auth + Postgres; an Edge Function creates the key and returns plaintext exactly once.

### Pages & layout
1. **Backdrop**: full-viewport blue textured background (CSS/SVG noise or a pre-rendered generic texture), no content.
2. **Card** (540px desktop, two columns): left = centred H1 'Ready to build' + two-line explanation; right = tinted panel containing ApiKeyCard, segmented control, snippet card (assistant tabs with generic labels such as 'Assistant A', 'Assistant B', 'Editor agent', 'Other'; instruction line; copy icon; code box), primary 'Go to dashboard' button and a note like '1,000 credits at 30 requests/min'.
3. **Codebase path**: install command, env var line, 5-line example request.
4. Under 720px: single column, message on top.

### Design system
- Colors: `--backdrop: #2e62e8`, `--surface: #ffffff`, `--panel: #f5f5f6`, `--text: #141414`, `--muted: #5e6068`, `--code-bg: #ececee`, `--primary: #1d6ae5`, `--on-primary: #ffffff`, `--key-icon: #1e8a4e`, `--input-border: #8a8c93`, `--focus: #1d6ae5`.
- Fonts: Inter 400/500, body 16px/1.5, H1 28px; JetBrains Mono 14px for key and snippets.
- Spacing: 4px scale; 24px card padding; 12px between panel blocks.
- Radius: 12px card, 10px inner cards, 8px controls.
- Shadows: card 0 20px 50px rgba(10,30,90,.25); inner cards 0 1px 2px rgba(0,0,0,.05).
- Motion: card fades up 250ms; copy check morph 150ms; reduced motion disables both.

### Components & interactions
ApiKeyCard (masked value showing prefix + last 4, reveal for 30s with countdown, copy), SegmentedControl, AssistantTabs, SnippetBox (scrollable, copy), InstallSteps, PrimaryButton, RateLimitNote, InlineError with Retry.

### Data & state
Tables `api_keys(id, user_id, prefix, secret_hash, viewed_at)`, `accounts(id, credits, rate_limit_per_min)`, static `setup_snippets` in code. The create-key Edge Function returns `{prefix, plaintext}` once; the client holds plaintext in memory only and drops it on navigation. Remember the chosen setup path in localStorage (wrapped in try/catch). Seed: new account with 1,000 credits.

### Accessibility
Radiogroup and tabs semantics, announced copy results, labelled reveal toggle, decorative backdrop hidden from assistive tech, code boxes are focusable regions with labels, and the reveal countdown is announced only once.
Verified contrast: body text: #141414 on #ffffff = 18.42:1; muted caption on panel: #5e6068 on #f5f5f6 = 5.76:1; code text on code box: #141414 on #ececee = 15.61:1; primary button label: #ffffff on #1d6ae5 = 4.95:1; focus ring on panel: #1d6ae5 on #f5f5f6 = 4.54:1; input border: #8a8c93 on #ffffff = 3.36:1; key icon on white: #1e8a4e on #ffffff = 4.37:1; white text on backdrop (if any): #ffffff on #2e62e8 = 5.21:1.

### Security
Hash keys at rest; plaintext is returned once and never logged. RLS on `api_keys` (owner-only, secret_hash never selectable by clients via a view). Rate-limit creation. Snippets use `$API_KEY` env var placeholders. Audit log on key creation.

### Performance & SEO
Backdrop texture as a compressed image or CSS; card renders before it loads. Tiny route bundle. App routes noindex.

### Guardrails
- Generic assistant labels only; no real tool or vendor names.
- The key is visible once; make that explicit.
- Acceptance criteria: (1) reveal re-masks after 30s; (2) both setup paths show correct snippets; (3) copy works and announces; (4) returning users see prefix only; (5) layout stacks cleanly at 390px.

Open the builderAll templatesThis palette on its own