Jaxtrel

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

Montserrat Alternates is one geometric family with playful alternate letterforms, so the whole startup page stays bold and cheeky in a single voice.

• Montserrat AlternatesHeadings: H1 56px 600, H2 40px, big stats 40px 600
• Montserrat AlternatesBody: body 16px/1.5 400-500, chips 16px 600 with a '#' prefix, captions 14px

Patterns

• lime hashtag chip above every section title
• centred bold headline with violet solid and outlined pill CTAs
• perspective-tilted dark dashboard straddling white and black sections
• slanted full-bleed violet logo band
• black starfield background section
• bento of dark stat cards (big number, rating, pull-quote, dotted divider)
• scattered tilted tag stickers card
• split service row with checklist and dark chart device
• cream band with three icon columns
• stat trio under a hairline
• integrations grid
• testimonials and news cards

States it is designed for

• Trial sign-up: validation, sending, verification sent, error
• Contact form: validation, success, error
• Blog/news: loading, empty
• Pricing toggle monthly/yearly
• 404 page with starfield and home link
• Reduced motion: no tilt animation, static stars, static marquee

Who it is for

• small-business owners
• startup operators
• agencies managing clients and billing

Layout

1. Header: logo left, dropdown nav items (demos, pages), about, contact, violet pill CTA right
2. Hero on white: lime hashtag chip with trial offer, two-line bold centred H1, violet solid and outlined pill CTAs
3. Tilted dark dashboard mock (sidebar with lime active item, total-visits area chart with tooltip, four stat cards with delta chips, report bars, latest transactions) overlapping into a black section
4. Slanted violet band with white logo marquee
5. Starfield black section: lime chip, H2, bento of dark cards (big numbers, labels, quote, rating badge, consultation card with outlined CTA, dotted-divider split card, tag-sticker card, reviews card)
6. White service row: chip, H2, three check items, violet pill; dark device frame with line chart
7. Cream band: chip, centred H2, three icon columns with lime icon squares
8. Benefits split: dark report device left; chip, H2, paragraph, hairline and stat trio right
9. Testimonials, integrations, news cards, CTA, footer
10. Mobile: dashboard untilts to flat, bento stacks, stickers shrink, violet band keeps slant

Palette

Bold, playful, energetic. Startup-friendly with a pop of lime.

• white background#ffffff
• black section#000000
• dark card#1c1b1b
• violet primary#5429ff
• lime accent#daff79
• cream band#fef8ea
• ink#1c1b1b
• muted on dark#a3a3a3
• muted on light#5b5b5b
• outline border#8a8a8a

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

Montserrat Alternates 600: H1 56px/1.15; H2 40px/1.2; big stats 40px 600

Body

Montserrat Alternates 400-500, 16px/1.5; chips 16px 600 with '#' prefix; captions 14px

One geometric family throughout keeps the playful tone coherent. Avoid all caps.

Spacing and imagery

1000px container (narrow), 20px bento gaps, 100px sections. Radius 999px buttons, 20px cards, 8px chips, 24px device frames. Stickers rotated ±8deg. Dashboard perspective rotateX(20deg) on desktop.

Dark dashboard and device mocks with lime charts; starfield dots; tilted colourful tag stickers; white placeholder logos on violet; lime icon squares.

Components

• Header with dropdowns
• Hashtag chip
• Violet pill button
• Outlined pill button
• Tilted dashboard mock
• Slanted logo band
• Starfield background
• Stat card
• Rating badge
• Quote card
• Tag sticker cloud
• Check list
• Device frame with chart
• Icon column
• Stat trio
• Testimonial card
• Integration tile
• News card
• Contact form
• 404 page

Interactions

• Dashboard untilts to flat as it scrolls into view
• Logo band marquee runs along the slant; pauses on hover
• Stickers wobble slightly on hover
• Stats count up
• Buttons: violet darkens, arrow slides; focus ring 2px violet (lime on dark)
• Nav dropdowns open on click/hover with keyboard support

Data

• Stat{value, label, caption}
• Service{title, bullets[], chart}
• Benefit{icon, title, description}
• Testimonial{quote, name, role, rating}
• Integration{name_generic, icon}
• Post{slug, title, excerpt, cover, published_at}
• Plan{id, name, price_monthly, price_yearly, features[]}

Guardrails

Experience

• Every section starts with a short hashtag chip (two words max)
• Lime appears only on dark surfaces or as chip background with black text
• Rating badges show invented scores without third-party review brand marks
• Stat cards pair a number with a clear one-line meaning
• Keep trial CTA consistent: violet pill labelled the same everywhere
• Spell-check all copy; avoid filler testimonials repeated across cards

Accessibility

• Chip text is black on lime; violet button labels white
• Starfield is a CSS background, aria-hidden and low density behind text
• Tilted dashboard is a figure with caption; reduced motion keeps it flat
• Sticker cloud is a list of tags, readable in DOM order
• Dropdown nav follows disclosure pattern
• Delta chips include sign and arrow

Security

