Ilmora

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

Mona Sans at regular weight has the clinical precision of a lab report, with tabular figures for the metric cards and a calm, premium texture.

• Mona SansHeadings: hero 42px, section H2 52px, weight 400, -0.01em
• Mona SansBody: body 16px/1.6 400, captions 14px, chips 12px medium, tabular metric figures

Patterns

• inset rounded dark hero card on a white page
• inline email-capture pill with circular submit
• rating badge above the headline
• logo marquee in rounded tiles
• stacked outcome cards with icon disc
• three-column comparison against manual alternatives
• infinite horizontal feature carousel with arrow controls
• numbered step rows with portrait image on the right
• tabbed feature panel with segmented tab bar
• hover-expanding impact cards
• numbered spring FAQ accordion
• four-tier pricing with comparison table
• pill eyebrow labels on tinted chips

States it is designed for

• Email capture: idle, invalid email (inline error under pill), submitting (spinner in circular button, field read-only), success (pill replaced by confirmation line), server error with retry
• Carousel at first/last item when not looping: arrow disabled with aria-disabled
• Tab panel image loading: cream skeleton at fixed aspect ratio
• Blog index: no posts in selected category empty state with reset-filter link
• Contact form: required-field validation, disabled submit while sending, success panel, rate-limited error
• Pricing toggle monthly/yearly with saved-percent badge; long plan names wrap without breaking card height alignment
• Reduced motion: marquee static and wrapped, carousel without auto-advance, accordion without word stagger

Who it is for

• in-house SEO and growth marketers
• founders of small SaaS and e-commerce sites
• agency owners evaluating tooling

Layout

1. Hero: full-width black card with large radius inset 16px from the viewport; small rating badge, two-line centred headline with one highlighted word in yellow, supporting line, pill email field with yellow circular submit, fine-print trial note
2. Partner strip inside the hero card: divider-flanked caption and a marquee of rounded dark logo tiles
3. Outcome cards: eyebrow chip, left-aligned H2, then full-width stacked cards alternating cream and off-white, each with a dark icon disc and a metric headline
4. Comparison: centred H2, criteria list on the left and three cards (product highlighted in cream, agency, freelancer) with matching rows
5. Feature carousel: cream panel with H2, horizontally scrolling cards (chart mock left, copy right), pill CTA bottom-left and round arrow buttons bottom-right
6. Three steps: numbered rows each with title and caption bottom-left and a warm yellow-toned photo on the right
7. Tabbed feature: cream panel, four-tab segmented bar, large gradient media frame, caption with pill CTA and a live counter
8. Testimonials grid of avatar cards and a quote card; pricing (four tiers); numbered FAQ; closing CTA and footer
9. Breakpoints: at <768px the hero card keeps 10px inset, the email pill stacks field over full-width button, comparison collapses to one card per provider with criteria labels inline, carousel becomes swipe with visible next-card peek, step images move above text

Palette

Clinical, calm, premium. It reads like a lab report with one bright yellow signal colour.

• page background#ffffff
• hero / dark card#000000
• text primary#1a1a1c
• text muted (fixed from 60% ink)#717172
• accent yellow (buttons, highlight word)#fffe54
• cream panel#f9f7e2
• off-white card#f8f8f3
• chip / tab tint#ebe9d2
• muted text on dark#a3a3a3
• input border#8a8a80

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

Mona Sans 400, 42px hero (52px desktop H2s), line-height 1.2, tracking -0.01em; one word per headline tinted yellow on dark

Body

Mona Sans 400, 16px, line-height 1.6; captions 14px in muted grey; eyebrow chips 12px medium, sentence case

Regular weights at large sizes carry the calm clinical tone; avoid bold headlines. Numerals in metric cards use tabular figures.

Spacing and imagery

Airy: 120px section rhythm, 1200px container with 16px outer gutter, 12-col grid. Radius 32px on hero and panels, 24px on cards, full pill on buttons, chips and inputs. Shadows almost none; separation by tone. Dark icon discs carry a soft 0 8px 20px rgba(0,0,0,0.25) shadow.

Warm, saturated yellow-toned editorial portraits and abstract objects in rounded frames; soft pastel gradient media for the tabbed panel; minimal flat chart mocks (bar chart, gauge) in cream with a yellow value pill; line icons in white on black discs.

Components

