Umberlit

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.

• Bricolage GrotesqueHeadings: Bricolage Grotesque 800, 40px, -0.01em, sentence case (similar to the observed heavy rounded display)
• InterBody: Inter 400, 16px/1.5 off-white; button 16px 600

Patterns

• full-bleed brand-colour success screen
• hero illustration above headline
• heavy display headline
• pill primary button
• close X top-right
• centred single-column message

States it is designed for

• Success (default)
• Order created but rate already met: 'Converted now' variant with final amounts
• Insufficient balance warning variant (keep at least X in balance)
• Loading recap (skeleton lines)
• Error fallback if order fetch fails with link to orders list

Who it is for

• Consumers and freelancers holding multi-currency balances
• Small businesses converting on a target rate
• Mobile-first users finishing a short flow

Layout

1. Full-viewport deep forest-green surface
2. Top bar: wordmark left, close X right (both lime on green)
3. Centred ribbon/confetti illustration (~200px)
4. Heavy display headline in lime
5. Two lines of off-white body text restating the order
6. Wide lime pill button 'Done' with dark label
7. Mobile: identical stack, button pinned 24px above the safe area

Palette

celebratory, confident, reassuring. A brief burst of colour that confirms money is handled correctly.

• screen background#083400
• accent lime (headline, button)#9ae66e
• body text on green#e6f2df
• muted text on green#b7c9ad
• button label#083400
• light surface (next screen)#ffffff
• text on light#0e0f0c
• focus ring on green#ffffff

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

Bricolage Grotesque 800, 40px, -0.01em, sentence case (similar to the observed heavy rounded display)

Body

Inter 400, 16px/1.5 off-white; button 16px 600

Keep the display face for the one headline only; avoid all-caps for the headline (accessibility rule).

Spacing and imagery

Centred column max 480px; 32px between illustration and headline, 12px to body, 24px to button; button 48px tall, 280px wide, fully rounded.

One original abstract ribbon-and-confetti illustration in pink/blue gradients; no photos, no charts.

Components

• Full-screen takeover layout
• Wordmark
• Close icon button
• Hero illustration
• Display headline
• Order recap text with amounts and currencies
• Pill primary button
• Detail link 'View scheduled conversions'

Interactions

• Illustration animates in once (ribbon unfurl, 600ms) then stays still; skipped under reduced motion
• Done and X both return to balances; Esc closes
• Focus starts on the headline, Tab reaches Done
• Recap values (amounts, currencies, target rate) come from the just-created order

Data

• ConversionOrder{id, from_currency, to_currency, amount, target_rate, status (scheduled|filled|cancelled|expired), created_at, expires_at}
• Balance{currency, available}

Guardrails

Experience

• Restate amount, currencies and target rate in plain words
• Tell the user the one thing they must do (keep enough balance)
• Offer exactly one primary action; X is a secondary escape
• Keep the celebration short and never block the button
• Provide a link to manage or cancel the order

Accessibility

• Headline is an h1 and receives focus
• Lime on green passes 4.5:1 for both headline and button label
• Focus ring is white 2px so it's visible on both green and lime
• Illustration aria-hidden; the text carries meaning
• No flashing; confetti respects reduced motion

Security

• Never render full account numbers on the success screen
• Order recap fetched by id with the user's session; ids are unguessable UUIDs
• Close/Done are plain navigation; no state-changing GET links
• Do not expose rate-provider internals in errors

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 **Umberlit**'s scheduled-conversion success screen for a multi-currency money app. After a user sets up 'convert 250 EUR to USD when the rate reaches 1.12', this full-screen moment celebrates, restates the order in plain words, reminds them to keep the funds available, and returns them to their balances.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, Motion for the one-time illustration entrance, TanStack Query against a mock API (MSW or in-memory), date-fns for expiry dates, lucide-react for the close icon. Local state only; wire a real API later.

### Pages & layout
1. **/convert/scheduled/:orderId** as a full-screen route over the app (no sidebar): `--bg` fills the viewport.
2. Top bar (max 1040px container): invented wordmark left, 40px close X right.
3. Centre column (max 480px): original ribbon/confetti illustration 200px; h1 'You're all set' in `--accent`; body 'We'll convert 250.00 EUR to USD once the rate reaches 1.12. Keep at least 250.00 EUR in your balance until then.'; lime pill 'Done'; small muted link 'View scheduled conversions'.
4. Variants: 'Converted now' (rate already met, shows received amount), 'Low balance' (adds a muted line with current balance), loading skeleton, error.
5. Mobile: same stack; Done pinned above the safe area.

### Design system
- Colors: `--bg: #083400` (screen background), `--accent: #9ae66e` (accent lime (headline, button)), `--fg: #e6f2df` (body text on green), `--muted: #b7c9ad` (muted text on green), `--on-accent: #083400` (button label), `--surface: #ffffff` (light surface (next screen)), `--ink: #0e0f0c` (text on light), `--ring: #ffffff` (focus ring on green).
- Fonts: Bricolage Grotesque 800 for the h1 (40px desktop / 32px mobile, sentence case); Inter 400/600 for body and button.
- Spacing: 8px base; 32/12/24px vertical rhythm around headline and button.
- Radius: button 9999px.
- Shadows: none; contrast comes from colour.
- Motion: illustration unfurl 600ms once; button hover darkens lime ~6%; everything static with prefers-reduced-motion.

### Components & interactions
`TakeoverLayout`, `Wordmark`, `CloseButton` (Esc handler), `HeroIllustration` (inline SVG, aria-hidden), `SuccessHeadline`, `OrderRecap` (formats money with Intl.NumberFormat and currency codes), `PillButton`, `TextLink`. Done and X navigate to `/balances`; keyboard focus starts on the h1.

### Data & state
Mock `ConversionOrder{id, from_currency, to_currency, amount, target_rate, status, created_at, expires_at}` and `Balance{currency, available}` served by TanStack Query. Variant chosen from order status and balance. Keep amounts as integer minor units; format at render time.

### Accessibility
h1 receives focus on mount. White 2px focus ring offset 2px on green; dark ring on the lime button. Recap is plain text with currency codes spelled out for screen readers ('euros'). Illustration aria-hidden. Honour reduced motion; nothing flashes.
Verified contrast: headline lime on green: #9ae66e on #083400 = 9.27:1; body text on green: #e6f2df on #083400 = 12.08:1; muted text on green: #b7c9ad on #083400 = 7.97:1; button label on lime: #083400 on #9ae66e = 9.27:1; focus ring on green: #ffffff on #083400 = 13.99:1; focus ring on lime button: #083400 on #9ae66e = 9.27:1; text on next light screen: #0e0f0c on #ffffff = 19.23:1.

### Security
Treat order ids as opaque UUIDs; the mock API only returns orders for the current mock user. No account numbers on screen. Done/X are pure navigation. When a real backend arrives, fetch orders under the user's session with owner-only access.

### Performance & SEO
Illustration inline SVG under 12KB; Bricolage Grotesque subset to Latin and weight 800 only, `font-display: swap`. Route is `noindex`.

### Guardrails
- Draw an original illustration and wordmark; no real fintech branding.
- Invent amounts and rates.
- Avoid all-caps headlines.
- Keep copy factual about when conversion happens; never imply a guaranteed rate.

Acceptance criteria:
- [ ] Recap shows amount, currencies and target rate from the order
- [ ] Low-balance and converted-now variants render
- [ ] Esc, X and Done all return to balances
- [ ] Contrast pairs pass on green and lime

Open the builderAll templatesThis palette on its own