Ivorlin

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

Manrope and Figtree are kept as named: two soft geometric sans that make a finance-grade dashboard feel approachable in pastels, in a pairing not used elsewhere.

• ManropeHeadings: H1 48px 600, H2 32px 500, card titles 24px, stats 48px 400
• FigtreeBody: body 16px/1.6 400-500, dashboard labels 12px

Patterns

• lavender hero band with left-aligned headline
• outlined pill primary plus text-link secondary
• full admin dashboard mock framed below the hero
• sidebar with grouped menu and collapsible sub-items (mock)
• stat cards in pastel tints with arrow buttons
• logo marquee with heart-dot caption
• two-up tinted feature cards with chart widgets
• dark split section with feature list and photo plus floating widget
• photo with floating KPI card plus 2x2 stat grid
• pastel bento feature grid of chart widgets
• metric strip with superscript units and trend arrows
• blog article cards
• pricing cards

States it is designed for

• Status pills: in progress, completed, failed with text
• Contact form: validation, submitting, success, error
• Articles: loading skeleton, empty category
• Pricing: monthly/annual toggle
• Charts render a 'no data' placeholder when a series is empty
• Reduced motion: counters static, marquee static

Who it is for

• small-business owners
• finance and operations managers
• startup teams choosing an analytics tool

Layout

1. Header: uppercase wordmark left, centred links with the active one in coral, coral pill CTA right
2. Hero (lavender band): left-aligned two-line H1, outlined pill 'Get started' with chevron and text link
3. Dashboard mock framed in a white card overlapping the hero band: sidebar with main menu and account group, welcome header, activity area chart with tooltip, three tinted stat cards, spendings bar chart, transactions table with status pills
4. Logo marquee with small heart icon caption
5. Two tinted feature cards (lavender, mint) each with title, round arrow button and a chart widget
6. Dark navy split: three feature statements with outlined CTA; photo with floating webinar widget
7. Photo with floating sessions KPI card beside H2, paragraph, 2x2 stat grid and CTA
8. Features bento: 3 columns with pastel-tinted cards (blue, mint, beige, blush, lilac) each holding a chart widget and caption
9. Metric strip of four stats with dividers
10. Security section, articles grid, pricing, CTA, footer
11. Mobile: dashboard mock scales as a static figure; bento and splits stack

Palette

Soft, orderly, approachable. A finance-grade dashboard dressed in gentle pastels.

• background#ffffff
• lavender band / card tint#f3f2fa
• mint card tint#eaf4f0
• dark navy section#21202e
• ink#000000
• body text#333333
• muted text (fixed)#6e6e6e
• coral CTA fill (fixed)#e72208
• coral decorative#f84f39
• chart purple#6b5ce7
• chart green#2e9e6e
• input / outline border#8c8c8c

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

Manrope 600: H1 48px/1.4; H2 32px/1.5 at 500; card titles 24px/1.3

Body

Figtree 400-500, 16px/1.6; dashboard mock labels 12px minimum; stat numbers 48px Manrope 400 with superscript units

Uppercase only for the wordmark and sidebar group labels (12px, 0.06em tracking).

Spacing and imagery

1200px container, 16px gutters, 24px card gaps, 120px sections. Radius 4px on tinted feature cards (crisp), 12px on widgets, 999px pills. Shadows: widgets 0 4px 16px rgba(33,32,46,0.06).

Realistic but generic dashboard widgets (area chart, bars, donut, radial gauges, progress rows); candid team and laptop photos with floating KPI cards; greyscale logo marks.

Components

• Header with active link state
• Coral pill CTA
• Outlined pill button
• Dashboard mock (sidebar, stat cards, charts, table)
• Status pill
• Logo marquee
• Tinted feature card with arrow button
• Area chart widget with tooltip
• Donut with legend
• Progress list
• Floating KPI card
• Stat grid
• Bento chart card
• Metric strip item with trend arrow
• Article card
• Pricing card
• Contact form

Interactions

• Area chart tooltip follows hover and keyboard focus
• Round arrow buttons rotate 45deg on hover
• Stat numbers count up on first view
• Marquee pauses on hover/focus
• Nav active link underline; focus ring 2px purple
• Transactions tabs (newest/oldest) toggle sort in the mock

Data

• Feature{title, description, widget (area|donut|gauge|bars|progress), tint (lavender|mint|beige|blush|lilac|blue)}
• Stat{value, unit, label, trend (up|down)}
• Post{slug, title, excerpt, cover, category, published_at}
• Plan{id, name, price_monthly, price_annual, features[]}
• MockTransaction{name, status (in_progress|completed|failed), date, amount}
• ContactMessage{name, email, company, message, created_at}

Guardrails

Experience

• Dashboard mock numbers are formatted correctly (thousands separators, two decimals) and plausible
• Each tinted card explains one capability; tints rotate in a fixed order
• Coral is reserved for the main CTA and active nav link
• Stat claims are labelled illustrative in the template
• Keep the hero headline to two lines at desktop
• Mock tables use invented names and no real brand icons

Accessibility

• Coral CTA uses #e72208 fill so white text passes 4.5:1
• Muted text uses #6e6e6e which passes on white, lavender and mint
• Charts include sr-only summaries and legends with text
• Status pills include text, never colour only
• Dashboard figure has a caption; inner content aria-hidden
• Marquee pausable; reduced motion respected

Security