• Inset dark hero card
• Rating badge (stars + score)
• Email capture pill with icon submit
• Logo marquee tile
• Outcome metric card with icon disc
• Comparison matrix (criteria column + provider cards)
• Feature carousel card with chart mock
• Carousel arrow buttons
• Numbered step row with image
• Segmented tab bar
• Tab media panel with counter
• Testimonial avatar card and quote card
• Four-tier pricing cards + comparison table
• Numbered FAQ accordion
• Contact form with service select and newsletter opt-in
• Blog index with category filter chips

Interactions

• Logo marquee scrolls slowly and pauses on hover and focus
• Carousel loops with arrow buttons and keyboard arrows; swipe on touch; scroll-snap per card
• Tab switch uses a circular clip-path reveal of the new media (fade only under reduced motion)
• Impact cards expand on hover or focus to reveal an image while siblings compress
• FAQ rows spring open with a rotating plus/minus and a staggered line reveal of the answer
• Buttons: yellow pill darkens slightly and its inner black disc nudges right on hover; 2px focus ring offset 3px
• Email field validates on blur and on submit with inline message under the pill

Data

• Post{slug, title, excerpt, category (technical|performance|content|case-study|product), cover, published_at, body_mdx}
• Service{slug, title, summary, covers[], related_slugs[]}
• Plan{id, name, price_monthly, price_yearly, features[], cta_label, highlighted}
• ComparisonRow{criterion, product_value, agency_value, freelancer_value}
• Faq{order, question, answer}
• Testimonial{name, role, avatar, quote}
• Lead{email, name?, website?, company?, service?, message?, newsletter_opt_in, created_at}

Guardrails

Experience

• Keep a single primary action (start free audit) repeated in hero, feature panel and closing CTA; secondary actions stay outlined or text
• Comparison rows must align criterion-by-criterion across all three cards on desktop; on mobile show the criterion label in each row
• Yellow is reserved for primary buttons and one highlighted word per headline; never use it for body text on white
• Metric claims in outcome cards are clearly sample figures in the template and sourced when real
• Carousel must show a partial next card so users know it scrolls
• Keep the hero email field to one input; ask for website and company only on the contact page

Accessibility

• Marquee and carousel have pause controls and pause on hover/focus; honour prefers-reduced-motion
• Tab bar uses role=tablist with arrow-key navigation and aria-selected
• Muted caption text uses #717172, not a 60% alpha tint, so it passes on cream and off-white
• Icon-only submit and arrow buttons get aria-labels; decorative icon discs are aria-hidden
• Logo tiles have alt text naming the partner generically or are marked decorative with a text caption
• Focus ring is 2px #1a1a1c on light and #fffe54 on the dark hero

Security

• Validate lead and contact payloads with zod server-side; reject unexpected fields
• Insert leads through an edge function with rate limiting per IP and a honeypot field; no public select on the leads table (RLS insert-only for anon)
• Store only email and optional contact fields; newsletter opt-in unchecked by default and logged with timestamp
• Escape all CMS content; blog MDX renders without raw HTML embeds

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 **Ilmora**, the marketing site for an automated SEO-audit product. The tone is clinical and calm: a black inset hero card on a white page, cream panels, and one bright yellow signal colour. The site must turn a visitor into a free-trial sign-up with a single email field, then back that up with outcome metrics, a comparison against agencies and freelancers, feature detail, steps, testimonials, pricing and FAQ.

### Stack
Astro + TypeScript with Tailwind CSS. Use React islands only for interactive parts: carousel, tabs, FAQ accordion, pricing toggle, email capture. Use Motion for the reveal and spring motion and lucide-react for icons. Blog, services and plans live in Astro content collections validated by zod. Leads go to a Supabase table through one edge function.

### Pages & layout
1. **Home**: inset black hero card (32px radius, 16px from the viewport edges) with a rating badge, a two-line headline where one word is yellow, a supporting line, a pill email field with a circular yellow submit, fine print, and a logo marquee of rounded dark tiles. Below it: outcome cards (stacked, alternating cream/off-white, with a dark icon disc and metric), a comparison section, a cream feature-carousel panel, three numbered step rows with photos on the right, a cream tabbed panel (four tabs, gradient media, caption, counter), testimonials, pricing preview, numbered FAQ, and a closing CTA.
2. **Services** index and six **service detail** pages (overview, what it covers, related services row).
3. **Pricing**: four tiers (Free, Starter, Growth, Enterprise), monthly/yearly toggle, full comparison table.
4. **Blog** with category filter chips and article pages.
5. **About** with team grid; **Contact** with name, work email, website, company, service select, message and newsletter opt-in.
Mobile (<768px): the email pill stacks, comparison becomes one card per provider with inline criterion labels, the carousel becomes swipeable with a peek, and step images move above text.

