# Design system Daruj kousek sebe Tento soubor popisuje design system Daruj kousek sebe. Při návrhu nebo kódu se drž jeho pravidel, používej jen uvedené barvy, písma a komponenty a jejich HTML přebírej beze změny tříd. Nevymýšlej nové barvy ani styly. Portál propojuje dárce pomoci s pozůstalými rodinami s dětmi po ztrátě mámy nebo táty. Písmo: Poppins. Živý web: https://www.darujkouseksebe.cz/. Katalog: https://www.romankacerek.cz/dev/designsystem/darujkouseksebe/. Sestaveno 11. 11. 2026. ## Soubory Načti je v tomto pořadí: - https://www.romankacerek.cz/dev/designsystem/darujkouseksebe/site/assets/css/web.css - https://www.romankacerek.cz/dev/designsystem/darujkouseksebe/site/assets/js/web.js Relativní cesty v HTML níže vedou do https://www.romankacerek.cz/dev/designsystem/darujkouseksebe/site/. ## Pravidla ### Základní pravidla - Celý web je v jedné rodině Poppins, váhy 400, 500 a 600. Tučnější než 600 se nepoužívá. Tělo textu je 17/30 px. - Text a nadpisy mají `--text` #1b2433, popisky a perexy `--tlumena` #4a5565. Druhá, šedá věta výroku má #98a2b3. - Značková je modrá `--modra` #004cbd: tlačítka, šipky odkazů, ikony, čárkované rámečky. Zelená `--zelena` #31b308 jen na ikony, nová komponenta bere modrou. - Plochy: úvod a pruhy `--pata` #eaeef6, podklad fotek a info boxů `--svetla` #f3f6fb, patička a široké pásy #f7f7f7. - Karty a boxy mají rámeček 1 px `--linka`, ne stíny. Výjimkou je jen vyhledávání `.hledani`. - Výzvy k akci mají rámeček `1.5px dashed var(--modra)`, rádius 18 px a bílé pozadí (`.pro-karta`, `.ka-darci`, `.karta-pridat`). - Tlačítka jsou pilulky `border-radius:200px` s rámečkem 2 px. Hlavní `.btn` je modré a při najetí se obrací na bílé, `.btn--obrys` obráceně. - Odkaz se šipkou `.odkaz-sipka` je modrý 600, text je v klidu podtržený 1 px a při najetí bez podtržení. V úvodu a na 404 je text tmavý a bez podtržení, na najetí podtržený. - Pod nadpisy a nad nadpisy žádné ozdobné linky ani zelené štítky. Malý verzálkový popisek `.ko-stitek` je jen v kontaktech. ### Rozvržení - Obsah je v kontejneru `.w` o šířce max 1680 px s okrajem `--okraj` 32 px (20 px na telefonu). Hlavička `--hlava` je 78 px a lepí se nahoře. - Stránka začíná pásem úvod: úvod `.uv-hero.hero-a` s jedoucími fotkami, ostatní stránky `.pro-hero` s výrokem `.pro-vyrok` a čárkovanou kartou `.pro-karta`. - Sekce jsou odsazené shora `clamp(44px,3.9vw,76px)`. Šedý pás `.pro-jak` nese kroky `.pro-krok` v bílých kartách s rádiusem 20 px. - Výrok s odpověďmi `.pom` je dvousloupcový: vlevo `.pom__vyrok`, vpravo otázky `.faq__i` s modrým plus a mínus. ### Rádiusy - 200 px tlačítka, štítky a vyhledávání. 50 % kolečka a avatary. 14 px fotka karty nabídky. 16 px karta partnera a box. 18 px čárkované karty. 20 px karta kroku a projektu. 28 px fotky v úvodu. ### Jazyk - Texty jsou česky, bez zelených štítků nad nadpisem. Za jednopísmenné předložky patří nezlomitelná mezera. Říká se ztráta a pozůstalý. ## Barvy | Název | Hodnota | V tmavém tématu | Použití | | --- | --- | --- | --- | | --modra | #004cbd | | Tlačítka, šipky odkazů, ikony kategorií, čárkované rámečky, plus a mínus u otázek. | | --text | #1b2433 | | Veškerý text a všechny nadpisy. | | --pata | #eaeef6 | | Pozadí úvod pásu na úvodu. Není to patička. | | --modra-50 | #f0f5fd | | Světle modrá plocha karet a kolečka ikon. | | --zelena | #31b308 | | Jen ikony, nikdy text ani plocha. | | --modra-100 | #e0eafa | | Rámeček světle modrých karet. | | --modra-svetla | #e6eefa | | Plocha upozornění. | | #eef3fc | #eef3fc | | Podklad štítku kategorie a zóny pro soubory. | | --zelena-text | #237f05 | | Tmavší zelená pro stavové štítky. | | --tlumena | #4a5565 | | Perexy, popisky, místo u karty, text ve spodní liště. | | #98a2b3 | #98a2b3 | | Druhá šedá věta výroku, počty u oblastí, nadpisy sloupců patičky. | | --svetla | #f3f6fb | | Podklad fotek, šedé info boxy. | | #f7f7f7 | #f7f7f7 | | Patička, pás O projektu a Jak to funguje, karta formuláře. | | --linka | #dde4ee | | Rámečky karet, linky mezi řádky výčtů a otázek. | | --linka-2 | #d3d8df | | Rámeček chipů, vyhledávání a polí formuláře. | | #eceef2 | #eceef2 | | Rámeček karet kroků a karty formuláře. | | #efefef | #efefef | | Linka nad patičkou. | | #e6e6e6 | #e6e6e6 | | Linka nad spodní lištou patičky. | | #aebbd0 | #aebbd0 | | Rámeček zaškrtávacího pole. | | --chyba | #e91e63 | | Chyby formulářů: hlášky, rámečky, ikony. | | #fde8ef | #fde8ef | | Plocha chybové zprávy. | ## Typografie | Styl | Hodnoty | Použití | | --- | --- | --- | | H1 úvodu | viz CSS | Nadpis v úvodu úvodu | | Výrok | viz CSS | Nadpis úvod podstránek | | H2 sekce | viz CSS | Nadpis sekce nad kartami | | H2 karty | viz CSS | Nadpis čárkované karty | | Výrok s otázkami | viz CSS | Nadpis sekce s otázkami | | Otázka | viz CSS | Otázka v rozbalovači | | Perex | viz CSS | Úvodní věta nad výrokem | | Text | viz CSS | Odpověď a tělo textu | | Verzálkový popisek | viz CSS | Malý popisek nad kontakty | ## Mezery a šířky | Název | Hodnota | Použití | | --- | --- | --- | | --okraj | 32px | Boční okraj stránky, 20 px na telefonu. | | --hlava | 78px | Výška hlavičky, 66 px na telefonu. | | --obsah | 1680px | Nejvyšší šířka obsahu v kontejneru .w. | ## Rádiusy | Název | Hodnota | Použití | | --- | --- | --- | | pilulky | 200px | Tlačítka, chipy, štítky a vyhledávání. | | kolečka | 50% | Čísla kroků, avatary a kruhové fotky. | | karta nabídky | 14px | Fotka karty a dlaždice kategorie. | | karty a boxy | 16px | Karta partnera a informační box. | | čárkované karty | 18px | Výzvy k akci s rámečkem dashed. | | kroky a projekt | 20px | Karta kroku a karta projektu. | | fotky hero | 28px | Jedoucí fotky na úvodu. | ## Komponenty: Úvod ### Úvod Úvod webu s nadpisem, perexem, vyhledáváním a dvěma sloupci jedoucích fotek na pozadí `--pata`. Třídy: `uv-hero hero-a`, `hero-a__fotky`, `hero-a__pas`. ```html

