Ústí nad LabemHUDY Lezecká stěna Ústí
1. 4. – 30. 4. 2027
Design systém
Paleta ŠBP, písmo Barlow a puntíky jako chyty na stěně (návrh marketingu ČHS). Barvy, písmo, komponenty a pohyb, ze kterých se skládá celý web – veřejná část i administrace.
Principy
Čistě a v barvách ŠBP
Jedno modré pozadí s puntíky (chyty na stěně), tmavší je jen patička a pás ČHS. Zlatá jen pro hlavní akci a zvýraznění. Žádné trojúhelníky, tiskové stíny ani ručně psané písmo.
Fotky a loga
Skutečné fotky ze závodů ve zlatém rámu. Logo ŠBP je na úvodu hlavní prvek, logo ČHS je v hlavičce každé stránky.
Pohyb s významem
Dopředu = výš, zpátky = dolů, totéž = přesun. Animujeme transform, opacity a ořez a respektujeme omezení pohybu.
Logo a značka
Oficiální logo ŠBP 2027 a logo pořadatele. Na světlém podkladu tmavá verze, na tmavém a modrém bílá.
ŠBP 2027 · tmavá
ŠBP 2027 · bílá
Pořadatel · Český horolezecký svaz
Barvy
Paleta ŠBP od marketingu ČHS: tmavě modré pozadí, modrá a zlatá. Odvozené odstíny jen pro plochy, stavy a text – zlatý text je světlejší (#EED486), aby měl na modré kontrast.
- Pozadí
#006184--sbp-bgPozadí celého webu · RGB 0, 97, 132 - Modrá
#3992B2--sbp-primaryPuntíky, vedlejší tlačítka · RGB 57, 146, 178 - Zlatá
#D3A613--sbp-goldHlavní akce, zvýraznění · RGB 211, 166, 19 - Bílá
#FFFFFF--ink-800Text a linky na modré
Modrá (plochy)
950850750700600500
Světle modrá
primary400300200100
Zlatá
700600gold300100
Typografie
Barlow – oficiální písmo ČHS v řezech regular, medium, semibold a bold. Nadpisy verzálkami v řezu bold.
Display · Barlow 700 / verzálky
Školní boulder pohár
Nadpis sekce · --fs-h2
Kvalifikace
Mezititulek · Barlow 700
Od přihlášky po závod
Perex · --fs-lead
Školní soutěž v boulderu pro začínající i zkušené lezce.
Text · 17 px / 1,55
Školní boulder pohár přibližuje dětem sportovní lezení. Jednopísmenné předložky drží pevná mezera, čísla mají pevné mezery mezi tisíci (2 751).
Štítek · 13 px / 600 / 0,1 em
Školy · děti · lezení
Slogan kampaně · Barlow 600, zlatá
Pojď závodit!
Tlačítka
Plná barva a zaoblené rohy, bez stínu. Zlatá jen pro hlavní akci na obrazovce, modrá pro vedlejší, obrys pro ostatní. Na zlaté a modré je tmavý text.
Štítky
Krátký štítek se zaoblenými rohy – pro stavy, ročníky a krátké nadpisky.
Ročník 2027KvalifikaceVe výroběProběhloTop
FinálePojď závodit
Nadpisek sekce
Formuláře
Pole skládané z částí: popisek, nápověda a chyba se k ovládacímu prvku propojí samy (aria-describedby, aria-invalid).
Prvky
Startovní čísla pro statistiky, skórkarta pro postupy, místo pro chybějící fotografii v barvách značky.
2 751dětí
12kvalifikačních kol
Krok 1
Krok s odškrtnutím
Krok se odškrtne, když dojede do zorného pole.
Krok 2
Další krok
Linka vede ke dalšímu kroku.
Kvalifikace
Mapa ČR složená z dílů (obrys, body, kroužek, poloha návštěvníka), karta stěny, kalendář kvalifikačních kol a proběhlá kola. Ukázky počítají s modelovým dnem 10. 4. 2027.
12345
Detail kvalifikačního kola – Ústí nad Labem
- Proběhlo · 2027Detail kola – Praha
Praha · Jungle Sport Park Letňany
1. 3. – 31. 3. 2027
- Proběhlo · 2027Detail kola – Jihlava
Jihlava · Boulder bar Točna
5. 4. – 9. 4. 2027
Odpočet
Dny jako velké obrysové číslo s texturou stěny, které se plní zlatou, jak se finále blíží. Číslice při změně vyjedou zespodu nahoru, jednotky se skloňují. Mimo obrazovku odpočet stojí, s omezeným pohybem jede po minutách bez animací.
Do finále zbývá
Do finále: 4. června 2027, 9:00.
Pohyb
React <ViewTransition> + typy přechodů. Každá animace něco sděluje – jinak ji nepřidáváme.
nav-forwardVýstupHlouběji v hierarchii (úvod → podstránka, přehled → detail). Nová stránka přijede zespodu.nav-backSestupVýš v hierarchii (detail → přehled, podstránka → úvod). Obráceně – slaňujeme dolů.nav-lateralTraverzMezi sourozeneckými stránkami jen prolnutí, žádný směr.title-morphSdílený nadpisČíslo a nadpis z rozcestníku se přesunou do hlavičky podstránky.photo-morphSdílená fotkaFotka „Co je ŠBP“ z úvodu přeletí do hlavičky stránky O soutěži.map-morphSdílená mapaMapa z přehledu stěn přejede do hlavičky detailu kola; mezi koly se posune jen zlatá značka.year-morphSdílený letopočetLetopočet z karty ročníku v archivu přejede do hlavičky detailu ročníku.coordinator-avatarSdílené iniciályIniciály koordinátorky přeletí z rychlého kontaktu v hlavičce (nebo z menu) do karty na stránce Kontakty.nav-next / nav-prevPosun v řaděMezi ročníky v archivu: novější přijede zprava, starší zleva.
Posuvný indikátor + výměna obsahu
Kvalifikace: Kvalifikační kola na partnerských lezeckých stěnách.
Vstup a odchod prvků
- Praha
- Brno
- Ústí nad Labem
--ease-outcubic-bezier(.22, 1, .36, 1)Příchody, odhalení--ease-cruxcubic-bezier(.7, 0, .2, 1)Přechody stránek, posuny, odkrytí fotek--ease-snapcubic-bezier(.34, 1.56, .64, 1)Pružné „cvaknutí“ (štítky, body na trase)