Dashkite

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

Hubot Sans has a heavy, energetic black weight that suits an open-source boilerplate on a dark page, and Source Code Pro keeps the install chip crisp and familiar.

• Hubot SansHeadings: headline 48px / 36px 800 at -0.01em, card titles 20px 700
• Hubot SansBody: body 16px/1.6 400/500, small labels 14px
• Source Code ProFigures and code: install chip 15px

Patterns

• announcement pill in header
• split hero with bento card stack
• multicolour gradient word in headline
• copy-to-clipboard install command chip
• contributor avatar stack
• icon feature cards row
• sponsor logo row with 'your logo here' slot
• video in device frame
• two-row testimonial marquee
• language switcher
• falling-streak particle backdrop

States it is designed for

• clipboard permission denied: select the text and show 'Press Ctrl+C'
• star count fetch failure hides the chip
• video poster placeholder while loading
• missing translation falls back to English key
• long localized headlines wrap without clipping the gradient word
• mobile menu open/closed

Who it is for

• full-stack developers
• open-source maintainers
• indie hackers starting a SaaS

Layout

1. Header: wordmark, announcement pill, text nav (Features, Pricing, Blog, Docs), star-count chip, language icon, Login (ghost) + Sign up (solid white); collapses to a command-icon 'Menu' button under 768px
2. Hero left (7 cols): three-line headline with the product name in a multicolour gradient, subhead, primary pill CTA with arrow, monospace install chip with copy icon, contributor avatar stack with count
3. Hero right (5 cols): bento of three dark cards (two stacked left, one tall right) each with a small icon tile, title and one line; hidden under 1024px
4. Feature row: four icon cards (monorepo, i18n, payments, auth), 2x2 on tablet, 1 column on mobile
5. Sponsors: centered caption, three small marks and a dashed 'your logo here' pill
6. Video: two-line heading, video poster inside a dark tablet frame
7. Testimonials: heading + subhead, two marquee rows scrolling in opposite directions with edge fade
8. Footer: columns of links and a theme toggle

Palette

Energetic, developer-casual, dark. Rainbow accents and drifting streaks add playfulness to an otherwise monochrome page.

• page background#09090b
• card surface#171717
• card border#5d5d5d
• primary text#fafafa
• secondary text#a3a3a3
• primary CTA fill#2563eb
• text on white button#020205
• light button fill#f8fafc
• gradient stop / icon tint#a855f7
• gradient stop#84b320
• gradient stop#e8623f
• inline link / focus ring#60a5fa

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

Hubot Sans 700-800, 48px/1.15 desktop and 36px mobile, tracking -0.01em (observed a system sans; Hubot Sans stands in for it)

Body

Hubot Sans 400/500, 16px/1.6

Source Code Pro 15px for the install chip; card titles 20px 700; small labels 14px.

Spacing and imagery

Airy on desktop, compact cards; 1200px container, 24px gutter; cards 24px padding, 12px radius, 1px low-contrast border; pill CTA fully rounded; no shadows except a faint inner glow on bento cards.

Line icons in rounded-square tiles, circular avatar photos or illustrated avatars for contributors, a tablet device frame around a video poster, thin coloured streak particles in the hero.

Components

• AnnouncementPill
• StarCountChip
• LanguageMenu
• GradientWord
• InstallCommandChip (copy)
• AvatarStack
• BentoCard
• FeatureCard
• SponsorRow
• VideoFrame
• TestimonialMarquee
• MobileMenuSheet
• ThemeToggle

Interactions

• Copy chip swaps to a check icon for 1.5s and announces 'Copied'
• Streak particles drift slowly; paused under reduced motion
• Marquee rows pause on hover and focus-within
• Language menu switches locale route and persists choice
• Bento cards brighten border on hover
• Video plays only on click (no autoplay)

Data

• Locale{code, label, dir (ltr|rtl)}
• Contributor{handle, avatar_url}
• Testimonial{id, name, handle, quote, locale}
• Sponsor{name, logo, href, tier}
• Feature{icon, title, blurb}
• Post{slug, title, excerpt, cover, published_at}

Guardrails

Experience

• Keep the install command visible above the fold on every breakpoint
• Make only one primary CTA per viewport; others are ghost or chip styled
• Limit gradient text to the product word; everything else stays solid
• Label invented testimonials as sample content until real ones exist
• Hide the decorative bento on small screens instead of shrinking it unreadably
• Keep marquee copy short so each card reads in two lines

Accessibility

• Gradient word keeps a solid-colour fallback and full accessible text
• Marquees have a pause button and stop under prefers-reduced-motion
• Install chip is a button with an accessible name including the command
• Language menu uses lang attributes on option labels
• Avatar stack has a single text alternative ('9 contributors')
• Primary CTA text on blue meets 4.5:1

Security

• No secrets in the static build; the star count is fetched server-side with a read-only token and cached
• Sanitize any markdown blog content before rendering
• Set a strict Content-Security-Policy; allow only the video host in frame-src
• Newsletter or sign-up forms are rate-limited and validated with zod

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 **Dashkite**, the marketing site for an open-source SaaS boilerplate (monorepo, auth, payments, i18n, admin dashboard). A developer landing here should understand the kit in ten seconds, copy the install command, see that real people contribute, and click through to docs or sign-up.

