# Design system AA SERVIS Brno Tento soubor popisuje design system AA SERVIS Brno. 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. Autoservis na Cejlu v Brně. Servis a opravy aut s objednáním online, pro česky, anglicky i ukrajinsky mluvící zákazníky. Písmo: Manrope. Živý web: https://www.aaservisbrno.cz/. Katalog: https://www.romankacerek.cz/dev/designsystem/aaservisbrno/. Sestaveno 11. 11. 2026. ## Soubory Načti je v tomto pořadí: - https://www.romankacerek.cz/dev/designsystem/aaservisbrno/site/assets/css/web.css - https://www.romankacerek.cz/dev/designsystem/aaservisbrno/site/assets/js/web.js Relativní cesty v HTML níže vedou do https://www.romankacerek.cz/dev/designsystem/aaservisbrno/site/. ## Pravidla ### Barvy - Základ je grafit `--ink` #16181d pro nadpisy, tmavé plochy a obrysová tlačítka. Tělo textu je `--text` #41454d, popisky `--muted` #6b707a. - Jediná akcentní barva je červená `--accent` #b5121b. Používej ji na hlavní tlačítko, štítky `kicker`, ikony, čísla kroků a odrážky. Nikdy ne jako plochu celé sekce. - Střídej bílý podklad a světle šedý `--sand` #f3f4f6 (`sec--sand`). Linky jsou `--line` #dfe1e5, 1 px plné. - Chyby formuláře mají `--err` #b3261e. Zelená #2e9e5b je jen tečka stavu Otevřeno. ### Písmo - Celý web je v jedné rodině Manrope 400 až 800, hostované u nás, včetně cyrilice. - Nadpisy `h1`, `h2`, `h3` jsou 800, řádkování 1.08 a záporné prostrkání (-.025em, úvod -.045em). Velikosti plynule přes `clamp()`. - Štítek `kicker` je 800, verzálky, prostrkání .14em, červený. Tělo je 500 na 17 px. ### Rozložení - Obsah je v `wrap` do 1440 px s bočním okrajem `--pad` a mezerou sloupců `--gap`. - Sekce `sec` mají svislý okraj `clamp(64px,7vw,110px)`. Dvousloupcové bloky (`split`, `why-b`, `svc-a`, `area`, `contact-grid`) se na šířce 1000 px lámou do jednoho sloupce. - Hlavička `nav` je pevná, výška `--navh` 84 px (70 px na telefonu). ### Tvary - Tlačítka a vstupy mají rádius 10 až 12 px, karty a fotky 12 až 16 px, kolečka (čísla kroků, ikony kontaktů) 50 %. - Bez stínů, kromě jemného stínu rozbalené nabídky jazyků a štítku na mapě. Dělení obstarávají tenké linky a čárkovaná červená linka mezi kroky. ### Tlačítka - Hlavní akce je `btn btn--primary` (červená, po najetí bílá s červeným textem), doplňková `btn btn--line` (grafitový obrys). Výška 56 px, text 800. - V jednom bloku nejvýš jedno hlavní tlačítko, vedle něj telefon `hero__tel` nebo textový odkaz. ### Obrázky - Reálné fotky dílny a mechaniků, zaoblené, v poměru 4:3 nebo 4:5, `object-fit:cover`. Popisek na fotce je bílý štítek se zaoblením. - Ikony jsou jednobarevné červené SVG ve třídě `ic`, velikost 56 px. ### Jazyk - Web je česky, anglicky (`en/`) a ukrajinsky (`uk/`), přepínač `lang` je v hlavičce. Za jednopísmennými předložkami jsou nezlomitelné mezery. ## Barvy | Název | Hodnota | V tmavém tématu | Použití | | --- | --- | --- | --- | | --ink | #16181d | | Nadpisy, obrys tlačítek, tmavé plochy (404, patička, titulek formuláře). | | --accent | #b5121b | | Hlavní tlačítko, štítky, ikony, čísla kroků, odrážky. | | --sand | #f3f4f6 | | Podklad sekcí sec--sand a úvodů podstránek. | | bílá | #ffffff | | Podklad stránky, karet a navigace. | | --line | #dfe1e5 | | Tenké linky a obrysy nabídek. | | --text | #41454d | | Tělo textu a perexy. | | --muted | #6b707a | | Popisky, drobný text, štítky kontaktů. | | #a3a7ae | #a3a7ae | | Čísla služeb v seznamu a tečka Zavřeno. | | #c9ccd2 | #c9ccd2 | | Obrys vstupů a štítků služeb. | | #9aa0a8 | #9aa0a8 | | Rámeček nezaškrtnutého políčka. | | rgba(181,18,27,.45) | rgba(181,18,27,.45) | | Čárkovaná linka mezi kroky. | | --err | #b3261e | | Chyba pole formuláře. | | #fdecec | #fdecec | | Podklad chybové zprávy formuláře. | | #8a1c1c | #8a1c1c | | Text chybové zprávy formuláře. | | #2e9e5b | #2e9e5b | | Tečka Teď máme otevřeno. | | #e5414b | #e5414b | | Štítek na tmavé 404. | | #ff4b55 | #ff4b55 | | Blikající kontrolka na 404. | | rgba(255,255,255,.78) | rgba(255,255,255,.78) | | Text v patičce na grafitu. | ## Typografie | Styl | Hodnoty | Použití | | --- | --- | --- | | H1 úvodu | viz CSS | Nadpis úvodu | | H1 podstránky | viz CSS | Nadpis podstránky | | H2 | viz CSS | Nadpis sekce | | H3 | viz CSS | Nadpis výhody | | Štítek | viz CSS | Červený štítek nad nadpisem | | Perex | viz CSS | Úvodní odstavec | | Text | viz CSS | Tělo textu | | H1 na tmavém | viz CSS | Stránka 404 | ## Mezery a šířky | Název | Hodnota | Použití | | --- | --- | --- | | --pad | clamp(20px,4.5vw,72px) | Boční okraj stránky. | | --gap | clamp(32px,5vw,88px) | Mezera sloupců. | | --navh | 84px | Výška navigace, 70 px na telefonu. | | sekce | clamp(64px,7vw,110px) | Svislý okraj sekce sec. | ## Rádiusy | Název | Hodnota | Použití | | --- | --- | --- | | tlačítka a vstupy | 10px | btn, lang__btn, štítky služeb (12 px u polí formuláře). | | karty a fotky | 12px | split, area__map, formulář. | | velká fotka | 16px | why-b__photo, karta 14 px. | | kolečka | 50% | Čísla kroků, ikony kontaktů, vlajky. | ## Komponenty: Navigace ### Navigace Horní lišta s logem, odkazy, telefonem, tlačítkem a přepínačem jazyka. Na webu je pevná. Třídy: `nav`, `nav__links`, `nav__tel`, `lang`, `burger`. ```html ``` ### Mobilní menu Boční panel menu pro telefon, na webu vyjede zprava. Třídy: `mob-menu`, `mob-menu__langs`, `mob-menu__x`. ```html ``` ### Patička Grafitová patička s logem, odkazy, adresou a telefonem. Třídy: `foot`, `foot__top`, `foot__brand`, `foot__tel`, `foot__bottom`. ```html ``` ## Komponenty: Úvod ### Úvod s fotkou Široká fotka se štítkem otevírací doby a pod ní nadpis, perex a akce. Třídy: `hero`, `hero__photo`, `hero__live`, `hero__body`, `hero__cta`, `hero__tel`. ```html
Mechanik opravuje auto v dílně

