Corin Ashdown

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

Sora keeps the geometric display, and Poppins is a friendly round body that suits a personal site styled like a SaaS landing page.

• SoraHeadings: hero 72px bold, H2 48px, negative tracking
• PoppinsBody: body 16-20px, buttons 14-18px medium

Who it is for

• Freelance content strategists
• Growth marketers moving into consulting
• Founders hiring content leads
• B2B SaaS marketing teams

Layout

1. Sticky header: 'First.Last' wordmark with coral dot left, pill nav (Home active), Work, About, Styleguide, Contact, coral 'Let's Talk' pill right; gains blur/shadow on scroll
2. Hero: tag chip, two-line headline with coral hand-underlined phrase, supporting copy with bold punchline, coral gradient primary button + outlined secondary, soft coral blur blob right
3. 4 metric cards (mint tinted for positive, neutral for years) with animated counts
4. Services: three cards (SEO & organic growth, distribution, funnel & retention)
5. Featured work: 'Portfolio' chip, heading, 'View all' outlined pill, 3 case study cards with category chip, arrow icon, summary and green metric chips
6. CTA band 'Ready to build...'
7. Case study pages: Context, Strategy, Execution checklist, Impact, metrics
8. About, Styleguide and Contact pages

Palette

Warm, optimistic, credible, modern, energetic. It feels like a polished SaaS landing page for a person.

• background#fbfaf9
• text#201713
• muted text#6f625b
• primary coral (fills with dark text)#f56a47
• coral text / focus (headline phrase, links)#d9350c
• accent orange#f97a1f
• secondary sand#f1ece4
• decorative border#e7e0da
• input border#a68c75
• positive metric green#0c8158
• positive chip background#ecfbf4

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

Sora bold, 72px hero and 48px H2 with negative tracking

Body

Poppins 16-20px regular, line-height 1.6; buttons Poppins 14-18px medium with #201713 text on coral fills

Geometric display with a friendly rounded body; coral gradient highlights a key phrase

Spacing and imagery

~1090px container, 12px (.75rem) card radius, pill buttons, generous section padding, 3-4 column card grids with 16-24px gaps, soft shadows

No photography; soft coral gradient blobs, icon sparkle chips, metric chips and arrows provide visual interest

Components

• Scroll-aware sticky header
• Pill nav with active background
• Gradient CTA button
• Hand-drawn underline highlight
• Tag chip
• Animated metric card (positive/negative/neutral)
• Service card
• Case study card with metric chips
• CTA band
• Case study page (context/strategy/execution/impact)
• Validated contact form
• Styleguide page

Interactions

• Numbers count up when scrolled into view
• Header transitions from transparent to solid with shadow
• Cards lift on hover, arrow icon rotates
• Scroll-triggered fade-ins
• Contact form inline validation with toast
• Mobile menu

Data

• Metric{value, suffix, label, variant: positive|negative|neutral}
• Service{title, description, icon}
• CaseStudy{slug, title, category, summary, context, strategy, execution[], impact, metrics[]}
• ContactMessage{name, email, company, budget, message}

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 a template'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 templates)
- 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.

### Goal
Build a portfolio for a fictional content strategist called **Corin Ashdown**. The audience is SaaS founders and marketing leads who want proof of results before hiring. The site makes one strong claim, backs it with animated metrics, explains three service areas, presents case studies structured around business outcomes, and ends in a qualified contact form.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix Form, Select, Sheet, Toast), lucide-react, React Router, react-hook-form + zod, and Recharts for small before/after charts on case studies. Use IntersectionObserver (or Framer Motion `useInView`) for counters. The contact form posts to one serverless function.

