Cipherleaf

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

SUSE is a clean geometric sans that keeps a security topic friendly, and Fragment Mono's grotesk-flavoured mono makes the ciphertext chips look tidy rather than intimidating.

• SUSEHeadings: headline 48px 600 at -0.04em, card titles 16px 500
• SUSEBody: body 16px/1.6 400, card descriptions 14px
• Fragment MonoFigures and code: ciphertext and code 14px

Patterns

• centered pill tab nav
• narrow single-column intro
• underline tabs
• two-column product cards with chevron
• rotating circular text badge around logo
• sandbox panel with request/response
• encrypted-value chips

States it is designed for

• missing service keys: setup checklist instead of sandbox
• encrypt request in flight
• encryption error with retry and raw error in a disclosure
• empty request log
• third-party call timeout on the forwarding demo
• iframe failed to load card fields

Who it is for

• backend developers evaluating field-level encryption
• security engineers
• teams handling payment or health data

Layout

1. Header: circular logo with rotating text ring left, centered pill nav (Home + five product pages) in a bordered capsule, purple 'Dashboard' pill right; nav scrolls horizontally on mobile
2. Intro: 720px column with a 48px two-line headline, three short paragraphs
3. Underline tabs: 'Encrypt data' / 'Use encrypted data'
4. Product cards: two-column grid of bordered cards, each with icon, title, chevron, divider and a two-line description; one column on mobile
5. Sandbox pages: explanation column + panel with form input, 'Encrypt' action, encrypted output chip, and a request/response log

Palette

Clean, technical, reassuring. Soft lavender hairlines and one saturated purple keep a security topic friendly.

• page background#ffffff
• subtle panel#f7f7fc
• primary text#383a4d
• headline text#171825
• secondary text#5e6077
• brand purple (buttons, active tab)#6633ee
• card border#8e91b4
• decorative dividers#dfe1f4
• encrypted/ok status#15803d
• code block background#171825
• code text#e5e0f3

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

SUSE 600, 48px/1.1, tracking -0.04em

Body

SUSE 400, 16px/1.6

Card titles SUSE 500 16px; card descriptions 14px only inside cards, otherwise 16px; code in Fragment Mono 14px.

Spacing and imagery

Spacious, narrow reading column (720px) centered in a 1200px frame; cards 16px padding with an inner divider; radius 12px cards, full-round pills; no shadows.

Line icons (arrows, code brackets, card) at 16px; a circular text badge around the logo; no photos. Sandbox outputs show ciphertext in monospace chips.

Components

• PillNav
• RotatingTextBadge
• UnderlineTabs
• ProductCard
• SandboxPanel
• CiphertextChip
• RequestLog
• CodeBlock with copy
• IsolatedCardFieldFrame

Interactions

• Pill nav active item fills purple; hover tints lavender
• Tabs switch card sets without reload, arrow keys move between tabs
• Encrypt button shows spinner then reveals ciphertext with a short fade
• Copy buttons on ciphertext and code blocks
• Rotating ring pauses under reduced motion

Data

• Sandbox{slug, title, description, category (encrypt|use)}
• DemoRun{id, sandbox_slug, input_field, ciphertext, status (ok|error), latency_ms, created_at}
• ServiceConfig{app_id, has_proxy (bool), has_function (bool)}

Guardrails

Experience

• Always show what the server actually received next to what the user typed
• Explain each sandbox in two sentences before the controls
• Label demo data as fake; never invite real card numbers
• Keep the pill nav order identical to the product cards
• Show the setup checklist rather than a broken sandbox when keys are missing

Accessibility

• Pill nav is a nav landmark with aria-current on the active page
• Tabs use the Radix tabs pattern
• Ciphertext chips are selectable text with a labelled copy button
• Status uses icon + text, not colour alone
• Rotating ring is aria-hidden and static under reduced motion
• Primary button label is white on purple for contrast

Security

• Server keys only in server environment; the browser gets a public app id only
• Never log plaintext inputs; logs store ciphertext and metadata only
• Card-field iframe served from the provider origin with a strict frame-src CSP
• Validate every sandbox payload with zod and cap sizes
• Rate-limit sandbox endpoints per IP

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 **Cipherleaf**, a playground starter for a field-level encryption service. Each page demonstrates one capability with a working sandbox: encrypt in the browser, encrypt in a proxy before the server sees data, decrypt while forwarding to a third party, run logic on encrypted data, and collect card details inside an isolated iframe. Developers should leave understanding where plaintext exists and where it never does.