### Design system
- Colors: `--bg: #ffffff`, `--dark: #000000`, `--ink: #1a1a1c`, `--muted: #717172`, `--muted-on-dark: #a3a3a3`, `--accent: #fffe54`, `--cream: #f9f7e2`, `--offwhite: #f8f8f3`, `--chip: #ebe9d2`, `--border-input: #8a8a80`.
- Fonts: Mona Sans from Google Fonts. Headlines 400 weight: hero 42px desktop, section H2 52px at 1.2 line-height, -0.01em tracking. Body 16px/1.6, captions 14px muted, chips 12px medium sentence case.
- Spacing: 4px base; section padding 120px desktop and 72px mobile; 1200px container.
- Radius: 32px panels, 24px cards, 9999px buttons, inputs and chips.
- Shadows: none on cards. Icon discs get `0 8px 20px rgb(0 0 0 / .25)`.
- Motion: 300ms ease-out reveals, spring (stiffness 300, damping 30) for the accordion, 40s linear marquee.

### Components & interactions
HeroCard, RatingBadge, EmailCapture (idle, invalid, submitting, success, error), LogoMarquee (pause on hover and focus, plus a pause button), OutcomeCard, ComparisonMatrix (aligned rows, highlighted product card), FeatureCarousel (loop, arrows, keyboard, scroll-snap, visible peek), StepRow, TabbedFeature (tablist, circular clip reveal, image skeleton), ImpactCards (hover/focus expand), Testimonials, PricingCards with a monthly/yearly toggle and a save badge, FaqAccordion (numbered, plus/minus rotation, staggered reveal), ContactForm, BlogFilter. Primary pill: yellow with a black inner disc that nudges 4px right on hover.

### Data & state
Content collections: `posts`, `services`, `plans`, `faqs`, `testimonials`, `comparison`. Write all sample content as fresh placeholder copy with invented people and figures. `leads(id, email, name, website, company, service, message, newsletter_opt_in, source_page, created_at)`. The pricing toggle and blog filter keep their state in URL params; component state is local.

### Accessibility
Use one H1 per page. The tablist uses arrow keys and aria-selected. Accordion headers are buttons with aria-expanded. The carousel and marquee have pause controls and respect prefers-reduced-motion. Icon-only buttons get labels. Muted text uses the solid `--muted` value rather than an alpha tint. The focus ring is 2px ink on light surfaces and 2px yellow on the dark hero. Never put yellow text on white.
Verified contrast: body text: #1a1a1c on #ffffff = 17.38:1; muted caption on cream: #717172 on #f9f7e2 = 4.51:1; muted caption on off-white: #717172 on #f8f8f3 = 4.58:1; primary button label: #1a1a1c on #fffe54 = 16.18:1; highlight word on dark hero: #fffe54 on #000000 = 19.56:1; muted text on dark hero: #a3a3a3 on #000000 = 8.33:1; input border: #8a8a80 on #ffffff = 3.48:1; focus ring on dark: #fffe54 on #000000 = 19.56:1.

### Security
Leads go only through an edge function that validates with zod, checks a honeypot field and rate-limits per IP. The `leads` table has RLS enabled: anon may insert through the function's service path only, with no select, update or delete for public roles. Keep the service key on the server. The newsletter opt-in defaults to unchecked. Render MDX without raw HTML.

### Performance & SEO
Pages are static by default. Hydrate islands with `client:visible`. Use responsive AVIF/WebP images with fixed aspect ratios so there is no CLS. Preload Mona Sans 400 and 500 only. Give each service and post a unique title, meta description and OG image. Add Article JSON-LD on posts and a sitemap. Target Lighthouse 95+.

### Guardrails
- Write all copy fresh; use generic partner logos and invented testimonials, labelled as samples.
- Use yellow only for primary actions and one highlighted word.
- Keep motion calm and fully optional.
- Acceptance criteria: (1) the hero email capture shows all five states; (2) comparison rows align on desktop and stay readable on mobile; (3) carousel, tabs and FAQ work by keyboard alone; (4) all listed contrast pairs pass; (5) leads cannot be read with the anon key.

Open the builderAll templatesThis palette on its own