# Kreativy, jako by je navrhl váš vlastní tým

> Jeden designový profil pro každý pracovní prostor, načtený ze stylů vašeho webu, z design systému nebo souboru ve Figmě a z referenčních obrázků. Podle něj se vykresluje každý obrázek, slide, scéna videa, landing page i článek na hostovaném blogu.

Demander nemá žádnou vlastní šablonu. Každý pracovní prostor má jeden designový profil (barvy podle rolí, fonty pro nadpisy a text i s jejich soubory, zaoblení rohů, styl tlačítek, hustotu, zarovnání, logo a obrázky) a každé vykreslování pracuje jen s tímto profilem.

## Odkud profil bere data, od nejsilnějšího zdroje

Slabší zdroj doplní jen to, co silnější nechal prázdné, a stránka Značka ukazuje, ze kterého zdroje pochází každé pole.

| Zdroj | Co z něj Demander čte |
| --- | --- |
| Vaše ruční úpravy | Cokoli nastavíte na stránce Značka, má přednost před všemi zdroji, a každé pole můžete vrátit na hodnotu ze zdroje |
| Design systém | Design tokeny W3C a JSON z Tokens Studio; soubor nebo URL s CSS custom properties (globals.css, HSL hodnoty ze shadcn, Tailwind v4 @theme); publikované styly z Figmy a u tarifů Figma Enterprise i lokální proměnné; nahrané fonty (TTF, OTF, WOFF, WOFF2) a loga (SVG, PNG, JPEG, WebP) |
| Referenční obrázky | Vaše vlastní reklamy, brand manuály a snímky obrazovky (PNG, JPEG nebo WebP, každý do 10 MB, nejvýš 24 na pracovní prostor). Paleta se změří z pixelů a přiřadí se rolím. Se zapnutou AI vyčte vizuální model ze čtyř nejnovějších obrázků zaoblení rohů, styl tlačítek, hustotu, zarovnání, velikost písmen v nadpisech, charakter obrazového materiálu a písma; název fontu nikdy neodhaduje |
| Web | Načítá se při každém procházení produktu a pokaždé, když kliknete na Znovu načíst web: styly domovské stránky, vyhodnocené tak, jak je uplatňuje prohlížeč |
| Výchozí nastavení | Jednoduché a neutrální: bílá, téměř černá, ostré rohy, systémové bezpatkové písmo, žádné ozdoby |

## Co čte z vašeho webu

1. **Vzorky stránky.** Domovská stránka se zredukuje na vzorky: tělo stránky, nadpisy h1 až h3, nejvýraznější tlačítka, karty, sekce, úvodní sekci (hero), záhlaví a odkaz v obsahu, každý se svými třídami a nadřazenými prvky.
2. **Soubory stylů.** Styly ze stejného webu, z hostingu webových builderů a z Google Fonts, včetně importů do hloubky dvou úrovní: nejvýš 12 souborů, každý do 1,5 MB a celkem do 4 MB, do 25 sekund, vše přes stejného zabezpečeného klienta, jakého používá crawler.
3. **Zjednodušená kaskáda.** Pro tyto vzorky se vyhodnotí specificita, dědičnost, proměnné s náhradními hodnotami, calc(), vrstvy, media queries a vnořování. Pravidla pro hover, focus a tmavý režim se nepočítají.
4. **Barvy podle rolí.** Z pojmenovaných custom properties, z pozadí a textu primárního tlačítka, z barev textu a pozadí stránky, barvy odkazů, theme-color a z toho, jak často se která barva objevuje. Každá role projde kontrolou kontrastu: text 4,5:1, tlumený text 3:1, text na primární barvě 3:1.
5. **Písmo, tvary a rozvržení.** Rodiny písma pro nadpisy a text s řezem, velikostí písmen, prostrkáním, výškou řádku a typografickou škálou; soubory fontů z @font-face nebo Google Fonts. Zaoblení a styl tlačítek (pozná i tlačítka ve tvaru pilulky), zaoblení a okraje karet, linky mezi sekcemi, stíny, vnitřní odsazení sekcí a zarovnání úvodní sekce.
6. **Logo a obrázky.** Inline SVG nebo obrázek v záhlaví, přednost má SVG. Obrázek pro Open Graph, obrázky z úvodní sekce a z popisu funkcí, každý zařazený jako fotografie, snímek obrazovky nebo ilustrace.

## Pravidla, která dodržuje každá kreativa