Pomáháme pozůstalým rodinám s dětmi, které přišly o mámu nebo tátu

Lidé a firmy z celé republiky nabízejí pozůstalým rodinám s dětmi zdarma svůj čas, služby i věci.

``` ### Vyhledávání Pilulkové pole se dvěma sloupci a tlačítkem, jediný prvek se stínem. Třídy: `hledani`, `hledani__pole`, `hledani__tlacitko`. ```html
``` ### Úvod podstránky Perex, výrok se šedou druhou větou, dva odkazy a vpravo čárkovaná karta s výčtem. Třídy: `pro-hero`, `pro-perex`, `pro-vyrok`, `pom__odkazy`, `pro-karta`, `pro-seznam`. ```html

Nabídky pomoci pro pozůstalé rodiny s dětmi.

Přišli jste o partnera nebo partnerku a staráte se o děti? Lidé z celé republiky nabízejí pomoc, která vám může ulehčit všední dny.

Prohlédnout nabídky Přihlásit se

Co budete k registraci potřebovat

Koordinátoři zkontrolují doklad i platbu a účet schválí.

  • Úmrtní list jako fotku nebo sken
  • E-mail, telefon a adresu trvalého bydliště
  • Jednorázový členský poplatek 400 Kč
Registrace rodiny
``` ### Úvod s kruhovou fotkou Varianta úvod s kruhovou fotkou vlevo. Třídy: `pro-hero op-hero`, `op-hero__foto`. ```html

