A founder's map from brand to site to product

A founder who needs a company to look credible and a product to feel clear is really buying one idea, carried three ways. First the identity people can repeat. Then a site that explains it to a stranger. Then an interface that behaves like the same idea once someone is inside the product.

That sequence is a startup brand and website process you can follow without pretending the whole company is finished. Do the slice that teaches the next slice. Keep the sentence stable while the surfaces multiply.

An identity you can say out loud

Start with the audience, the offer, and the feeling you refuse. A name is the seed. It is not the system. The system, at this stage, is small enough to use: one type pair, a short list of colors, logo files that work small and on a dark ground, and three sentences the company is willing to say.

Write those sentences before you draw the rest. They should be able to live on a homepage, on a button, and in an error. If they only work in a manifesto, they are not a verbal identity yet. Hanabi's own line is a useful model of specificity: clarity over complexity, with quality, clean code, a process that can change, speed, and plain communication. Whatever your version is, it should be checkable. A visitor can tell whether the site obeyed it.

Test the name against the URL, against the sentence it has to sit inside, and against the future product it must not forbid. A name that only fits today's feature will pinch the moment the product grows. A name that could mean anything will force the homepage to do all the explaining.

Choose what the brand will show. Wabisabi is a public example of a calm, tactile world. Thomas Bewick is a public example of a heritage craft carried onto a modern editorial site. Subject and crop are the decision.

Stop when a teammate who was not in the room can apply the type, the color, and the sentences to a new page without inventing a palette. A thick guideline book can wait. An unused book is not a brand.

A site that explains the identity

The site has one job at the start: make a stranger understand the offer and see how to talk to you. The brand line can stay if the next sentence does that job. The title element can carry the plainer search language. Google's guidance on title links asks for a descriptive, concise title, and for one obvious main heading so the page is not a tie between several slogans. Use that. Let the H1 be the brand. Let the title and the sentence under it name the buyer and the work.

Build a small set of pages. Home, the offer, proof, a way to start a conversation. Add writing when a real question needs more room than the homepage should give it. Each page should sound like the sentences you already chose. A homepage that is quiet and a blog that shouts are two brands.

Proof is a project with a constraint, not a row of logos. Down the Cove is an ecommerce restructure and redesign. Ballarat Box Sports is a community sports brand. Got Next and Leadly are product interfaces. Put the project that matches your actual offer first. Caption it with the decision. A screenshot without a decision asks the visitor to guess, and guesses are how trust leaks.

The stack can stay in the background until it matters. What a founder should expect is a fast public site, a repository they own, and a way to edit the words that change. Hanabi builds that kind of site in Next.js, with the content and the code in places the client can keep after launch. The portal that follows is for brand files, docs, and project updates, so the identity does not end as a zip file in a chat.

Google's helpful-content guidance asks whether a site has a primary purpose, and whether someone can tell who created it. The site you ship should pass both. One focus. A real byline or a real studio name. No page that exists only to chase a synonym of the offer.

An interface that behaves like the same idea

When the product exists, it should feel like the site the person just believed. If the marketing page is quiet and the app is a pile of competing colors, the brand was a costume. Type, color, and the tone of buttons, empty states, and errors should cross the threshold intact.

Design the narrow path until it feels finished. Empty, error, success, and the one workflow. A wide product with rough edges everywhere feels earlier than a small product with a polished core. Got Next and Leadly are public examples of focused product UI. Trade Moai is a public example of an interface organized so a person can scan. The lesson is the same: fewer screens, one hierarchy, words that say what happens next.

Prototype the structure where it is cheap to change, and move to the browser when type, real content, and motion will change the decision. Hanabi uses Figma for the structure and production code for the part a customer will touch. Reduced motion, contrast, and focus are part of done.

What to sequence, and what can overlap

Identity leads, because the site and the product both quote it. The site can start as soon as the sentences and the type are stable, even if the logo is still being refined. The product interface can be explored in parallel when you already know the job it does. What should not run in parallel is three teams inventing three visual languages.

A practical order:

1. Audience, offer, and the sentences you will repeat.
2. Type, color, and a logo that can survive a browser tab.
3. A site with one action and proof that matches the offer.
4. The product path a new user actually finishes, in the same visual language.
5. A place the files and the decisions live after the launch.

Scope each step from pages and states, or from screens and states, so a date can survive. A change of audience mid-build is a new project. A change of a headline is an edit. Say which one you are looking at before you ask for both on the same Friday.

Fixed scope fits a launch with an edge: this site, this set of screens. An ongoing partnership fits when the product keeps changing and you want the same people to carry the idea forward. Either can be honest. Pretending a loose product is fully known, and pricing it as if it were, is how the third step starts late and bitter.

How an engagement can follow the map

Bring the name, the rough offer, and access to whatever exists today. The first conversation should decide fit, the shape of the work, and whether a proposal is worth writing. It does not have to solve the brand, the site, and the product in a single half hour.

On a Hanabi project the sequence is the one this piece describes. A clear identity. A site that explains it. An interface that behaves like the same idea. The studio designs and builds, so the handoff is not a folder of pictures waiting for someone else to interpret. You should leave with the repository, the domain, the content, and a portal where the brand stays findable.

The behaviors you should be able to see during that work, quality, clean code, flexibility, speed, and plain communication, are spelled out in how those standards show up in practice. Read that if you want the map translated into what a week of the project feels like.

When you are ready to see whether your offer, your site, and your product are one idea or three, book an intro call. Bring the sentence you are willing to repeat. The call should tell you whether the next step is the identity, the site, or the interface, and what can wait.