Nocturne Works

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

Lexend Deca is an even, open geometric sans with a clean light weight, which gives the premium monochrome gallery its calm, cinematic headlines.

• Lexend DecaHeadings: hero 60px at 300 at -1.5px, section titles 36px regular
• Lexend DecaBody: body 16px, 12px 500 uppercase eyebrows at 0.2em

Who it is for

• Creative and advertising agencies
• Brand design studios
• Freelance collectives
• Marketing leads hiring agencies

Layout

1. Minimal header: wordmark left, 'MENU' text button right opening a fullscreen blurred overlay nav (Home, Portfolio, Journal, Contact)
2. Full-screen hero over dark abstract photo with faint vertical grid lines: tracked eyebrow, light-weight white headline typed letter by letter, subline, white pill 'Get in Touch', star row with social proof
3. Selected work portfolio grid (CMS; shows empty state when no items)
4. Why-us 3x2 dark cards with icon tiles, category eyebrow, title, one-line metric
5. Pricing: three tiers with team-size slider and annual toggle
6. Process slider with Ken Burns images
7. Testimonials grid
8. Journal (3-column blog cards)
9. Contact form + scheduler booking modal, footer

Palette

sleek, cinematic, restrained, confident, premium. It feels like a dark gallery for brand work.

• page black#000000
• card surface#111111
• icon tile#262626
• text white#fafafa
• muted text#a3a3a3
• light section background#fafafa
• ink#141414

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

Lexend Deca Light 300 (display sizes 32px+ only), 60px hero with -1.5px tracking; 36px regular section titles

Body

Lexend Deca 16px, weight 400, line-height 1.6; 12px uppercase eyebrows (2 to 3 words) at weight 500, 0.2em tracking

One family, with weight contrast (light headlines, medium labels) and tight tracking for a premium monochrome feel.

Spacing and imagery

Full-width 1232px grid, 3-column cards with 24px gaps, large 32px card radius (1rem token doubled), 120px sections, pill buttons.

Dark, warm abstract portrait photography with light streaks behind the hero; thin vertical grid lines; minimal line icons inside dark rounded tiles; case study covers.

Components

• Text 'MENU' toggle with fullscreen overlay nav
• Typing hero headline with blinking cursor
• White pill CTA
• Star social-proof row
• Portfolio grid with empty state
• Feature cards with icon tile + eyebrow
• Pricing calculator (tiers, seat slider, annual toggle)
• Process slider with Ken Burns
• Testimonials grid
• Journal cards with read time
• Case study detail page
• Booking modal (embedded scheduler)
• Contact form with honeypot

Interactions

• Headline types letter by letter with a blinking cursor
• Overlay menu opens with blur and staggered links
• Process slider autoplays with parallax zoom
• Pricing updates live with slider and toggle
• Scroll reveals and staggered card entrances
• Booking opens in a modal
• Contact submission with server validation and rate limiting

Data

• CaseStudy{slug, title, client, category, summary, images[4], body, published}
• Post{slug, title, excerpt, cover, category, readMinutes, body, publishedAt}
• Testimonial{name, role, company, quote, rating, avatar}
• PricingTier{name, basePrice, perSeat, features[]}
• ContactMessage{name, email, company, budget, message, createdAt}

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 "Nocturne Works", a portfolio and lead-generation site for a small brand and advertising studio. It should feel like walking into a dark gallery: restrained monochrome, light-weight type and cinematic imagery. Prospects browse case studies, understand the process and price, then book a call or send a brief. Editors manage content without code.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Dialog, Slider, Switch, Card, Form, Toast), lucide-react. Framer Motion for the typing hero, overlay menu and reveals. Embla Carousel with an autoplay plugin for the process slider. TanStack Query and react-hook-form + zod. Supabase: Postgres for case_studies, posts, testimonials and contact_messages; Storage for images; Auth for the studio editors; an Edge Function for contact validation, rate limiting and email. The booking modal embeds a third-party scheduler.

