Orin Blackwood

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

Chakra Petch has a technical, chamfered rhythm like a render studio blueprint, and Azeret Mono keeps the bracket labels precise.

• Chakra PetchHeadings: hero 128px 600 at -3.2px, gray on black
• Chakra PetchBody: body 16px gray
• Azeret MonoFigures and code: bracketed labels like [ About Me ]

Who it is for

• 3D artists and motion designers
• Image-first creatives who need filtering and sorting
• Freelancers maintaining content without a developer
• Agencies delivering portfolio sites to clients

Layout

1. Top nav: Projects, About, Contact left; hamburger right opening a fullscreen overlay menu
2. Split hero with diagonal geometric lines: huge gray name left, bracketed role '[ 3D Designer ]' right, auto-scrolling project carousel
3. About: bracket eyebrow, centered statement, sticky-scroll stack of tilted polaroid photo cards
4. Projects: filter tags (All...), sort select (Newest/Oldest/A-Z/Featured), 4-col/2-col layout toggle, masonry grid, empty state
5. Timeline: staircase of numbered steps (Concept Proposal, Full 3D Design, Deliverables, Finals) with durations
6. Stats and testimonials
7. Footer with bracketed social links and large name
8. Admin dashboard: sign-in, project CRUD, image upload

Palette

Dark, geometric, technical, cinematic, moody. It feels like a render studio's blueprint, with thin lines on black and photos in grayscale.

• background#000000
• surface / card#0f0f0f
• text (gray)#ababab
• primary (white)#ffffff
• secondary text#8a8a8a
• accent (red)#cb011f
• border#333333
• input border#606060

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

Chakra Petch 600, 128px, -3.2px tracking, gray on black

Body

Chakra Petch 16px gray; Azeret Mono for bracketed labels like [ About Me ]

Monochrome grotesk with mono metadata; the bracket convention gives a technical, blueprint vibe.

Spacing and imagery

Full-bleed dark canvas framed by 1px border lines and a center vertical rule; 64px side padding; 0 radius; sections separated by long scroll-driven sequences.

Grayscale lifestyle photos as tilted polaroids; 3D renders and brand visuals in the project grid; hairline diagonal SVG lines as decoration.

Components

• Fullscreen overlay menu
• Diagonal-line split hero
• Bracketed labels
• Auto-scrolling project carousel
• Sticky-scroll polaroid stack
• Tag filter chips
• Sort select
• Layout toggle (4/2 columns)
• Masonry project grid
• Staircase timeline
• Stats counters
• Testimonial cards
• Admin project table and editor
• Image uploader

Interactions

• Polaroid cards reveal and stack as you scroll through a pinned section
• Filter by tag, sort and toggle grid density with animated reflow
• Empty state 'No projects found' when filters match nothing
• Overlay menu opens with staggered links
• Carousel auto-scrolls and pauses on hover
• Admin: create/edit/delete projects with toasts and optimistic updates

Data

• Project{id, title, slug, cover_url, tags[], featured, created_at, description, owner_id}
• Tag{id, name}
• TimelineStep{order, title, duration, description}
• Testimonial{quote, author, role} (sample)
• Stat{label, value}
• Profile{user_id, role: 'admin'}

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 dark, geometric portfolio with a small CMS for a fictional 3D artist, "Orin Blackwood". Visitors browse a cinematic one-pager and a filterable project grid. An admin dashboard lets the owner manage projects and renders without code.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix Dialog, Select, ToggleGroup, Table, Form; Sonner; Vaul) and lucide-react. Use Framer Motion for the sticky polaroid sequence and overlay menu, Embla Carousel with autoplay for the hero strip, TanStack Query for data fetching and caching, react-hook-form + zod for admin forms. Supabase provides Postgres (projects, tags), Auth (admin email magic link), Storage (render images).

