Neon Harbor

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

Syne keeps the quirky wide display, and Spline Sans is a crisp, slightly geometric body that stays clean on the neon-lit dark gallery.

• SyneHeadings: headings up to 128px 700 at -3.2px
• Spline SansBody: body 16px, 12-13px uppercase one-word nav

Who it is for

• Freelance designers and illustrators
• Photographers showcasing client work
• Agencies preparing competitive pitches
• Studios organizing projects by service or industry

Layout

1. Header over hero: wordmark left, Projects / About / Contact centered in tracked uppercase, theme toggle icon right; header auto-reveals near the top edge
2. Hero: 4-column x 2-row grid of tall artwork tiles on black, dimmed, with parallax offset
3. Giant centered wordmark overlapping the grid
4. Short bio paragraph bottom-left
5. Projects list: rows with title, category, year and client; hovering reveals a floating image
6. About and Contact sections; full-screen mobile nav

Palette

Bold, nocturnal, vibrant, artsy, immersive. It's like entering a dark gallery lit by neon canvases.

• background#000000
• text#ffffff
• primary (yellow)#ffff00
• accent (lime)#e5ff00
• secondary surface#1a1a1a
• muted#262626
• border#333333
• muted text (dark)#a3a3a3

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

Syne 700, up to 128px, -3.2px tracking

Body

Spline Sans 16px at 1.6 line-height; 12-13px uppercase nav (one word each) with wide tracking

A quirky wide display face gives personality; Spline Sans handles everything else.

Spacing and imagery

64px side margins, 4-column tile grid with ~40px gutters and ~40px row gap, zero radius, content fits one viewport.

Saturated abstract paintings, light-painting photos, glitter portraits and fluid art, dimmed behind the wordmark.

Components

• Auto-reveal header
• Centered tracked nav
• Theme toggle
• Parallax artwork tile grid
• Giant display wordmark
• Bio paragraph
• Project list with hover image reveal
• Project data cards
• Full-screen mobile nav
• Contact section
• Toasts

Interactions

• Tiles shift with mouse movement (parallax) and dim/brighten
• Header slides in when the pointer nears the top or on scroll up
• Project rows reveal a floating image that follows the cursor
• Theme toggle switches pure black to light with accent retained
• Staggered entrance animations
• Mobile full-screen nav drawer

Data

• Project{slug, title, category, tags[], year, client, cover}
• Profile{name, bio, email, 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 a dark, immersive portfolio for a fictional design and illustration studio, "Neon Harbor". It targets brands and agencies scouting distinctive visual talent. The first screen is a wall of dimmed, colorful artworks that drift with the mouse, crossed by an oversized wordmark. The work lives in a text list that shows images only on hover, which keeps the interface clean.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS with class dark mode, shadcn/ui (Radix), Vaul for full-screen mobile nav, Sonner and lucide-react. Use Framer Motion (`useMotionValue` and `useSpring` for parallax and cursor previews) and React Router for `/`, `/projects`, `/about` and `/contact`. Embla is optional for project galleries. Static only.

### Pages & layout
1. Header: wordmark on the left, three uppercase tracked links in the center and a sun/moon icon on the right. It is hidden while reading and reveals when the pointer is within 80px of the top, when you scroll up, or when focus enters it.
2. Hero at 100vh: a 4x2 grid of 3:4 tiles at 45% brightness with 40px gaps and 64px margins. Each tile moves ±12px opposite to the pointer.
3. Wordmark: centered, white, at clamp(56px, 10vw, 128px).
4. Bio: bottom-left, 4 lines at 16px in 85% white (#d9d9d9), on a local black gradient scrim of at least 80% so the effective backdrop is #333333 or darker.
5. Projects: rows showing title (Syne 32px), category, year and client, separated by 1px borders. Hover or focus shows a 360px preview that follows the cursor.
6. About and Contact: simple two-column text sections with email and socials.

### Design system
- Dark: `--background: #000`, `--foreground: #fff`, `--primary: #ffff00`, `--accent: #e5ff00`, `--secondary: #1a1a1a`, `--muted: #262626`, `--border: #333`, `--radius: 0`.
- Muted meta text: #a3a3a3 (dark) and #595959 (light).
- Light: background #fafafa, foreground #0a0a0a. The accent is used only as a fill behind dark text.
- Fonts: Syne 700 and Spline Sans 400/500 from Google Fonts. Scale: 12 / 14 / 16 / 32 / 48 / 128px.
- Spacing: 8px base, 64px margins.
- Motion: spring (stiffness 120, damping 20) for parallax, 350ms header slide and 60ms entrance stagger.

### Components & interactions
- ParallaxGrid: transform-only and throttled to rAF. It is static on touch and under reduced motion.
- AutoRevealHeader: states for hidden, peeking and pinned. It is always visible on mobile and when focused.
- ProjectRow: default, hover or focus (accent underline plus preview) and active. Show a skeleton when previews load slowly.
- ThemeToggle: persisted, with `aria-pressed`.
- Selection color: the yellow accent with black text.

### Data & state
`Project{slug, title, category, tags, year, client, cover}` and `Profile` are typed data. State covers pointer position, header visibility and theme. Seed 8-10 invented projects with fictional clients and placeholder art.

### Accessibility
- The bio sits on an 80% black scrim (effective #333333 or darker), giving 8.95:1. The white wordmark over 45%-brightness tiles is at least 4.74:1.
- Hover previews are decorative. Row text must carry all meaning, and rows are links.
- A header that hides must stay keyboard-reachable. Reveal it on focus.
- Yellow on black is 19.56:1 and may be used for small text. Yellow on white fails, so avoid it in light mode.
- Verified contrast: body #ffffff on #000000 = 21.0:1; bio #d9d9d9 on #333333 = 8.95:1; wordmark #ffffff on #737373 = 4.74:1; muted #a3a3a3 on #000000 = 8.33:1; text on yellow #0a0a0a on #ffff00 = 18.44:1.

### Security
- No forms by default. Contact is `mailto:`.
- External links use `rel="noopener noreferrer"`. No secrets in client-side code.

### Performance & SEO
The hero loads 8 images, so use small, compressed 3:4 crops (about 600px) with `fetchpriority` on the first row only. Preload Syne. Add a real H1 (the wordmark) plus meta and OG tags.

### 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 parallax works with mouse and is static on touch/reduced-motion
  - [ ] Header auto-reveals and is reachable by keyboard
  - [ ] Project rows show previews on hover and focus
  - [ ] Dark and light themes both pass contrast
  - [ ] Hero fits one viewport from 1280x720 upward

Open the builderAll templatesThis palette on its own