---
name: apply-a-brand-to-a-site
description: "Swap colors, fonts, logos and images to your brand without moving a single block."
---

# Apply a brand to a built site

Purpose:: Put your brand onto a built frontend without moving anything.

Rules::
- Layout, spacing and sizes stay; swap only colors, fonts, logos, images and names
- Every value comes from your brand kit; no new colors or fonts
- Colors as CSS variables; fonts self-hosted or via the framework's font loader

Inventory::
- Your brand kit: fonts, palette, logo.svg, favicon.svg, og.png
- The site's repo and a headless browser

Steps::
1. Read the brand kit: fonts, colors, buttons
2. Set fonts and color variables once, globally
3. Add logo, favicon and OG image; set the site name and theme color
4. Replace every competitor name, color and image
5. Deploy; screenshot desktop and mobile; compare with the brand draft; fix
6. Reply in one line: what changed

Metrics::
- Same shapes as before, only your brand
- No competitor name left (search the code)

Source:: https://isklls.com/skills/apply-a-brand-to-a-site (iSklls, free skill library)