Marlow Kane

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

Inter Tight at regular weight is a restrained, fashion-editorial sans, and DM Mono supplies the archival monospace nav the design describes.

• Inter TightHeadings: split centered headline, regular weight, white
• Inter TightBody: body 16px at 1.6
• DM MonoFigures and code: 12px uppercase nav with very wide tracking

Who it is for

• Musicians and DJs with strong photography
• Artists wanting a cinematic web presence
• Creative agencies building artist sites
• Fans looking for shows and streams

Layout

1. Centered top nav of widely tracked monospace links (Home, Tour, Music, About, Contact) over imagery
2. Cinematic intro that rapidly cycles images before settling
3. Home: infinite horizontal strip of full-height portrait panels with the artist name split across the center, pagination dots at bottom
4. Tour page: list of dates that swap a full-screen background image on hover
5. Music page: tracklist with platform icons revealed on hover
6. About: bio and career timeline
7. FAQ accordion
8. Contact page

Palette

Cinematic, stylish, brooding, fashion-editorial, intimate. Deep red studio portraits make it feel like a magazine spread.

• page background (light pages)#ffffff
• text#121212
• muted text on light pages#797570
• photo backdrop deep red#5a0a0a
• nav text muted on dark/photo#d2cfc8
• primary#000000
• accent#7547d1
• decorative border#e6e6e6
• input border#949494
• nav/tour scrim (black 65%)#000000a6

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

Clean sans (Inter-like) in white, regular weight, centered and split across panels over a dark scrim; nav in 12px monospace uppercase with very wide tracking (Monospace is not on Google Fonts; a vibld project loads Inter Tight)

Body

Inter Tight 16px, line-height 1.6

Restraint lets the photography carry the mood; mono nav adds an archival feel. Muted text is #797570 on white and #d2cfc8 on dark surfaces.

Spacing and imagery

Edge-to-edge full-height panels with no gutters; tiny nav at top; content pages use generous whitespace on white; square corners

Studio portraits on a deep red painted backdrop, displayed as tall adjacent panels in a looping strip; full-screen photos behind tour rows

Components

• Intro image-cycling sequence
• Infinite horizontal gallery
• Pagination dots
• Split name overlay
• Monospace tracked nav
• Tour row with hover background swap
• Tracklist with hover platform icons
• Career timeline
• FAQ accordion
• Contact form/details
• Footer

Interactions

• Accelerating image cycle on first load
• Drag/scroll/auto-advance infinite gallery with dot indicator
• Hover on tour date reveals full-screen image
• Hover on track reveals streaming icons
• Accordion expand/collapse
• Active nav item brightens
• Page transitions fade

Data

• GalleryImage{src, alt}
• TourDate{date, city, venue, image, ticketUrl}
• Track{title, duration, links{spotify, apple, youtube}}
• Milestone{year, title, description}
• FAQ{question, answer}

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 six-page portfolio for a fictional solo artist called **Marlow Kane**. The audience is fans, fashion and music press, and bookers who respond to strong visuals. The site shows off editorial photography first, with a looping portrait gallery, and then gives quick paths to tour dates, music, biography, FAQ and contact.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix Accordion, Dialog), lucide-react icons, React Router, and Framer Motion for the intro sequence, gallery motion and hover reveals. Use Embla Carousel with its loop option and autoplay plugin for the infinite gallery. No backend; the contact form posts to one serverless function.

### Pages & layout
1. Intro: on first visit only, quickly cycle 8–10 portraits, speeding up, then settle on the home gallery. Offer a skip button.
2. Home: full-viewport horizontal strip of tall portrait panels edge to edge; the artist name split across two panels in white over a 65% black gradient scrim; dot pagination centered at the bottom; tracked monospace nav centered at the top.
3. Tour: full list on a dark page; hovering or focusing a row fades a full-screen photo in behind the list under a 65% black overlay; each row has date, city, venue and a ticket link.
4. Music: numbered tracklist; hover or focus reveals platform icon links.
5. About: bio paragraphs and a vertical career timeline.
6. FAQ: accordion of 6–8 questions (booking, press, merch).
7. Contact: booking, management and press emails plus a short form.

### Design system
Tokens: `--background: #ffffff; --foreground: #121212; --primary: #000000; --muted-foreground: #d2cfc8; --accent: #7547d1; --border: #e6e6e6 (decorative dividers); --input-border: #949494; --muted-foreground-light: #797570; --stage: #5a0a0a`. Fonts: Inter Tight 400/500 for text and DM Mono 400 for nav and labels (uppercase, 0.3em tracking, 12px, short labels only). `--muted-foreground` #d2cfc8 is for dark and photo surfaces only; light pages use #797570 for muted text. Scale: 28 / 20 / 16 / 12px (body 16px with line-height 1.6, max 68ch); the name overlay is 24–28px, since the photos carry the weight. Square corners, no shadows. Motion: gallery drift 40s per loop, 250ms hover fades, intro 2.5s total with ease-in acceleration. Home and tour are dark; about, FAQ and contact are light.

### Components & interactions
- Gallery: drag or swipe, arrow keys, pause on hover or focus, and dots that jump to a slide.
- Tour row: hover or focus swaps the background image with a crossfade; ticket link states include available, sold out (muted, no link) and "announce soon".
- Track row: icons slide in on hover and are always visible on touch; copy-link toast.
- Accordion: one open at a time, with chevron rotation.
- Contact form: labelled fields, inline errors, submit spinner, success and failure toasts.

### Data & state
`GalleryImage{src,alt,focal?}`, `TourDate{date,city,venue,image,ticketUrl?,status}`, `Track{n,title,duration,links}`, `Milestone{year,title,text}`, `Faq{q,a}`. Store "intro seen" in sessionStorage. Seed with invented venues and track names.

### Accessibility
Nav text #d2cfc8 sits on a top gradient strip of black at 65%, which keeps it at 4.5:1 or better even over the lightest part of a photo; the split name and tour rows use the same 65% scrim. The auto-moving gallery needs a visible pause/play control (WCAG 2.2.2). The intro must be skippable and must not run under `prefers-reduced-motion`. Hover-only reveals must also appear on keyboard focus and on touch. Each portrait needs meaningful alt text. The accordion uses Radix semantics. Verified contrast: body text on white: #121212 on #ffffff = 18.73:1; muted text on white: #797570 on #ffffff = 4.57:1; nav text over 65% black scrim on white-worst-case photo: #d2cfc8 on #595959 = 4.5:1; white name/tour text over 65% black scrim: #ffffff on #595959 = 7.0:1; contact input border on white: #949494 on #ffffff = 3.03:1.

### Security
Validate the contact form with zod on the client and in the function, add a honeypot, and rate-limit by IP. Keep email-service keys server-side only. External links use `rel="noopener noreferrer"`.

### Performance & SEO
Portraits are heavy, so use responsive AVIF, preload only the first two, and lazy-load the rest. Preload tour background images on row hover intent. Code-split routes. Per-page meta, OG image, and MusicGroup JSON-LD. Keep the intro from delaying LCP by rendering the first frame immediately.

### Guardrails
- Use placeholder or generated portraits and original copy; no real artist names or logos.
- Don't present invented press quotes as real.
- Store only the contact submission fields you need.
- Keep components small and typed, never use `any`, and show errors visibly.
- Done when: the gallery loops seamlessly and can be paused; the intro can be skipped and plays once per session; tour backgrounds reveal on both hover and focus; the contact form validates and shows success and error states; axe reports no critical issues.

Open the builderAll templatesThis palette on its own