Cosmoport

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

Exo 2 has a subtly technical, space-age geometry that makes the huge launch headlines feel cinematic while staying readable in the bento cards.

• Exo 2Headings: hero 96px / 40px 600 at -0.025em, section headings 36px 500, step numerals 128px 700
• Exo 2Body: body 16px/1.5 400, subheads 20px, card titles 18px 600

Patterns

• starfield backdrop
• fading two-tone hero headline
• glowing icon badge above section headings
• bento feature grid
• dotted globe illustration
• mini stat chart card
• floating social icon constellation
• avatar arc testimonial with name chips
• testimonial marquee
• numbered how-it-works steps with oversized faint numerals
• logo wall
• four-tier pricing with inverted featured card
• locale toggle en/fr
• dismissible notice card

States it is designed for

• CMS unavailable: render last cached content
• missing translation falls back to default locale with a small notice
• empty blog
• contact form validation and success
• reduced motion: static stars, no marquee
• long headlines wrap without clipping the fade

Who it is for

• marketing teams
• content editors
• agencies building launch sites
• developers wiring a headless CMS

Layout

1. Header: square logo tile + wordmark, text nav (Pricing, Products, Blog, Contact, FAQ), locale pills (en/fr), 'Book a demo' text button, light 'Sign up' button; hamburger sheet under 1024px
2. Hero: full-viewport starfield, 96px two-line centered headline (line 1 grey-to-white fade, line 2 white), 20px subhead, light primary + ghost secondary button
3. Notice card: bottom-left floating card with title, one line and link; dismissible
4. Features: glowing icon badge, 36px heading, subhead; bento grid (wide globe card + narrow stats card, then narrow chart card + wide social constellation card); single column on mobile
5. Testimonials: badge + heading; semicircle arc with avatars, large quote, row of name chips to switch; then a horizontal marquee of quote cards
6. How it works: four rows, giant faint numeral left and bordered step card right
7. Logo wall: heading, sub, sparse grid of partner marks
8. Pricing: four cards in a row, third card inverted (white) with 'Featured' pill; 2x2 on tablet, stacked on mobile
9. Footer: columns of links, locale switch, legal links

Palette

Cinematic, dark, space-age. Starfields, soft blue glows and huge type make a content-delivery pitch feel like a launch.

• page background#0a0b0d
• card surface#171717
• raised chip / icon badge#282828
• primary text#ffffff
• subhead text#e5e5e5
• secondary text#a3a3a3
• light button fill#e6e6e6
• light button label#000000
• input / card border#6b6b6b
• blue highlight (chart cursor, badge glow)#3b82f6
• decorative oversized numerals#282828

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

Exo 2 600, 96px/1.0 desktop and 40px mobile, tracking -0.025em

Body

Exo 2 400, 16px/1.5; subheads 20px/1.4

Section headings 36px 500; card titles 18px 600; card copy 14px only inside dense bento cards, otherwise 16px; step numerals 128px 700 decorative.

Spacing and imagery

Spacious; 1200px container; section spacing 160px; bento gaps 16px; cards radius 20px with 1px white-at-10% border and subtle inner gradient; buttons radius 6px.

Starfield canvas, a dotted wireframe globe with orbit arcs, a small area chart, floating circular icon bubbles (generic social glyphs), circular avatar photos; all illustrations are monochrome with a single blue accent.

Components

• SiteHeader
• LocaleToggle
• StarfieldBackground
• FadeHeadline
• IconBadge
• BentoCard
• GlobeIllustration
• StatChartCard
• IconConstellation
• AvatarArcTestimonial
• NameChip
• TestimonialMarquee
• StepRow
• LogoWall
• PricingCard
• NoticeCard
• BlogList
• FAQAccordion
• ContactForm

Interactions

• Stars twinkle slowly; pointer parallax on desktop only
• Name chips switch the featured quote with a crossfade
• Marquee pauses on hover/focus with a visible pause control
• Globe rotates slowly; orbit dots pulse
• Locale toggle swaps content from the CMS for that locale
• Notice card slides in after 2s and remembers dismissal

Data

• Page{slug, locale, title, seo{title, description, og_image}, sections[]}
• Section{type (hero|features|testimonials|steps|logos|pricing|faq|cta), order, props}
• Testimonial{id, name, role, avatar, quote, locale}
• Plan{id, name, price, unit, features[], featured (bool), cta_label}
• Post{slug, locale, title, excerpt, cover, body, published_at}
• Faq{question, answer, locale}
• Lead{id, name, email, message, created_at}

Guardrails

Experience

• Keep only one primary button per section
• Let editors reorder sections but not remove the hero or footer
• Label sample testimonials and logos as placeholders until replaced
• The featured pricing card uses inversion and a label, not a bigger size
• Every animated flourish has a static fallback
• Keep bento card copy to one line under the title

Accessibility

• Headline fade keeps both lines at 4.5:1 or better at the faintest point (start the fade at the muted grey)
• Starfield, globe, constellation and numerals are aria-hidden
• Marquee and globe stop under prefers-reduced-motion
• Testimonial chips are a tablist with arrow-key navigation
• Locale toggle sets lang on html and announces the change
• Notice card is a non-modal region with a labelled close button

Security

