Obrazovka se skládá odshora dolů a každá vrstva umí jednu věc. Když se drží pořadí, vypadají dvě obrazovky z různých aplikací jako jeden produkt — a to je jediný důvod, proč kit existuje.

1. IngotAppFrame — šířka obrazovky a okraje vedle ní, lišta přilepená k oknu. Jejímu contentClassName patří INGOT_FRAME_ROW, aby řádek lišty seděl na obsah pod ní.
2. IngotPageLayout — svislý rytmus bloků a tvar obsahu: full pro seznamy, wide pro detail, aside pro obrazovku s vlastním rejstříkem.
3. Bloky v závazném pořadí: drobečky, hlavička, IngotToolbar nad daty, IngotSection kolem každého celku.
4. Uvnitř bloku IngotColumns pro formulář a IngotDescriptionList pro fakta. Vlastní grid se v obrazovce nepíše — právě tam se aplikace rozcházejí.
5. IngotSkeleton místo prázdna, dokud data nejsou, a IngotActionBar jako poslední blok, aby Uložit bylo v dosahu i po devátém poli.

Referenční konzument skládá přesně takhle dvě obrazovky — seznam zakázek a detail — a hlídá to guard: ručně psaná tabulka, tlačítko nebo seznam v nich shodí build. Bez toho je „složeno jen z kitu“ tvrzení, ne kontrola.

Rám je jeden řádek nahoře: značka, sekce aplikace a účet. Obsah pod ním jde na plnou šířku. Boční menu administrace nemá — její obrazovky jsou široké tabulky a sloupec ukousnutý vlevo je sloupec, který v tabulce chybí.

• Sekce je tlačítko, ne odkaz — rozbaluje menu a samo nikam nevede. Odkazy jsou až položky uvnitř.
• Zákaznická část má tutéž lištu, jen jiný obsah: jinou značku bez odznaku, jiné sekce a případně odznak zkušebního provozu. Dva produkty, jeden rám.
• Lišta se nezalamuje — co se nevejde, zmizí za okrajem. Měřítko není pevný počet, ale nejužší podporovaná šířka: všechny sekce se svými popisky se musí vejít na 1280 px. Administrace jich dnes nese osm; když se lišta láme, zkracuj popisky nebo spoj dvě sekce.

Rám měří výšku v jednotce dvh, ne vh. Na iOS Safari je vh výška okna se zataženými lištami prohlížeče — s vysunutou spodní lištou tedy obrazovka končí pod dolní hranou a dialog si s sebou vezme i patičku s hlavní akcí. dvh sleduje lišty, jak přijíždějí a odjíždějí.

Bezpečné zóny drží kit sám: horní lišta odsazuje shora, akční lišta zdola a panel na straně, ze které vyjíždí. Zapnout je ale musí konzument — bez viewport-fit=cover vrací env() nulu a odsazení nikde nevznikne:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

• Bez toho řádku se nezmění nic — ani na telefonu, ani na desktopu. Není to volba vzhledu, je to zapnutí měření.
• S ním sahá pozadí horní lišty pod výřez a akční lišta se v režimu spuštěném z plochy nekryje s indikátorem domů. Řádek lišty i akce zůstanou nad nimi.
• Na Androidu a na desktopu jsou zóny nulové, takže tam je výsledek na pixel stejný jako předtím.

Sekce se rozbaluje do skupin odkazů — do sedmi položek jeden sloupec, nad sedm dva — a náhledového sloupce vpravo. Náhled popisuje položku, na které zrovna stojíš, myší i klávesnicí; dokud nestojíš na žádné, popisuje první.

• Náhled sleduje položku pod kurzorem i pod fokusem — klávesnice není druhá kategorie. Popis navíc čte odečítač přímo z odkazu, takže náhledový sloupec je jen vizuální kopie.
• Otevřená sekce se v liště značí plochou --surface-3, ne akcentem. Akcent znamená akci a rozbalené menu žádná akce není.
• Počet u položky je mono — je to číslo k porovnání s ostatními řádky.
• Sloupce rostou z obsahu, nemá je pevná mřížka. Skutečné sekce mají jednu až osm položek, takže natvrdo tři sloupce znamenají u většiny z nich dva prázdné — a prázdný sloupec čtenáři tvrdí, že mu něco chybí.
• Náhled sleduje čtenáře, nezůstává na první položce. Popis té, na které stojí, je odpověď na otázku, kterou si zrovna klade; popis první položky by u osmé odpovídal na otázku, kterou si položil před chvílí. Kresba sekce nad textem zůstává — je to znak sekce, ne ilustrace položky.
• Z klávesnice panel obsluhuje šipka: otevře sekci a prochází položky. Tab z otevřeného panelu nevypadne, Esc ho zavře a vrátí fokus na tlačítko sekce.

