Idrelle

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

Glory is a sleek geometric sans with a light-to-bold range that looks premium at 80px and neat at 12px, suiting night-mode analytics with one electric accent.

• GloryHeadings: H1 80px 500, -0.02em; H2 56px; big numbers 72px 400
• GloryBody: body 16px/1.5 400, chips 14px, widget labels 12px, tabular figures

Patterns

• dark canvas with silky abstract light-ribbon background
• headline with white-to-grey gradient words
• single yellow 'request access' CTA
• large dashboard mock with overlapping floating widgets breaking the frame
• pill 'see how it works' button over the mock's faded bottom
• logo marquee on a darker band
• bento stat cards (big yellow numbers, mobile phone mock, layout preview)
• full-width yellow CTA banner with black button
• split feature rows with tag chips and white button
• gauge and referral widgets stacked with overlap
• three-tier pricing with highlighted plan
• testimonials and FAQ

States it is designed for

• Access request: email validation, company optional, submitting, success (you're on the list with position), duplicate email notice, error
• Pricing: monthly/yearly toggle, highlighted plan
• Contact form: validation and success
• Blog: skeleton and empty states
• Mock table: long product names truncate with title tooltip
• Reduced motion: no rise/slide, bars static

Who it is for

• sales managers at e-commerce and SMB teams
• founders tracking revenue
• revenue operations analysts

Layout

1. Header: logo mark and wordmark left, centred links with active in yellow, small yellow 'contact' button right
2. Hero: two-line centred H1 where later words fade to grey, subline in muted lavender-grey, yellow CTA; silky light-ribbon background
3. Dashboard mock: window dots, sidebar nav, search, sales summary cards with icon discs, level bar chart in yellow and grey, top products table with progress bars and percentage pills, fulfilment line chart; floating earnings gauge card and chart card overlapping the frame edges; bottom fade with white pill 'see how it works' button
4. Logo marquee band with caption
5. Bento: tall phone mock card, big-number cards (count of elements, layouts), icon card; yellow banner with black button
6. Visitor analytics: centred two-tone H2 and subline; split rows (text with chips and white button / bar chart widget), alternated with stacked gauge and referral widgets
7. Pricing (three tiers), testimonials, FAQ, final CTA, footer
8. Mobile: floating widgets hide; mock scales with fade; bento stacks; banner button full-width

Palette

Premium, electric, focused. Night-mode analytics with one high-voltage accent.

• canvas#0d0d0d
• card#171a22
• card alt#181818
• text primary#ffffff
• headline fade grey#909090
• muted lavender-grey#9fa3bb
• electric yellow#fff150
• violet chart line#6a5cff
• hairline border (fixed)#636669

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

Glory 500 (similar to the observed geometric grotesk): H1 80px/1.0 at -0.02em; H2 56px/1.2; big numbers 72px 400 in yellow

Body

Glory 400, 16px/1.5 in muted lavender-grey; chips 14px; widget labels 12px min

Two-tone headings: first words white, remainder #909090. Numbers use tabular figures.

Spacing and imagery

1200px container, 24px bento gaps, 120px sections. Radius 16px cards and mock, 8px buttons, 999px chips. Borders 1px rgba(255,255,255,0.08); floating widgets with 0 24px 48px rgba(0,0,0,0.5).

Silky monochrome light ribbons; dark dashboard widgets with yellow bars and violet lines; semi-circle gauges; phone mock with a violet card; greyscale partner marks.

Components

• Header with active link
• Yellow CTA
• White pill button
• Ribbon background
• Dashboard mock
• Floating gauge card
• Floating chart card
• Sales summary card
• Bar chart widget
• Top products table with progress
• Line chart widget
• Logo marquee
• Big-number bento card
• Phone mock card
• Yellow banner
• Tag chip
• Split feature row
• Referral widget
• Pricing card
• Testimonial
• FAQ accordion
• Access request form

Interactions

• Dashboard mock rises and floating widgets slide in from edges on load
• Headline grey words brighten slightly on scroll
• Bars grow from baseline when visible
• Big numbers count up
• Buttons: yellow brightens with subtle glow; white button gets grey fill; focus ring 2px yellow
• Marquee continuous and pausable

Data

• BentoStat{value, label, variant (number|phone|icon|layout)}
• FeatureRow{title, description, chips[], widget (bars|gauge|referral)}
• Plan{id, name, price_monthly, price_yearly, features[], highlighted}
• Testimonial{quote, name, role, avatar}
• AccessRequest{email, company?, role?, created_at, position}
• MockProduct{rank, name, popularity_pct, sales_pct}

Guardrails

Experience

• Yellow is the only accent: CTAs, big numbers, bars, active nav
• Mock products and people are invented and generic (no real brands or licensed characters)
• Two-tone headlines keep the key noun in white
• Floating widgets never cover the mock's key numbers
• Chip rows limited to five capabilities
• Early-access success message states what happens next

Accessibility

• Grey fade words (#909090) are display size only; body uses #9fa3bb
• Text on yellow is near-black
• Charts use yellow plus labels; violet line has a legend and different dash
• Dashboard mock is a figure with caption; floating widgets aria-hidden duplicates
• Ribbon background decorative and low contrast behind text
• Marquee pausable; reduced motion respected

Security

• Access requests via server route with zod, honeypot and rate limit
• RLS on access_requests: insert via server only; no anon select
• Position number derived server-side; do not expose other users' data
• Contact messages capped and sanitised

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 **Idrelle**, the marketing site for an AI sales-analytics web app that tracks sales, top products, visitors and earnings. It is dark and premium with one electric-yellow accent. The hero leads with the dashboard, bento cards quantify what's included, and split feature rows explain visitor insight and earnings. Convert visitors into early-access requests.

### Stack
Next.js + TypeScript, Tailwind CSS, shadcn/ui, Recharts for bars, lines and gauges, Motion for entrance and count-ups, lucide-react, react-hook-form + zod. Supabase stores access requests.

### Pages & layout
1. **Home**: header (logo mark and wordmark, links with yellow active state, small yellow contact button). Hero on a silky light-ribbon background: a centred two-line H1 whose later words fade to grey, a muted subline and a yellow "Request access" button. Dashboard mock: sidebar, search, sales summary cards with icon discs, a yellow/grey level bar chart, a top-products table with progress bars and percentage pills, and a fulfilment line chart. Floating earnings-gauge and chart cards break the frame edges; the bottom fades into a white pill "See how it works". Then a logo marquee band; a bento (tall phone mock card, big yellow-number cards, icon card, layout preview); a full-width yellow banner with a black button; a visitor analytics section (two-tone H2, split rows with chips and a white button beside widgets, and stacked gauge and referral widgets); pricing; testimonials; FAQ; final CTA; footer.
2. **Features**, **About**, **Pricing**, **Blog** + post, **Contact**, **Request access**.
Mobile: floating widgets hide, the mock scales with its fade, and the bento stacks.

### Design system
- Colors: `--canvas: #0d0d0d`, `--card: #171a22`, `--card-2: #181818`, `--text: #ffffff`, `--fade: #909090` (display only), `--muted: #9fa3bb`, `--yellow: #fff150`, `--violet: #6a5cff`, `--border: #636669`, card hairline `rgb(255 255 255 / .08)`.
- Fonts: Glory, similar to the observed geometric grotesk. H1 80px/1.0 at 500 and -0.02em; H2 56px/1.2; big numbers 72px 400; body 16px/1.5.
- Spacing: 8px base, 24px gaps, 120px sections, 1200px container.
- Radius: 16px cards and mock, 8px buttons, pill chips.
- Shadows: floating widgets `0 24px 48px rgb(0 0 0 / .5)`.
- Motion: 800ms mock rise, 600ms widget slide-in, 1s bar growth, count-ups.

### Components & interactions
Header, YellowButton (subtle glow on hover), WhitePillButton, RibbonBackground (CSS/SVG, aria-hidden), DashboardMock (Sidebar, SalesSummary, LevelBars, TopProductsTable with truncation and tooltip, FulfilmentLine), FloatingGauge, FloatingChart, LogoMarquee (pause), BentoCard variants, PhoneMock, YellowBanner, FeatureRow (chips, widget), GaugeWidget, ReferralWidget, PricingCards with toggle, Testimonials, FaqAccordion, AccessForm.

### Data & state
Typed data for bento stats, feature rows, plans and testimonials. Mock products use invented generic names such as "Linen throw set" or "Trail bottle". `access_requests(id, email, company, role, position, created_at)`, with `position` assigned by a database sequence. The pricing toggle is a URL param.

### Accessibility
Grey fade appears only at display size. Body copy uses `--muted`. Text on yellow is `--canvas`. Charts carry labels and legends; the violet series uses a dashed stroke. The dashboard mock is a figure with a caption, and duplicate floating widgets are aria-hidden. Focus ring: 2px yellow. Reduced motion disables entrances and count-ups.
Verified contrast: headline white: #ffffff on #0d0d0d = 19.44:1; headline fade grey (display): #909090 on #0d0d0d = 6.09:1; body muted on canvas: #9fa3bb on #0d0d0d = 7.8:1; body muted on card: #9fa3bb on #171a22 = 6.98:1; CTA label on yellow: #0d0d0d on #fff150 = 16.61:1; yellow numbers on card: #fff150 on #171a22 = 14.87:1; violet chart line: #6a5cff on #171a22 = 3.8:1; hairline / input border: #636669 on #171a22 = 3.01:1; focus ring yellow: #fff150 on #0d0d0d = 16.61:1.

### Security
Access requests go through a server route with zod, a honeypot and IP rate limiting. `access_requests` has RLS enabled, with inserts through the server only and no anon select. Duplicate emails return a neutral "already on the list" message without revealing position data. Contact messages are capped and sanitised.

### Performance & SEO
Build the ribbon background as an optimised SVG or a small AVIF. Server-render the dashboard mock as HTML/SVG and lazy-load Recharts below the fold. Load Glory 400/500. Give pages unique metadata and add SoftwareApplication JSON-LD. Target LCP under 2s.

### Guardrails
- Use original copy; invented products, people and logos; label figures as illustrative.
- Use yellow as the only accent colour.
- Acceptance criteria: (1) the mock and floating widgets never overlap key numbers at 1280px; (2) access requests handle duplicate, success and error states; (3) charts have text alternatives; (4) reduced motion is respected; (5) the listed contrast pairs pass.

Open the builderAll templatesThis palette on its own