Seed

Seed (semínko) uchovává jen několik základních parametrů, které určují vzhled tématu. Z nich je možné generovat široké spektrum témat, což umožňuje rychlou přizpůsobitelnost bez potřeby složitých úprav. Tento přístup zajišťuje flexibilitu při práci na různých projektech a zároveň udržuje konzistenci napříč všemi variacemi témat.

Definice v JSON

{
  "brandPrimary": "blue",
  "brandSecondary": "orange",
  "statusSuccess": "green",
  "statusWarning": "amber",
  "statusError": "red",
  "statusInformation": "lightblue",
  "surfaceBrand": "primary",
  "surfaceIntensity": "2",
  "contrastLevel": "aa",
  "contrastAlgorithm": "wcag21",
  "fontFamilyMain": "zalando-sans",
  "fontFamilyHeadings": "zalando-sans",
  "fontFamilyMonospace": "roboto-mono",
  "fontWeightMain": 400,
  "fontWeightHeadings": 600,
  "fontWeightMonospace": 400,
  "fontAxesMain": "\"wdth\" 94",
  "fontAxesHeadings": "\"wdth\" 104",
  "fontAxesMonospace": "initial",
  "fontFeaturesMain": "initial",
  "fontFeaturesHeadings": "initial",
  "fontFeaturesMonospace": "initial",
  "fontsPath": "../fonts/",
  "fontBaseSize": 13,
  "scaleRatio": 1.2
}

Note

V Motivu lze parametry měnit interaktivně v bočním panelu, v Motivu CLI jsou parametry upravovány přímo v JSON souboru.

Brand

brandPrimary

Určuje dominantní barvu aplikace, která se používá pro klíčové vizuální prvky, jako jsou tlačítka, odkazy, checkboxy a další interaktivní komponenty. Tato barva je základem vizuální identity aplikace a pomáhá vytvořit jednotný a snadno rozpoznatelný design, který podporuje značku a usnadňuje orientaci pro uživatele.

Hodnoty: pink fuchsia deeppurple navy blue lightblue aqua teal green lightgreen lime yellow amber orange deeporange red brown gray silver black nebo HEX barva #rrggbb

brandSecondary

Doplňuje primární barvu a je ideální pro použití v navigačním menu, záložkách a dalších podpůrných prvcích. Tato barva může aplikaci jednoduše zpestřit nebo navazovat na logo projektu, které může mít více barev. Projektu dodává vizuální rozmanitost a oživení.

Hodnoty: pink fuchsia deeppurple navy blue lightblue aqua teal green lightgreen lime yellow amber orange deeporange red brown gray silver black nebo HEX barva #rrggbb

Status

statusSuccess

Používá se pro označení úspěšných stavů, jako je potvrzení akcí nebo oznámení o dokončení. Barvy v této kategorii navozují pocit klidu a spolehlivosti.

Hodnoty: teal green lightgreen lime

statusWarning

Upozorňuje na potenciální problémy nebo varování. Barvy v této kategorii přitahují pozornost a signalizují opatrnost.

Hodnoty: yellow amber orange deeporange

statusError

Označuje chyby a kritické stavy. Tyto barvy jasně signalizují problémy, které vyžadují nápravu.

Hodnoty: yellow amber orange deeporange red

statusInformation

Slouží k zobrazení doplňujících informací nebo neutrálních oznámení.

Hodnoty: deeppurple navy blue lightblue aqua

Surfaces

surfaceBrand

Určuje, zda bude jako základní barva neutrálních povrchů použita primární nebo sekundární brand barva, podle toho, která lépe odpovídá preferovanému vzhledu.

Hodnoty: primary secondary

surfaceIntensity

Nastavuje úroveň sytosti neutrálních povrchů od žádné (0) po nejvýraznější (3), což umožňuje přizpůsobit celkový vizuální dojem aplikace.

Hodnoty: 0 1 2 3

Contrast

contrastLevel

Určuje požadovanou úroveň kontrastu mezi textem a pozadím. Hodnota aa odpovídá standardní úrovni doporučené specifikací WCAG 2.1, zatímco a představuje nižší úroveň kontrastu vhodnou pro projekty mimo veřejnost.

Hodnoty: aa, a

contrastAlgorithm

Určuje algoritmus pro výpočet kontrastu. wcag21 vychází ze specifikace WCAG 2.1, zatímco apca (Accessible Perceptual Contrast Algorithm) nabízí modernější přístup, který lépe odpovídá lidskému vnímání kontrastu.

Hodnoty: wcag21, apca

Caution

Tato volba je v Motivu skryta, ale v Motivo CLI ji lze upravit. Algoritmus APCA získá na významu s příchodem specifikace WCAG 3.0. Doporučujeme ponechat wcag21, ale pro interní projekty můžete bez obav využít i apca.

