Fairholt

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

Funnel Sans has a bright, characterful 600 that reads as optimistic at 100px over the sky, and Georama is a clear grotesk with tabular figures for the money data.

• Funnel SansHeadings: H1 100px / 56px 600, -0.015em; H2 48px / 32px 600
• GeoramaBody: body 16px/1.5 500, card titles 20px 600, stat values 24px 600 tabular, trust badges 15px

Patterns

• giant headline with inline 3D icon tile
• sky-to-meadow photographic hero
• trust badges row
• framed dashboard mock with donut and area chart
• logo marquee
• before/after toggle comparison card
• stat tiles
• step-by-step onboarding
• security feature section
• persona cards
• integration orbit with CTA

States it is designed for

• mock hydration skeleton
• trial/demo form: validation, submitting, success, error
• comparison toggle defaults to 'after' and remembers choice in session
• reduced motion: no float, instant toggles
• gains and losses shown with sign and arrow text

Who it is for

• individual investors
• financial teams at small firms
• wealth managers
• active traders

Layout

1. floating white top bar with dark logo tile, links (Products, Features, Use cases, Pricing), dark pill 'Try it free'; round menu button on mobile
2. hero: blue sky with clouds; enormous two-word H1 with a glossy 3D icon tile between words; lede; blue 'Get started' pill with arrow disc + white 'View demo'; three trust badges (rating, security, real-time)
3. dashboard mock sitting on a meadow photo: black sidebar, header with search, welcome line, 4 stat cards, investment performance area chart with range tabs, asset allocation donut with legend
4. trusted-by pill label and logo marquee
5. before/after comparison: toggle tabs over a dark card with check-list and two stat tiles
6. features, 'see it in action', onboarding steps (3 steps + stats), security section, persona cards (4), integrations orbit, pricing, FAQ, footer

Palette

Bright, reassuring, optimistic: clear skies and green fields frame serious financial data.

• page background#ffffff
• cool surface#edf1f4
• ink#1d1d1d
• muted text#4d585f
• primary blue#1e6ff5
• emerald (gain, text)#0b7c56
• emerald bright (on dark)#10b981
• dark card#05080c
• sky tint (decorative)#94bee8
• input 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

Funnel Sans 600, 100px desktop / 56px mobile, line-height 1.0, tracking -0.015em

Body

Georama 500, 16px, line-height 1.5

H2 48/32px Funnel Sans 600; card titles 20px Georama 600; stat values 24px/600 tabular; trust badges 15px.

Spacing and imagery

Density: spacious hero, compact data cards Grid: 12-column; dashboard 1/4 sidebar + 3/4 main; persona cards 4-up Container: 1200px max, 24px padding (16px mobile) Radius: cards 16px, mock frame 20px, buttons 9999px, top bar 16px Shadows: soft 0 20px 60px rgba(15,40,80,.12) under mock; blue glow on primary pill

Photographic sky with clouds and a painterly meadow foreground; glossy 3D app-icon tile; dashboard mock with violet/green area chart and blue/orange/green donut; round integration icons; dark comparison card with faint flowers.

Components

• floating top bar
• 3D icon tile
• blue pill with arrow disc
• white pill
• trust badge
• dashboard mock (sidebar, stat cards, area chart, donut)
• logo marquee
• before/after toggle
• stat tile
• step card
• security feature card
• persona card
• integration orbit
• pricing card
• FAQ

Interactions

• icon tile floats gently (reduced-motion static)
• area chart range tabs (daily/weekly/monthly) swap data
• before/after toggle cross-fades card content
• integration orbit arrows scroll the icon ring
• top bar gains shadow after scroll
• buttons lift 1px with deeper glow on hover

Data

• Holding{symbol, name, class (stock|crypto|cash|bond), value, change}
• PerformancePoint{date, portfolio, benchmark}
• Allocation{class, share}
• Persona{title, body, icon}
• Plan{name, price, features[]}
• Integration{name, iconUrl}
• DemoRequest{email, role, aum (<1M|1-10M|10M+)}

Guardrails

Experience

• Add a clear 'not investment advice' disclaimer near performance claims and in the footer.
• All figures in mocks are fictional and labelled as sample data.
• Gains/losses use sign, arrow and colour together.
• The giant headline must wrap gracefully to two lines on mobile with the icon tile scaling down.
• Security claims link to a plain-language security page.

Accessibility

• Emerald text on light uses #0b7c56 (passes 4.5:1); brighter #10b981 only on the dark card.
• Donut and area charts have hidden tables and captions.
• Hero text sits on clear sky; add a subtle white haze behind text if clouds reduce contrast.
• Focus ring: 2px #1e6ff5 with 2px offset.
• Toggle uses role=tablist with arrow-key support.

Security

