Logo and its variants
A primary mark, a compact version, monochrome and reversed forms, with the sizes at which each stops working. Delivered as vector and raster files with a plain guide to which goes where.
Brand identity and website
Brand identity and website, designed as one system
Most brand identities are designed in a presentation and then handed to whoever builds the site, where they quietly fall apart. I design the identity and the website together, so the logo, colour, type and voice are decided against the place they will be used most: your own pages.
- Logo and brand book
- Colour and type system
- Website built on it
What is included
An identity is a set of decisions, not a logo file.
Each part below is designed to survive contact with a real website, a real proposal and a real LinkedIn post, not just a mood board.
Colour and typography
A palette with contrast checked for text on screen, and a type pairing chosen for the website first, so headings and paragraphs look the same in the brand book and in the browser.
Brand book
A short document: how the mark is used, spacing, colour roles, type scale, photography direction and the handful of things not to do. Written for the person who will make the next slide, not for a design award.
The website
The identity becomes a live design system in Figma and then a site in Webflow or Astro. Every decision above is tested here before the brand book is called finished.
Why together
The website is where the brand gets used, so it should shape the brand.
Identity designed in isolation optimises for the presentation. Identity designed with the site optimises for the thing customers will actually see.
Type is tested at paragraph size
A typeface that looks distinctive at 120 px on a slide can be unreadable at 17 px in a paragraph. Choosing it against real page copy avoids a second round of type decisions six weeks later.
Colour is tested for contrast
Brand colours have to pass as text on backgrounds, as buttons and as links. A palette chosen without that check produces a site with a grey brand colour nobody asked for.
The mark is tested in a header
A logo lives in a 48 px header far more often than on a billboard. Its compact version is designed first, not derived later.
One person, no translation loss
When the designer and the builder are the same person, nothing is lost between the brand book and the CSS. The rules in the document are the rules in the code.
Engagement paths
Three starting points, one destination.
Identity, then the website
Positioning first, then mark, system and brand book, then the site built on all of it. The most coherent path, and the one where the identity is tested hardest.
Refresh, then the website
You have a logo you are not ready to lose. I keep the mark, rebuild the system around it (colour, type, spacing, imagery) and give the site the consistency the old brand book never produced.
Brand book and a design system for your developer
When someone else builds the site, the deliverable is the identity plus a Figma library with components already applying it, so the handoff is a system, not a PDF.
Process
Five steps from positioning to a site that uses the brand.
- 01
Positioning
Who the company is for, what it does better, and the tone that follows. Written down in a page, agreed before anything is drawn.
- 02
Direction
Two or three directions for the mark and the system, shown on real applications: a page header, a proposal cover, a social post. Not on a black background with a spotlight.
- 03
System
The chosen direction becomes a full system: logo variants, palette with contrast roles, type scale, spacing and photography direction.
- 04
Website
The system becomes a design in Figma, then a build. Anything that does not survive this step goes back to the system, not into a footnote.
- 05
Brand book and files
The document is written last, from what proved to work. Files are delivered in the formats each use needs, with names a marketing team can find.
Honest limits
What this service is not.
Not naming, not a brand strategy engagement, not a campaign
I write positioning as the brief for design, not as a strategy consultancy deliverable. If the company name is still open or the market position is undecided, that work comes first and I will say so rather than design around a gap.
Frequently asked questions
Questions connected to this decision.
Do I need a brand identity before a website?
You need decisions about mark, colour, type and tone before a website can be designed well. Whether that is a full identity project or a refresh of what exists depends on how much of it you would keep. Both are covered here; the site is the test in either case.
What affects the cost of a brand identity?
How many applications the identity has to cover, whether an existing mark is kept, how many directions you want to see, and whether the website is part of the scope. Identity with a website costs more than either alone and less than buying them from two suppliers who then have to agree.
Can you refresh our existing logo instead of replacing it?
Yes, and it is often the better call. Recognition is expensive to rebuild. A refresh keeps the mark, fixes what breaks at small sizes, and builds the system around it that was probably never finished the first time.
What files will we receive?
Vector and raster versions of every logo variant, colour values for screen and print, font files or licences, the brand book as a PDF, and a Figma library. If a developer is building the site, the Figma library is the handoff.
Will the brand work on LinkedIn, proposals and slides, not just the website?
That is what the brand book is for. It is written for the person making the next slide or post, with examples of each. The website comes first because it is the hardest test, not because it is the only use.
Sources and basis
What supports this page.
Sources support the contrast checks and the way a logo is declared to search engines; they do not prove AMS Digital project results.
- Web Content Accessibility Guidelines overview
W3C Web Accessibility Initiative · Verified 2026-07-19
The standard used when checking semantics, keyboard paths, contrast and responsive behaviour.
- Organization structured data
Google Search Central · Verified 2026-09-17
How a logo and organisation details are declared to search engines, which is one of the places a new identity has to be applied.
Related decisions
