Gildway

A mock-up of the homepage, drawn from this design’s layout, palette and typefaces. A build follows the full prompt below.

Start from this templateRead the build prompt

Typefaces

Both named faces are kept: Space Grotesk's quirky grotesk headings and Outfit's open geometric body make everyday money feel bright and friendly, in a pairing not used elsewhere.

• Space GroteskHeadings: headings 60px / 58px 500, stats 40px
• OutfitBody: body 16px/1.6 400 +0.02em, subheads 20px 500, buttons 15px 500, tabular card numbers

Another design for the same product as Tallyway, so the gallery lists it there. A marketing site for a payments and cards startup.

Patterns

• minimal nav with text login and 'Menu' button opening an overlay
• large left-aligned hero headline over thin orbit line arcs
• row of two-tone payment card illustrations bleeding off the right edge
• stat grid with accent suffixes beside a paragraph
• square-cornered solid CTA with arrow
• feature list of purple subheads beside a phone app mockup
• skewed stack of cards illustration
• full-bleed purple CTA band with orbit arcs
• pricing offer cards
• FAQ accordion
• membership perks section

States it is designed for

• Overlay menu open/closed with focus trap
• Get-the-card waitlist: invalid email, submitting, joined, error
• Reduced motion: no tilt, no drift, arcs static
• Card row on mobile with scroll-snap and position dots
• FAQ open/closed

Who it is for

• Everyday consumers who pay and send money digitally
• Freelancers and small merchants
• Young professionals wanting a modern card
• Users comparing digital wallets

Layout

1. Top bar: diamond-cluster logo mark + wordmark left; 'Log in' text link and purple 'Menu' button right (opens full-screen overlay nav)
2. Hero on pale icy background: 60px two-line headline left, muted paragraph; two thin violet orbit arcs sweeping from the top right
3. Card row: three large two-tone payment cards (purple/white, navy/cyan, amber/black) with card number, name, expiry and a small mark, third card bleeding off the right edge
4. About split: 58px heading across; stat grid 2x2 (value with purple suffix + label) left; paragraph and amber 'Learn more' button right
5. Split: heading and three purple subhead + text features (Send, Pay, Save) left; phone mockup (balance header, action icons, e-wallet chips, recent transactions) right
6. Split reversed: skewed stack of three cards left; heading and three purple-subhead features right
7. Full-bleed purple CTA band with large white headline and orbit arcs
8. Offer/pricing cards, FAQ, member perks, repeated CTA, footer
9. Breakpoints: headline wraps to four lines at 32px; card row becomes a horizontal swipe row; stat grid stays 2x2; phone mockup centred under copy

Palette

bright, optimistic, friendly, trustworthy. Everyday money made colourful and simple.

• page background (icy)#f5feff
• navy ink / card#0b1f51
• muted text#666666
• violet accent / Menu button / CTA band#8854e7
• amber button / card#ffc001
• pale amber secondary button#fff2cc
• cyan card band#00cfe8
• white surface#ffffff
• input border#8f8f8f

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

Space Grotesk 500 (similar to the observed grotesk display), hero 60px/1.15, h2 58px, stats 40px

Body

Outfit 400, 16px/1.6 with slight 0.02em tracking; feature subheads 20px 500 in violet

Friendly geometric sans with open letterforms; card numbers use tabular numerals. Buttons are 15px 500 with 0.04em tracking.

Spacing and imagery

1000px content width; 120px sections; cards 12px radius with a subtle 0 20px 40px rgba(11,31,81,.12) shadow; buttons 4px radius; phone mockup 36px radius.

Flat two-tone card illustrations with fine line patterns and contactless icons, a clean phone app mockup, thin violet orbit arcs. No photography.

Components

• Overlay menu
• Hero headline with orbit arcs
• Payment card illustration (three colourways)
• Stat with accent suffix
• Amber button with arrow
• Feature subhead list
• Phone app mockup
• Skewed card stack
• Purple CTA band
• Offer card
• FAQ accordion

Interactions

• Card row drifts horizontally a few pixels on scroll; cards tilt towards the cursor subtly
• Orbit arcs draw in on load
• Stats count up once visible
• Menu button opens a full-screen overlay with staggered links; Escape closes
• Skewed stack fans out slightly on hover
• Arrow in buttons slides right on hover

Data

• CardDesign{colourway (violet|navy|amber), holder_name, masked_number, expiry}
• Stat{value, suffix, label}
• Feature{title, body}
• Offer{name, monthly_fee, perks[], cta}
• Faq{question, answer}
• WaitlistEntry{email, created_at}

Guardrails

Experience

• Card illustrations use obviously fake numbers (e.g. 0000 1234 5678 9012) and a generic holder name
• Amber is the primary action colour; violet marks menu and subheads
• Stats sit next to their explanation so they are not floating claims
• Feature subheads are one word verbs (Send, Pay, Save) with one sentence each
• The overlay menu includes Log in and the primary CTA

Accessibility

• Violet text darkened to #8854e7 to pass on the icy background
• Navy text on amber and cyan fills; never white on amber
• Card illustrations are decorative with one alt summary; masked numbers are not read out
• Overlay menu is a Radix Dialog with focus trap and Escape
• Tilt and drift disabled under reduced motion
• Visible 2px navy focus ring with offset

