Semblance Studios — BuildSpec

Flexible working brief · Updated 30 July 2026 · British spelling

Purpose

This document defines the current direction for designing and building the Semblance Studios website.

It is a brief for prototyping, not a permanently locked specification. Page structure, layout, imagery, interactions and technology may change when the working build reveals a better solution. The aim is to begin designing with enough clarity to move quickly, then make decisions against the actual site rather than trying to settle every detail in advance.

Document precedence

When documents overlap:

1. semblance_site_content.md controls exact public website copy.
2. semblance_business_positioning.md controls detailed business facts, strategy and commercial context.
3. brandbrain.md provides the concise operating summary and non-negotiable brand guardrails.
4. This BuildSpec controls the current site structure, behaviour, placeholders and implementation direction.
5. design.md controls the visual system once decisions have been tested and recorded during the build.

If a proposed design or implementation conflicts with the business positioning or brand boundaries, the business documents take precedence. If this BuildSpec and design.md differ, use the most recently tested and recorded direction.

---

1. Website objective

The website must establish Semblance Studios as a credible creative art studio for hospitality, commercial and interior-led projects, demonstrate the quality and range of completed work, and give relevant clients a clear route to enquire.

The primary audience is:

• art procurement firms
• art consultancies
• hospitality-focused interior designers
• architectural studios
• hotel groups and developers

The site should help a prospective client understand:

• what Semblance creates
• the types of projects it works on
• the quality and range of the artwork
• how completed work relates to a brief and space
• that Gavin Goodman leads every project directly
• how to make contact

---

2. Non-negotiable business boundaries

These constraints remain firm even while design and implementation are flexible:

• Semblance Studios is distinct from Gavin Goodman's fine-art practice and advertising career.
• Semblance is not positioned as an AI studio. AI is a tool within the workflow, not the product or selling point.
• The site is written for clients, not artists, galleries or technologists.
• Custom artwork commissions are the primary offer.
• Placement, adaptation and licensing of existing artwork are established secondary services.
• Range, quality, project evidence and delivery lead. Process novelty does not.
• Procurement firms and consultants are clients and collaborators, not intermediaries to bypass.
• Semblance normally delivers approved, production-ready artwork files. Physical prints may occasionally be supplied when explicitly agreed.
• Do not claim unlimited versatility, turnkey delivery or responsibility for fabrication, installation or procurement unless a specific project scope supports it.

---

3. Build approach

Use a prototype-led approach consistent with the Brave brand process:

• Build with real imagery where available and placeholders where it is not.
• Test hierarchy, pacing, scale, typography and navigation in the browser.
• Treat current decisions as the best direction to test, not permanent rules.
• Change layouts or components when the prototype provides a clear reason.
• Record tested visual decisions in design.md as the design develops.
• Keep components reusable without forcing every project into an identical visual sequence.
• Do not delay the design for deferred copy, forms, analytics, metadata or domain work.

The initial build should prioritise the homepage and enough representative subpages to establish the visual system. Once the direction works, extend it consistently across the remaining pages.

---

4. Current site map

Primary navigation

HOME · PROJECTS · THE WORK · CREATIVE DIRECTOR · CONTACT

Current routes

• /
• /projects/
• /projects/botree-hotel/
• /projects/meyer-werft/
• /projects/singita/
• /projects/rockefeller/
• /the-work/
• /creative-director/
• /contact/

There is no separate Process page. The relationship between brief, artwork and space should be demonstrated through the project case studies.

Additional project pages can be added later using the same underlying content structure.

---

5. Homepage

The homepage should work as a concise introduction to the studio, its project proof, its broader body of work and its creative leadership.

Current content sequence

1. Hero
2. Positioning
3. Recent Projects
4. The Work
5. Creative Director
6. Contact

This sequence is the starting point for the prototype. Sections may be combined, reordered or paced differently if the design improves as a result, provided the underlying content remains clear.

Hero

• Use the approved hero copy from semblance_site_content.md.
• Lead with a strong image that immediately establishes the quality and context of the work.
• Use a 16:9 presentation frame. Test the copy position, crop and viewport treatment during the build while preserving the image's intended focal point across desktop and mobile.

Positioning

• Use the two approved positioning statements from semblance_site_content.md.
• Keep the treatment concise and visually restrained.
• The section should clarify both custom commissions and the use or adaptation of existing work without becoming a process explainer.

Recent Projects

• Feature one project only, with a clear route to the Projects index for the rest.
• Use the approved project title and scope line from semblance_site_content.md.
• The featured image should run large. A single strong frame proves more than several small ones, and The Work section further down already carries the multi-image job.
• The whole feature should be clickable, with the CTA beneath it.
• The featured project also appears first on the Projects index, using the same image. Use a different opening image inside the case study itself.