Otevírací dobaPo-Pá 8:00-18:00

Autoservis Brno, Cejl 29/76

Servis a opravy aut v Brně

Opravíme motor, brzdy, podvozek, spojku i elektroinstalaci osobních a užitkových aut. Než se do opravy pustíme, řekneme vám, co je potřeba a kolik to bude stát.

Objednat servis 601 339 195

Auto nejede? Odtáhneme ho k nám, v Brně zdarma při opravě u nás.

``` ### Úvod podstránky Světle šedý úvod podstránky s nadpisem a perexem. Třídy: `page-hero`, `page-hero__lead`. ```html

Služby autoservisu v Brně

Opravujeme osobní i užitková auta. Nevíte, kam vaše závada patří? Zavolejte nebo ji popište ve formuláři a poradíme vám.

``` ### Úvod s kontakty Úvod podstránky se třemi kontaktními kolečky s ikonou. Třídy: `page-hero`, `contact-list--hero`, `contact-item`, `place__tel`. ```html

Kontakt a objednávka servisu

Zavolejte nebo vyplňte formulář. Ozveme se vám a domluvíme termín, kdy auto přivezete.

Telefon

601 339 195

Odtah auta

Auto nejede? Zavolejte na 601 339 195 a odtáhneme ho k nám. V Brně zdarma při opravě u nás.

