Princípy

Osem pravidiel, z ktorých vychádza každá stránka.

Najprv telefón. Návrh vznikol na šírke 390 px a na počítač sa rozširuje od 1024 px. Pravidlo bez podmienky platí pre telefón, širšie obrazovky k nemu pridávajú.
Presne podľa návrhu. Stránka, ktorá má obrazovku v schválenom návrhu, je tou obrazovkou: 0 rozdielnych pixelov na telefóne aj na počítači, v Chromiu aj vo WebKite.
Len tokeny. Veľkosť písma, medzera a farba pochádzajú vždy z tokenov. Konkrétnu hodnotu v komponente kontrola štýlov odmietne.
Čitateľné písmo. Text, ktorý sa číta, má aspoň 16 px. 13 a 14 px majú len krátke doplnkové údaje a nič nemá menej ako 12 px.
Nič sa nezalamuje. Odkazy navigácie, záložky, čipy, tlačidlá a logo sú vždy na jednom riadku.
Jeden akcent. Červená patrí hlavnej akcii a zatvoreniu, med sezónnym udalostiam. Červený háček je na obrazovke najviac raz.
Pre palec. Každý ovládací prvok na telefóne a tablete má dosah aspoň 44 × 44 px.
Dva jazyky, dva režimy. Slovenčina bez predpony v adrese a angličtina pod /en. Svetlý a tmavý režim, predvolene podľa systému.

Logo

Červený rukopisný nápis Čertovská koliba, v ktorom háček nad Č tvoria čertove rohy. Vždy ako dodaný obrázok.

Na svetlom povrchu

Na bridlici päty

Výška

Hlavička telefónu: 22 px
Telefón užší ako 349 px: 6,3 % šírky okna
Hlavička počítača: 32 px
Päta: 28 px

Nikdy ako napísaný text a nikdy zalomené.
Nikdy v kruhu, na odznaku ani v inej farbe.
V hlavičke vedie na úvodnú stránku.

Farby

Farby sú z materiálov okolo koliby: bridlica strechy, lišajník Čertovej skaly, smrečina na kopci a med guľatiny.

Značka

Každá farba má svoju úlohu. Tmavý režim, večer pri ohnisku, jej dáva vlastnú hodnotu, uvedenú pri nej. Prepnite režim v hlavičke a vzorky sa zmenia.

Čertova červená

Hlavné tlačidlá, odkazy, červený háček a oznam o zatvorení. Nikdy veľké ozdobné plochy.

--color-primary Svetlý #B3141B; Tmavý #FF7A73

Smrečina

Pás povesti a tiché zvýraznenie.

--color-secondary Svetlý #24392D; Tmavý #24392D

Med

Sezónne udalosti a stav „zatvárame“ alebo „skrátene“.

--color-tertiary Svetlý #8C5A0E; Tmavý #E8B65A

Zelená stavu

Len stav „otvorené“.

--color-status-open Svetlý #1F6B41; Tmavý #7FD19E

Bodka udalosti

Bodka pri kačacích hodoch v navigácii počítača.

--color-event-dot Svetlý #C27803; Tmavý #C27803

Povrchy

Lišajník

Podklad stránky na telefóne, chladnejší ako krémová, aby guľatina na fotografiách pôsobila teplo.

--color-background Svetlý #ECEDE7; Tmavý #141916

Povrch

Hlavička a podklad obsahu na počítači.

--color-surface Svetlý #F7F7F3; Tmavý #1B211D

Biela

Karty, listy jedálneho lístka a formulár.

--color-surface-container-lowest Svetlý #FFFFFF; Tmavý #1B211D

Nižší kontajner

Polia formulára a jemné panely.

--color-surface-container-low Svetlý #F1F2EC; Tmavý #1B211D

Kontajner

Jemné tlačidlo a riadok pod myšou v tmavom režime.

--color-surface-container Svetlý #E4E6DF; Tmavý #232A25

Vyšší kontajner

Tónové tlačidlo a políčko súhlasu.

--color-surface-container-high Svetlý #D9DCD4; Tmavý #2C342E

Najvyšší kontajner

Tónové tlačidlo pod myšou.

--color-surface-container-highest Svetlý #D0D4CB; Tmavý #2C342E

Bridlica

Päta, spodná lišta telefónu a informačný oznam.

--color-inverse-surface Svetlý #22262A; Tmavý #0F1311

Text a čiary

Text

Všetok text, ikony a obrys zamerania.

