Visual identity before the site: why the order matters

The short answer

Visual identity is the set of decisions that makes a brand recognizable: logo, colors, typefaces, and the rules for how to use each one. It should come before the site because the site applies those decisions on almost every screen, and every delayed decision becomes rework in the theme, the photos, the banners and the emails. It does not need to be a huge manual: to start a site or a store, a small core, tested on screen, is enough. As a designer, the rework I see most often in online stores starts there: a logo swapped after the theme is done, a color that fails contrast, a typeface chosen for print that weighs down the phone. Below, what that minimum core is, how to test each piece for the screen, and how to hand it to the theme without rebuilding.

1. What visual identity is, and what it is not

Visual identity is not just the logo. The logo is one piece; the identity is the system that says how the logo, the colors, the typefaces, the photos and the icons live together. It is what lets a customer recognize the brand on Instagram, on the packaging, in the confirmation email and on the product page, without reading the name.

It is also not the same thing as a registered trademark. For INPI, a trademark is "a name and/or image that identifies a product or service". Registration protects that name or that image. Visual identity is how you apply all of that day to day. The two talk to each other, which is why the trademark search comes before the design (see section 6).

In practice, when someone asks for "a site" without a defined identity, the project hides two jobs inside one: deciding the brand and building the site. If the two move together without an order, the theme that was chosen decides the brand, not the company.

If you are planning an online store from scratch, the page on building stores and e-commerce projects shows where identity enters the project, alongside platform, catalog and integrations.

2. What goes wrong when the site comes first

The site looks like the main piece, so many people start there. The problem is that the site is the piece that depends most on the others. These are the most common kinds of rework when identity arrives later:

• Color swapped mid-project. The theme was set up with a provisional color. When the real color arrives, the button, the link, the sale badge, the banner and the icon need to be reviewed, and some were already exported as images.
• A logo that does not fit the header. A long horizontal logo, designed for a storefront sign or a card, that becomes tiny on a phone. Or a logo with fine detail that disappears at favicon size.
• Photos without direction. Without a rule for background, light and framing, each photo batch comes out differently, and the product grid looks assembled by several different stores.
• Typeface swapped later. A new typeface changes the width of the text: a title that fit on one line starts to wrap, the button gets tight, the menu overflows on the phone.
• Banners redone. Every piece of art made with the provisional identity has to be redone.

None of these problems is serious on its own. Added up, they spend project time on something that does not improve the store, it only undoes an earlier decision.

Consistency is what the customer notices

The Nielsen Norman Group describes consistency as one of the ten usability heuristics: the user should not have to wonder whether different words, situations or actions mean the same thing. It separates internal consistency (inside the product itself) and external consistency (with market conventions). Visual identity defined beforehand is what makes internal consistency possible: the same green always means "buy", the same icon style appears everywhere, and the customer learns the store once.

3. The minimum identity the site needs

To start a site or a store, the identity does not need to be complete. It needs a core that answers the questions the theme will ask. The table below is what I ask for before opening the theme editor.

The favicon is a good example of why this list comes first. Google asks for a square favicon and says it should visually represent the site's brand. Shopify recommends 32 x 32 px and scales larger images down to that size. A horizontal logo with the full name does not work in a square of that size. If nobody drew a symbol, the favicon becomes an improvisation: the first letter of the name in whatever typeface.

What can wait

Stationery, signage, uniforms, a full application manual, an animated version of the logo. All of that is useful, but it does not block the site. What blocks the site is the core in the table.

4. Color: a palette that works on screen

A color chosen for print does not always work on screen, and a color that looks good in the logo does not always work on a button. The test that matters for the site is contrast.

WCAG criterion 1.4.3, the W3C accessibility reference, asks for contrast of at least 4.5:1 for normal text and 3:1 for large text (from 18 points, or 14 points in bold). Criterion 1.4.11 asks for 3:1 for interface components, such as a field border, an icon and a button state.

Two practical consequences:

• The brand color may not work as a button background with white text. Light colors, such as yellow and light green, tend to fail with white text; the contrast test confirms this case by case. The solution is not to change the brand: it is to define a darker variation for interface use, or to use dark text on the color.
• The logo is exempt, the button is not. The W3C makes clear that logos are exempt from contrast requirements, because they follow the brand identity. But when the logo is clickable, the W3C itself suggests using a variant with sufficient contrast. That is why the identity needs to provide logo versions for light and dark backgrounds.

How to build the palette for the site

1. Primary color, with an "interface" version that passes contrast with white or black text.
2. Neutrals: a near-black for text, two or three grays for borders and backgrounds, white or near-white for the general background.
3. Notice colors: success, error and alert, that do not clash with the primary color. If the brand is red, the error red needs to be different enough not to confuse.
4. Test each pair (text on background) in a contrast tool before taking it into the theme.

If you are about to open the store and the brand is not decided yet, send the platform you plan to use and what you already have for logo and color. I will tell you what blocks the site and what can wait.

Talk about the project

5. Typography: few families, few weights

Type is identity and performance at the same time. Each family and each weight is a file the browser needs to download before it can show the text the right way.