Projekt Daruj kousek sebe propojuje pozůstalé rodiny a děti s lidmi a firmami, kterým jejich osud není lhostejný.

Nejsou nám lhostejné osudy mladých pozůstalých rodin. Každý z nás má co nabídnout.

Zaregistrovat se Prohlédnout nabídky
``` ### Úvod kontaktu Úvod s kontakty koordinátorů, kolečkovými fotkami a verzálkovým popiskem. Třídy: `ko-hero`, `ko-stitek`, `pro-kontakty`. ```html

Kontaktujte nás. Napište nám nebo zavolejte, rádi poradíme.

Časté dotazy rodin Časté dotazy dárců

Koordinátoři projektu

``` ### Úvod partnerů Výrok s šedou druhou větou nad mřížkou partnerů. Třídy: `pa-hlava`, `pa-uvod`, `pa-vyrok`. ```html

Daruj kousek sebe je projekt Nadačního fondu Vrba.

Děkujeme partnerům, kteří projekt podporují. Díky nim můžeme dál pomáhat rodinám a dětem bez mámy nebo táty.

``` ### Stránka nenalezena Chybová stránka s velkým výrokem a dvěma odkazy. Třídy: `e4`, `e4__vyrok`, `pom__odkazy`. ```html

Chyba 404. Odkaz je možná starý, nebo je v adrese překlep.

Tuhle stránku jsme nenašli. Pomoc, kterou hledáte, ale najdete v nabídkách dárců.

Najít pomoc Na úvodní stránku
``` ## Komponenty: Navigace ### Hlavička Bílá lepivá lišta s logem, menu, přihlášením a tlačítkem Vložit nabídku. Třídy: `hlava`, `hlava__nav`, `nav`, `hlava__cta`. ```html
Přihlásit se Registrace Vložit nabídku
``` ### Patička Šedá patička #f7f7f7 se čtyřmi sloupci, šedým logem a spodní lištou. Třídy: `pata`, `pata__horni`, `pata__nadpis`, `pata__dolni`. ```html ``` ## Komponenty: Prvky ### Tlačítka Pilulková tlačítka: plné modré, obrysové a malé. Třídy: `btn`, `btn--obrys`, `btn--mala`. ```html
Nabídnout pomocProhlédnout nabídkyVložit nabídku
``` ### Odkaz se šipkou Modrý odkaz 600, text podtržený 1 px a při najetí bez podtržení. Třídy: `odkaz-sipka`, `sipka`; běžný odkaz v textu je `odkaz`. ```html
Najít pomoc Nabídnout pomoc
``` ## Komponenty: Karty ### Karta nabídky Fotka 4:3 s rádiusem 14 px, kategorie v pilulce, název, místo a štítky. Karty se na webu doplňují skriptem, vzor je neutrální. Třídy: `karta`, `karta__foto`, `karta__kat`, `karta__nadpis`, `karta__misto`, `karta__stitky`. ```html
Kategorie