The Work

• Present a curated selection showing the breadth and quality of work available for licensing, adaptation or as the starting point for a commission.
• Keep this section visually led.
• Do not add collection names, reference codes, specifications or descriptive captions beneath every image unless later testing shows they are necessary.
• Link to /the-work/.

Creative Director

• Use the approved teaser copy from semblance_site_content.md.
• The section should establish that Gavin leads the work directly without turning the homepage into a personal biography.
• Link to /creative-director/.

Contact

• Use the current placeholder copy.
• Keep the route to contact visible and direct.
• Final wording, form behaviour and email delivery do not need to be resolved during the visual-design phase.

---

6. Projects index

The Projects page should present the strongest completed work as commercial case studies rather than as a generic image portfolio.

Launch projects

• The BoTree Hotel, London
• Meyer Werft Cruise-Ship Project, Europe
• Singita Luxury Lodge, Africa
• The Rockefeller Hotel, Cape Town

Use the titles and scope lines from semblance_site_content.md.

The index layout should:

• let project imagery dominate
• make project names and scope immediately understandable
• work cleanly across desktop and mobile
• avoid unnecessary filters at launch
• make the route into each case study obvious

Starting point for the layout, to be tested rather than assumed: stacked full-width cards while there are four to six projects, moving to two columns once there are more, single column on mobile throughout. Each card carries the image, project name, location and scope line, with the whole card clickable and no separate button.

---

7. Project pages

Project pages should explain the assignment, show the artwork clearly and demonstrate how it was used in the space.

Shared content structure

Each project can draw from:

• project title and location
• concise introductory copy
• key project scope or quantity
• artwork images
• in-situ or interior images
• detail views
• additional section copy where the project has distinct spaces or visual directions

This is a shared content model, not a rigid page layout. Image count, sequencing, scale and copy placement may vary by project.

Current content status

• BoTree: current copy available.
• Meyer Werft: current copy available, including the four distinct spaces.
• Singita: use placeholder copy during design.
• Rockefeller: use placeholder copy during design.

Missing final copy must not delay the prototype.

Project-page priorities

• Establish the project quickly.
• Show both the artwork and its relationship to the space where useful.
• Let images carry the page.
• Avoid repeating the same case-study layout mechanically when the available imagery calls for a different sequence.
• Do not add unsupported outcomes, client claims or production responsibilities.

---

8. The Work

The Work page is a curated visual showcase, not an online shop and not an exhaustive catalogue.

Use the approved introductory copy from semblance_site_content.md.

Current direction

• Present a broad but edited selection of work.
• Allow the visual range to demonstrate capability without claiming versatility in copy.
• Test image scale, rhythm and grouping in the prototype.
• Do not display reference codes or detailed specifications beneath the website images.
• Include a quiet route to download the broader artwork catalogue.
• The existing catalogue PDF can be used as a placeholder because its final content does not affect the site design.

The final gallery structure, image groupings and mobile treatment should be resolved visually during the build.

---

9. Creative Director

The page should answer three practical questions:

• Who leads the work?
• What relevant experience supports that role?
• What is Gavin personally responsible for?

Use the approved copy from semblance_site_content.md without adding a separate stacked “Creative Director” heading above “Gavin Goodman”.

Current image direction

• Use the available direct portrait as the primary image.
• Use the environmental working image as a secondary image if it improves the page.
• The secondary image may be cropped to reduce excess foreground while preserving the sense of scale and context.
• Both images can remain placeholders while the layout is established.

The enquiry line should be treated as quiet linked text rather than a prominent sales button. The email address remains a working placeholder until the domain and mailbox transfer is complete.

---

10. Contact

The Contact page can be designed with placeholder copy and a non-functional form during the initial visual phase.

Initial design requirements

• clear page heading
• concise invitation to discuss a project
• visible email address
• location: Cape Town, South Africa
• simple enquiry form layout

Form delivery, validation, spam protection and final field labels will be implemented after the visual direction is established.

---

11. Content and asset handling

Available now

• approved core website copy
• final imagery folder
• BoTree case-study copy
• Meyer Werft case-study copy
• current Creative Director copy and placeholder images
• an existing catalogue PDF suitable as a temporary download

Placeholders permitted

• Singita final case-study copy
• Rockefeller final case-study copy
• Contact copy and form behaviour
• any missing image or interior mock-up
• catalogue filename or final download URL
• final email address

Placeholders should be clearly identifiable in the code or content layer so they can be replaced without redesigning the page.

Image treatment

• Full-width layout images are 16:9 for a consistent grid and unified page rhythm.
• The Work composites are 16:9 unified frames: artwork on the left, in-situ view on the right, dividing line between them.
• Artwork detail views and portrait-format works retain their native ratio. The Meyer Werft headpiece portraits are 3:4.
• Preserve the integrity of artwork and interior imagery.
• Define focal positioning where responsive crops are required.
• Use responsive image delivery and sensible compression.
• Avoid crops that remove essential artwork or spatial context.
• Confirm final dimensions and formats once the layouts are established.