• Contact form validated on server with zod; honeypot and rate limit
• Do not collect phone numbers unless needed; message length capped
• Contact messages stored with RLS insert-only via server
• Sanitise article content; external links rel=noopener

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 **Ivorlin**, the marketing site for a data-integration and analytics SaaS for small businesses. Pastel surfaces and friendly type make finance data feel approachable. A full dashboard mock in the hero shows breadth, and tinted feature cards with chart widgets explain the rest before the articles and pricing sections.

### Stack
Next.js + TypeScript, Tailwind CSS, shadcn/ui, Recharts for every chart widget, Motion for counters and reveals, lucide-react icons, react-hook-form + zod for the contact form. MDX for articles.

### Pages & layout
1. **Home**: header with an uppercase wordmark, centred links (active link in coral), and a coral pill CTA. Lavender hero band with a left-aligned H1, an outlined pill "Get started" and a text link. Dashboard mock framed in white, overlapping the band: sidebar (main menu, account group with collapsible items), welcome header, activity area chart with tooltip and filters, three tinted stat cards, a spendings bar chart, and a transactions table with status pills. Then a logo marquee; two tinted feature cards (lavender, mint) with widgets and round arrow buttons; a dark navy split (three statements, outlined CTA, photo with floating widget); photo plus floating KPI card beside an H2 and 2x2 stats; a features bento (six pastel-tinted chart cards); a metric strip; security; articles; pricing; CTA; footer.
2. **Features**, **Our story**, **Blog** + article, **Pricing**, **Contact**.
Mobile: the dashboard becomes a scaled static figure, the bento stacks, and the nav moves to a sheet.

### Design system
- Colors: `--bg: #ffffff`, `--lavender: #f3f2fa`, `--mint: #eaf4f0`, `--navy: #21202e`, `--ink: #000000`, `--text: #333333`, `--muted: #6e6e6e`, `--coral: #e72208` (CTA fill), `--coral-deco: #f84f39` (icons only), `--purple: #6b5ce7`, `--green: #2e9e6e`, `--border: #8c8c8c`. Extra bento tints: `#eaf2fd`, `#f5f1ea`, `#fbeeeb`, `#f1eefb`.
- Fonts: Manrope for display (H1 48px/1.4 at 600; H2 32px/1.5 at 500). Figtree for body (16px/1.6). Stats use Manrope 400 at 48px with superscript units.
- Spacing: 8px base, 24px gaps, 120px sections, 1200px container.
- Radius: 4px tinted cards, 12px widgets, pill buttons.
- Shadow: widgets `0 4px 16px rgb(33 32 46 / .06)`.
- Motion: 900ms count-up, 250ms hovers, 45deg arrow rotation.

### Components & interactions
Header (active state), PillButton (coral solid, outlined), DashboardMock (Sidebar, StatCard with arrow, ActivityChart with tooltip on hover and focus, SpendBars, TransactionsTable with sort tabs and status pills), LogoMarquee, TintedFeatureCard (arrow button), DonutWidget, ProgressList, NavySplit, FloatingKpi, StatGrid, BentoChartCard, MetricStrip (trend arrows with sr-only "up"/"down"), ArticleCard, PricingCard with toggle, ContactForm.

### Data & state
Typed JSON for features, stats, plans and mock transactions (invented names, currency formatted with Intl.NumberFormat); MDX for posts. `contact_messages(id, name, email, company, message, created_at)`. The pricing toggle is a URL param, and mock sort is local state.

### Accessibility
The coral CTA uses the darker fill for white text. Muted text passes on every tint. Each chart has an sr-only summary, and legends carry text. Status pills include words. The dashboard mock is a figure with a caption, and its internals are aria-hidden apart from that summary. Focus ring: 2px `--purple`. The marquee can be paused.
Verified contrast: body text on lavender: #333333 on #f3f2fa = 11.37:1; muted text on white: #6e6e6e on #ffffff = 5.1:1; muted text on mint: #6e6e6e on #eaf4f0 = 4.54:1; CTA label on coral: #ffffff on #e72208 = 4.54:1; text on dark navy: #a9a8b8 on #21202e = 6.85:1; chart purple line: #6b5ce7 on #ffffff = 4.87:1; chart green series: #2e9e6e on #ffffff = 3.37:1; outline button border: #8c8c8c on #ffffff = 3.36:1; focus ring purple: #6b5ce7 on #f3f2fa = 4.38:1.

### Security
The contact form posts to a server route with zod, a honeypot and a rate limit. `contact_messages` has RLS enabled, with inserts through the server only and no anon select. Messages are capped at 2,000 characters. Sanitise MDX. External links get rel="noopener noreferrer".

### Performance & SEO
Statically generate pages. Lazy-load Recharts below the hero and render the hero chart server-side as SVG. Serve AVIF photos with fixed aspect ratios. Load Manrope 400/500/600 and Figtree 400/500. Give pages unique metadata and add Article JSON-LD on posts. Target LCP under 2s.

### Guardrails
- Write original copy; use invented people and placeholder logos; label all stats illustrative.
- Use coral only for the CTA and the active nav link.
- Acceptance criteria: (1) the dashboard mock is legible at 1440px and degrades cleanly at 390px; (2) every chart has a text alternative; (3) the contact form covers all states; (4) number formatting is consistent; (5) the listed contrast pairs pass.

Open the builderAll templatesThis palette on its own