# By Hugo! – brandguide

Version: **1.0** · Leveransdatum: 2026-08-20

## Varumärkeskärna

- **Kategori:** Moderbrand och portföljsignatur
- **Löfte:** Verktyg vi själva behöver. Gjorda för fler.
- **Personlighet:** Lugn, rak, mänsklig och precis. Kompetent utan att vara högljudd.
- **Webbplats:** https://byhugo.se/
- **Arkitektur:** Moderbrand

By Hugo! är den gemensamma signaturen och avsändarlöftet. Hugo & Friends AB är den juridiska personen. Produktmärken står alltid som egna märken och byggs aldrig ihop med By Hugo! till en ny kombinationslogotyp.

## Logotyp

| Variant | Fil | Användning |
| --- | --- | --- |
| Primär | `logo/svg/by-hugo-logo-primary.svg` | Förstahandsval på ljus, lugn bakgrund |
| Sekundär | `logo/svg/by-hugo-logo-secondary.svg` | Ordmärke när symbolen redan finns eller utrymmet är lågt |
| Symbol/ikon | `logo/svg/by-hugo-symbol.svg` | Favicon, appikon, avatar och kompakt navigation |
| Liggande | `logo/svg/by-hugo-logo-horizontal.svg` | Bred yta där kategori/deskriptor hjälper mottagaren |
| Inverterad | `logo/svg/by-hugo-logo-reversed.svg` | Mörk bakgrund; använd SVG eller transparent PNG |

SVG är original för webb och all vidare export. PNG finns i fasta
webbstorlekar. Vektor-PDF i mappen `logo/pdf/` är tryckleveransen för de fyra
huvudvarianterna.

## Friyta och minsta storlek

- Friyta: **25 % av symbolens bredd på alla sidor**.
- Minsta logotypbredd digitalt: **96 px**.
- Minsta logotypbredd i tryck: **25 mm**.
- Minsta symbol digitalt: **24 px**.
- Minsta symbol i tryck: **8 mm**.
- Under 32 px används symbolen, aldrig hela logotypen.

Friytan gäller även mot sidkant, fotografi, text och andra märken. Lägg inte en
egen behållare när symbolens form redan skapar en tydlig silhuett.

## Färg

Den kompletta tabellen med HEX, RGB och CMYK finns i
`palette/colors.md`. Maskinläsbara värden finns i `palette/colors.json` och
CSS-variabler i `palette/tokens.css`.

## Typografi

Rubriker använder **Manrope** och brödtext använder
**Inter**. Full storlekshierarki, vikter och fallback finns
i `typography/README.md`.

## Bakgrunder

- Primär logotyp används på vit, varmvit eller annan lugn ljus yta.
- Inverterad logotyp används på varumärkets godkända mörka färg.
- På foto krävs en visuellt lugn zon och samma kontrast som på en enfärgad yta.
- Om bakgrunden konkurrerar med märket används en separat, enfärgad yta med
  ordentlig friyta – inte skugga eller glow.

## Gör aldrig så här

- lägg inte till gradient, glow eller dekorativ skugga i märket.
- rotera, skeva, sträck eller beskär inte logotypen.
- byt inte ut stämpelaccenten mot en godtycklig färg.
- placera inte märket i ytterligare en badge eller kontur.
- kombinera inte produktmärket med kundens eller en partners logotyp till en ny lockup.
- ta inte bort utropstecknet eller skriv namnet som ByHugo.
- använd inte utropstecknet som en signal om att tonaliteten ska vara högljudd.
- placera inte By Hugo! som huvudmärke när en produkt är den tydliga avsändaren.

## Tillgänglighet och produktion

- All viktig text ska nå WCAG 2.2 AA mot sin bakgrund.
- Fokus, status och fel behöver mer än en färgskillnad.
- Ändra aldrig färg direkt i en exporterad logo; gå tillbaka till SVG-originalet.
- CMYK-värden är riktvärden. Bekräfta tryckprofil och provtryck med leverantören.
- Partner- och kundmärken placeras som separata avsändare med egen friyta.