### Stack
Next.js (App Router), React, TypeScript, Tailwind CSS, Radix primitives, lucide-react. TanStack Query for sandbox calls, zod for payloads. Use the encryption service's SDK in route handlers; no database is required (runs are kept in memory for the session).

### Pages & layout
1. **Home**: header with circular logo (a slowly rotating text ring around it), centered pill nav (Home, SDKs, Inbound proxy, Outbound proxy, Functions, Card inputs) inside a bordered capsule, purple "Dashboard" pill on the right. A 720px column: two-line 48px headline, three short paragraphs, underline tabs ("Encrypt data" / "Use encrypted data"), then a two-column grid of product cards (icon, title, chevron, divider, description).
2. **/sdks**: text field, Encrypt button, ciphertext chip, and "what the server received" panel.
3. **/inbound**: form posts through the proxy; show plaintext typed vs ciphertext received side by side.
4. **/outbound**: send an encrypted value to a mock third-party endpoint; show the decrypted value the third party saw.
5. **/functions**: run a small calculation on an encrypted value and show only the result.
6. **/inputs**: embedded card-field iframe with test-card helper text.
Mobile: pill nav scrolls horizontally, cards are one column, side-by-side panels stack.

### Design system
- Colors: `--bg: #ffffff` (page background), `--surface: #f7f7fc` (subtle panel), `--fg: #383a4d` (primary text), `--heading: #171825` (headline text), `--muted: #5e6077` (secondary text), `--primary: #6633ee` (brand purple (buttons, active tab)), `--border: #8e91b4` (card border), `--hairline: #dfe1f4` (decorative dividers), `--success: #15803d` (encrypted/ok status), `--code-bg: #171825` (code block background), `--code-fg: #e5e0f3` (code text).
- Fonts: SUSE 600 headline 48px/1.1 with -0.04em tracking; body 16px/1.6; card copy 14px minimum; Fragment Mono 14px for ciphertext and code.
- Spacing: 4px base; 24px between cards; card padding 16px with an inner divider; 64px section spacing.
- Radius: 12px cards, full pills for nav and buttons.
- Shadows: none; borders in `#8e91b4`, decorative dividers in `#dfe1f4`.
- Motion: 150ms tint on hover; ring rotation 30s linear, off under reduced motion.

### Components & interactions
PillNav (active item filled purple with white text), RotatingTextBadge, UnderlineTabs (arrow keys), ProductCard (whole card is a link, chevron nudges 2px on hover), SandboxPanel (input, action, output), CiphertextChip (monospace, truncates middle, copy button), RequestLog (timestamp, endpoint, status, latency), CodeBlock with copy, IsolatedCardFieldFrame.

### Data & state
`Sandbox{slug, title, description, category}` as static content; `DemoRun{id, sandbox_slug, ciphertext, status, latency_ms}` kept in React state for the session. `ServiceConfig` read on the server to decide whether to show a setup checklist.

### Accessibility
Nav uses `aria-current="page"`. Tabs follow the Radix pattern. Output regions are polite live regions so screen readers hear "Encrypted, 42 characters". Status pairs icon and text. Focus ring 2px `#6633ee` with offset. The logo ring is decorative.
Verified contrast: body text: #383a4d on #ffffff = 11.17:1; headline: #171825 on #ffffff = 17.59:1; muted text: #5e6077 on #ffffff = 6.15:1; primary button label: #ffffff on #6633ee = 6.42:1; active tab / link text: #6633ee on #ffffff = 6.42:1; card border: #8e91b4 on #ffffff = 3.06:1; focus ring: #6633ee on #ffffff = 6.42:1; success status: #15803d on #ffffff = 5.02:1; code text: #e5e0f3 on #171825 = 13.64:1.

### Security
- Only the public app id reaches the browser; API keys live in server env.
- Route handlers never log plaintext; store only ciphertext, status and latency.
- zod validates and size-caps every payload; rate-limit sandbox routes per IP.
- CSP allows the card iframe origin only; label all demo data as fake and show test card numbers.

### Performance & SEO
Static pages with client sandboxes; lazy-load the iframe on /inputs. Preload SUSE 400/600. Descriptive titles per product page; OG image with the headline.

### Guardrails
- Never display or accept real card data; invent sample values.
- Keep product names generic (proxy, function, inputs) and copy original.
- Acceptance criteria: (1) each sandbox runs and shows ciphertext vs plaintext correctly; (2) missing keys show the checklist, not an error; (3) no plaintext appears in server logs; (4) nav and tabs are fully keyboard operable; (5) mobile has no horizontal page scroll except inside the pill nav.

Open the builderAll templatesThis palette on its own