• Trial sign-up via hosted auth with email verification; rate-limited
• Contact form validated server-side with zod; honeypot
• RLS on contact_messages (server insert only) and profiles (owner only)
• Legal pages linked from forms; minimal data collected

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 **Jaxtrel**, the marketing site for an all-in-one business-management SaaS (finance, CRM, reporting) for small companies. The tone is bold and playful: white sections alternate with a starry black band, lime hashtag chips, violet pills, and a tilted dark dashboard. Every section pushes the 14-day free trial.

### Stack
Next.js + TypeScript, Tailwind CSS, shadcn/ui on Radix (navigation menu, accordion), Recharts for dashboard and device charts, Motion for untilt and count-ups, lucide-react, react-hook-form + zod. Supabase handles trial sign-up auth and contact messages. MDX for news.

### Pages & layout
1. **Home**: header (logo, dropdowns, about, contact, violet pill). White hero: lime hashtag chip with the trial offer, a bold two-line centred H1, and violet solid plus outlined pills. A tilted dark dashboard (sidebar with lime active item, area chart with tooltip, four stat cards with delta chips, report bars, transactions) overlapping into black. A slanted violet band with a white logo marquee. A starfield section with a lime chip, H2 and a bento of dark cards (big stats, pull-quote, rating badge, consultation card with outlined CTA, dotted-divider split card, tag-sticker cloud, reviews card). A service split (checklist, violet pill, dark device chart). A cream band with three lime icon columns. A benefits split with a stat trio. Testimonials, integrations, news, CTA, footer.
2. **About**, **Pricing**, **Integrations**, **News** + post, **Contact**, **Terms**, **Privacy**, **404**.
Mobile: the dashboard is flat, the bento stacks, and the band keeps its slant with a slower marquee.

### Design system
- Colors: `--white: #ffffff`, `--black: #000000`, `--card-dark: #1c1b1b`, `--violet: #5429ff`, `--lime: #daff79`, `--cream: #fef8ea`, `--ink: #1c1b1b`, `--muted-dark: #a3a3a3`, `--muted-light: #5b5b5b`, `--border: #8a8a8a`. Sticker colours: lime, orange `#f59a5b`, yellow `#fcd554`, slate `#6b7280`, cyan `#7ee0f0`, purple `#8b5cf6`, all with black text.
- Fonts: Montserrat Alternates only. H1 56px/1.15 at 600; H2 40px/1.2; body 16px/1.5; chips 16px at 600 with a "#" prefix.
- Spacing: 8px base, 20px gaps, 100px sections, 1000px container.
- Radius: pill buttons, 20px cards, 8px chips, 24px device frames.
- Motion: dashboard rotateX(20deg) to 0 over 800ms on scroll, sticker wobble ±3deg, 1s count-ups.

### Components & interactions
Header (Radix NavigationMenu), HashChip, PillButton (violet, outlined), TiltDashboard (figure with caption; flat under reduced motion), SlantBand with LogoMarquee (pause), Starfield (CSS, aria-hidden), StatCard, RatingBadge (text score, no third-party marks), QuoteCard, StickerCloud (ul of tags, rotated), ServiceSplit with DeviceChart, IconColumn, StatTrio, TestimonialCard, IntegrationGrid, NewsCard, SignUpForm, ContactForm, NotFound.

### Data & state
Typed data for stats, services, benefits, testimonials, integrations and plans; MDX for news. Tables: `contact_messages(id, name, email, message, created_at)` and `profiles(id, user_id, company_name)`. The pricing toggle is a URL param. Dashboard numbers are invented and formatted with Intl.

### Accessibility
Chip text is black on lime. Button labels are white on violet. The starfield is a decorative background. The sticker cloud is a real list. Dropdown menus are keyboard operable. Delta chips carry sign and arrow. Focus ring: 2px violet on light and 2px lime on dark. Reduced motion keeps everything flat and static.
Verified contrast: body on white: #1c1b1b on #ffffff = 17.19:1; muted on cream: #5b5b5b on #fef8ea = 6.41:1; button label on violet: #ffffff on #5429ff = 6.69:1; chip text on lime: #000000 on #daff79 = 18.56:1; lime text on dark card: #daff79 on #1c1b1b = 15.19:1; muted on dark card: #a3a3a3 on #1c1b1b = 6.81:1; outlined button border: #8a8a8a on #ffffff = 3.45:1; focus ring violet on white: #5429ff on #ffffff = 6.69:1.

### Security
Trial sign-up uses Supabase Auth with email verification and rate limits. Contact messages go through a server route with zod and a honeypot. RLS: `contact_messages` accepts server inserts only with no anon select; `profiles` is owner-only (`user_id = auth.uid()`). Forms link to the legal pages and collect only what is needed.

### Performance & SEO
Draw the starfield with a CSS radial-gradient pattern (no images). Build the dashboard in HTML/SVG and lazy-load Recharts for the device charts. Load Montserrat Alternates 400/500/600. Give pages unique metadata and add Organization JSON-LD. Target CLS 0 and LCP under 2s.

### Guardrails
- Use original copy; invented stats, reviews and logos; no third-party review brand logos.
- Keep chips to two words.
- Acceptance criteria: (1) the dashboard untilts smoothly and stays flat under reduced motion; (2) the nav dropdowns work by keyboard; (3) sign-up handles every state; (4) the sticker cloud reads in order to screen readers; (5) the listed contrast pairs pass.

Open the builderAll templatesThis palette on its own