Signet

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

Rethink Sans gives clean, friendly headings and Sen has a little geometric quirk in the body, keeping the tidy-but-personal signature utility.

• Rethink SansHeadings: two-line headline 36px 700
• SenBody: list items and UI 16px, line-height 1.5

Who it is for

• Professionals and small business owners
• Marketing teams standardizing signatures
• Freelancers and consultants
• Event and print marketers needing QR codes

Layout

1. Single-screen launcher: large rounded white card centered on pale gray
2. Left half: bold headline + two list buttons (Email Signature, QR Code) with icon tiles and chevrons
3. Right half: gray panel with flat illustration of a browser window and phone showing signature and QR
4. Signature editor: 5-step stepper, form panel, live preview, preview modal, export (copy HTML / PNG)
5. QR generator: input, style options, preview, download
6. Saved signatures list (auth)

Palette

Tidy, practical, friendly, professional, minimal. A focused utility that gets out of the way.

• page background#f7f9fb
• card#ffffff
• text#111827
• primary blue#1c6ff5
• illustration navy#111827
• panel gray#eceef1
• border#e2e8f0
• input border#7591b7

Every checked pair, measured again

As vibld’s tokens

The palette on the 15+ color tokens vibld styles a project with, each text color 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

Rethink Sans 700, 36px, two-line headline

Body

Sen 400 16px for list items and UI, line-height 1.5

Clean Rethink Sans headings with slightly quirky Sen body; exported signatures restricted to web-safe fonts

Spacing and imagery

Centered 1150px split card with 16px radius and soft shadow; generous interior padding (~48px); list buttons 12px radius, full width

Monochrome flat illustration of devices, QR code and signature placeholders with decorative gray circles; no photos.

Components

• Split launcher card
• Tool list buttons with icon tiles
• Stepper (5 steps)
• Template picker (6 layouts)
• Font select (web-safe)
• Accent color swatches
• Profile image uploader
• Social links repeater
• Drag-and-drop field ordering
• Live preview + modal
• Copy HTML / Download PNG buttons
• QR generator with download

Interactions

• Hover tint on tool list items with chevron nudge
• Step navigation with validation
• Drag-and-drop reorder of signature elements
• Live preview updates instantly
• Copy-to-clipboard toast
• PNG export rendering
• QR regenerates on input change
• Save/load multiple signatures

Data

• Signature{id, user_id, name, template, font, accent, fields{name, title, company, phone, email, website, address, custom[]}, order[], image_url, socials[{network, url}], updated_at}
• QrCode{id, user_id, data, fg, bg, size, created_at}

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 a template'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 templates)
- 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 color 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, labeled 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.

### Goal
Build **Signet**, a tidy utility with two tools: an email signature builder that outputs client-compatible HTML, and a QR code generator. Professionals fill in a short guided form, choose a layout, font and accent, add a photo and social links, preview it, and copy HTML or download a PNG. Signed-in users can save several signatures. The job: produce a polished signature that renders correctly in any mail client, in minutes.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react. react-hook-form + zod for the stepper, dnd-kit for ordering signature rows, `qrcode` for QR generation, html-to-image for PNG export, Framer Motion for step transitions. Supabase: Auth (optional, to save), Postgres (signatures, qr_codes), Storage for profile images (public-read so images load in email clients).

### Pages & layout
1. **Launcher** – one centered rounded card split in half: left has a two-line bold headline and two full-width list buttons (envelope icon "Email signature", QR icon "QR code") with chevrons; right is a soft gray panel with a flat monochrome illustration of a laptop window and phone.
2. **Signature editor** – top stepper: Details → Layout → Style → Image & social → Export. Left form, right live preview on a mock email pane. Preview modal at larger size. Export: Copy HTML, Download PNG, Save.
3. **QR tool** – content type (URL, text, vCard), colors, size, error correction; live preview; PNG/SVG download.
4. **My signatures** – list with rename/duplicate/delete.

### Design system
`--page: #f7f9fb`, `--card: #ffffff`, `--foreground: #111827`, `--primary: #1c6ff5`, `--panel: #eceef1`, `--border: #e2e8f0` (decorative dividers), `--input-border: #7591b7`, `--muted-foreground: #656c79`. Fonts: Rethink Sans 700 for headings, Sen 400/500 for UI. Exported signature fonts limited to 8 web-safe families; accents from 8 preset colors. Scale 13/16/18/24/36 (16px body and inputs, 13px only for helper text). Radius 16px launcher card, 12px list items, 8px inputs. Shadow `0 20px 50px rgb(17 24 39 / .08)`. Motion 180ms ease.

### Components & interactions
ToolListButton (hover bg + chevron shift, focus ring), Stepper (current/complete/error), TemplateCard (6 layouts, selected ring), FontSelect, ColorSwatches, ImageUploader (crop to circle/square, size check), SocialRepeater (add/remove, URL validation), SortableFieldList (keyboard sortable), SignaturePreview, PreviewModal, CopyButton (copied toast/error), PngExport (rendering spinner), QrPreview, EmptySaved state.

### Data & state
Editor state in one typed reducer; persisted to `signatures` on save and to localStorage as an unsaved draft. HTML generator produces table-based markup with inline styles only (no CSS classes, no web fonts, absolute image URLs). Seed demo with a fictional person and company.

### Accessibility
Stepper uses an ordered list with `aria-current="step"`. Every input has a visible label and error text. Sortable list operable by keyboard (dnd-kit keyboard sensor + move up/down buttons). Swatch buttons have color names. Generated signature includes `alt` on images and meaningful link text; warn if chosen accent on white is below 4.5:1. Illustration is decorative. Verified contrast: body text #111827 on #ffffff = 17.7:1; muted text #656c79 on #ffffff = 5.2:1; muted text #656c79 on #eceef1 = 4.5:1; white #ffffff on #1c6ff5 = 4.5:1; input border #7591b7 on #ffffff = 3.2:1.

### Security
Signatures RLS owner-only; QR codes owner-only. Profile images: jpeg/png ≤ 1 MB, resized server-side or client-side before upload, stored under `uid/`. Validate all URLs (http/https/mailto/tel only) with zod before embedding; escape all text in generated HTML to prevent injection; never accept raw HTML from users. Clipboard writes only on explicit click.

### Performance & SEO
Tiny launcher bundle; code-split the editor and QR library. Launcher and tool pages have descriptive titles and meta/OG. Lighthouse 95+ on launcher.

### Guardrails
- Placeholder names and generic social icons; no trademarked logos beyond neutral glyphs.
- No fake reviews.
- Keep only data needed for the signature; allow deleting everything.
- Typed small components, no `any`, visible errors.
- Done when: pasted HTML renders identically in a test mail client, PNG export matches preview, field reorder works by keyboard, a QR code scans correctly, and saved signatures reload for the owner only.

Open the builderAll templatesThis palette on its own