Lintel 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

Zen Kaku Gothic New has a light, restrained Japanese-modernist grotesk Latin that mirrors minimal architecture.

• Zen Kaku Gothic NewHeadings: hero 128px at 300 uppercase; regular 64px sections
• Zen Kaku Gothic NewBody: body 16-18px, 12px uppercase eyebrows

Who it is for

• Architecture firms and design studios
• Studios presenting multi-category portfolios
• Firms seeking residential and commercial clients
• Practices publishing case studies and insights

Layout

1. Header: small caps studio name left, centered uppercase links (Work, Services, About, Blog, Contact), theme toggle icon right; translucent over hero
2. Full-bleed grayscale modernist building hero with centered two-line light uppercase headline, subtitle and vertical 'Scroll' indicator
3. Services: numbered list (01 Residential, 02 Commercial, 03 Renovation, 04 ...)
4. About: 'Design Philosophy' heading + two paragraphs left; principles list with left rules and Founded/Projects stats right
5. Selected work on light gray: 'Our Projects' with category filter and full-width project images with location/area/year/category
6. Blog with topic filters
7. Contact: form + details
8. Footer

Palette

Minimal, serious, calm, precise, monochrome. It feels like a clean architecture monograph.

• background#ffffff
• text#000000
• section gray#f5f5f5
• accent gray#f2f2f2
• decorative border#e6e6e6
• input border (light)#8e8e8e
• label gray#333333
• dark mode bg#0a0a0a
• dark mode muted text#a3a3a3
• dark mode input border#6b6b6b
• hero overlay (black 60%)#00000099

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

System sans light (300) uppercase at 128px with slight negative tracking for hero only (display size); regular weight 64px section titles (the system face is not on Google Fonts; a vibld project loads Zen Kaku Gothic New)

Body

System sans 16-18px at weight 400, line-height 1.6; 12px uppercase medium eyebrows with 0.1em tracking (the system face is not on Google Fonts; a vibld project loads Zen Kaku Gothic New)

Thin, large type and generous whitespace mirror minimal architecture

Spacing and imagery

Very airy; 24px page gutters on full-width layout, two-column about split, large vertical section padding (~120px), 6px radius on controls

Black-and-white photography of concrete modernist buildings, full-bleed hero and large project images

Components

• Translucent header with theme toggle
• Full-bleed hero with scroll indicator
• Numbered services list
• Philosophy split with principles
• Stats pair (founded, projects)
• Project category filter
• Project card with metadata
• Project detail page
• Blog list with topic filter
• Contact form
• Footer

Interactions

• Theme toggle light/dark
• Header becomes solid white on scroll
• Category filter updates project grid
• Hover scale/brighten on project images
• Scroll indicator animates
• Form validation with toast

Data

• Project{slug, title, category, location, area, year, images[], description}
• Service{number, title, description}
• Principle{title, description}
• Post{slug, title, topic, date, excerpt, body}
• ContactMessage{name, email, message}

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 minimal website for a fictional architecture practice called **Lintel Works**. The audience is homeowners, developers and institutions shortlisting architects. The site should communicate restraint and quality through large black-and-white photography and thin type, show services and philosophy, let visitors filter projects by type, publish articles, and take inquiries.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Radix Toggle Group, Select, Form, Toast), lucide-react, React Router, react-hook-form + zod, and next-themes (or a small theme hook) for light and dark mode. Framer Motion is optional, for subtle reveals. Static content in typed files or MDX; the contact form posts to one serverless function.

### Pages & layout
1. Header: small uppercase studio name left, centered uppercase links, theme toggle right; translucent gray over the hero, solid after scrolling.
2. Hero: full-bleed grayscale building photo with a 60% black overlay, a two-line light-weight uppercase headline, a one-line subtitle and a vertical "Scroll" line indicator.
3. Services: eyebrow plus heading, then a numbered list of four disciplines with short descriptions.
4. About: large "Design philosophy" heading and two paragraphs on the left; on the right, three principles with left rules and a two-stat row (founded year, project count).
5. Work (light gray band): heading, category filter (All, Residential, Commercial, Cultural, Renovation), and large project cards with location, area, year and category.
6. Project detail: hero image, metadata grid, narrative, gallery.
7. Journal: post list with topic chips; article page.
8. Contact: form and studio details; footer.

### Design system
Light tokens: `--background: #ffffff; --foreground: #000000; --muted: #f5f5f5; --accent: #f2f2f2; --border: #e6e6e6 (decorative); --input-border: #8e8e8e; --label: #333333`. Dark tokens: `--background: #0a0a0a; --foreground: #f5f5f5; --muted: #141414; --border: #262626 (decorative); --input-border: #6b6b6b; --label: #a3a3a3`. Font: Zen Kaku Gothic New 300/400/500. Scale: clamp(56px, 10vw, 128px) hero at 300 weight; 64 / 32 / 20 / 16 / 12px (the 300 weight only at 32px and above; body 16–18px at weight 400, line-height 1.6, max 70ch); eyebrows 12px uppercase, weight 500, with 0.1em tracking. Spacing: 24px gutters, 120px section padding, 64px column gap. Radius 6px on inputs and buttons, 0 on images. No shadows. Motion: 300ms fades; image hover scale 1.03 over 700ms.

### Components & interactions
- Filter: toggle group with an active underline; the URL param updates; empty state "No projects in this category yet".
- Project card: hover scale and caption brighten; focus ring; lazy image with blurred placeholder.
- Theme toggle: labelled button, respects system preference first, persists choice.
- Contact form: name, email, project type select, budget range, message; inline errors; loading; success and error toasts.

### Data & state
`Project{slug,title,category,location,areaSqm,year,cover,images[],summary,body}`, `Service{n,title,text}`, `Principle{title,text}`, `Post{slug,title,topic,date,excerpt,body}`. Filter state lives in URL params. Seed eight invented projects with plausible but fictional locations.

### Accessibility
White hero text sits on a 60% black overlay, which holds 5.7:1 for the subtitle even over a white-worst-case photo. Eyebrow text #333 on white passes easily; in dark mode labels use #a3a3a3. Inputs use #8e8e8e (light) and #6b6b6b (dark) borders so the field edges reach 3:1. The scroll indicator is decorative. The filter uses `aria-pressed`, and the result count is announced. Images need alt text describing the building. Check both themes for focus ring visibility. Verified contrast: light: body text: #000000 on #ffffff = 21.0:1; light: label gray on white: #333333 on #ffffff = 12.63:1; light: input border: #8e8e8e on #ffffff = 3.28:1; dark: muted labels: #a3a3a3 on #0a0a0a = 7.85:1; hero text over 60% black overlay on white-worst-case photo: #ffffff on #666666 = 5.74:1.

### Security
Validate the contact form with zod on the client and in the function, add a honeypot and rate limit, and never expose email-service keys. Sanitize any Markdown-rendered journal content (DOMPurify if HTML is allowed). External links use `rel="noopener noreferrer"`.

### Performance & SEO
Serve grayscale AVIF images with `srcset`; preload the hero. Code-split project and journal routes. Unique titles and descriptions, OG images per project, Organization and Article JSON-LD, sitemap. Target Lighthouse 95+ in both themes.

### Guardrails
- Use original copy and placeholder or generated architecture photos; no real firm names or buildings claimed as your work.
- Present no fabricated client testimonials as real.
- Store only inquiry fields needed.
- Keep components small and typed, never use `any`, and show errors visibly.
- Done when: the filter deep-links and shows an empty state; both themes pass AA; project pages resolve by slug; the contact form validates and blocks bots; the header stays readable over the hero and after scroll.

Open the builderAll templatesThis palette on its own