### Pages & layout
1. Sticky header: wordmark with a coral dot, a pill-style nav with a tinted active pill, and a coral "Let's talk" button with #201713 label text; transparent at the top, blurred and shadowed after scroll.
2. Hero: a small tag chip with an icon, a two-line headline whose key phrase is coral text (#d9350c) with a hand-drawn underline SVG, a supporting paragraph ending in a bold punchline, a gradient primary button with #201713 label text plus outlined secondary, and a blurred coral glow on the right.
3. Metric row: four cards (three growth metrics tinted mint, one neutral "years experience"), numbers counting up.
4. Services: three cards with icon, title and short text.
5. Featured work: section chip, heading, "View all" pill, three case-study cards with a category chip, arrow icon, summary and two metric chips.
6. CTA band and footer.
7. Case study page: Context, Strategy, Execution (checklist), Impact narrative, metrics grid and a small chart.
8. About, Contact, and a Styleguide page that shows tokens and components.

### Design system
Tokens: `--background: #fbfaf9; --foreground: #201713; --primary: #f56a47; --accent: #f97a1f; --secondary: #f1ece4; --muted: #f2f0ed; --border: #e7e0da (decorative); --input-border: #a68c75; --muted-foreground: #6f625b; --primary-text: #d9350c; --card: #fdfcfc; --success: #0c8158; --success-bg: #ecfbf4; --radius: .75rem`. Fonts: Sora 600/700 for headings and Poppins 400/500 for body. Scale: clamp(44px, 6vw, 72px) H1 with -2.5% tracking; 48 / 28 / 20 / 16 / 14px (16–20px body at line-height 1.6, max 70ch; 14px only for weight-500 chips and labels). Gradient: `linear-gradient(90deg, #f56a47, #f97a1f)`. Shadows: `0 10px 30px -10px rgb(245 106 71 / .45)` on the primary button; soft neutral on cards. Motion: 1.2s ease-out counters; 250ms card lift. Light only.

### Components & interactions
- MetricCard: variants positive, negative and neutral (color plus arrow plus text); counts once; shows the final value immediately under reduced motion.
- Case-study card: hover lift, arrow rotates 45°, focus ring in #d9350c; the entire card is one link.
- Contact form: name, email, company, budget select, message; inline errors; submit spinner; success toast; error toast with retry.
- Mobile: nav collapses into a sheet with the CTA at the bottom.

### Data & state
`Metric{value,prefix?,suffix,label,variant}`, `Service{title,text,icon}`, `CaseStudy{slug,title,category,summary,context,strategy,execution[],impact,metrics[],chart?}`. Static typed data; every sample client is fictional and every number is labelled as illustrative.

### Accessibility
Coral #f56a47 cannot carry white text (about 3:1) and is only 2.9:1 as text on the page, so coral and gradient buttons use #201713 labels (5.9:1 or better), and every coral word, link and focus ring uses `--primary-text` #d9350c. Green metric text is #0c8158, which passes on #ecfbf4 and on white cards. Counters use `aria-live="off"` and have the final value in the accessible name. The decorative underline and blob are `aria-hidden`. Every form field has a label. Verified contrast: body text on background: #201713 on #fbfaf9 = 16.88:1; muted text on background: #6f625b on #fbfaf9 = 5.64:1; dark label on coral button: #201713 on #f56a47 = 5.9:1; coral text / links on background: #d9350c on #fbfaf9 = 4.51:1; green metric text on mint chip: #0c8158 on #ecfbf4 = 4.58:1.

### Security
Validate with zod on the client and in the function, add a honeypot and per-IP rate limiting, keep email-provider keys server-side, and escape all user input in notification emails. External links use `rel="noopener noreferrer"`.

### Performance & SEO
No hero imagery, so aim for Lighthouse 100 performance; lazy-load Recharts on case-study routes only. Per-case-study meta and OG images, Person and Service JSON-LD, semantic H1–H3.

### Guardrails
- Use original copy and invented clients; don't name real companies.
- Label demo metrics as illustrative rather than claimed results.
- Store only contact-form fields.
- Keep components small and typed, never use `any`, and show errors visibly.
- Done when: counters animate once and respect reduced motion; all text passes AA including chips and buttons; case-study pages render every section; the contact form handles success, validation and server errors; the styleguide page documents all tokens.

Open the builderAll templatesThis palette on its own