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": "roboto-flex",
    "fontFamilyHeadings": "roboto-flex",
    "fontFamilyMonospace": "roboto-mono",
    "fontWeightMain": 400,
    "fontWeightHeadings": 700,
    "fontWeightMonospace": 400,
    "fontAxesMain": "\"opsz\" 14, \"GRAD\" 0, \"wdth\" 100, \"slnt\" 0, \"XOPQ\" 96, \"YOPQ\" 79, \"XTRA\" 468, \"YTUC\" 712, \"YTLC\" 514, \"YTAS\" 750, \"YTDE\" -203, \"YTFI\" 738",
    "fontAxesHeadings": "\"opsz\" 14, \"GRAD\" 50, \"wdth\" 50, \"slnt\" 0, \"XOPQ\" 90, \"YOPQ\" 79, \"XTRA\" 540, \"YTUC\" 650, \"YTLC\" 520, \"YTAS\" 700, \"YTDE\" -203, \"YTFI\" 738",
    "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

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

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 inter-tight inter lexend-deca mona-sans nunito-sans overpass plus-jakarta-sans quicksand roboto-flex rubik space-grotesk

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 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

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/