Název nabídky

Místo

``` ### Karta Nabídněte pomoc Čárkovaná karta s výzvou, která se zařadí mezi karty nabídek. Třídy: `karta-pridat`, `karta-pridat__nadpis`, `karta-pridat__akce`. ```html

Nabídněte pomoc i vy

Jste domácí kutil, student, učitel, právník nebo v důchodu? Nabídněte pozůstalé rodině kousek sebe.

``` ### Oblasti Pilulky kategorií s ikonou a počtem nabídek. Třídy: `oblasti`, `oblast`, `oblast__pocet`. ```html

Pomoc podle oblasti

``` ### Kategorie Dlaždice kategorií v pásu s ikonou, na telefonu pilulky. Třídy: `kat-pas`, `kat-pas__seznam`, `kat-filtr`. ```html
``` ### Informační box Šedý box `--svetla` s rádiusem 18 px a krátkým sdělením. Třída: `nejnovejsi-zaloha`. ```html

Všechny nabídky pomoci i s mapou najdete v katalogu nabídek. Vybírat můžete podle kategorie, kraje nebo hledaného slova.

``` ### Karta partnera Bílá karta s logem v rámečku, názvem v modré a popisem. Třídy: `pa-mrizka`, `pa-karta`, `pa-plocha`, `pa-logo`, `pa-jmeno`, `pa-popis`. ```html
Nadace Clementia MonetaNadace skupiny MONETA, která podporuje neziskové projekty v Česku. Jihomoravský krajPřispívá na služby Vrby pro pozůstalé rodiny s dětmi na jižní Moravě. Ministerstvo práce a sociálních věcíPodporuje sociální pomoc, kterou Vrba poskytuje pozůstalým rodičům a dětem. Statutární město BrnoMěsto, kde má Vrba kancelář a kde pomáhá brněnským rodinám. Infinit Maximus BrnoTermální lázně a wellness v Brně, které stojí za Vrbou. BALA21Výrobce probiotik a kombuchy, který Vrbu dlouhodobě podporuje. Cestovní kancelář BRENNAČeská cestovní kancelář, která Vrbu podporuje. Nadační fond VrbaNadační fond, který projekt Daruj kousek sebe provozuje. Zpátky do životaSpolek pro pozůstalé rodiny, se kterým Vrba projekt vytváří.
``` ## Komponenty: Sekce ### Výrok a otázky Dvousloupcová sekce: vlevo výrok se šedou druhou větou a odkazy, vpravo rozbalovací otázky s modrým plus. Třídy: `pom`, `pom__vyrok`, `pom__odkazy`, `pom__otazky`, `faq__i`, `faq__a`. ```html

Daruj kousek sebe propojuje lidi, kteří chtějí pomoci, s rodinami,
které přišly o maminku nebo tatínka.

Každý z nás má co nabídnout.
Z nabídek dárců si pozůstalý rodič
vybere pomoc, kterou právě potřebuje.

Najít pomoc Nabídnout pomoc
Jak nabídnu pomoc?

Zaregistrujte se jako dárce – stačí e-mail a telefon, žádné doklady – a rovnou v registraci popište, co nabízíte a kde. Naši koordinátoři zkontrolují a schválí váš účet i nabídku a zveřejní ji v katalogu i na mapě. Nabídku pak můžete ve svém účtu kdykoli upravit nebo smazat.

Vložit nabídku
Jak najdu pomoc?

