Back to Resources
    Planning Your Website

    Branding Checklist for Websites: Fonts, Colors, Logo, and Rebranding Basics

    March 2025·9 min read

    Your website is one of the most visible expressions of your brand. Before we design a single page, we need to know what your brand already is, or what it should become. This checklist walks through every branding element that feeds into a website project, so nothing gets missed or invented on the fly.

    Your Logo Files

    Your logo is the foundation of every branded element on the site. For web use, we need it in vector format, ideally an .svg, .ai, or .eps file. These formats scale to any size without losing quality, which matters for both the header logo and any large hero uses.

    If you only have a .png or .jpg version, that's workable, but the quality may be limited. If your logo was designed professionally, ask for the original source file. If you're starting from scratch or your current logo isn't web-ready, that's worth addressing before design begins. A website and logo package is often the right move.

    You should also have versions of your logo ready for different contexts: the primary lockup (icon + wordmark together), an icon-only version for favicons and small spaces, and a horizontal version if your layout uses one.

    Your Color Palette

    Every brand has a color system. If yours is documented, provide the exact HEX, RGB, or HSL values for each color, not approximations from memory. The difference between #0071e3 and #0070e1 is small on paper but visible on screen.

    A functional web color palette typically includes:

    • Primary color: Your main brand color, used for buttons, links, and key highlights.
    • Secondary color: A supporting color for accents, section backgrounds, or hover states.
    • Neutral colors: Blacks, whites, and greys for text, backgrounds, and borders.
    • State colors: Optional but useful: greens for success, reds for errors, yellows for warnings.

    If you don't have a defined palette, we'll develop one as part of the design process. But if you have brand guidelines, share them early so we build within your existing system.

    Your Typography

    Typography shapes how professional and distinctive your site feels. If your brand uses specific fonts, provide the font names and any license files. Many brands use premium fonts from foundries like Adobe Fonts or Google Fonts, and these are typically easy to carry over to the web.

    A standard web type system uses two typefaces: a display or heading font and a body font. These should work well together and be legible across screen sizes. If your current fonts don't translate well to web use (some print-focused fonts don't), we'll recommend alternatives that stay true to the brand feel.

    Brand Voice and Tone

    Branding isn't just visual. How your site sounds is as important as how it looks. Are you conversational or formal? Technical or plain-spoken? Authoritative or approachable? These distinctions affect headlines, button labels, error messages, and every word on the page.

    If you have brand guidelines that include tone of voice, share them. If you don't, bring a few examples of writing or websites whose tone resonates with you. Even a rough description ("we want to sound like a trusted expert, not a corporate brochure") gives us something to work with.

    Photography and Imagery Style

    The style of images you use on your site communicates brand values instantly. Dark, moody photography signals something different from bright, lifestyle-driven shots. Minimalist product photos read differently from candid team photos.

    Gather examples of imagery that fits your brand aesthetic, and note what it is about those examples that resonates. If you're using original photography, share it early so we can plan layouts around it.

    If You're Rebranding at the Same Time

    Some clients come to us mid-rebrand. They're changing their logo, colors, or both, and want the new website to launch with the new identity. This is absolutely doable, but it requires sequencing.

    Brand work should come first. A website built around a logo or color palette that's about to change is a website that will need to be redesigned immediately. Finalize the brand identity, even at a basic level, before website design begins. If you need help with both, we offer brand identity design that can be completed first and then rolled directly into the website.

    The Complete Branding Handoff Checklist

    • ✓ Logo files in vector format (.svg, .ai, .eps) + PNG fallbacks
    • ✓ All logo variations (primary, icon-only, horizontal, dark/light versions)
    • ✓ Exact color values (HEX or RGB for each brand color)
    • ✓ Font names and license files (or confirmation of free web fonts)
    • ✓ Brand style guide or guidelines document (if one exists)
    • ✓ Imagery examples that match your aesthetic
    • ✓ Notes on tone of voice and brand personality

    Having this information ready at the start of the project keeps design moving without unnecessary back-and-forth. The more complete your brand package, the faster we can get to work on something you'll actually love.

    Need help getting your brand ready for the web?

    We can handle the brand identity and the website together, one cohesive project from start to finish.

    Let's Talk