Pod účtem nejsou jen odkazy, ale i předvolby, které platí v celém produktu: motiv, jazyk, slovník a nápověda na stránkách.

• Předvolba se ukládá na účet, ne do prohlížeče — sleduje člověka i na druhý počítač.
• Vypnutá nápověda nesmí změnit rozvržení stránky. Skrývá se viditelnost, ne prostor; jinak se obrazovka pod čtenářem přeskládá a on přijde o místo, kam se díval.
• Slovník řídí odborné termíny v celém produktu, ne jen na jedné obrazovce.
• Pokročilé zobrazení surových dat není nikdy zapnuté výchozí.

Pod lištou jde vždy totéž pořadí: drobečky, hlavička stránky, a teprve pak obsah. Čísla, podle kterých se obrazovka čte na první pohled, stojí hned pod hlavičkou.

Vpravo v hlavičce stojí akce, NEBO čísla — ne obojí. Obrazovka, na které se nic nezakládá, tam má místo tlačítek shluk dvou tří čísel; je to tatáž komponenta jako pruh, jen hustší.

• Primární akce je právě jedna a stojí vpravo v hlavičce. Nikdy neplave nad obsahem.
• Čísla v hlavičce a pruh pod ní jsou dvě hustoty téže komponenty, ne dvě komponenty. Do hlavičky se vejdou dvě až tři čísla, do pruhu čtyři až šest — a obojí naráz je z obrazovky přehled o přehledu.
• Poslední drobeček není odkaz — je to místo, kde stojíš. Na kořenové stránce sekce se drobečky nekreslí vůbec.
• Obarvené číslo znamená, že je to problém, ne že je nejdůležitější. Obarvená polovina pruhu nesděluje nic.

Konfigurační obrazovky se skládají z opakujících se bloků. Nastavení se nedělá jedním dlouhým formulářem — kroky se dokončují v různé dny a různými lidmi, takže každý krok nese svůj stav natrvalo.

• Hotový krok je poznat tvarem, ne jen barvou — zelené záhlaví doprovází fajfka místo čísla.
• Patička kroku přidává další položku. Krok se nepotvrzuje tlačítkem: je hotový tehdy, když má, co potřebuje.
• Varianta s důsledkem se vybírá kartou s vysvětlující větou, ne položkou v rozbalovacím seznamu. Ta věta je půlka volby.
• Hotový krok se sbalí sám a nechá po sobě záhlaví se shrnutím („3 / 3 aktivní“). Nastavení o osmi krocích jinak odsune ten rozdělaný pod okraj obrazovky.

Pojmenovaná skupina záznamů je vlastní karta: hlavička říká, čí je a kolik toho drží, tabulka ukazuje obsah a patička do ní přidává další položku. Karta nemá vlastní odsazení, aby tabulka lícovala s jejím rámem.

• Každý blok má vlastní hlavičku a vlastní „přidat“ patičku. Jedno plovoucí tlačítko nad seznamem skupin by se muselo ptát, do které skupiny přidává.
• Patička je na --surface-2, takže se čte jako nástroj karty, ne jako další řádek tabulky.
• Přidání ze seznamu, ne z prázdného pole: vlastnosti jsou výčet, který někdo jinde založil. Volné pole by tady zakládalo překlepy jako nové vlastnosti.
• Klíč je kód, takže se sází jako kód — a nepřekládá se. Stav řádku nese tečka i slovo, ne jen barva.

Obrazovka se seznamem záznamů skládá bloky v pevném pořadí. Pořadí není volba — čtenář, který ho zná z jedné obrazovky, ho najde na všech.

1. IngotToolbar — hledání a filtry nad seznamem.
2. IngotTable — záznamy; výběr řádků otevírá hromadné akce.
3. IngotRowActions — akce jednoho řádku, vždy na jeho konci.
4. IngotEmptyState — když záznamy nejsou, řekne proč a co udělat.
5. IngotPagination — stránkování pod seznamem.

Editace záznamu jde do bočního panelu, aby zůstal vidět kontext. Potvrzení nevratného kroku patří do potvrzovacího dialogu s dopadem a výsledek ohlásí toast se zpětnou akcí. Modální okno je jen pro krok, který nesmí být přerušen.