onyxdevelopment.ca, built from scratch

The challenge

A new studio has no portfolio to point at, so the website has to do two jobs at once. It has to explain clearly what the business does and who it is for, and it has to be the evidence: if the site is slow, generic or awkward on a phone, nothing it says about quality will be believed.

It also had to be honest. There are no invented testimonials, no borrowed screenshots and no stock photography of people pointing at laptops. Anything the owner has not supplied yet, such as a phone number, is hidden rather than filled with a placeholder, which meant every section had to work in an incomplete state as well as a finished one.

Finally, it had to be the front door to a real business system rather than a brochure. Enquiries, project briefs and consultation requests needed to land somewhere useful, be checked properly on the server, and survive a spam bot without the owner sorting through junk by hand.

What was built

A design system written from scratch: a near-black palette layered by luminance rather than borders, a single champagne-gold accent taken from the logo, two typefaces, and a small set of motion timings shared by every component. The faceted gem on the homepage is drawn in plain Canvas 2D, so it never depends on WebGL and costs no 3D library.

Every interactive element has defined idle, hover, focus, active, loading and disabled states. The menu traps keyboard focus and closes on Escape, there is a skip link, and anyone who has asked their device for reduced motion gets a still, complete version of every animated section rather than an empty one.

Behind the pages: a contact form and a five-step project intake that validate on the server, a hidden honeypot field and per-visitor rate limits against bots, and a lead record with a rules-based score whose every point can be explained. Prices on the site come from one data file, so the homepage, the service pages and the pricing table can never disagree.

Search basics are built in rather than bolted on: per-page titles and canonical URLs, structured data for the business, services, breadcrumbs and FAQs, and a sitemap that only lists pages that really exist.

Result

The site is live at onyxdevelopment.ca and is the studio's working storefront: every enquiry, brief and consultation request comes in through the forms described above.

Measured with Lighthouse in mobile mode on a production build (a lab test, median of three runs, on the homepage, services, pricing, a service page and the booking page): accessibility 100 and SEO 100 on all five pages, and no layout shift (CLS 0). Performance scores ranged from 87 to 94. These are lab numbers from a controlled test, not field data from real visitors.

The same codebase also runs the client portal and the studio's internal tools, described separately under Work & Builds.

Stack

• Next.js
• React
• TypeScript
• Tailwind CSS
• PostgreSQL
• Canvas 2D