### Pages & layout
1. **Header**: wordmark left; a "MENU" text button right that opens a fullscreen blurred overlay with four large links that stagger in, plus a "Close" button.
2. **Hero**: full-screen dark abstract image with faint vertical grid lines, a tracked eyebrow, a light 60px white headline typed letter by letter with a blinking cursor, a subline, a white pill "Get in touch" and a star row with a proof line.
3. **Selected work**: 2 or 3 columns of case study covers and a "View all" link, with a designed empty state.
4. **Why us**: six dark cards (icon tile, uppercase category, title, one-line metric).
5. **Pricing**: three tiers, a team-size Slider and a monthly/annual Switch showing a discount, with live totals.
6. **Process**: a full-width slider with four steps and slow zoom images.
7. **Testimonials**: grid.
8. **Journal**: three-column cards with read time.
9. **Contact**: form, "Book a call" Dialog and footer.
10. Case study detail (up to four images) and post detail pages, plus an editor dashboard for CRUD.

### Design system
Dark-first. Tokens: `--background: #000000`, `--card: #111111`, `--tile: #262626`, `--foreground: #fafafa`, `--muted: #a3a3a3`, `--paper: #fafafa` and `--ink: #141414` for light sections, `--radius: 2rem` on cards, pill buttons. Font: Lexend Deca 300/400/500 (300 only at 32px and above); hero -0.025em; eyebrows 12px uppercase at 0.2em. Scale: 60/36/24/18/16/12px. Spacing: 8px base, 120px sections, 24px gaps. No shadows; use borders `rgb(255 255 255/.06)`. Motion: typing at 40ms per character, overlay 400ms with a 60ms stagger, slider autoplay 6s.

### Components & interactions
- Typing headline: the full text is in the DOM for screen readers, and the animation is visual only.
- Overlay menu: focus trap, Escape to close, body scroll lock.
- Pricing: price is computed as `base + perSeat × seats`, with 15% off when annual; output announced via `aria-live`.
- Cards: hover lightens the border and moves the icon tile; focus-visible shows a white ring.
- Contact: inline errors, a submitting state and a success toast; rate-limit errors display a friendly retry time.
- Empty states for work, journal and testimonials.

### Data & state
Tables: `case_studies(slug, title, client, category, summary, images text[], body_md, published)`, `posts(slug, title, excerpt, cover, category, read_minutes, body_md, published_at)`, `testimonials(name, role, company, quote, rating, avatar)`, `contact_messages(id, name, email, company, budget, message, created_at)`.

### Accessibility
Muted `#a3a3a3` passes on black, card and tile surfaces. Keep focus rings white with a 2px offset. The typing and slider stop under reduced motion; the slider has pause and previous/next controls and labelled slides. Use one H1 (the headline text), card titles as H3 under section H2s, alt text on covers, and a titled booking iframe. Verified contrast: muted on black #a3a3a3 on #000000 = 8.33:1; muted on card #a3a3a3 on #111111 = 7.49:1; muted on tile #a3a3a3 on #262626 = 6.0:1; pill #141414 on #fafafa = 17.65:1.

### Security
RLS: published content is public-read, and only editors (via a `user_roles` table) can write. `contact_messages` is insert-only through the Edge Function and editor-read. Validate with zod on the client and in the function, add a honeypot and per-IP rate limit, sanitize markdown with DOMPurify, and allow uploads of images only (5 MB). Allow-list the scheduler host in the iframe and CSP, and keep service keys in function env.

### Performance & SEO
Code-split the editor, lazy-load covers and serve the hero as AVIF. Give case studies and posts their own meta and OG images, and add CreativeWork and Article JSON-LD.

### Guardrails
- Use original copy and placeholder imagery only, with no real client logos or trademarks.
- Do not present sample testimonials or stats as real.
- Store only the contact fields needed.
- Keep components small and typed, with no `any`, and show errors visibly.
- Done when: the overlay nav is accessible; the pricing math is correct; CMS content renders with empty states; the contact form is rate-limited; reduced motion disables typing and autoplay.

Open the builderAll templatesThis palette on its own