• Content editors authenticate; public site uses read-only published content (RLS: select where status = published)
• Contact form validated with zod, rate-limited and protected by a honeypot field
• Sanitize rich text from the content store before rendering
• Preview mode uses a signed, expiring token
• No secrets in client bundles; revalidation webhook requires a shared secret

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 **Cosmoport**, a dark, space-themed marketing site starter whose content is fully editable from a headless content store. Editors change the hero, feature bento, testimonials, steps, logos, pricing, blog posts and FAQs in two locales; the site rebuilds on publish. The page should feel like a product launch while staying fast and accessible.

### Stack
Next.js (App Router) with React and TypeScript, Tailwind CSS, shadcn/ui on Radix, lucide-react, Motion for crossfades and the marquee, zod for forms. Use Supabase Postgres as the content store (tables per collection, a `status` column for draft/published) and Supabase Auth for editors; a small editor UI or table editor is enough. Incremental static regeneration triggered by a revalidation webhook.

### Pages & layout
1. **/[locale]** home: header (logo tile + wordmark, nav, en/fr pills, "Book a demo", light "Sign up"); hero on a starfield with a 96px two-line headline (first line fades from muted grey to white), subhead and two buttons; floating notice card bottom-left; features section with a glowing icon badge and bento grid (globe card, payload stats card, launch chart card, social constellation card); testimonial arc with avatars, big quote and name chips, then a quote marquee; four how-it-works rows with giant faint numerals; logo wall; four-tier pricing with the third card inverted white and a "Featured" pill; footer.
2. **/[locale]/pricing**, **/[locale]/blog**, **/[locale]/blog/[slug]**, **/[locale]/contact**, **/[locale]/faq**, **/[locale]/legal/[slug]**.
Mobile: headline 40px, bento and pricing stack, steps show numerals above cards, nav in a sheet.

### Design system
- Colors: `--canvas: #0a0b0d` (page background), `--surface: #171717` (card surface), `--surface-2: #282828` (raised chip / icon badge), `--fg: #ffffff` (primary text), `--sub: #e5e5e5` (subhead text), `--muted: #a3a3a3` (secondary text), `--btn: #e6e6e6` (light button fill), `--btn-fg: #000000` (light button label), `--border: #6b6b6b` (input / card border), `--glow: #3b82f6` (blue highlight (chart cursor, badge glow)), `--numeral: #282828` (decorative oversized numerals).
- Fonts: Exo 2 600 hero 96px/1.0 (-0.025em), 500 section headings 36px, 600 card titles 18px, 400 body 16px/1.5, subheads 20px.
- Spacing: 8px base; 160px section spacing (96px mobile); bento gap 16px; card padding 32px.
- Radius: 20px cards, 12px icon badges, 6px buttons, full chips.
- Shadows: icon badge has a soft `#3b82f6` glow at 30%; cards use a 1px white-at-10% border and a top-left inner gradient.
- Motion: crossfades 300ms; marquee 50s loop; globe 60s rotation; all off under reduced motion.

### Components & interactions
SiteHeader, LocaleToggle, StarfieldBackground (canvas, capped 30fps), FadeHeadline, IconBadge, BentoCard, GlobeIllustration (SVG dots), StatChartCard (Recharts-free inline SVG), IconConstellation (generic glyph bubbles), AvatarArcTestimonial with NameChip tabs, TestimonialMarquee (pause control), StepRow, LogoWall, PricingCard, NoticeCard (dismiss remembered), BlogList, FAQAccordion, ContactForm (react-hook-form + zod, success state).

### Data & state
Collections: `pages(slug, locale, seo)`, `sections(page_id, type, order, props jsonb)`, `testimonials`, `plans`, `posts`, `faqs`, `leads`. Each has `locale` and `status`. Fetch at build with a server client; cache and revalidate by tag. Seed invented copy in English and French.

### Accessibility
Decorative canvas, globe, constellation and numerals are `aria-hidden`. Testimonial chips form a tablist. Marquee has a pause button. `lang` updates per locale. Focus ring 2px `#3b82f6`.
Verified contrast: body text: #ffffff on #0a0b0d = 19.69:1; subhead: #e5e5e5 on #0a0b0d = 15.63:1; muted text: #a3a3a3 on #0a0b0d = 7.81:1; muted on card: #a3a3a3 on #171717 = 7.11:1; light button label: #000000 on #e6e6e6 = 16.83:1; input / card border: #6b6b6b on #0a0b0d = 3.69:1; focus ring / chart accent: #3b82f6 on #0a0b0d = 5.35:1.

### Security
- RLS: anonymous `select` only where `status = 'published'`; editors (role claim `editor`) may insert/update; `leads` insert-only for anon, select for editors.
- Contact form: zod validation, honeypot, per-IP rate limit.
- Sanitize rich text; preview uses a signed expiring token; revalidation webhook requires a secret.

### Performance & SEO
Static per-locale pages with `hreflang`, sitemap, OG images per page. Starfield is one canvas; globe is inline SVG. Lazy-load marquee avatars. Target LCP under 2s on 4G.

### Guardrails
- Invent all copy, people, logos and plan names; mark placeholders.
- Never block content on animation.
- Acceptance criteria: (1) editing a section in the store updates the page after publish; (2) en/fr switch changes every string; (3) reduced motion shows a static page; (4) contact form stores a lead and rejects spam; (5) no horizontal scroll at 360px.

Open the builderAll templatesThis palette on its own