### Stack
Next.js (App Router) with React and TypeScript, Tailwind CSS, shadcn/ui on Radix, lucide-react, Motion for the marquee and particles. Content lives in typed local files (MDX for blog and docs). Supabase Auth backs the Login / Sign up buttons if the demo app is included; otherwise they link to the docs.

### Pages & layout
1. **Home**: header (wordmark, announcement pill, nav, star-count chip, language menu, Login ghost button, Sign up white button); split hero with a three-line headline where only the product word uses a multicolour gradient, subhead, blue pill CTA "Get started", monospace install chip with copy, contributor avatar stack; right-side bento of three dark cards (deploy, edge hosting, showcase); a row of four icon feature cards; sponsor row with a dashed "your logo here" slot; video section in a tablet frame; two-row testimonial marquee; footer with link columns and theme toggle.
2. **/pricing**: three plans (free self-host, supported, enterprise), monthly/yearly toggle.
3. **/blog** and **/blog/[slug]**; **/docs/[...slug]** with left nav.
4. Localized routes under `/[locale]` (en, zh, ja, ko at minimum; invent copy).
Under 1024px the bento hides and the hero is single column; under 768px nav collapses into a Menu sheet.

### Design system
- Colors: `--canvas: #09090b` (page background), `--surface: #171717` (card surface), `--border: #5d5d5d` (card border), `--fg: #fafafa` (primary text), `--muted: #a3a3a3` (secondary text), `--primary: #2563eb` (primary CTA fill), `--on-light: #020205` (text on white button), `--light-btn: #f8fafc` (light button fill), `--violet: #a855f7` (gradient stop / icon tint), `--lime: #84b320` (gradient stop), `--orange: #e8623f` (gradient stop), `--link: #60a5fa` (inline link / focus ring).
- Fonts: Hubot Sans (Google Fonts) 800 for the headline at 48px/1.15 (36px mobile), 700 for card titles at 20px, 400/500 body at 16px/1.6. Source Code Pro 15px for the install chip.
- Spacing: 4px base, 24px card padding, 24px grid gap, 120px section spacing desktop, 72px mobile.
- Radius: 12px cards, 8px buttons, full for the CTA pill and chips.
- Shadows: none; bento cards get a 1px `#5d5d5d` border and a subtle inner top highlight.
- Motion: marquee 40s linear loop, particles drift 8-14s; everything stops under `prefers-reduced-motion`.

### Components & interactions
AnnouncementPill, StarCountChip, LanguageMenu (Radix DropdownMenu, persists locale in a cookie), GradientWord (background-clip text with a solid fallback), InstallCommandChip (copies, flips icon to a check, announces "Copied"), AvatarStack (overlapping 40px circles, "+N" overflow), BentoCard, FeatureCard, SponsorRow, VideoFrame (poster, play on click), TestimonialMarquee (two rows, opposite directions, edge mask, pause on hover/focus, explicit pause button), MobileMenuSheet, ThemeToggle.

### Data & state
Content collections: `features`, `contributors`, `sponsors`, `testimonials` (marked as sample), `posts`, `docs`, `locales` with dictionaries. Star count fetched at build time or via a cached route handler. Only local UI state (menu open, marquee paused, copied flag).

### Accessibility
Gradient word keeps its full text for screen readers and falls back to solid `#fafafa` when gradients are unsupported. Marquee has a visible pause control. Each locale sets `lang` and `dir`. Avatar stack exposes one label. Focus ring 2px `#60a5fa`.
Verified contrast: body text: #fafafa on #09090b = 19.06:1; muted text: #a3a3a3 on #09090b = 7.89:1; muted text on card: #a3a3a3 on #171717 = 7.11:1; primary CTA label: #ffffff on #2563eb = 5.17:1; light button label: #020205 on #f8fafc = 19.8:1; link / focus ring: #60a5fa on #09090b = 7.83:1; card border: #5d5d5d on #09090b = 3.02:1; gradient stop violet (large text): #a855f7 on #09090b = 5.03:1; gradient stop lime (large text): #84b320 on #09090b = 8.01:1; gradient stop orange (large text): #e8623f on #09090b = 5.92:1.

### Security
- No secrets in client bundles; the star-count token is server-only and read-only.
- Render MDX from the repo only; sanitize anything user-supplied.
- CSP with frame-src restricted to the video host; `rel="noopener"` on external links.
- If sign-up is enabled, validate with zod and rate-limit by IP.

### Performance & SEO
Static generation for all locales, `hreflang` alternates, sitemap and OG images per page. Lazy-load the video and marquee avatars. Particles are a single canvas capped at 30 fps. Target Lighthouse 95+.

### Guardrails
- Invent every name, handle, quote and sponsor mark; label testimonials as samples.
- Keep gradient text to one word and never on body copy.
- Do not autoplay video or sound.
- Acceptance criteria: (1) install command copies on desktop and mobile; (2) locale switch changes every string and persists; (3) marquee pauses by button, hover and reduced motion; (4) no horizontal scroll at 360px; (5) all listed contrast pairs pass.

Open the builderAll templatesThis palette on its own