Linden & Ash

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

Playfair Display stays for this art-book catalogue, one of the few templates keeping it, and Pathway Extreme is a quiet regular-weight grotesk with optical sizes for small labels.

• Playfair DisplayHeadings: headings 64/32/24px 400, italic for emphasis
• Pathway ExtremeBody: body 16px at +0.01em, 12px uppercase tracked labels

Who it is for

• Independent artists and visual designers
• Small creative teams needing a client-facing site
• Designers moving off generic portfolio platforms
• Creatives presenting case studies with outcomes

Layout

1. Header: two-line wordmark (studio name + role) left, Work/About/Styleguide centered (active in orange), social handle with star icon right
2. Hero: large serif statement with italic emphasis left; four-row career timeline (year, company, role) right
3. Two-column project grid of large color images, each with 'View case study', title and category/year
4. Auto-scrolling carousel strip
5. Services: heading + short description left, two-column list of eight services with hairline separators right
6. Footer: small tracked credit line left; Email, Instagram, LinkedIn right
7. Case study page with sticky sidebar nav and gallery; Styleguide page

Palette

Refined, airy, editorial, artistic, premium. It feels like a contemporary gallery catalogue: lots of white with bursts of saturated artwork.

• background#ffffff
• text (slate)#2f3537
• accent (orange)#c44618
• muted surface#f5f5f5
• border#ebebeb
• secondary text#707070

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

Playfair Display 400, 64px, -1.28px tracking, with italic for emphasis

Body

Pathway Extreme 400, 16px, +0.2px tracking, 1.6 line-height; 12px uppercase tracked labels

Classic high-contrast serif against a quiet regular-weight sans gives an art-book, gallery-catalogue feel.

Spacing and imagery

1150px container with 64px gutters, generous 120px+ section padding, 24px grid gap, hairline dividers, radius ~4px or none.

Vivid, saturated abstract paintings, portraits and light installations in large rectangular crops with no borders.

Components

• Two-line wordmark
• Centered nav with active accent
• Social handle link
• Serif hero with italic emphasis
• Career timeline table
• Project card with case-study link
• Auto-scrolling carousel
• Services two-column list
• Tracked footer credit
• Case study sticky sidebar
• Styleguide token page
• Dark mode toggle

Interactions

• Project images zoom subtly and 'View case study' underlines on hover
• Auto-scrolling carousel pauses on hover/focus
• Nav links shift to orange on hover/active
• Service items shift slightly on hover
• Case study sidebar highlights the section in view (scroll spy)
• Toasts for contact confirmation; dark mode switch

Data

• Project{slug, title, category, year, cover, sections[], gallery[]}
• TimelineEntry{year, organization, role}
• Service{name}
• Profile{name, role, handle, socials[]}

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 an editorial portfolio for a fictional artist-designer studio, "Linden & Ash". It serves galleries, brands and agencies who want to see refined visual work and a clear career story. The home page combines a literary serif statement, a short career timeline, a bold image grid of projects and a services list. Each project opens a structured case study.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix) and lucide-react. Use Embla Carousel with the autoplay plugin for the scrolling strip, Sonner for toasts, next-themes-style class toggling for dark mode and React Router for Work, About, Styleguide and `/work/:slug`. Recharts is optional for a small results chart inside case studies. Static only.

### Pages & layout
1. Header, 64px tall with a bottom hairline. Left: a two-line wordmark (name in small caps, role in lighter gray). Center: three uppercase tracked links. Right: a small star glyph plus the social handle.
2. Hero: a 12-column grid. Columns 1-6 hold a 3-line serif statement with one italic phrase. Columns 8-12 hold a four-row timeline (year, organization, role) in muted grays.
3. Work grid: two columns with a 24px gap and 4:3 covers. Under each: a small "View case study" link, the title in serif and a tracked "CATEGORY · YEAR" line.
4. Carousel: a continuous strip of thumbnails.
5. Services: a heading and short paragraph on the left and a two-column list of 8 services with bottom borders on the right.
6. Footer: a tracked credit on the left and three uppercase links on the right.
7. Case study: a sticky left sidebar that lists sections (Overview, Process, Outcome) and a right content column with a gallery.

### Design system
- `--background: #ffffff`, `--foreground: #2f3537`, `--accent: #c44618`, `--muted: #f5f5f5`, `--border: #ebebeb`, `--muted-foreground: #707070`, `--input-border: #707070` (the #ebebeb border is for decorative hairlines only).
- Dark: background #16191a, foreground #eceeee, accent #e55c2a, muted-foreground #9a9a9a.
- Fonts: Playfair Display 400/400i for headings (64 / 32 / 24px, -0.02em) and Pathway Extreme 400/500 for body at 16px (line-height 1.6, ~65ch measure) with +0.01em tracking. Labels are 12px uppercase with 0.12em tracking.
- Spacing: 8px scale; 128px sections; container 1150px. Radius 4px on buttons, 0 on images.
- Motion: 400ms ease for image zoom (scale 1.03) and 30s linear marquee.

### Components & interactions
- ProjectCard: hover or focus zooms the image and underlines the link in the accent. Show a skeleton while loading.
- AutoCarousel: pauses on hover or focus, has a visible pause button and stops for reduced-motion.
- ServiceItem: the text shifts 4px on hover.
- ScrollSpySidebar: highlights the active section and supports click-to-jump.
- ThemeToggle: persisted, with `aria-pressed`.
- ContactDialog: react-hook-form + zod, with states for invalid, submitting and success (Sonner toast).

### Data & state
Typed arrays: `Project{slug, title, category, year, cover, sections, gallery}`, `TimelineEntry{year, organization, role}` and `Service{name}`. Seed four fictional projects (abstract painting, luminous portrait series, light installation, mixed media) and invented employers.

### Accessibility
- The orange accent is deepened to #c44618 (4.96:1 on white, 4.55:1 on the muted surface) so nav labels and links pass at any size; dark mode uses #e55c2a (4.96:1 on #16191a).
- Secondary text is #707070 (4.95:1) in light mode and #9a9a9a (6.28:1) in dark mode.
- Build the timeline as a real `<table>` or `<dl>`.
- Carousel has pause/play and keyboard access; the skip link and focus rings use the accent.
- Verified contrast: body #2f3537 on #ffffff = 12.46:1; accent #c44618 on #ffffff = 4.96:1; secondary #707070 on #ffffff = 4.95:1; button #ffffff on #c44618 = 4.96:1; dark accent #e55c2a on #16191a = 4.96:1.

### Security
- Form validation on the client and in a serverless relay, with a honeypot and rate limit.
- No inline secrets. External links use `rel="noopener noreferrer"`.

### Performance & SEO
Lazy-load grid images with `srcset`. Preload Playfair Display's regular and italic weights. Add per-case-study meta and OG tags and semantic H1/H2 order.

### 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:
  - [ ] Hero shows serif statement beside a semantic timeline
  - [ ] Carousel is pausable and stops under reduced-motion
  - [ ] All text colors pass AA at their rendered size
  - [ ] Case study sidebar scroll-spy works with keyboard
  - [ ] Dark mode toggles and persists

Open the builderAll templatesThis palette on its own