``` ### Úvod právní stránky Užší úvod s textem ve sloupci 900 px. Třídy: `page-hero`, `page-hero--narrow`. ```html

Zpracování osobních údajů

Tady najdete, jak zacházíme s osobními údaji zákazníků a lidí, kteří nám pošlou objednávku přes web. S dotazem nám zavolejte na 601 339 195 nebo napište na info@aaservisbrno.cz.

``` ## Komponenty: Prvky ### Tlačítka Plné červené tlačítko je hlavní akce, obrysové doplňková, telefon je textový odkaz s ikonou. Třídy: `btn btn--primary`, `btn btn--line`, `hero__tel`. ```html
Objednat servisKontakt a objednávka601 339 195
``` ### Odrážky se zaškrtnutím Seznam s červenými zaškrtnutími. Třída: `ticks`. ```html
``` ## Komponenty: Sekce ### Výhody s fotkou Fotka s bílým štítkem a vedle seznam výhod s červenými ikonami. Třídy: `why-b`, `why-b__photo`, `why-b__badge`, `why`, `ic`. ```html
Mechanici připojují diagnostický notebook k autu

Proč jezdit k nám

Chceme, abyste přesně věděli, co se s autem děje a kolik oprava stojí. Bez překvapení při placení.

  • Cenu znáte předem

    Po prohlídce vám řekneme, co je potřeba opravit a kolik to bude stát. Bez vašeho souhlasu nic dalšího neděláme.

  • Diagnostika na místě

    Svítí kontrolka nebo auto dělá něco divného? Počítačovou diagnostikou najdeme příčinu a vysvětlíme vám, co s tím dělat.

  • Připravíme auto na STK

    Před technickou kontrolou nebo delší cestou auto projdeme a opravíme, co je potřeba, ať vás nic nepřekvapí.

  • Rozvody vyměníme včas

    Rozvody měníme podle doporučeného intervalu výrobce, dřív než prasknou a poškodí motor.

  • Odtah v Brně zdarma

    Auto nejede nebo s ním není bezpečné jet? Odtáhneme ho k nám do dílny. V Brně zdarma, když opravu uděláme u nás, mimo Brno se slevou 30 %.

``` ### Seznam služeb Nadpis s akcemi vlevo, vpravo očíslované karty služeb s ikonou a zaškrtnutými body. Třídy: `svc-a`, `svc-a__side`, `svc`, `svc__n`, `ticks`. ```html

Co pro vás uděláme

Od výměny oleje po opravu motoru. Osobní i užitková auta opravujeme v dílně na Cejlu.

Objednat servisVšechny služby
  1. 01

    Servis a údržba

    • výměna oleje a provozních kapalin
    • výměna filtrů
    • příprava na STK
    • kontrola před delší cestou
  2. 02

    Motor a rozvody

    • opravy a servis motorů
    • výměna rozvodů
    • opravy a výměna turbodmychadel
  3. 03

    Podvozek, brzdy a spojka

    • kompletní opravy podvozku
    • kompletní opravy brzd
    • výměna spojek a setrvačníků
  4. 04

    Diagnostika a elektro

    • počítačová diagnostika
    • hledání a odstranění závad
    • opravy elektroinstalace
  5. 05

    Klimatizace

    • servis klimatizace
    • doplnění chladiva
  6. 06

    Karoserie a lakování

    • opravy a úpravy karoserie
    • drobné karosářské práce
    • lakování
  7. 07

    Odtah

    • v Brně zdarma při opravě u nás
    • mimo Brno sleva 30 %
