Northbound Template: Studio Site With a Client Portal

Northbound Template: Studio Site With a Client Portal

Northbound is the branding studio template in Zugo's gallery: a multi section marketing site for services, work and process, paired with a private client portal showing project phases, deliverables, messages and invoices. Cloning it into your own project costs nothing, and every later change is a chat request at 3 credits.

Most studio templates stop at the marketing site. The reason to look closely at this one is the second half, so that is where most of this walkthrough goes.

What comes with the Northbound template?

Two products in one file. A visitor sees a long scrolling site organized into numbered chapters. A client signs in and lands somewhere completely different.

The marketing half has a point of view, which is rarer than it sounds in a studio template. The services are argued rather than listed, the process names what happens in each pair of weeks, and the closing section says the studio takes only a handful of projects per quarter. That is a sales asset, not filler, and it is worth adapting rather than deleting.

The portal half covers the boring parts of running client work: where the project stands, what has been signed off, what is waiting for review, and what has been invoiced. A running progress figure sits at the top, and an approval button moves the project to the next phase.

What does the client portal actually do?

More than it looks like from a screenshot, and less than a production system. The navigation between overview, deliverables, messages, account and invoices works. Filtering deliverables by ready, in review and pending works. Posting to the project thread works, and approving the current phase advances the tracker.

None of it survives a reload. The portal holds its state in memory for the session, so a refresh returns everything to the seeded project. The login screen is the same: it shows what signing in looks like without checking anyone's password or separating one client's project from another's.

This is the crux of the template. As a demo you can show a prospective client, or as a design reference for a portal you are about to commission, it is genuinely useful today. As a live portal where three clients each see only their own project, it needs real accounts and a real database, added through the Supabase connector. What that involves is spelled out in can AI build a login.

A middle path works well in practice. Keep the portal as a single client view, publish it on a private link per project, and update it by chat when the phase changes. It is not scalable past a few clients, but for a studio running four engagements it beats a spreadsheet.

Who is Northbound built for?

Studios that sell considered work over several weeks and want the site to argue for that. Branding and identity, obviously, but the same shape fits architecture practices, product design consultancies, video production companies, and communications agencies. Anything with a named process and a small number of large engagements sits comfortably here.

It fits badly where the sale is fast and transactional. A service business selling one visit at a fixed price does not need a phase tracker or an invoice schedule, and the four week process section will feel absurd against a haircut or an oil change. Those businesses want booking and prices up front instead.

There is one adaptation worth calling out because it changes very little. Swap the vocabulary and the same template becomes a freelance consultant's site: services become packages, selected work becomes case studies, and the portal becomes a single client dashboard. The general version of that reasoning is in how to build an agency site with AI, and the wider gallery is mapped in the Zugo templates guide.

Which numbers and names have to go?

All of them, and this template has more invented facts than most. The hero carries four metrics: identities shipped, average engagement length, senior people per project, and capital raised by clients after a rebrand. Every one of those is demo copy about a studio that does not exist.

The same applies to the six projects in the work section, the client logos in the hero, the testimonial on the login screen, and the entire seeded engagement in the portal, including its dates, its deliverables and its invoice amounts. Leaving any of it in place means publishing a claim about work you did not do.

Replacing them is one focused edit if you bring the real values with you. Write the request as a list: your founding year, your city, your actual project count, your typical timeline, and the six pieces of work you want to show with client, category and year. Vague requests produce vague replacements, and you will pay for a second pass.

Two easy misses: the email address appears in both the contact section and the footer, and the browser tab title still carries the studio name until you change it. Both show up where strangers see them first.

How do you reshape it into your studio's site?

Work from meaning outward, because the copy determines the layout you keep and styling a section you later delete is money spent twice.

1. Replace identity and claims. Studio name, positioning line, location, founding year, the four metrics, the footer copyright.
2. Rewrite the four services. Keep the argued tone and the three tags per card, change the substance to what you actually sell.
3. Load real work. Six projects with client, discipline and year, in the order you want a prospect to read them.
4. Retune the process. Your phases and your real timeline. If you work in two phases rather than four, say so and let the section shrink.
5. Decide the portal's fate. Keep it as a demo, cut it entirely, or commit to adding real accounts on top.
6. Style last, then publish. The project gets an address like yourstudio.zugo.run, with a custom domain on top on paid plans.

Phrase each request as one concrete change. "Make the work section stronger" and "show four projects instead of six and put the client name above the project title" cost the same 3 credits, and only the second one can be checked.

What does the work cost in credits?

Cloning is free, so nothing is charged until you start editing. A studio site with real content usually lands in five or six edits, more if you rebuild the portal.

Free gives you 5 credits. Pro is $25 a month for 200 credits, which is roughly 66 edits, or about 16 multi-page platforms. Business is $99 a month for 800 credits, which matters if you are producing sites for clients rather than one site for yourself.

Every build runs in a sandbox before delivery, and one that does not open is not handed to you. Simple changes come back in about a minute, and a full multi page rebuild takes a few minutes. That protects you from a broken page, not from a page that works and still misses your intent.

What will Northbound not do?

It is not a client management system out of the box. Multiple clients with separate logins, real invoices, and payment collection need Supabase for accounts and data and Stripe for money. Both are supported connectors, and both are real work.

Complex business rules arrive through several edits. Approval chains, per client permissions, or automated reminders when a deliverable sits unreviewed get described in steps and verified one at a time, not delivered by one long prompt.

Zugo does not replace a development team on a complex product. A studio site with a demonstration portal is well inside what a chat driven builder handles. A portal serving fifty clients with contracts and payouts eventually wants engineers, and the GitHub export means you can hand them the source whenever that day comes.

If you want to test the fit, open the gallery at zugo.dev, clone Northbound, and spend the first edit on your four services. The moment your real offering is in the layout, you will know whether the shell is arguing for you or against you.