Isambry

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

DM Sans keeps its soft italic for the magazine-style hero, and Radio Canada is a warm humanist grotesk that makes the body read like a thoughtful feature rather than a spec sheet.

• DM SansHeadings: hero 68px 600 with italic 300 words, H2 52px 500, feature numbers 36px light
• Radio CanadaBody: body 16px/1.5 400-500, eyebrows 13px semibold, captions 14px

Patterns

• rounded full-bleed painterly image hero with centred headline
• mixed roman and italic headline words
• dark button with orange square icon tab
• square-dot separated nav links
• greyscale logo row
• numbered four-card feature row with pixel-square illustrations and one elevated card
• orange micro-eyebrow above left-aligned H2 with muted italic second line
• vertical feature list driving an app-window mock
• horizontally scrolling testimonial cards with edge fade
• three-tier pricing with painterly highlighted middle card
• monthly/annual segmented toggle with discount label
• tabbed how-it-works over textured image panel
• usage cost calculator

States it is designed for

• Waitlist form: invalid email, submitting, already-on-list notice, success with position message, error with retry
• Command-input mock: idle caret, typing, plan generated (steps appear one by one)
• Pricing: included vs excluded features (excluded shown muted with a 'not included' sr-only label)
• Calculator: min/max bounds and a tooltip when the value exceeds the top plan
• Blog: category filter with empty result state
• Reduced motion: no auto-advance, no typing effect, static testimonials

Who it is for

• solo founders and consultants
• operations and sales teams
• early adopters of AI productivity tools

Layout

1. Header: small wordmark left; right-aligned nav links separated by small square dots; dark button with orange icon tab
2. Hero: 24px-radius card inset from page edges holding an oil-painting style landscape with a gradient scrim; centred three-line headline mixing bold roman and light italic, supporting copy, dark CTA
3. Logo row with caption
4. Why section: orange eyebrow, left H2, right-aligned paragraph; four numbered cards with pixel-square motifs, the second raised on white with a checklist mock
5. Delegation section: vertical list of four capabilities (active one bold with chevron, others muted) beside an app-window mock showing a command input and numbered step plan
6. Testimonials: centred H2, horizontally overflowing quote cards with avatars, edge fades
7. Pricing: left H2 with italic muted tail, right paragraph, segmented toggle, three cards (middle card with painterly background)
8. How it works: tab chips over a painterly panel containing an integrations app mock
9. Usage calculator, FAQ, integrations grid, closing CTA, footer
10. Mobile: hero card keeps 16px inset and taller aspect; nav collapses to a hamburger; feature cards become a swipe row; the app mock scales with horizontal scroll inside its frame

Palette

Warm, human, confident. It reads like a thoughtful magazine feature about a helpful colleague.

• page background (warm off-white)#f7f7f4
• card surface#eeede6
• raised card#ffffff
• ink / dark button#251f19
• muted text#68615a
• italic headline tail (large only)#948b81
• orange accent (fills, icon tabs)#f48d16
• orange text (fixed)#a95e08
• hairline / input border#9a8d7f

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

DM Sans: hero 68px/1.05 at 600 weight with italic 300 words; H2 52px/1.05 at 500 with italic muted second line

Body

Radio Canada 400-500, 16px/1.5; eyebrows 13px semibold in orange text colour; card captions 14px

Italic light words appear only at 48px+ (light weights never below 24px). The numbers in feature cards are 36px light, decorative and muted.

Spacing and imagery

Editorial: 1200px max width, 16px outer gutter, 140px section spacing. Radius 24px hero and panels, 12px cards, 8px buttons with a 28px orange square icon tab. Shadows only on the raised card and app mocks (0 12px 32px rgba(37,31,25,0.10)).

Painterly oil-texture landscapes and cloudscapes in terracotta, apricot and dusty rose used as hero, highlighted pricing card and tab panel backgrounds; pixel-grid orange squares as abstract feature motifs; realistic neutral app-window mocks with traffic-light dots.