``` ### Kroky objednávky Tři červená kolečka spojená čárkovanou linkou. Třídy: `steps`, `steps__c`, `head--center`. ```html

Jak to u nás probíhá

  1. 1

    Zavolejte nebo napište

    Popište, co autu je nebo jaký servis potřebujete, a domluvíme termín.

  2. 2

    Prohlédneme auto a řekneme cenu

    Najdeme příčinu závady a řekneme vám, co je potřeba udělat a kolik to bude stát.

  3. 3

    Opravíme a zavoláme vám

    Jakmile bude auto hotové, ozveme se. Při předání vám vysvětlíme, co jsme opravili.

``` ### O nás Fotka a text vedle sebe, štítek, nadpis a obrysové tlačítko. Třídy: `split`, `kicker`. ```html
Světlá servisní hala s auty na zvedácích a mechaniky při práci

O nás

Autoservis na Cejlu

AA SERVIS Brno je autoservis v Brně na ulici Cejl 29/76. Opravujeme osobní i užitková auta, od pravidelného servisu a výměny oleje po opravy motoru, podvozku a karoserie.

Kontakt a objednávka
``` ### Jak k nám dojet Vektorová mapa s odkazem a vedle číslované kroky s tlačítkem navigace. Třídy: `area`, `area__map`, `area__info`, `kroky`, `kroky__n`, `kroky__pomoc`. ```html

Jak k nám dojet

CEJLRampa12AA SERVIS BrnoCejl 29/763 Otevřít v Google Maps

  1. Vjeďte z ulice Cejl k rampě

    Ostraze řekněte, že jedete do AA SERVIS Brno. V areálu je víc autoservisů, proto řekněte přesně tento název.

  2. Hned za rampou odbočte doleva

    Pokračujte podél budovy a objeďte ji podle červené trasy.

  3. Jsme na levé straně budovy

    Když budovu objedete, najdete nás po levé ruce.

Nevíte si rady? Zavolejte na 601 339 195, navedeme vás.

Navigovat k areálu
``` ### Závěrečná výzva Velký nadpis a čtyři akční řádky s číslem, poznámkou a šipkou. Třídy: `endcta`, `endcta__head`, `endcta__rows`, `endcta__n`, `endcta__arr`. ```html

Potřebujete opravit nebo zkontrolovat auto?

Zavolejte nebo pošlete objednávku a domluvíme termín, kdy auto přivezete.

``` ## Komponenty: Služby ### Výběr služby s fotkou Vlevo fotka služby se štítkem, vpravo seznam služeb s nadpisem, textem a odkazem. Třídy: `svc-pick`, `svc-pick__photo`, `svc-pick__cap`, `svc-pick__item`, `svc-pick__n`, `svc-pick__link`. ```html
Mechanik doplňuje provozní kapaliny do motoru Mechanik pracuje na motoru auta Mechanici opravují podvozek auta na zvedáku Počítačová diagnostika auta Větrací mřížky klimatizace na palubní desce auta Auto na zvedáku v dílně Osobní auto upevněné na korbě odtahového vozu

01 · Pravidelný servis a údržba

Mechanik doplňuje provozní kapaliny do motoru
01

Pravidelný servis a údržba

Pravidelná údržba podle plánu výrobce prodlužuje životnost motoru i ostatních dílů. Před STK nebo dlouhou cestou auto zkontrolujeme, ať vás nic nepřekvapí.

  • běžný servis a údržba vozidel
  • výměna oleje a provozních kapalin
  • výměna filtrů
  • kontrola a příprava vozidla na STK
  • sezónní kontrola auta před delší cestou
Objednat servis
Mechanik pracuje na motoru auta
02