- **Barvy podle rolí.** Pozadí, plocha, text, tlumený text, primární barva, text na primární barvě, akcent a okraj. Každá barva textu má vůči ploše za sebou kontrast aspoň 4,5:1 a černá nebo bílá vyhoví vždy.
- **Tvary, jaké používá vaše značka.** Značky s ostrými rohy zůstanou hranaté a tlačítka ve tvaru pilulky se objeví jen u značek, které je samy používají. Výzva k akci má styl vašich tlačítek a v obrázcích pro placenou reklamu na sociálních sítích se vynechá tam, kde platforma vykresluje vlastní tlačítko.
- **Ozdoby, jen pokud je používáte.** Oddělovače a stíny se objeví jen tehdy, když je používá váš web. Žádné skvrny, kruhy, barevné pruhy ani ozdobné uvozovky a žádná slova navíc, která jste nenapsali.
- **Skutečné měření textu.** Text se měří podle šířek glyfů fontu, kterým se vykresluje, a zalamuje se mezi slovy (u čínštiny a japonštiny mezi znaky). Než by se rozdělilo slovo, písmo se zmenší, a ke zkrácení textu dojde až v krajním případě.
- **Jen vaše obrázky.** Pouze logo a obrázky z vašeho profilu nebo z toho, co jste nahráli. Z log ve formátu SVG se před vykreslením odstraní skripty a externí odkazy a tmavé logo na tmavé ploše dostane podklad.

## Osm rozvržení

| Rozvržení | Co dělá |
| --- | --- |
| Editoriál | Velké písmo a velkorysé okraje |
| Plakát | Jedna věta přes celou plochu |
| Produkt | Dominuje váš snímek obrazovky nebo fotografie |
| Dělené | Obrázek a text, nebo dvě strany srovnání ve dvou barvách značky |
| Číslo | Jedno velké číslo |
| Reference | Citace v obyčejném písmu, bez ozdobných uvozovek |
| Seznam | Číslované nebo prosté body |
| Logo a minimum | Vaše logo a skoro nic dalšího |

Demander volí rozvržení podle obsahu (statistika dostane rozvržení Číslo, citace rozvržení Reference) a rysů vaší značky, v sadě kreativ jedné kampaně je obměňuje a nikdy nesáhne po takovém, které potřebuje obrázek nebo logo, jež nemáte. Slidy dokumentů a scény videí vědí, jestli jsou titulní, obsahovou, nebo závěrečnou stranou.

## Fonty

K vykreslení je potřeba samotný soubor fontu. Demander ho vezme z vašich nahraných souborů (WOFF a WOFF2 dekóduje sám), z pravidel @font-face na vašem webu nebo z Google Fonts podle názvu rodiny písma. Pokud se nedá načíst nic, použije systémový font stejného typu (Liberation, DejaVu nebo Noto) a stránka Značka na to upozorní. Fonty slouží jen k vykreslení vašich vlastních kreativ.

Každá změna profilu zvýší číslo jeho verze a verze je součástí klíče cache u každého vykreslení. Nová barva nebo font tak vaše kreativy překreslí, aniž by o to kdokoli musel žádat.

## Stránka Značka

Ukazuje výsledný profil se zdrojem každého pole, barevné role s kontrolou kontrastu, živé ukázky vašich fontů, rysy tvarů a rozvržení, logo na pozadí i na primární barvě, vaše referenční obrázky s naměřenými paletami a pás vašich kreativ, který se při změně profilu znovu načte. Najdete tu také import design systému, nahrávání fontů a loga a tlačítko Znovu načíst web.

Jednotlivá kreativa se od značky přesto může lišit: editor v [kreativním studiu](https://demander.to/cs/features/creative-studio/) nastaví úpravy pro konkrétní kreativu, kartu, slide nebo scénu a každou z nich jde vrátit na nastavení značky.

## Otázky

**Potřebuji design systém nebo soubor ve Figmě?**

Ne. Váš web se načte při prvním procházení a pro začátek stačí. Soubor s tokeny, soubor ve Figmě nebo referenční obrázky profil zpřesní a mají přednost před tím, co poskytl web.

**Co když mají barvy našeho webu slabý kontrast?**

Každá barevná role se kontroluje už při načtení a každá barva textu v kreativě musí vůči své ploše dosáhnout kontrastu 4,5:1. Když barva značky nevyhoví, vybere vykreslování jinou z vašich barev, která projde, případně bílou nebo téměř černou.

**Používají landing pages a hostovaný blog stejný design?**

Ano. Landing pages se vykreslují z profilu s vašimi fonty, barvami, rohy, tlačítky a logem a hostovaný blog používá fonty a barvy vaší značky. Když v profilu chybí, vezme barvy nalezené na vašem webu.

**Co načítá import z Figmy?**

Publikované styly a jejich hodnoty přes osobní přístupový token a lokální proměnné, pokud máte ve Figmě tarif Enterprise. Když Figma požadavek na proměnné odmítne, stránka Značka to uvede a styly se použijí i tak.

## Související

- [Kreativní studio](https://demander.to/cs/features/creative-studio/)
- [Blog a landing pages](https://demander.to/cs/features/blog-and-landing-pages/)
- [Texty jako od člověka](https://demander.to/cs/features/human-copy/)
- [Analýza produktu](https://demander.to/cs/features/product-intelligence/)
- [Náhled plánu zdarma](https://demander.to/cs/snapshot/)

---
Zdroj: https://demander.to/cs/features/brand-design/ · Demander · zkontrolováno 2026-10-02