Pravidla pro logo, barvy a typografii značky MILO — aby značka vypadala konzistentně v aplikaci, na webu, v MILO Live, na dresu týmu i v exportu pro trenéra.
Verze1.3
Aktualizovánoříjen 2026
Novinkytmavý režim jako výchozí · barvy hodnocení · přímé stažení souborů
01Logo
Základní podoba
Logo MILO má dvě části: znak (zaoblený čtverec s linií) a nápis MILO ve fontu Space Grotesk. Na tmavém podkladu — tedy v aplikaci a na webu — se používá invertovaná varianta, na světlém primární.
MILO
Tmavý podklad · výchozí
MILO
Světlý podklad · tisk, dokumenty
Znak — zaoblený čtverec s liniovým M
Nápis — Space Grotesk, Bold (700)
Mezera = 0,4 × výška znaku
02Konstrukce znaku
Znak není náhoda.
Linie se čte jako písmeno M — a zároveň jako graf tréninkové zátěže: tři vrcholy pro tři fáze dne (dopoledne · odpoledne · suchá příprava), mezi nimi dvě údolí odpočinku. Všech sedm bodů leží na mřížce.
Jak číst mřížku
sloupec, řádek
Mřížka má 22 × 22 modulů (modul = 1/22 šířky znaku). Prostřední vrchol leží na sloupci 11 a řádku 6 — přesně na průsečíku. Stejně tak zbylých 6 bodů.
Poloměr rohu
R = 1/4 šířky
Při referenční velikosti 44 px je poloměr 11 px.
Tloušťka linie
8 % šířky znaku
Kulaté zakončení i napojení (round cap / round join) — linie nikdy nemá ostré rohy.
03Ochranná zóna a minimální velikost
Logo musí dýchat.
Kolem loga je vždy volný prostor bez textu, jiných znaků i okraje plochy. Pod minimální velikostí nápis ztrácí čitelnost — pak se používá jen samotný znak.
Ochranná zóna = R
Minimální volný okraj na všech stranách = poloměr rohu znaku (R). Do této zóny nesmí nic zasahovat.
Minimální velikost
48 px✓ OK
24 px✓ OK
16 px✓ Favicon
9 px✗ Příliš malé
Samostatný znak: min. 16 px (web/app) · 8 mm (tisk). Znak + nápis: min. 96 px šířky (web/app) · 20 mm (tisk).
04Barevné varianty loga
Čtyři verze. Jedno pravidlo.
Znak vždy kontrastuje s plochou, na které stojí. Na tmavém podkladu zelená plocha a tmavá linka, na světlém tmavý znak se zelenou linkou.
Invertovaná · výchozí
Zelený znak + tmavá linka. Aplikace, web, tmavé plochy.
Primární
Tmavý znak + zelená linka. Světlé a bílé pozadí, tisk.
Mono — tmavá
Jedna barva. Razítka, gravírování, černobílý tisk.
Mono — bílá
Fotografie, barevné pozadí, dres týmu.
05Logo a nápis
Tři podoby pro tři místa.
Horizontální verze je primární. Vertikální patří do čtvercových formátů. Samostatný znak je vyhrazen pro ikony aplikace, favicon a profilové obrázky.
Znak je jednoduchý a má vydržet i v malém měřítku. Každá úprava ho oslabuje — i drobná.
✕
NeroztahovatZnak se nikdy neškáluje nerovnoměrně. Poměr stran vždy 1 : 1.
✕
NeotáčetZnak stojí vždy rovně, bez náklonu a rotace.
✕
Neměnit barvyJen varianty z kapitoly 04. Žádné jiné kombinace.
✕
Nepřidávat efektyŽádné stíny, přechody ani záře. Znak je plochý.
✕
Nepokládat na rušné pozadíPod znakem je klidná, kontrastní plocha — žádné vzory ani přeplácané fotky.
MILO
✕
Neměnit mezery a prostrkáníRozestup znaku a nápisu i prostrkání písmen jsou pevné — viz kapitoly 01 a 08.
07Barevná paleta
Úzká paleta. Jeden akcent.
Zelená je jediný akcent v celém systému — díky tomu má váhu. Červená slouží jen pro chyby a varování, nikdy jako dekorace. Kliknutím na vzorek zkopíruješ HEX.
Zelená jako text: na tmavém podkladu ano (kontrast 15 : 1). Na světlém nikdy — #3DFF8F má na bílé jen 1,21 : 1. Pro krátké popisky na světlé použij Green Dark (#00B854), běžný text je vždy Ink.
08Typografie
Dva fonty. Jasné role.
Space Grotesk nese identitu — nadpisy, logo, čísla a hodnoty v aplikaci. Inter nese obsah — odstavce, popisky a UI text.
Space Grotesk
Display · Bold 700
MILO 0123
Space Grotesk
Labely, UI · SemiBold 600
SESSION · TÝMOVÝ PRŮMĚR
Space Grotesk
Čísla v aplikaci · Bold 700
🔥 777 · 55.12 · 6.4
Inter
Odstavce · Light 300
Spánek, regenerace a trénink za 30 sekund denně.
AaRegular
AaMedium
AaSemiBold
AaBold
Prostrkání: nápis MILO a nadpisy ve Space Grotesk Bold mají záporné prostrkání zhruba −3 % velikosti písma (např. −3,5 px při 108 px). Čím větší písmo, tím těsnější. Číselné hodnoty v aplikaci používají tabular-nums, aby se při změně neposouvaly.
09Tmavý režim
Tmavá je výchozí.
Aplikace MILO i web jsou vždy tmavé. Světlý režim zůstává pro tisk, dokumenty a exporty do Excelu. Paleta se nerozšiřuje o novou barvu značky — mění se jen role: Ink je plocha, bílá text a MILO Green se stává barvou popisků.
Tmavý · aplikace a web
MILO
Parta
🔥 Ohníček party: 12 dní
Popisky MILO Green, text bílý, karta #262626 → #1F1F1F.
👏 Gratuluju
Světlý · tisk a dokumenty
MILO
Týdenní export
Senioři A · 40. týden
Popisky Green Dark, text Ink, karta bílá.
⬇️ Do Excelu
Plochy aplikace
Odstupňované tmavé plochy, aby se karty odlišily od pozadí. Hodnoty odpovídají src/theme.ts.
Kontrast rozhoduje
Kontrastní poměr vůči podkladu (WCAG). Hranice pro běžný text je 4,5 : 1 — proto si zelené mezi režimy vyměňují role.
Barva
Na bílé
Na #0A0A0A
Na #121212
MILO Green
1,21 : 1
14,99 : 1
14,2 : 1
Green Dark
2,41 : 1
7,53 : 1
—
Text tlumený #A6A6A6
—
—
7,7 : 1
Text sekundární #969696
—
—
6,3 : 1
Ink
18,13 : 1
—
—
Platí v obou režimech: zelená je jediný akcent · text na zelené ploše je vždy Ink · fonty, tvar znaku, ochranná zóna i minimální velikosti se nemění. Logo na tmavé ploše je vždy invertovaná varianta.
10Barvy hodnocení
Zátěž se čte barvou.
Hodnoty 1–10 mají v aplikaci vlastní stupnici barev (loadColor / recoveryColor v src/theme.ts). Používá se jen pro hodnoty — čísla, grafy, dlaždice — nikdy pro tlačítka nebo dekoraci. Číslo nikdy nestojí samo: vždy s názvem úrovně ze škály.
Zátěž (RPE) — stupnice výše: nízká = zelená, vysoká = červená. Regenerace má pořadí obrácené: 1–3 červená · 4–5 žlutá #F4C63D · 6–7 oranžová · 8–10 zelená.
11Akronym jako vizuální prvek
M-I-L-O vlastními slovy.
Rozepsaný akronym se používá tam, kde se MILO vysvětluje poprvé — vždy ve čtyřech stejně širokých sloupcích.
M
Monitoring
Denní sledování spánku, regenerace a stavu těla.
I
Intensity
RPE škála — jak těžký trénink skutečně byl.
L
Log
Denní záznam — co se odehrálo a jak to bylo náročné.
O
Output
Výstup každého dne viditelný pro tebe i trenéra.
12Logo v praxi
Kde logo žije.
Ikona aplikace
Invertovaná varianta — zelená plocha, tmavý znak. Bez nápisu.
Nášivka na dres
Mono-tmavá varianta na bílém kruhu. Funguje na jakékoli barvě dresu.
MILO-TYDEN.XLSX
Hlavička exportu
Primární varianta v záhlaví týdenního a měsíčního exportu do Excelu.
13Soubory ke stažení
Hotové soubory. Žádné kreslení.
Všechny varianty jsou ve vektoru (SVG). Nápis MILO je převedený na křivky, takže se zobrazí správně i tam, kde font Space Grotesk není — včetně Canva. Ikony jsou navíc v PNG 512 px.