Motor, rozvody a turbo

Motor ztrácí výkon, kouří nebo svítí kontrolka? Najdeme příčinu a závadu opravíme. Rozvody vyměníme podle doporučeného intervalu, dřív než prasknou.

  • opravy a servis motorů
  • výměna rozvodů
  • opravy a výměna turbodmychadel
Objednat opravu motoru
Mechanici opravují podvozek auta na zvedáku
03

Podvozek, brzdy a spojka

Klepe náprava, auto táhne do strany, brzdy pískají nebo spojka prokluzuje? Opravíme podvozek, brzdy i spojku, včetně výměny setrvačníku.

  • kompletní opravy podvozku
  • kompletní opravy brzdového systému
  • výměna spojek a setrvačníků
Objednat opravu podvozku
Počítačová diagnostika auta
04

Diagnostika a elektroinstalace

Rozsvítila se kontrolka nebo auto dělá něco divného? Počítačovou diagnostikou zjistíme, kde je problém, a řekneme vám, co s ním dělat.

  • počítačová diagnostika vozidla
  • diagnostika a odstranění závad
  • kontrola a opravy elektroinstalace vozidla
  • kontrola vozidla a řešení technických problémů
Objednat diagnostiku
Větrací mřížky klimatizace na palubní desce auta
05

Klimatizace

Klimatizace chladí slabě nebo nechladí vůbec? Zkontrolujeme ji a doplníme chladivo, aby v létě zase fungovala.

  • servis a doplnění klimatizace
Objednat servis klimatizace
Auto na zvedáku v dílně
06

Karoserie a lakování

Opravíme promáčklinu, odřený nárazník i rez a opravený díl přelakujeme.

  • opravy a úpravy karoserie
  • drobné karosářské práce a lakování
Objednat opravu karoserie
Osobní auto upevněné na korbě odtahového vozu
07

Odtah vozidla

Auto nejede nebo s ním není bezpečné jet? Odtáhneme ho do naší dílny. V Brně je odtah zdarma, když u nás pak necháte i opravu. Mimo Brno vám při opravě u nás dáme na odtah slevu 30 %.

  • odtah nepojízdného auta do naší dílny
  • v Brně zdarma, když opravu uděláme u nás
  • mimo Brno sleva 30 % z ceny odtahu při opravě u nás
Zavolat kvůli odtahu
``` ### Časté otázky Rozbalovací otázky s plusem na světle šedém podkladu. Třídy: `faq`, `faq__i`, `faq__a`. ```html

Časté otázky

Musím se objednat předem?

Je to lepší. Zavolejte na 601 339 195 nebo pošlete objednávku a domluvíme termín, kdy na vaše auto budeme mít čas.

Opravujete i užitková auta?

Ano, opravujeme osobní i užitková auta.

Dozvím se cenu předem?

Ano. Po prohlídce vám řekneme, co je potřeba opravit a kolik to bude stát. Bez vašeho souhlasu opravu nerozšiřujeme.

Kdy máte otevřeno?

Pondělí až pátek od 8:00 do 18:00. O víkendu máme zavřeno.

Odtáhnete mi nepojízdné auto?

Ano. V Brně je odtah zdarma, když opravu uděláme u nás. Mimo Brno vám při opravě u nás dáme slevu 30 % z ceny odtahu. Zavolejte na 601 339 195 a domluvíme se.

``` ## Komponenty: Kontakt ### Kontaktní údaje Adresa, otevírací doba a provozovatel s červenými ikonami. Třídy: `contact-list`, `contact-item`, `firm`. ```html

Adresa

AA SERVIS Brno
Cejl 29/76
602 00 Brno
Zobrazit na mapě

Jak vjet do areálu

Otevírací doba

Pondělí-pátek 8:00-18:00
Sobota a neděle zavřeno

Provozovatel

NAJKARA s.r.o.
U Červeného mlýna 64/1, 612 00 Brno
IČO: 30049261