V katalogu a na mapě najdete pomoc podle kategorie, kraje nebo hledaného slova, například hlídání nebo doučování. Jakmile se zaregistrujete a my váš účet ověříme, uvidíte u nabídky kontakt na dárce a můžete mu rovnou napsat přes tlačítko „Kontaktovat dárce“.

Prohlédnout nabídky
Kdo uvidí můj kontakt?

Kontakty dárců na webu veřejně neukazujeme. Vidí je jen ověřené pozůstalé rodiny, jejichž účet koordinátoři schválili.

Jak chráníme osobní údaje
Co potřebuje k registraci pozůstalá rodina?

Úmrtní list jako fotku nebo sken (PDF, JPG nebo PNG), e-mail a telefon, na kterých vás zastihneme, a adresu trvalého bydliště. Úmrtní list uvidí jen koordinátoři projektu a pověření pracovníci NF Vrba.

Registrace rodiny
Kolik to stojí?

Pro dárce je registrace i nabídka zdarma. Rodina platí jednorázový členský poplatek 400 Kč. Platební údaje i QR platbu jí pošleme e-mailem a najde je i ve svém účtu.

Jak to funguje pro rodiny
``` ### Kategorie s kruhovou fotkou Kruhová fotka vlevo a seznam kategorií vpravo. Třídy: `pro-oblasti`, `pro-kruh`, `pro-kruh__foto`, `kat-pas`. ```html

Kategorie nabídek pomoci

``` ### Nápady na pomoc Kruhová fotka a výčet se dvěma sloupci a linkami. Třídy: `pro-napady`, `de-vlastnosti`, `pro-napady__seznam`. ```html

Nápady, jak pomoci

  • Jste živnostník nebo podnikatel?Darujte své služby pozůstalé rodině.
  • Jste právník nebo bankéř?Poraďte s rodinným finančním plánem.
  • Jste šikovný domácí kutil?Najdeme pro vás prostor, kde se uplatníte.
  • Pečete rádi pro druhé?Upečte třeba bábovku rodině bez mámy nebo táty.
  • Jste v důchodu a máte čas?Věnujte svůj čas dětem.
  • Jste student nebo učitel?Nabídněte dětem doučování nebo je pohlídejte.
``` ### Kroky Šedý pás se třemi bílými kartami kroků, poslední s modrou fajfkou. Třídy: `pro-jak`, `pro-kroky`, `pro-krok`, `de-postup__c`. ```html

Jak získat pomoc

  1. Zaregistrujte se

    Vyplňte registraci, nahrajte úmrtní list a potvrďte svůj e-mail.

    Registrace rodiny
  2. Zaplaťte poplatek

    Jednorázových 400 Kč podle údajů z e-mailu. Pak koordinátoři účet schválí.

  3. Ozvěte se dárci

    Vyberte nabídku v katalogu nebo na mapě a napište dárci přímo z webu.

    Prohlédnout nabídky
``` ### Příběh Vrby Šedý pás s citátem, čárkovaným číslem a logy; video se zde nepřehrává. Třídy: `op-vrba`, `op-vrba__nadpis`, `op-vrba__stat`, `op-vrba__loga`. ```html

Daruj kousek sebe probouzí v lidech společenskou odpovědnost a dává pozůstalým rodinám prostor k návratu do života.

50 tisíc*pozůstalých maminek a tatínků potřebuje pomoc svého okolí.

* Podle statistik ČSÚ bylo v České republice v roce 2023 evidováno celkem 36 422 pozůstalých osob (pouze ze sezdaných párů) ve věku do 55 let.

Nadační fond Vrba Zpátky do života
``` ### Iniciátorka projektu Kruhová fotka vlevo, citát a jméno vpravo. Třídy: `de-blok`, `op-iniciatorka`, `op-citat`, `op-jmeno`. ```html
Petra Glosr Cvrkalová, ředitelka Nadačního fondu Vrba