### Pages & layout
1. Nav: three text links on the left and a two-line hamburger on the right that opens a full-screen black overlay with large links and socials.
2. Hero: the viewport is split by a center rule, and SVG diagonals cross it. The name sits top-left at clamp(64px, 10vw, 128px). "[ Role ]" sits mid-right. An auto-scrolling strip of project thumbnails runs at the bottom.
3. About: a "[ About Me ]" label, a centered two-line statement, then a pinned section where 3-4 tilted grayscale photo cards stack as you scroll.
4. Projects: a tag chip row, a sort Select, a 4/2 column ToggleGroup and a masonry grid, with an empty state.
5. Timeline: four staircase-offset steps, each with an index, title, duration and description.
6. Stats and sample-labeled testimonials; footer with bracketed socials.
7. `/admin`: sign-in, a project table, create/edit drawer, drag-to-upload images and a featured toggle.

### Design system
- `--background: #000`, `--card: #0f0f0f`, `--foreground: #ababab`, `--primary: #fff`, `--secondary: #8a8a8a`, `--accent: #cb011f`, `--border: #333` (decorative frames and dividers), `--input-border: #606060` (admin inputs, unselected chips, toggles), `--radius: 0`. Selected chips are #fff with #000 text.
- Fonts: Chakra Petch 400/500/600 and Azeret Mono 400 for bracket labels, from Google Fonts. Scale: 12 / 14 / 16 / 20 / 30 / 64 / 128px, with -0.025em tracking on display; body 16px at 1.6 line-height, ~65ch measure.
- Spacing: 8px base, 64px gutters, 1px hairline frames. Motion: 600ms ease-out reveals, scroll-linked transforms and 300ms overlay.

### Components & interactions
- FilterBar: states for chip hover, selected and focus. Sort and layout changes trigger an animated reflow. Zero results shows "No projects match -- clear filters".
- ProjectCard: skeleton, hover reveals title and tags.
- PolaroidStack: scroll-linked. Reduced motion shows a static fanned stack.
- Admin table: loading, empty, error (retry) and optimistic delete with an undo toast. The upload shows progress and rejects bad types.

### Data & state
Tables: `projects(id uuid, owner_id uuid, title, slug unique, description, cover_path, tags text[], featured bool, created_at)`, `profiles(user_id, role)`. Timeline, stats and testimonials can be static config. Filter/sort state lives in URL params. Seed 12 fictional projects.

### Accessibility
- The foreground gray #ababab on black is 9.14:1. Secondary #8a8a8a reaches 6.08:1 on black and 5.55:1 on cards, so it is safe at body size. The red accent is decorative only.
- The overlay menu is a modal with focus trap and Esc. The layout toggle and chips have labels and `aria-pressed`.
- The pinned polaroid section must not block keyboard scrolling. Provide alt text for every image.
- Verified contrast: body #ababab on #000000 = 9.14:1; secondary #8a8a8a on #000000 = 6.08:1; input border #606060 on #000000 = 3.34:1.

### Security
- RLS on `projects`: `select` for anyone, but only rows where `published` is true. `insert/update/delete` only when `auth.uid() = owner_id` and the profile role is admin.
- Storage bucket: public read, writes restricted to admins. Accept only image/jpeg, png and webp up to 8MB, validated in the client and in a storage policy or Edge Function.
- zod on all admin inputs. Ship only the anon key. Sanitize rich text with DOMPurify.

### Performance & SEO
Use Supabase image transforms or pre-sized variants, lazy-load the grid and code-split `/admin`. Add meta and OG tags and a noindex on admin.

### 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.
- Don't expose the Supabase service-role key or admin routes to search engines.
- Done when:
  - [ ] Filters, sort and layout toggle update the grid and URL
  - [ ] Empty-state appears when no projects match
  - [ ] Only an admin can create/edit/delete; RLS verified with anon key
  - [ ] Uploads reject wrong types and files over 8MB
  - [ ] Overlay menu and polaroid section are keyboard/reduced-motion safe

Open the builderAll templatesThis palette on its own