``` ### Objednávkový formulář Formulář s grafitovým titulkem, poli, štítky služeb a červeným tlačítkem. Třídy: `form__title`, `field`, `field-row`, `chips`, `chip`, `legal`. ```html

Objednávka servisu

Co potřebujete vyberte jednu nebo víc služeb

Údaje použijeme jen k vyřízení objednávky. Podrobnosti najdete na stránce Zpracování osobních údajů.

``` ### Stavy formuláře Chyba pole, chyba formuláře, zaškrtnutý štítek a poděkování po odeslání. Třídy: `field__err`, `form__err`, `chip`, `dik`. ```html

Zadejte telefon, např. 777 123 456.

Objednávku se nepodařilo odeslat. Zkontrolujte údaje.

Děkujeme, objednávku máme

Ozveme se vám co nejdřív.

``` ## Komponenty: Ostatní ### Stránka 404 Tmavý blok s blikající kontrolkou motoru a krátkou zprávou. Třídy: `e404`, `e404__lamp`, `e404__glow`, `e404__lead`. ```html

Svítí kontrolka

Tahle stránka je zrovna v servisu

Odkaz je možná starý nebo je v adrese překlep. Diagnostika ukazuje, že všechno ostatní funguje.

``` ### Právní text Dlouhý text právní stránky ve sloupci 900 px pod úzkým úvodem. Třída: `sec`. ```html
Kdo vaše údaje zpracovává?

Správcem je NAJKARA s.r.o., U Červeného mlýna 64/1, 612 00 Brno, IČO: 30049261, provozovatel autoservisu AA SERVIS Brno na ulici Cejl 29/76 v Brně.

Jaké údaje o vás zpracováváme?
  • jméno a příjmení, telefon a e-mail,
  • z objednávky údaje o autě, požadované služby, termín a popis závady,
  • údaje potřebné k zakázce a k vystavení faktury.
Proč a na jakém základě?

Abychom mohli domluvit termín, opravit auto, vystavit fakturu a případně hájit svá práva. Právním základem je plnění smlouvy a jednání o ní podle čl. 6 odst. 1 písm. b) obecného nařízení o ochraně osobních údajů (nařízení EU 2016/679, GDPR), u účetních dokladů plnění právní povinnosti podle písm. c) a při ochraně našich práv oprávněný zájem podle písm. f).

Co se děje s objednávkou z webu?

Přijde nám e-mailem a použijeme ji jen k domluvě termínu a opravy. Po odeslání vám pošleme potvrzení na e-mail.

Komu údaje předáváme?

Jen zpracovatelům, se kterými máme uzavřenou smlouvu o zpracování osobních údajů, například externímu dodavateli správy webu a účetní kanceláři. Údaje neprodáváme a nepředáváme je k reklamním účelům.

Jak dlouho údaje uchováváme?

Objednávky, ze kterých nevznikla zakázka, mažeme nejpozději do jednoho roku. Údaje k zakázkám a fakturám uchováváme po dobu, kterou ukládá zákon, u účetních dokladů 10 let.

Používá web cookies?

Ne. Web nepoužívá sledovací ani reklamní cookies, analytické nástroje ani cizí měřicí skripty. Víc na stránce Cookies.

Jaká máte práva?
  • zjistit, jaké údaje o vás zpracováváme, a dostat jejich kopii,
  • nechat je opravit nebo doplnit,
  • požádat o jejich výmaz nebo omezení zpracování,
  • vznést námitku proti zpracování,
  • podat stížnost u Úřadu pro ochranu osobních údajů nebo se obrátit na soud.

Svá práva uplatníte telefonicky na 601 339 195, e-mailem na info@aaservisbrno.cz nebo osobně v servisu. Kontakty na úřad najdete na uoou.gov.cz.

``` ## Stránky - Úvod: https://www.aaservisbrno.cz/ - Služby: https://www.aaservisbrno.cz/sluzby - Kontakt: https://www.aaservisbrno.cz/kontakt - Zpracování osobních údajů: https://www.aaservisbrno.cz/osobni-udaje - Cookies: https://www.aaservisbrno.cz/cookies