Celeste Varga

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

Familjen Grotesk is a refined grotesk with a real italic for the section label, and Gantari is a soft geometric body close to Satoshi.

• Familjen GroteskHeadings: name and section heads 30px orange, italic "Select clients"
• GantariBody: body 16px, 14px uppercase client roles

Who it is for

• Fashion stylists
• Creative directors
• Photographers and creative freelancers
• Agencies pitching premium clients

Layout

1. Header: name wordmark left, 'Info' and 'Select Works' links right
2. Half-width hero image (fashion campaign) top-left with empty right side
3. Two-column intro: orange name + role left, two paragraphs bio right
4. Select works: 3-column staggered grid of fashion images with caption lists under one column
5. 'Select clients' italic orange heading with two-column list of roles/years and italic publication names
6. Project detail pages with galleries
7. Footer

Palette

Refined, editorial, calm, modern, fashion-forward. It resembles a lookbook with generous white space.

• background#ffffff
• text#000000
• muted text (captions, years)#5e5e5e
• accent orange (name, headings, links)#c2410c
• muted surface#f5f5f5
• border#000000
• campaign tan (imagery only)#d6b98a

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

Cabinet Grotesk regular, 30px orange for name and section heads (italic for 'Select clients'); wordmark 24px uppercase (Cabinet Grotesk is not on Google Fonts; a vibld project loads Familjen Grotesk)

Body

Satoshi 16px, line-height 1.6; client roles uppercase tracked 14px (weight 500, short lines), publications italic (Satoshi is not on Google Fonts; a vibld project loads Gantari)

Understated sizes and a single orange accent keep focus on the photography

Spacing and imagery

32px margins, 2-column 50/50 grid for intro, 3-column image grid with 24px gaps and staggered vertical offsets, zero radius

Warm-toned fashion editorial photography (gowns, leather coats, street scenes) in varying aspect ratios

Components

• Minimal header
• Asymmetric hero image
• Name + role block
• Bio columns
• Staggered works grid
• Caption list
• Select clients list
• Project detail gallery
• Carousel
• Toasts
• Mobile drawer nav

Interactions

• Scroll-triggered fade and slide-in of images
• Image hover subtle zoom
• Project pages with carousel
• Smooth route transitions
• Drawer menu on mobile

Data

• Work{slug, title, publication, category, images[], year, credits[]}
• Client{role, year, name}
• Profile{name, role, bio, locations[], availability}

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 fashion stylist and creative director called **Celeste Varga**. The audience is magazine editors, brand marketing teams and photographers looking for a stylist. The site should feel like a lookbook: an asymmetric hero image, a short personal introduction, a staggered grid of selected works, and a concise list of client roles.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix), lucide-react, React Router, Framer Motion for scroll reveals, Embla Carousel for project galleries, Vaul for the mobile drawer, and Sonner for "link copied" toasts. No backend.

### Pages & layout
1. Header: name wordmark left, "Info" and "Selected work" right.
2. Hero: one large campaign photo occupying the left half of the grid, with the right half intentionally empty.
3. Intro: a two-column row with the name in the accent color and role below on the left, and two short bio paragraphs on the right (location, experience, availability).
4. Selected work: a three-column grid where columns are vertically offset (the middle column starts lower) and images vary in aspect ratio; one column holds a small caption list of project names.
5. Selected clients: an italic accent heading, then a two-column list of entries, each with an uppercase role and year line and an italic publication or campaign name.
6. Project page: title, credits (photographer, model, hair and makeup as fictional names), carousel gallery, and next project.
7. Footer: email and social links.

### Design system
Tokens: `--background: #ffffff; --foreground: #000000; --accent: #c2410c; --muted: #f5f5f5; --border: #000000; --muted-foreground: #5e5e5e; --radius: 0`. Fonts: Cabinet Grotesk (Fontshare) or Gantari for display, and Satoshi or Gantari for body. Scale: 30px name and section heads; 24px wordmark; 16px body at line-height 1.6, max 70ch; 14px uppercase role lines with 0.06em tracking. Spacing: 32px margins, 24px gutters, 160px column offset in the works grid, 120px section gaps. No shadows. Motion: 700ms fade-and-rise reveals with 100ms stagger; 1.03 image zoom on hover over 600ms.
- Typeface: Familjen Grotesk (Google Fonts) for name and section heads 30px orange, italic "Select clients".

### Components & interactions
- Staggered grid: CSS grid with per-column `margin-top`; collapses to 2 columns, then 1, on smaller screens.
- Work card: hover zoom, focus ring, caption revealed on focus; blurred placeholder while loading; fallback if missing.
- Project carousel: arrows, keyboard, swipe, and counter "3 / 12".
- Copy-link button on project pages with a toast.
- Drawer navigation on mobile.

### Data & state
`Work{slug,title,publication,category,year,images[],credits[]}`, `ClientEntry{role,year,name}`, `Profile{name,role,bio[],locations[],availability}`. Static typed data with fictional publications and names only.

### Accessibility
The accent is #c2410c, deepened from a lighter orange that measured only 2.9:1 on white; it now gives 5.2:1 on white and 4.8:1 on #f5f5f5, so the 30px regular-weight name, headings and links all pass as normal text. Grid order must match reading order in the DOM despite the visual offsets. Every image needs alt text describing garment and setting. The carousel announces slide position. Reduced motion disables reveals and zooms. Verified contrast: body text on white: #000000 on #ffffff = 21.0:1; muted captions on white: #5e5e5e on #ffffff = 6.48:1; accent name/headings on white: #c2410c on #ffffff = 5.18:1; white text on accent button: #ffffff on #c2410c = 5.18:1.

### Security
Static: `mailto:` contact; external links use `rel="noopener noreferrer"`; no secrets in the client. If a booking form is added, validate with zod on the client and server and add spam protection.

### Performance & SEO
Serve responsive AVIF images with explicit dimensions; preload the hero; lazy-load the grid. Code-split project routes. Person JSON-LD, per-project meta and OG image. Target CLS under 0.05 given the staggered layout.

### Guardrails
- Use placeholder or generated fashion imagery and invented publications; never list real magazines or brands as clients.
- Don't fabricate endorsements.
- Collect no personal data.
- Keep components small and typed, never use `any`, and show broken images visibly.
- Done when: accent text meets AA; the staggered grid degrades cleanly to one column; project pages resolve by slug with a working carousel; keyboard users can reach every work; reduced motion removes all animation.

Open the builderAll templatesThis palette on its own