• Demo endpoint: zod validation, rate-limit, honeypot; Supabase `demo_requests` RLS anon insert, staff select.
• Collect no financial account data on the marketing site.
• Show regulatory and risk disclosures from a single reviewed content source.
• CSP, HSTS, and no third-party scripts before consent.

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 **Fairholt**, a bright marketing site for an AI-driven investment platform offering analysis, real-time portfolio tracking and recommendations. The sky-and-meadow hero with a giant headline and dashboard mock should feel calm and optimistic; later sections reassure on security and speak to four investor personas.

### Stack
Next.js (static) + TypeScript, Tailwind CSS, shadcn/ui (Radix Tabs, Accordion, Sheet), lucide-react, Recharts for the area chart and donut, Motion for float and toggles, react-hook-form + zod for demo requests, Supabase for storage.

### Pages & layout
1. **Home**: floating top bar → sky hero (giant H1 with icon tile, lede, 'Get started' + 'View demo', trust badges) → dashboard mock on meadow → trusted-by marquee → before/after comparison → features → see-it-in-action → onboarding steps → security → personas (individual, teams, wealth managers, traders) → integrations orbit → pricing → FAQ → footer with disclaimer.
2. **Pricing**, **Security**, **Use cases**, **Demo request**.
3. Breakpoints: headline 100→56px and wraps; mock hides the sidebar under 1024px and shows two stat cards per row under 640px; personas 4→2→1.

### Design system
- Colors: `--bg: #ffffff`, `--cool: #edf1f4`, `--ink: #1d1d1d`, `--muted: #4d585f`, `--primary: #1e6ff5`, `--gain: #0b7c56`, `--gain-bright: #10b981`, `--dark: #05080c`, `--sky: #94bee8`, `--border: #8a8a8a`.
- Fonts: Funnel Sans 600 for H1 100/56px and H2 48/32px; Georama 500 body 16px/1.5; tabular numerals for money.
- Spacing: 4px base; 120px sections; 24px card padding.
- Radius: 20px mock, 16px cards, pills for buttons and the top bar capsule.
- Shadows: `0 20px 60px rgba(15,40,80,.12)` under the mock; primary pill glow `0 6px 20px rgba(30,111,245,.4)`.
- Motion: 250ms eases; icon float 5s loop; toggle cross-fade 200ms.

### Components & interactions
TopBar, IconTile, PillButton (blue with ArrowDisc, white), TrustBadge, DashboardMock (Sidebar with upgrade card, SearchHeader, StatCard ×4, PerformanceAreaChart with RangeTabs, AllocationDonut with legend), LogoMarquee, BeforeAfterToggle + ComparisonCard + StatTile, FeatureCard, StepCard, SecurityCard, PersonaCard, IntegrationOrbit, PricingCard, FaqAccordion, Disclaimer, Footer.

### Data & state
Typed fictional datasets (holdings, performance series, allocation) plus personas, plans, integrations, FAQs. Toggle state in sessionStorage (wrapped in try/catch). Demo form → route handler → zod → Supabase `demo_requests`.

### Accessibility
One H1 (the 3D tile is decorative, aria-hidden). Charts with captions and hidden tables; values read with sign ('up 12.4 percent'). Tabs via Radix. Reduced motion supported. Hit targets ≥44px.
Verified contrast: body text: #1d1d1d on #ffffff = 16.86:1; muted text on cool: #4d585f on #edf1f4 = 6.43:1; primary button label: #ffffff on #1e6ff5 = 4.52:1; gain text on white: #0b7c56 on #ffffff = 5.21:1; gain text on cool: #0b7c56 on #edf1f4 = 4.59:1; text on dark card: #ffffff on #05080c = 20.07:1; gain on dark card: #10b981 on #05080c = 7.91:1; headline on sky: #1d1d1d on #94bee8 = 8.66:1; input border: #8a8a8a on #ffffff = 3.45:1.

### Security
RLS on `demo_requests` (anon insert with column check, staff select). zod validation, rate-limit, honeypot. No account linking or financial data collection on the site. Security page describes practices without unverifiable certifications.

### Performance & SEO
Hero sky/meadow as AVIF with blurred placeholder; mock as HTML; lazy-load Recharts. Title, description, OG, FinancialProduct/SoftwareApplication JSON-LD. LCP < 2.5s.

### Guardrails
- All figures, names and logos are fictional; mark mock data as sample.
- Include risk and 'not investment advice' disclosures.
- Write original copy; no guaranteed-return language.
- Photos and 3D art are original or licensed.

**Acceptance criteria**
- [ ] Giant headline wraps without overflow at 390px
- [ ] Comparison toggle and range tabs keyboard accessible
- [ ] All gain/loss values understandable without colour
- [ ] Disclaimers present in hero area and footer
- [ ] Recorded contrast pairs pass

Open the builderAll templatesThis palette on its own