Main font

fontFamilyMain

Slouží pro veškerý běžný obsah aplikace, kde je klíčová čitelnost a jednoduchost. Neměl by být příliš dekorativní, aby text zůstal snadno čitelný i při delším používání.

Hodnoty: comfortaa figtree hubot-sans ia-writer-quattro ibm-plex-sans inter-tight inter lexend-deca mona-sans nunito-sans overpass plus-jakarta-sans quicksand roboto-flex rubik space-grotesk zalando-sans

fontWeightMain

Určuje tloušťku písma. Pro běžný text je vhodné ponechat výchozí 400, popř. vyzkoušet rozmezí 350 – 450.

Hodnoty: Dle možností fontu 100 – 1000 (pouze celá čísla).

fontAxesMain

Umožňuje nastavit osy variabilního fontu podle dostupných možností. Pokud není nic specifikováno, použije se výchozí nastavení fontu.

Hodnoty: Podle podporovaných os vybraného fontu. Doporučujeme je konfigurovat v Motivu.

fontFeaturesMain

Umožňuje aktivovat OpenType funkce fontu podle dostupných možností. Pokud není nic specifikováno, použije se výchozí nastavení fontu.

Hodnoty: Podle podporovaných funkcí vybraného fontu. Doporučujeme je konfigurovat v Motivu.

Headings

fontFamilyHeadings

Zvýrazňuje nadpisy větší velikostí, což umožňuje použít výraznější a vizuálně zajímavější typografii. Lze zvolit odlišný font od hlavního, nebo ponechat stejný a upravit jeho parametry pro dynamičtější vzhled.

Hodnoty: comfortaa departure-mono figtree hubot-sans ia-writer-mono ia-writer-quattro ibm-plex-sans inter-tight inter kode-mono lexend-deca mona-sans monaspace-krypton nunito-sans overpass-mono overpass plus-jakarta-sans quicksand roboto-flex roboto-mono rubik space-grotesk zalando-sans

fontWeightHeadings

Určuje tloušťku písma. Pro nadpisy je vhodné využít hodnoty 500 – 1000, výchozí je 700.

Hodnoty: Dle možností fontu 100 – 1000 (pouze celá čísla).

fontAxesHeadings

Umožňuje nastavit osy variabilního fontu podle dostupných možností. Pokud není nic specifikováno, použije se výchozí nastavení fontu.

Hodnoty: Podle podporovaných os vybraného fontu. Doporučujeme je konfigurovat v Motivu.

fontFeaturesHeadings

Umožňuje aktivovat OpenType funkce fontu podle dostupných možností. Pokud není nic specifikováno, použije se výchozí nastavení fontu.

Hodnoty: Podle podporovaných funkcí vybraného fontu. Doporučujeme je konfigurovat v Motivu.

Monospace

fontFamilyMonospace

Používá se pro zobrazení kódu nebo tam, kde je důležitá přesná zarovnanost znaků. Hodí se také pro technicky laděný design, kde může sloužit nejen pro kód, ale i pro nadpisy nebo specifické prvky rozhraní.

Hodnoty: departure-mono ia-writer-mono kode-mono monaspace-krypton overpass-mono roboto-mono

fontWeightMonospace

Určuje tloušťku písma. Pro běžný text je vhodné ponechat výchozí 400, popř. vyzkoušet rozmezí 350 – 450.

Hodnoty: Dle možností fontu 100 – 1000 (pouze celá čísla).

fontAxesMonospace

Umožňuje nastavit osy variabilního fontu podle dostupných možností. Pokud není nic specifikováno, použije se výchozí nastavení fontu.

Hodnoty: Podle podporovaných os vybraného fontu. Doporučujeme je konfigurovat v Motivu.

fontFeaturesMonospace

Umožňuje aktivovat OpenType funkce fontu podle dostupných možností. Pokud není nic specifikováno, použije se výchozí nastavení fontu.

Hodnoty: Podle podporovaných funkcí vybraného fontu. Doporučujeme je konfigurovat v Motivu.

Scale

fontBaseSize

Výchozí velikost písma, od které se odvíjejí ostatní stupně.

Hodnoty: 13 - 16 (pouze celá čísla)

scaleRatio

Násobek, podle kterého se vypočítávají velikosti dalších stupňů

Hodnoty: 1.1 - 1.6 (pouze násobky 0.05)

fontsPath

Soubory s fonty musí být odkazovány pomocí cesty relativní k CSS souboru tématu Spectro, aby bylo zajištěno jejich správné načtení.

Hodnota: ../zde/lezi/fonty/