Security

• Never ask for card numbers, bank details or IDs on the marketing site
• Waitlist email validated with zod both sides; RLS anon insert-only
• Rate limit and honeypot on the waitlist endpoint
• Log in routes to the app's own auth origin over HTTPS

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 the landing site for **Gildway**, a payments app with colourful virtual cards, an e-wallet and simple transfers. The page is bright and friendly: icy white background, navy type, violet and amber accents, bold two-tone card illustrations and a phone app mockup. Primary action: get the card (join the waitlist); secondary: log in.

### Stack
Astro with React islands and TypeScript, Tailwind CSS, shadcn/ui on Radix (Dialog for the overlay menu, Accordion), lucide-react, Motion for arcs, tilt, stats and menu stagger, react-hook-form + zod for the waitlist, Supabase for waitlist storage.

### Pages & layout
1. **Home**: top bar (diamond-cluster mark + wordmark; "Log in" link and violet "Menu" button opening a full-screen overlay). Hero: 60px two-line headline (fresh copy about paying without friction), muted paragraph, violet orbit arcs from top right. Card row: three two-tone cards (violet/white, navy/cyan, amber/black) with fake masked numbers, generic holder name and expiry; the third bleeds off the right.
   About: big heading; 2x2 stat grid (value + violet suffix + label) left; paragraph + amber "Learn more" right.
   Split: heading and three violet subhead features (Send, Pay, Save) left; phone mockup (balance header, four action icons, e-wallet chips, recent transactions) right.
   Split reversed: skewed card stack; heading and three features (Data protection, Easy to use, Quality design).
   Purple CTA band with white headline and arcs. Offer cards, FAQ, member perks, CTA, footer.
2. **Pricing/Offers**, **Help** (FAQ), **Contact**.
Mobile: headline 32px, card row swipes with scroll-snap, phone mockup centred.

### Design system
```
--bg: #f5feff; --navy: #0b1f51; --muted: #666666; --violet: #8854e7;
--amber: #ffc001; --amber-soft: #fff2cc; --cyan: #00cfe8; --white: #ffffff;
--input-border: #8f8f8f;
```
Fonts: Space Grotesk 500 (similar to the observed display grotesk) for headings (60/58px) and stats (40px); Outfit 400 body 16px/1.6 +0.02em; subheads 20px 500 violet; tabular numerals on cards. Spacing 8px base, 120px sections, 1000px width. Radius: cards 12px, buttons 4px, phone 36px. Shadow on cards 0 20px 40px rgba(11,31,81,.12). Motion: 1.2s arc draw, 6deg max tilt, 400ms menu stagger.

### Components & interactions
TopBar + OverlayMenu (Dialog, staggered links, Escape), HeroArcs (SVG), PaymentCard (colourway prop, tilt on pointer), StatGrid (count-up), Button (amber | soft), FeatureList, PhoneMock, CardStack (fan on hover), CtaBand, OfferCard, FaqAccordion, WaitlistForm.

### Data & state
Content JSON: `cards`, `stats`, `features`, `offers`, `faqs` (invented, e.g. "Alex Morgan", "0000 1234 5678 9012"). Waitlist writes `waitlist(id, email unique, created_at)`. Client state: menu open, form status.

### Accessibility
Violet text darkened to pass; navy labels on amber, cyan and soft amber. Card art decorative with alt summary; numbers not announced. Dialog menu traps focus and restores it. Reduced motion removes tilt, drift and arc drawing. Navy focus ring 2px.
Verified contrast: navy headline on icy background: #0b1f51 on #f5feff = 15.43:1; muted paragraph on icy background: #666666 on #f5feff = 5.61:1; violet subhead on icy background: #8854e7 on #f5feff = 4.59:1; white label on violet Menu button: #ffffff on #8854e7 = 4.7:1; navy label on amber button: #0b1f51 on #ffc001 = 9.63:1; navy text on cyan card band: #0b1f51 on #00cfe8 = 8.34:1; navy label on pale amber button: #0b1f51 on #fff2cc = 14.16:1; white on navy card: #ffffff on #0b1f51 = 15.8:1; input border on white: #8f8f8f on #ffffff = 3.23:1.

### Security
No financial inputs of any kind on the marketing site. Waitlist: zod validation both sides, RLS on `waitlist` with anon insert-only and no select, rate limit, honeypot, confirmation via a transactional email service. Log in links to the app's separate auth origin.

### Performance & SEO
Static build; cards as inline SVG/CSS (no raster), phone mockup AVIF with fixed size. Self-host fonts. Metadata, OG image, FAQPage JSON-LD. Lighthouse 95+.

### Guardrails
- All names, card numbers, merchants and balances are fake and obviously so; no real network logos.
- No claims about regulation, insurance or fees beyond placeholder copy.
- Typed components, no `any`, content in JSON.
- Acceptance criteria: (1) overlay menu fully keyboard accessible; (2) card row swipes smoothly at 390px; (3) waitlist handles all states; (4) reduced motion removes tilt and arcs; (5) every recorded contrast pair passes.

Open the builderAll templatesThis palette on its own