Components

• Dot-separated nav
• Icon-tab button (dark body, orange square with chevron)
• Painterly hero card with scrim
• Logo row
• Numbered feature card with pixel motif
• Checklist plan mock
• Capability list with active indicator
• App-window mock with command input and step list
• Testimonial carousel card
• Segmented billing toggle
• Pricing card (plain and painterly)
• Feature bullet with orange square marker
• Tab chips
• Usage calculator slider
• Integrations grid
• Waitlist form
• FAQ accordion
• 404 page

Interactions

• Capability list auto-advances every 6s and on click or arrow keys, swapping the app mock content with a typed-command effect
• Feature cards lift on hover; the pixel squares rearrange subtly
• Testimonial row drags or scrolls horizontally with snap and arrow-key support
• Icon-tab buttons slide the chevron 2px right on hover; focus ring 2px orange text colour
• Billing toggle updates prices with a numeric roll
• Usage calculator slider updates estimated monthly cost live

Data

• Plan{id, name, price_monthly, price_annual, unit (flat|per_seat), blurb, features[{label, included}], cta}
• Capability{order, title, description, demo_command, demo_steps[]}
• Testimonial{quote, name, role, company_alias, avatar}
• Integration{name_generic, category, icon}
• Post{slug, title, category, excerpt, published_at}
• WaitlistEntry{email, use_case?, created_at, referral_code}

Guardrails

Experience

• Headlines pair a plain statement with an italic muted tail; never more than one italic phrase per heading
• The agent demo shows a human-approval step so the product never looks like it acts unchecked
• Excluded plan features stay listed but visibly muted so tiers are comparable
• Painterly backgrounds are used at most three times per page to keep them special
• Waitlist success message tells users what happens next and when
• Keep the hero to one CTA; secondary exploration lives in the nav

Accessibility

• Hero text sits on a 45% dark gradient scrim; white checked against the scrim over the lightest image area
• Orange eyebrow text uses #a95e08; the bright orange is fill-only
• Italic light text only at 48px+ and at least 3:1
• Capability list uses tabs semantics and pauses auto-advance on focus/hover
• App mocks are aria-hidden with a text description; decorative pixel squares are aria-hidden
• Testimonial scroller has previous/next buttons and is keyboard reachable

Security

• Waitlist inserts go through an edge function with zod validation, honeypot and rate limiting; RLS denies anon select
• Referral codes are random, non-sequential and not tied to email in URLs
• Contact form strips HTML and limits message length
• Legal page describes data retention for waitlist emails; delete-on-request path provided

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 **Isambry**, the marketing site for an AI agent that plans and carries out everyday knowledge work (email triage, scheduling, research briefs) with a human in the loop. The design is warm and editorial: off-white paper, painterly terracotta imagery, dark buttons with an orange icon tab, and headlines that pair a plain statement with an italic tail. Convert visitors into free sign-ups or waitlist entries.

### Stack
Astro + TypeScript, Tailwind CSS, React islands for the capability demo, testimonial scroller, pricing toggle, calculator and forms. Motion for transitions, lucide-react for icons, zod for validation. Supabase stores waitlist entries through an edge function.

### Pages & layout
1. **Home**: header with a small wordmark, dot-separated links and an icon-tab button. The hero card (24px radius, inset 16px) holds a painterly landscape with a dark gradient scrim, a centred three-line headline (bold roman plus light italic words), a short paragraph and a CTA. Then a logo row; the "Why" section (orange eyebrow, H2 left, paragraph right, four numbered cards with pixel-square motifs, the second raised with a checklist mock); a delegation section (capability list plus app-window mock with a command input and numbered step plan); testimonials; pricing; how-it-works tabs over a painterly panel; FAQ; integrations; closing CTA; footer.
2. **Workflows** (use-case gallery), **Pricing** (with usage calculator), **Blog** + post, **Contact**, **Waitlist**, **Legal**, **404**.
Mobile: hamburger nav, the hero keeps its inset, feature cards swipe, and the app mock scrolls inside its frame.

