Fernwood

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

Castoro is a soft, calm editorial serif for the case-book headlines, and Proza Libre is a warm humanist body with understated confidence.

• CastoroHeadings: headings 96px 400 at -2.4px, italic
• Proza LibreBody: body 16px at 1.6, underlined links

Who it is for

• Solo designers and consultants commanding premium rates
• Brand identity and web designers
• Creatives pitching with measurable outcomes
• Studios expanding into structured case studies

Layout

1. Top-right email link only (no nav bar)
2. Intro on deep green: two-line serif studio name, 3-4 short paragraphs (bio, award, feature, CTA with obfuscated email)
3. Project sections on cream: alternating layout with project title and 'read more' link on one side and a large rounded image on the other
4. Case study page: eight sections (overview, challenge, solution, process gallery with multi-aspect images, results statistics grid, testimonial, credits, next project)
5. Color-inverted section rhythm (green / cream)
6. Footer with contact

Palette

Calm, grounded, premium, editorial, understated. It feels like an independent studio's printed case book: deep green covers and cream pages.

• background (forest)#1b372a
• text / cream#f5f2eb
• secondary green#244235
• muted green#2a463a
• decorative coral (links use #ba4a39)#e8776a
• image tone (violet)#8b3fd9

Every checked pair, measured again

As vibld’s tokens

The palette on the 15+ color tokens vibld styles a project with, each text color 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

Castoro (Georgia-like) 400, 96px, -2.4px tracking

Body

Proza Libre 16px at 1.6 line-height with underlined inline links

A soft editorial serif headline with a neutral sans body gives understated confidence.

Spacing and imagery

64px margins, two-column grid (~545px each), generous 120px+ vertical gaps, images radius ~8px, underlined text links.

Rich 3D renders and brand visuals (glowing violet shapes) in large rounded frames; multi-aspect galleries in case studies.

Components

• Top-right email link
• Serif studio name hero
• Bio paragraphs with underlined links
• Obfuscated email CTA
• Alternating project rows
• Rounded project images
• Read more link
• Case study overview
• Challenge / solution blocks
• Multi-aspect gallery
• Results statistics grid
• Testimonial block
• Next project navigation

Interactions

• Scroll-triggered fade/slide-in for project rows and images
• Images scale slightly on hover
• Underlined links thicken or change color on hover
• Section background inverts between green and cream as you scroll
• Stat numbers count up in view
• Next project navigation at the end of case studies

Data

• CaseStudy{slug, title, summary, cover, challenge, solution, gallery: {src, aspect}[], stats: {label, value}[], testimonial?: {quote, author, role}, credits[]}
• Profile{studio, bio[], awards[], email}

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 color 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, labeled 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 calm, case-study-first portfolio for a fictional identity and web studio, "Fernwood". It is for startup founders and marketing directors who need to justify a premium design budget. A deep green introduction states who the studio is and invites contact. Cream project rows lead into structured, eight-part case studies that end with measurable results and next-project navigation.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix Card, Separator) and lucide-react. Use Framer Motion for reveals, the section color transitions and count-up stats, Embla Carousel for multi-aspect galleries on small screens and React Router for `/` and `/work/:slug`. Recharts is optional for a results chart. Static only.

### Pages & layout
1. Intro screen at 100vh on forest green: the email link top-right (underlined, 14px). Left column (max 540px): the studio name at clamp(56px, 8vw, 96px) over two lines, then short paragraphs covering the bio, a fictional recognition, a feature mention and "Got a project in mind? Let's talk" with an obfuscated email.
2. Work: a cream background. Each project row uses a 2-column grid. The title (serif, 28px) sits top-left with a coral "read more" link (#ba4a39) at bottom-left, and the image (4:5 or 1:1, radius 8px) sits right. Alternate sides each row.
3. Case study sections, in order:
   1. Hero (title, summary, cover)
   2. Overview (client, scope, year)
   3. Challenge
   4. Solution
   5. Gallery (mixed 16:9, 4:5 and 1:1 aspect ratios)
   6. Results (3-4 stat tiles)
   7. Testimonial (marked sample)
   8. Next project
   Sections alternate between green and cream backgrounds.

### Design system
- Green: `--background: #1b372a`, `--foreground: #f5f2eb`, `--secondary: #244235`, `--muted: #2a463a`.
- Cream: `--background: #f5f2eb`, `--foreground: #1b372a`.
- Link accent: `--link: #ba4a39` on cream (the coral #e8776a is too light for text on cream). On green, links are cream and underlined.
- Fonts: Castoro 400/italic for display and Proza Libre 400/500 for body, from Google Fonts. Scale: 14 / 16 / 20 / 28 / 48 / 96px; paragraphs max ~65ch.
- Spacing: 8px base, 64px margins, 128px sections. Radius 8px on images.
- Motion: 700ms cubic-bezier(0.16,1,0.3,1) reveals, 1.2s count-up and 400ms background transitions.

### Components & interactions
- ProjectRow: fades in on view. Hover or focus scales the image to 1.02 and thickens the "read more" underline.
- StatTile: counts up once. Screen readers get the final value.
- Testimonial: quote, name and role, labeled "Sample testimonial" until replaced with a real, permissioned one.
- Gallery: CSS grid on desktop and a carousel on mobile. Captions are optional.
- NextProject: a full-width link with title and thumbnail.

### Data & state
`CaseStudy{slug, title, summary, cover, challenge, solution, gallery: {src, alt, aspect}[], stats, testimonial?, credits}` and `Profile{studio, bio, awards, email}`. Seed three invented client projects (fintech identity, supplement brand, SaaS site) with illustrative metrics.

### Accessibility
- Cream on forest is 11.55:1. Coral #e8776a on cream is only about 2.7:1, so link text uses a darker coral, #ba4a39 (4.55:1).
- Obfuscated email must still be a working, labeled `mailto:` link for assistive tech.
- Make the color-inverting sections real `<section>`s with headings, and keep focus rings visible on both backgrounds (use a two-tone ring).
- Honor reduced motion.
- Verified contrast: body #f5f2eb on #1b372a = 11.55:1; cream sections #1b372a on #f5f2eb = 11.55:1; link #ba4a39 on #f5f2eb = 4.55:1.

### Security
- No forms. `mailto:` link. External award and feature links use `rel="noopener noreferrer"`.
- Don't publish real award names unless they are true for the actual owner. Keep placeholders generic.

### Performance & SEO
Lazy-load project images with `srcset` in multiple aspect crops and preload Castoro. Add CreativeWork JSON-LD per case study and OG images.

### Guardrails
- Do write all copy yourself and use placeholder imagery (Unsplash-style stock or generated); no trademarked names, client logos or real people.
- Don't present invented testimonials or awards as real; label sample content as sample.
- Keep components small and fully typed; no `any`. Surface errors visibly instead of failing silently.
- Don't collect or store more personal data than the contact form needs.
- Done when:
  - [ ] Intro screen shows studio name, bio and working obfuscated email
  - [ ] Project rows alternate sides and collapse on mobile
  - [ ] Case study renders all eight sections with alternating backgrounds
  - [ ] Link colors pass 4.5:1 on both backgrounds
  - [ ] Stat tiles count up once and respect reduced-motion

Open the builderAll templatesThis palette on its own