---

12. Design direction

The visual design is not locked before prototyping. The current register is:

> Luxury without loudness. Authoritative without coldness. Creative without chaos.

The site should feel like a serious, considered creative studio. It should not resemble:

• a generic SaaS or startup website
• a cold white-box gallery
• a busy photography portfolio
• an over-animated digital showcase
• Gavin Goodman's personal fine-art website

Starting principles

• generous negative space
• strong image scale
• restrained interface elements
• clear editorial hierarchy
• purposeful asymmetry where it serves the work
• subtle motion only where it improves orientation or pacing
• a distinct but credible visual identity

Specific colours, fonts, spacing, grid rules, component styles, motion and responsive behaviour will be tested during the build and recorded in design.md.

Visual references

Positive and negative references may be collected during the design phase. References should identify the exact useful or rejected element rather than approving or rejecting an entire site without explanation.

Useful fields:

A complete reference or rejection set is helpful, but it is not a blocker to beginning the prototype.

---

13. Technical direction

The implementation should be chosen around the needs of the site and may remain flexible during the early prototype.

Requirements

• fast, image-conscious performance
• responsive behaviour across current desktop, tablet and mobile sizes
• semantic HTML
• accessible navigation, controls and forms
• reusable project and content components
• straightforward content maintenance
• support for metadata, sitemap, social sharing and analytics before launch
• a secure server-side route or suitable service for contact-form delivery when implemented

Decisions to make during the build

• framework and hosting
• static content files versus a CMS
• navigation-transition approach
• image pipeline
• contact-form service
• analytics

A simple static content structure is likely sufficient for the initial site, but it should not be treated as mandatory. Add a CMS only if the real editing workflow justifies the extra complexity.

Do not place secret keys in client-side code or commit them to the repository.

---

14. Search, accessibility and performance

These concerns should inform the build from the start, but final metadata and launch configuration can follow the design phase.

Baseline requirements

• logical heading hierarchy
• semantic page structure
• keyboard-accessible navigation and controls
• visible focus states
• adequate text contrast
• meaningful alternative text where images convey content
• decorative images treated appropriately
• responsive images and lazy loading where suitable
• stable layouts with minimal unnecessary shift
• clear page titles and descriptions before launch
• XML sitemap and clean URLs before launch
• social-sharing metadata before launch

Do not force keyword language into visible copy where it weakens clarity or tone. Final keyword targeting and structured data should be reviewed once page content and routes are stable.

---

15. Deferred implementation

The following items must not block the visual prototype:

• final Singita copy
• final Rockefeller copy
• final catalogue PDF
• contact-form delivery
• spam protection
• analytics
• final domain transfer
• final email and mailbox transfer
• privacy copy
• final metadata and social-sharing images
• detailed SEO implementation
• final structured data
• testimonial sections

These items should remain visible in the project task list and be resolved before launch where applicable.

---

16. Suggested build sequence

Phase 1 — Visual prototype

• establish the project structure
• load the current copy and final imagery
• build the homepage
• build the Projects index
• build one complete project page
• build representative versions of The Work and Creative Director pages
• test desktop and mobile direction

Phase 2 — Design system

• refine typography, colour, grid, spacing and image behaviour
• define reusable components
• test navigation and motion
• record accepted decisions in design.md
• revise earlier pages where the emerging system requires it

Phase 3 — Complete page set

• extend the approved design direction across remaining project pages
• add placeholders where final content is still pending
• connect the catalogue download
• build the Contact page and form interface

Phase 4 — Functionality and launch preparation

• implement form delivery and spam protection
• complete final copy and assets
• add analytics, privacy copy and metadata
• complete accessibility and performance review
• configure the final domain and email links
• complete launch QA

This sequence is directional rather than a fixed weekly schedule.

---

17. QA before launch

Before launch, verify:

• all navigation and internal links
• desktop, tablet and mobile layouts
• responsive image crops and focal points
• project-page content and image sequences
• catalogue download
• contact-form validation, delivery and failure states
• keyboard navigation and visible focus
• headings, alternative text and page landmarks
• metadata, sitemap and social-sharing previews
• analytics and privacy requirements
• performance on image-heavy pages
• final domain, redirects and email links

The site is ready to launch only when the complete user journey has been tested with real content and the contact route works reliably.

---

18. Current next step

Begin the visual build using the current copy, the final imagery folder and placeholders for deferred content.

Create design.md as a living record while the first pages are designed. Do not postpone the prototype until the design system, technology stack or launch details are theoretically complete.