Independent studio website (Ferrow)

• discover work by kind (URL-backed filter)
• read a chaptered case study
• learn who the studio is (about, people, history, credits)
• contact the studio (direct channels + validated enquiry form with an honest delivery boundary)
• navigate on mobile (modal menu with focus management)
• rebrand by editing content files and design tokens

• homeSplit photographic hero, kinds-of-work index, statement and prices, selected work, process, print band, closing call to action
• workWork index with ?type= filter, live result count, lead project and ruled numbered index
• case-studyCase study: credits, cover, summary, named chapters with contents rail, details and credits, next project (6 included)
• aboutPosition, origin, people, principles, kit, dated history, photo credits
• contactDirect channels with response times and a front-end-only enquiry form
• not-foundPage not found with a suggestion for mistyped case-study addresses and top destinations

• Loading
• Error
• Empty
• No results
• Validation
• Not configured
• Submitting
• Reduced motion
• Menu open
• Not found

Commands:

1 check still pending. Pending means it hasn't been run yet, not that it passed.

• Contact form sends nothing until VITE_CONTACT_ENDPOINT is configured; success is shown only after an HTTP 2xx (docs/INTEGRATION-BOUNDARIES.md)
• No CMS: content is typed TypeScript data in src/content
• No prerendered page bodies: static HTML per route carries the head (title, description, canonical, Open Graph) only
• No analytics, cookies, booking, payments, newsletter or search
• 404 status depends on the host serving dist/404.html (no catch-all rewrite)

Each boundary comes with instructions for adding it in docs/INTEGRATION-BOUNDARIES.md.

• Sample studio, people, clients and places are fictional; photographs are CC0 stock and do not depict them; technical captions are illustrative
• Photographs are at most 960 px wide; very large crops are slightly upscaled until replaced with larger originals
• Light theme only
• Automated checks ran in Chromium only (Safari and Firefox not verified)
• Lab performance was measured with emulated throttling on a shared machine, not with field data

Use in unlimited end products incl. client/commercial; no resale/redistribution as a template, kit or dataset; no ML training. Survives cancellation for delivered versions.

Full terms: Motif template licence. Open-source parts keep their own licences (licenses.json, id lic-free-website-studio-1-0-0).

Use Motif to activate the free-website-studio template and download it. Then adapt it for a neighbourhood bakery: replace the content and imagery, keep the design tokens and every state in docs/STATE-MATRIX.md, and run check_design_contract before you finish.

web-site-type-portfolio-studio · web-work-index-page · web-case-study-page · web-about-page-structure · web-contact-page-and-honest-submission · web-form-labels-and-layout · web-inline-validation-and-error-recovery · web-mobile-navigation · web-not-found-page · web-breadcrumbs-and-page-contents · web-hero-split-photo-and-type · web-asymmetric-lead-item-gallery · web-anti-generic-card-wall · web-card-budget-policy · web-warm-paper-ink-palette · web-single-accent-allocation-map · web-serif-display-sans-pairing · web-mono-micro-label-layer · web-type-scale-and-measure · web-responsive-images-and-formats · web-cls-prevention · web-lcp-optimization · web-font-loading-without-shift · web-skip-links-and-landmarks · web-focus-indicators-and-keyboard · web-reduced-motion-for-marketing-sites · web-seo-semantic-structure-and-metadata · web-anti-slop-rubric-scored · web-hard-fail-signatures-self-lint · motion-duration-easing-scale · motion-reduced-motion-strategy · motion-anti-pattern-fade-up-everything · sys-content-code-separation-for-authored-surfaces · sys-dtcg-token-file-format

SHA-256 33cfd2622604152d8da6a73b53c2267c6b896d4c1e5f0ef547d4cfbb04c5bf10