--color-on-surface Svetlý #22262A; Tmavý #ECEBE4

Tichý text

Popisy, doplnkové údaje a nápovedy.

--color-on-surface-variant Svetlý #535A5E; Tmavý #B4BAB2

Obrys

Posuvník stránky na počítači.

--color-outline Svetlý #7D8589; Tmavý #B4BAB2

Jemná čiara

Oddeľovacie čiary, okraje polí a obrysového tlačidla.

--color-outline-variant Svetlý #C8CCC4; Tmavý #3A433C

Text na bridlici

Text v päte a na spodnej lište.

--color-inverse-on-surface Svetlý #F1F1EC; Tmavý #ECEBE4

Kontajnery a stavy

Svetlá červená

Oznam vopred a štítok špeciality.

--color-primary-container Svetlý #F9DEDC; Tmavý #2C342E

Svetlá smrečina

Poďakovanie po odoslaní formulára a les na kreslenej mape.

--color-secondary-container Svetlý #DCE7DE; Tmavý #DCE7DE

Svetlý med

Oznam a karta udalosti.

--color-tertiary-container Svetlý #F4DFB2; Tmavý #3B2F16

Svetlá zelená stavu

Rieka na kreslenej mape.

--color-status-open-container Svetlý #DDEFE3; Tmavý #1B2A20

Chyba

Text chyby pod poľom formulára.

--color-error Svetlý #B3261E; Tmavý #FF7A73

Kontrast

Každá dvojica textu a podkladu spĺňa WCAG 2.2 AA: text aspoň 4,5 : 1, veľký text, ikony, okraje ovládacích prvkov a zameranie aspoň 3 : 1. Pomery sú vypočítané z hodnôt návrhu.

on-surface na surface: 14,18 : 1
on-surface-variant na surface: 6,54 : 1
primary na surface: 6,45 : 1
on-primary na primary: 6,92 : 1
on-primary na primary-pressed: 9,42 : 1
on-secondary na secondary: 12,37 : 1
on-tertiary-container na tertiary-container: 10,47 : 1
status-open na status-open-container: 5,41 : 1
inverse-on-surface na inverse-surface: 13,44 : 1
error na surface-container-lowest: 6,54 : 1
outline na surface: 3,50 : 1
dark-on-surface na dark-surface: 13,71 : 1
dark-on-surface-variant na dark-surface: 8,27 : 1
dark-primary na dark-surface: 6,46 : 1
on-primary na dark-primary-button: 5,85 : 1
dark-on-tertiary-container na dark-tertiary-container: 10,00 : 1
dark-status-open na dark-status-open-container: 8,23 : 1

Písmo

Dve písma jednej rodiny: Alegreya, teplá knižná antikva, pre nadpisy, názvy jedál a povesť, a Alegreya Sans, jej humanistický bezpätkový súrodenec, pre všetko ostatné. Obe majú celú slovenskú diakritiku aj v tučnom reze.

Písma a súbory

Písma sú súbory webu v resources/fonts, rovnaké, s akými sa vykresľuje návrh, rozdelené na latin a latin-ext. Web nikdy neodkazuje na Google Fonts.

Alegreya

Nadpisy, názvy jedál a povesť. Rezy 400–900, licencia SIL Open Font License 1.1.

Súbory

alegreya-latin.woff2 43 476 B
alegreya-latin-ext.woff2 37 856 B
alegreya-italic-latin.woff2 44 456 B
alegreya-italic-latin-ext.woff2 38 316 B

Alegreya Sans

Text, navigácia, tlačidlá a formuláre. Rezy 400, 500, 700, licencia SIL Open Font License 1.1.

Súbory

alegreya-sans-400-latin.woff2 23 708 B
alegreya-sans-400-latin-ext.woff2 21 276 B
alegreya-sans-500-latin.woff2 23 928 B
alegreya-sans-500-latin-ext.woff2 21 500 B
alegreya-sans-700-latin.woff2 23 976 B
alegreya-sans-700-latin-ext.woff2 21 868 B
alegreya-sans-italic-400-latin.woff2 24 380 B
alegreya-sans-italic-400-latin-ext.woff2 21 900 B

Material Symbols Outlined

Ikony, orezané na tie, ktoré web používa. Rezy 400, licencia Apache License 2.0.

Súbory

material-symbols-outlined.woff2 7 628 B

Mierka

Pätnásť štýlov návrhu. V kóde sa štýl nastaví celý, písmom, veľkosťou, váhou, riadkovaním aj rozostupom: type('body-md'). Štýly pre počítač sa ukážu len na počítači.