web.dev, from Google, sums up the rule like this: the fastest font to deliver is the one the site never requests. The same guide explains that delaying the text can delay the page load, and that the swap between the fallback font and the final font can push the layout when the two take up different space. It also notes that the WOFF2 format compresses 30% better than WOFF.

For the identity, that becomes three decisions:

• One or two families, not four. One for headings and another for body text, or a single one with different weights.
• Few weights. Regular, bold and maybe one in between. Each italic and each extra weight is one more file.
• A body typeface designed for a small screen. A very condensed or decorative heading typeface can look great on a banner and be illegible on an installment price in small type.

Also choose a typeface you have a license to use on the web. A font bought for print does not always include website use; check the terms before you lock the identity.

6. Search the trademark before you design and before you publish

Before you invest in a logo, a domain, packaging and a site, it is worth knowing whether the name can be used. INPI's basic guide puts searching existing trademarks as the first step of registration. Registration gives the holder exclusive use throughout the national territory and lasts ten years, with renewal for equal periods.

For design, the order matters for a simple reason: if the name conflicts with a trademark already registered in the same field, everything designed on top of it may need to change. Logo, domain, social profile, storefront and the whole site. Doing the search first costs little time and avoids rebuilding the identity with the store already live.

Trademark registration is a legal matter. The designer's role here is only to remember that this step exists and that it comes before the heavy visual work, not after.

7. From the manual to the theme: decisions that become settings

A defined identity is half the path. The other half is taking the decisions into the site in a way that they are applied the same way every time, not copied by hand on each page.

Global theme settings

On Shopify, theme settings gather colors (in palettes or color schemes, depending on the theme), typography, logo, favicon and social networks, and the changes apply to the whole store. That is exactly the core of the table in section 3. If the identity arrives ready, that setup is done once, at the start, and every theme section inherits the same colors and typefaces. If it arrives later, someone has to hunt for color and type adjusted by hand in loose sections.

Other platforms and custom-built sites have the same idea under other names. The article on Tray and Shopify: limits of HTML, theme and integration shows how much you can change the theme differs from one platform to another.

Design tokens: identity in a format code understands

A design token is the name given to a design decision stored as data: "primary-color = this green", "heading-font = this family", "border-radius = this value". Instead of the developer copying the color code from the manual PDF, they use the token name, and changing the color later becomes changing a single value.

The Design Tokens Community Group, at the W3C, published in October 2025 the first stable version of a common token format in JSON, meant to carry design decisions between tools and products. For a small store that can sound distant, but the idea holds at any size: the identity should leave design with clear names for each color and each typeface, not as a pretty picture of a palette.

What to hand to the developer

• Logo in vector (SVG), horizontal version and symbol, for light and dark backgrounds.
• A list of colors with name and code, including the interface version of the primary color.
• Typeface names, weights used and where to download them with a web license.
• Two or three reference photos showing the photo direction.
• An example of button, field and card applied, so nobody has to guess.

8. When you can do both together

Not every project has time to finish the whole identity first. Sometimes the store needs to open on a date, or the owner wants to validate the product before investing in the brand. You can do them together, with two conditions:

1. The core from section 3 comes first, even if it is simple. A provisional logo, but with a horizontal version and a symbol; one primary color tested for contrast; one typeface family. The rest can evolve.
2. Everything enters through global settings and tokens. If the identity changes later, the change happens in one place, not page by page.

What does not work is designing the site with "any color for now" scattered by hand and expecting the later swap to be quick. It is not. Speed counts too: if your case is a heavy corporate site, the article on headless WordPress and corporate site speed shows where the choice of theme and typefaces weighs on loading.

Frequently asked questions

Can I build the site and do the visual identity later?

You can, but you will pay with rework. Colors, typefaces, logo and photos show up on almost every screen of the site, and swapping them later means reviewing everything. If the deadline is tight, define at least the minimum core (horizontal logo, symbol, tested primary color and typeface) before you configure the theme.

How many colors does a visual identity need for the site?

There is no fixed number. For the site to work, you need a primary color with an interface version that passes contrast, some neutrals for text, background and border, and notice colors for success, error and alert.

Does the logo need to pass the contrast test?

The W3C leaves logos exempt from the WCAG contrast requirements. But when the logo is a link, it recommends using a variant with sufficient contrast. That is why it is worth having a logo version for a light background and for a dark background.

What size should the favicon be?

Google asks for a square favicon and recommends that it be larger than 48 x 48 px. Shopify recommends 32 x 32 px and scales larger images down. In practice, draw a simple symbol that stays legible when it is very small.

Do I need to register the trademark before building the site?

Registration is not required to have a site, but the trademark search at INPI should come before you invest in identity and site. If the name has a conflict, everything designed on top of it may need to change. For the registration itself, seek legal advice.

Conclusion

Visual identity comes before the site because the site is where it repeats the most: on every button, every price, every banner and every email. A small core tested for the screen (logo in two versions, symbol, primary color with contrast, few typefaces and photo direction) already avoids most of the rework. If you are about to open an online store and you are still deciding brand and platform, send what you sell, what you already have for the brand and the deadline you need. See first how building stores and e-commerce projects works. If you have not created the Shopify store yet, talk to me before you create it: the store is born as a development store, is built ready and transferred to your name.

Talk about the project