Vím, že to jde, vrátit se zpátky do života

„Ta samota, kdy děti spí, celý dům ztichne a jste tam jen vy sama, to je pravé peklo na zemi.“

„Ztráta nejbližší osoby je jednou z nejtěžších zkoušek na naší cestě životem. I já jsem takovou zkušeností prošla, když jsem z minuty na minutu nenávratně ztratila milujícího manžela a otce svých dvou dětí. … Věřte mi, jsem jedna z vás.“

Podpis Petry Glosr Cvrkalové

Petra Glosr Cvrkalováiniciátorka projektu a ředitelka Nadačního fondu Vrba

``` ### Dvě výzvy Dvě čárkované karty vedle sebe, každá s výčtem a tlačítkem. Třídy: `op-cta`, `pro-karta`, `pro-seznam`, `pro-karta__btn`. ```html

Hledáte pomoc?

Nabídky pomoci jsou určené rodinám s dětmi do 18 let, které přišly o mámu nebo tátu.

Co budete potřebovat

  • Úmrtní list jako fotku nebo sken
  • E-mail, telefon a adresu trvalého bydliště
  • Jednorázový členský poplatek 400 Kč
Získat pomoc

Chcete také pomáhat?

Pomoci může každý: jednotlivec, skupina i firma. Stačí si založit účet dárce a nabídku přidat.

Co můžete nabídnout

  • Svůj čas nebo dovednost
  • Službu nebo věci
  • Nabídku vložíte zdarma
Nabídnout pomoc
``` ### Pás partnerů Vodorovný pás log partnerů se zeslabenými okraji. Třídy: `op-partneri`, `op-partneri__pas`, `op-partneri__seznam`. ```html

Partneři projektu

``` ### Čárkovaná výzva s QR Čárkovaný pruh s nadpisem, tlačítkem a QR kódem. Třídy: `ka-darci`, `ka-darci__text`, `pa-cta`, `pa-cta__qr`. ```html
``` ### Karta projektu Karta s rámečkem `--linka`, nadpisem, odkazem a QR kódem. Třídy: `projekt-karta`, `projekt-karta__text`, `projekt-karta__qr`. ```html
Rodiny na Setkání pod Vrbou

Daruj kousek sebe je společný projekt Nadačního fondu Vrba, lidí a firem z celé ČR

Propojuje pozůstalé rodiny s dětmi s lidmi, kterým jejich osud není lhostejný.

Více o projektu
QR kód služeb Nadačního fondu Vrbawww.nfvrba.cz
``` ## Komponenty: Kontakt ### Kontaktní formulář Formulář po blocích s poli, rádiusy 200 px a modrým tlačítkem; odeslání je zde vypnuté. Třídy: `uc-karta--bloky`, `ko-formular`, `form`, `form__f`, `form__odeslat`. ```html

Děkujeme, zpráva k nám dorazila

Brzy se vám ozveme na e-mail nebo telefon, který jste uvedli.

Napište nám
``` ### Údaje a odkazy Čárkovaná karta s kontaktními údaji oddělenými linkami. Třídy: `pro-karta`, `ko-vrba`, `ko-udaje`, `ko-udaje__popisek`. ```html

Provozovatel projektu

Nadační fond Vrba

  • Kancelář BrnoMezírka 775/1, 602 00 BrnoZobrazit na mapě
  • SídloNedvědice 247, 592 62 Nedvědice
  • Bankovní spojení2500996405/2010 (Fio banka)
  • IČO05057281
``` ## Stránky - Úvod: https://www.darujkouseksebe.cz/ - Pro rodiny: https://www.darujkouseksebe.cz/pro-rodiny - Pro dárce: https://www.darujkouseksebe.cz/pro-darce - O projektu: https://www.darujkouseksebe.cz/o-projektu - Partneři: https://www.darujkouseksebe.cz/partneri - Kontakt: https://www.darujkouseksebe.cz/kontakt