Čertovská koliba

display Alegreya; 44 px; váha 800; riadkovanie 1,02; rozostup −0,01 em

Nadpis fotogalérie na telefóne.
Čertovská koliba

display-desktop Alegreya; 72 px; váha 800; riadkovanie 1; rozostup −0,015 em

Úvodné nadpisy na počítači: domov, jedálny lístok, kačacie hody.
Jedálny lístok

headline-lg Alegreya; 34 px; váha 700; riadkovanie 1,08

Nadpisy stránok na telefóne.
Jedálny lístok

headline-lg-desktop Alegreya; 52 px; váha 700; riadkovanie 1,05

Nadpisy stránok a sekcií na počítači.
Týždenná ponuka

headline-md Alegreya; 26 px; váha 700; riadkovanie 1,15

Nadpisy sekcií.
Otváracie hodiny

headline-sm Alegreya; 21 px; váha 700; riadkovanie 1,2

Nadpisy kariet a skupín.
Bryndzové halušky so slaninkou

dish-name Alegreya; 18 px; váha 600; riadkovanie 1,3

Názvy jedál a nápojov.
Aj čertovi je lepšie slúžiť, ako nášmu veľkomožnému.

story-body Alegreya; 19 px; váha 400; riadkovanie 1,7

Povesť a úvodné riadky stránok na počítači.
Chutné domáce jedlá v príjemnom prostredí.

body-lg Alegreya Sans; 18 px; váha 400; riadkovanie 1,55

Úvodné riadky stránok.
Chutné domáce jedlá v príjemnom prostredí.

body-md Alegreya Sans; 16 px; váha 400; riadkovanie 1,55

Čítaný text.
Fotografie jedál sú ilustračné.

body-sm Alegreya Sans; 14 px; váha 400; riadkovanie 1,45

Krátke doplnkové údaje.
Odoslať podnet

label-lg Alegreya Sans; 16 px; váha 700; riadkovanie 1,2

Tlačidlá a zvýraznené popisy.
Meno (povinné)

label-md Alegreya Sans; 14 px; váha 500; riadkovanie 1,2

Popisy polí, čipy a navigácia.
A: 1, 3, 7

label-sm Alegreya Sans; 13 px; váha 500; riadkovanie 1,2

Hmotnosti, alergény a štítky.
360 g · 9,90 € · 8:00 – 22:00

numeric Alegreya Sans; 15 px; váha 500; riadkovanie 1,3; tabuľkové číslice

Čísla, ktoré sa porovnávajú: hmotnosti, ceny, časy.

Ďalšie veľkosti

Veľkosti, ktoré obrazovky nastavujú mimo štýlov návrhu, každá ako vlastný token.

Nadpis domovskej stránky a ochrany údajov na telefóne: 32 px
Nadpis sekcie na telefóne: 24 px
Popisy a doplnkové riadky kariet na telefóne: 12 px
Text ochrany údajov na telefóne: 15 px
Stránky v menu telefónu: 28 px
Názov jedla nad jeho detailom na počítači: 20 px
Nadpis kačacích hodov na telefóne: 30 px
Počítadlo prehliadača fotografií: 17 px
Nadpis ponuky hodov na telefóne: 28 px
Nadpis ponuky hodov na počítači: 38 px

Pravidlá

Čítaný text má aspoň 16 px. 14 a 13 px majú len krátke doplnkové údaje: čísla alergénov, hmotnosti, poznámky, riadok spoločnosti a popisy fotografií.
Čísla, ktoré sa porovnávajú, majú tabuľkové číslice a v jedálnom lístku sú zarovnané.
Povesť sa číta v Alegreya 19 px s riadkovaním 1,7.
Veľké písmeno len na začiatku vety. Žiadne kapitálky ani riedené nadtitulky nad nadpismi.
Kým príde súbor písma, text sa ukáže v systémovom písme, nikdy nie je neviditeľný. Ikona, ktorá ešte neprišla, sa neukáže vôbec, aby nebolo vidieť jej meno.

Priestor

Každá medzera je násobok 4 px. Sekcie oddeľuje priestor, nie rámčeky.

Pomenované kroky

Kroky návrhu. 112 px (3xl) je aj výška hlavičky počítača, pod ktorou sa obsah začína.

xs 4 px
sm 8 px
md 16 px
lg 24 px
xl 40 px
2xl 64 px
3xl 112 px

Stupnica