### Design system
- Colors: `--paper: #f7f7f4`, `--card: #eeede6`, `--raised: #ffffff`, `--ink: #251f19`, `--muted: #68615a`, `--tail: #948b81` (48px+ only), `--orange: #f48d16` (fills), `--orange-text: #a95e08`, `--border: #9a8d7f`, `--scrim: #5a3a2a` at 45% over hero art.
- Fonts: DM Sans for display (hero 68px/1.05 at 600 with italic 300 words; H2 52px at 500). Radio Canada for body (16px/1.5), eyebrows 13px semibold.
- Spacing: 8px base, 140px sections, 1200px container.
- Radius: 24px hero and panels, 12px cards, 8px buttons.
- Shadows: `0 12px 32px rgb(37 31 25 / .10)` on the raised card and mocks only.
- Motion: 300ms ease-out, typed command at 35ms per character, 6s capability auto-advance.

### Components & interactions
DotNav, IconTabButton (dark body, 28px orange square with chevron that shifts 2px on hover), PainterlyHero, LogoRow, NumberedFeatureCard with PixelMotif, PlanChecklistMock, CapabilityTabs driving AppWindowMock (typed command, steps revealed in sequence, approval chip), TestimonialScroller (snap, drag, buttons), BillingToggle (numeric roll), PricingCard (plain or painterly with a light overlay), FeatureBullet (orange square marker; excluded items muted with sr-only "not included"), HowItWorksTabs, UsageCalculator (slider plus live estimate), IntegrationsGrid, WaitlistForm, FaqAccordion.

### Data & state
Typed content collections: plans, capabilities, testimonials, integrations and posts. `waitlist(id, email, use_case, referral_code, created_at)`. Billing period and calculator value are local state mirrored to URL params. Use invented names for all mock tasks, people and companies.

### Accessibility
Check hero text against the scrim's worst-case colour. Orange text uses `--orange-text`. Capability tabs pause auto-advance on hover and focus and follow the tabs pattern. Decorative art and pixel motifs are aria-hidden. App mocks carry a text summary. The scroller has labelled buttons. Light italic text appears only at 48px and up. Focus ring: 2px `--orange-text` with 2px offset.
Verified contrast: body text: #251f19 on #f7f7f4 = 15.18:1; muted text: #68615a on #f7f7f4 = 5.68:1; muted text on card: #68615a on #eeede6 = 5.19:1; italic headline tail 52px: #948b81 on #f7f7f4 = 3.12:1; orange eyebrow text: #a95e08 on #f7f7f4 = 4.56:1; button label: #ffffff on #251f19 = 16.3:1; chevron on orange icon tab: #251f19 on #f48d16 = 6.73:1; hero text on scrim (worst case): #ffffff on #5a3a2a = 10.13:1; input border: #9a8d7f on #f7f7f4 = 3.01:1.

### Security
Waitlist submissions go through an edge function with zod, a honeypot and IP rate limits. The waitlist table has RLS enabled with no anon select, update or delete. Referral codes are random 10-character strings. The contact form strips HTML and caps length. The legal page states retention and deletion on request. The service key never reaches the client.

### Performance & SEO
Painterly images: AVIF, responsive sizes, blurred placeholders, hero preloaded. Hydrate islands on visible. Load DM Sans 300 italic, 500 and 600, and Radio Canada 400/500. Give each page unique metadata and OG images, and add FAQPage JSON-LD. LCP under 2.2s on 4G.

### Guardrails
- Use original copy, invented testimonials and placeholder logos only.
- The agent always shows an approval step before acting on the user's behalf.
- Use painterly art sparingly (hero, one pricing card, one panel).
- Acceptance criteria: (1) capability demo works by keyboard with auto-advance paused; (2) the waitlist handles all five states; (3) excluded plan features are announced; (4) hero text passes on the scrim; (5) the listed contrast pairs pass.

Open the builderAll templatesThis palette on its own