V kóde sa medzera píše space(n), n-krát 4 px. Povolené sú len tieto kroky, krok medzi nimi build odmietne.

0; 0,5; 1; 1,5; 2; 2,5; 3; 3,5; 4; 5; 6; 7; 8; 9; 10; 12; 14; 16; 20; 24; 28; 32

Stĺpec

Okraj na telefóne: 20 px
Okraj od šírky 768 px: 48 px
Najdlhší riadok textu: 680 px
Najširší stĺpec: 1200 px

Rozloženie a mriežka

Jeden stĺpec na telefóne, dvanásť stĺpcov na počítači.

Zlomy

Šírky, od ktorých rozloženie pridáva. Pravidlo bez podmienky platí pre telefón, žiadne pravidlo neplatí len do nejakej šírky.

sm · od 640 px: Širší telefón.
md · od 768 px: Tablet: okraje stĺpca 48 px.
lg · od 1024 px: Počítač: dvojriadková hlavička, dvanásť stĺpcov a bez spodnej lišty.
xl · od 1280 px: Veľký počítač.
xxl · od 1536 px: Široká obrazovka.

Mriežka

Na počítači 12 stĺpcov s medzerou 24 px v stĺpci najviac 1200 px. Na telefóne jeden stĺpec.

Jedálny lístok: 3 stĺpce kategórie a týždenná ponuka, 9 stĺpcov jedlá vo dvoch stĺpcoch kariet.
Vaše podnety: 5 stĺpcov úvod a kontakt, 7 stĺpcov formulár.
Fotogaléria: štyri stĺpce fotografií s medzerou 12 px.

Hlavička a spodná lišta

Hlavička telefónu: jeden riadok 60 px, drží sa hore
Hlavička počítača: pás 36 px so stavom dňa a kontaktom nad riadkom 76 px s logom a stránkami
Spodná lišta telefónu: 64 px, tri akcie, najviac 390 px široká

Stránka siaha aj pod výrez iPhonu a text drží bezpečný okraj.

Tvary a tiene

Mäkké ako guľatina a riečny kameň, nikdy nafúknuté. Hĺbku dávajú odtiene povrchov, tiene sú jemné.

Zaoblenie

--radius-none 0 px

Fotografia cez celú šírku telefónu.

--radius-sm 6 px

Polia formulára a malé štítky.

--radius-md 10 px

Tlačidlá.

--radius-lg 16 px

Karty, fotografie a listy.

--radius-xl 24 px

Horné rohy listu, ktorý na telefóne prekrýva fotografiu.

--radius-full 9999 px

Čipy a stavové štítky.

Tiene

Tiene, ktoré obrazovky kreslia, od najjemnejšieho.

--shadow-header

Hlavička počítača.

--shadow-bar

Lepiaci pás kategórií.

--shadow-sm

Karty, čipy a tlačidlá.

--shadow-soft

Karta formulára na telefóne.

--shadow-base

Karty kačacích hodov a cesty.

--shadow-md

Karta formulára na počítači a zdvihnuté karty.

--shadow-lg

Kreslená mapa, cesta a hlavné tlačidlo v menu telefónu.

--shadow-xl

Veľké úvodné fotografie.

--shadow-popover

Detail jedla na počítači.

--shadow-2xl

Okná nad stránkou a spodná lišta.

--shadow-inner

Vtlačený kruh povesti.

--shadow-header: 0 1px 8px rgb(0 0 0 / 4%)
--shadow-bar: 0 2px 8px 0 rgb(0 0 0 / 3%)
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%)
--shadow-soft: 0 4px 20px rgb(26 28 25 / 5%)
--shadow-base: 0 1px 3px 0 rgb(0 0 0 / 10%) 0 1px 2px -1px rgb(0 0 0 / 10%)
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%) 0 2px 4px -2px rgb(0 0 0 / 10%)
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%) 0 4px 6px -4px rgb(0 0 0 / 10%)
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%) 0 8px 10px -6px rgb(0 0 0 / 10%)
--shadow-popover: 0 20px 40px -15px rgb(0 0 0 / 22%)
--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 25%)
--shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 5%)

Komponenty a pravidlá

Druhá časť manuálu: tlačidlá, karty, čipy, formuláre, ikony, fotografie, vzor, pohyb, prístupnosť a texty.

Dizajn manuál: komponenty Druhá časť manuálu: tlačidlá, karty, čipy, formuláre, ikony a fotografie a pravidlá pohybu, prístupnosti a textov. Základy sú v prvej časti.