Rozcestník kitu — každé primitivum s jednou větou a stavem, na vlastní stránku se prokliká odsud i z menu.
Každá komponenta má vlastní stránku: živou ukázku, kdy ji použít a kdy ne, vlastnosti pro vývojáře, přístupnost a tokeny, na kterých stojí. Vedle názvu stojí dva štítky — stav a verze — a oba jsou slib, ne dekorace.
.swatchesAttentionPanelbetav1.1Tmavý panel „co po tobě obrazovka chce teď“ v hlavě přehledu. Jediné místo, kde je karta tmavší než pozadí — signál, který drží, jen dokud je vzácný..attentionBadgestabilnív1.0Stavový štítek: stav entity jedním slovem, mono a verzálkami. Pojmenovává stav, ne akci..badgeBreadcrumbsstabilnív1.1Drobečky nad hlavičkou stránky — kde jsem a jak zpátky. V aplikaci bez bočního menu nesou celou orientaci do hloubky..crumbsButtonstabilnív1.2Tlačítko se sedmi variantami, a s as="a" i odkaz, který tak vypadá. Varianta nese význam akce, ne barvu — a v tmavém režimu drží kontrast, který opsané třídy ztrácejí..btnCalloutbetav1.0Podbarvený blok s poznámkou, varováním nebo důsledkem u obsahu, ke kterému patří. Tón určuje i to, jestli ho odečítač ohlásí..calloutCardstabilnív1.0Plocha, na které obsah stojí — ne rámeček, který se kreslí kolem něj. Umí se zvednout při najetí a jednou za obrazovku se obrátit do tmavé..cardCheckboxbetav1.2Zaškrtávátko s popiskem — filtr, souhlas, přepínač chování. Popisek je součást primitiva: klik na text zaškrtává a jméno pro odečítač jede zadarmo..checkCodestabilnív1.1Kód v textu, nebo výpis přes celou šířku. Výpis se umí posunout do strany — což je ta jediná věc, na které ruční výpisy padají..codeConfirmstabilnív1.1Potvrzovací dialog nad IngotModal. Spočítaný dopad smí přes useConfirmVeto potvrzení odvolat..confirmDisclosurebetav1.1Sbalitelná sekce postranního panelu — popisek, počet a obsah, který se schová. Stav drží prohlížeč, ne React..disclosureDrawerbetav1.4Boční panel pro editaci se stejnou a11y laťkou jako dialog: focus trap, ESC, scroll lock a návrat fokusu na spouštěč..drawerEmptyStatestabilnív1.0Prázdný stav: jedna věta, co tu není, volitelně proč a volitelně afordance, jak to změnit..emptyEyebrowbetav1.0Malý mono popisek verzálkami nad věcí, kterou pojmenovává — skupina v menu, metrika, krok. Jeden zápis pro idiom, který se dřív kreslil deseti způsoby..eyebrowFieldstabilnív1.2Popsané textové pole: popisek, nápověda, chyba, jednotka. Pro ruční formuláře, které pole nemají odkud odvodit..fieldFieldInputstabilnív2.1Jedno pole podle svého kind. Nezná žádnou doménu — množinu voleb i překlady dodává volající..inputFormstabilnív2.1Deklarativní formulář: dostane pole a hodnoty, vrací změny přes onChange. Tvar formuláře jsou data, ne JSX..formIconstabilnív1.4Ikony rozhraní — jedna sada, jedna technika. Kreslí se čárou v mřížce 24×24, barví se textem rodiče a škáluje se jedním číslem.[data-icon]Liststabilnív1.1Výčet: odrážky, čísla, nebo holý seznam bez značek. Značka i odsazení patří k sobě a rozhoduje se o nich na jednom místě..listMarketingComparisonbetav1.1Řádkové srovnání „dnes / s platformou“. Dvojice patří k jednomu úkolu, takže ji nejde napsat rozpojenou..cmpMarketingCtabetav1.0Závěrečná výzva — tmavý blok se dvěma akcemi. Hlavní akce je akcentová a je jediným barevným prvkem bloku..ctaMarketingFaqbetav1.0Časté dotazy — otázka je ovládací prvek hlásící svůj stav, odpověď pojmenovaná oblast. Odpověď je povinná..faq-itemMarketingPricingbetav1.0Karty plánů — cena, výčet vlastností a akce na patě. Zvýrazněná karta má obrys a odznak, ne akcentový rámeček..pricecardMarketingSectionHeadbetav1.1Hlavička marketingové sekce — nadpis vlevo, uvozující odstavec vpravo. Akcent nese jediný prvek: eyebrow..section-headMarketingSegmentsbetav1.0Karty „pro koho“ — titulek, věta a štítky provozu. Žádný štítek nenese akcent; ten patří hlavičce sekce..seg-cardMarketingStepsbetav1.0Kroky „jak to funguje“ — karty s pořadovým číslem a šipkou k dalšímu kroku. Číslo se počítá z pořadí, nepíše se..stepMarketingTribetav1.0Trojice featur pod hlavičkou sekce — ikona v akcentovém rámečku, titulek a věta. Jeden rám, panely oddělené vlasovou linkou..triMegaMenubetav2.7Rozbalené menu sekce z horní lišty — skupiny odkazů v jednom nebo dvou sloupcích a náhledový sloupec, který popisuje položku pod kurzorem i pod fokusem..megamenuMenubetav1.0Seznam akcí v popoveru: role menu, šipky, Home/End, psaní podle prvních písmen, oddělovače a tón danger..menuMetricsbetav1.4Čísla, podle kterých se obrazovka čte na první pohled. Dvě hustoty jedné komponenty: pruh pod hlavičkou a kompaktní shluk do hlavičky..metricstripModalstabilnív1.4Skořápka dialogu s a11y laťkou: focus trap, ESC, scroll lock, aria-modal a návrat fokusu na spouštěč..modalOpIconstabilnív1.2Ikona výrobní operace. Kresbu bere z knihovny operací, barvu z kategorie procesu a klíč z databáze — sama si nevymýšlí nic.[data-op-icon]OptionCardbetav1.0Výběr jedné varianty, kde volba potřebuje vysvětlení. Klikatelná je celá karta, vybraná varianta je poznat obrysem v akcentu..optioncardPageHeaderstabilnív1.0Hlavička obrazovky: nadpis, věta pod ním, akce vpravo. Typografický spec má jedno místo a nenese s sebou router..pageheadPageHintbetav1.2Nápověda stránky se žárovkou: klik jednorázově zvýrazní prvky, kterých se nápověda týká..pagehintPageLayoutbetav1.0Rytmus obsahu jedné stránky — mezera mezi bloky, šířka čtení a volitelný postranní rejstřík. Co si dřív každá obrazovka skládala sama..pagePaginationbetav1.0Stránkování pod tabulkou. Řízené volajícím — s tabulkou se nepře o to, kdo drží stav stránky..pagerPopoverbetav1.1Panel ukotvený k prvku, který ho otevřel: pozice, klik mimo, Escape a návrat fokusu na jednom místě..popoverProviderbetav1.1Slovník několika popisků, které kit říká sám — zpět, žárovka nápovědy, tajné pole. Bez providera anglicky; lang="cs" přepne celou sadu..providerRadioGroupbetav1.0Jedna volba z několika, všechny vidět naráz. Nativní skupina, takže šipky i odesílání formuláře jedou samy..radiogroupRowActionsstabilnív1.2Akce jednoho řádku tabulky — ikonová tlačítka 28×28 px na konci řádku, bez rámečku a bez viditelného popisku..rowactionsSearchInputbetav1.3Hledací pole nad seznamem — první prvek filtr baru. Filtruje, nevyhledává: zužuje seznam každým úhozem, žádné tlačítko Hledat..searchSectionstabilnív1.0Sekce obrazovky: nadpis správné úrovně a kotva, která sedí na sekci, ne na nadpisu..sectionSegmentedbetav1.0Přepínač lišty — dvě až tři krátké volby vedle sebe, vybraná vystoupí na plochu. Volba se projeví hned..segSelectbetav1.2Výběr jedné hodnoty z krátké množiny — filtr nad seznamem, přepínač varianty v nastavení. Nativní select: klávesnice, odečítač i mobil zadarmo..selectSideNavstabilnív1.3Pojmenovaná skupina odkazů, jeden z nich aktivní. Popisek navigace a aria-current drží primitivum, ne domluva..sidenavStepCardbetav1.3Karta jednoho kroku vícekrokového nastavení. Nese svůj stav natrvalo — hotový krok zůstane hotový a je vidět i po návratu na obrazovku..stepcardSwitchbetav1.0Nastavení, které platí hned po přepnutí. Ne zaškrtávátko: to čeká na uložení formuláře..switchTablestabilnív1.1Tabulka se sloupci jako daty. Drží scope na záhlaví, jeden zdroj pravdy pro colSpan a řádkové akce neschovává za hover..table-wrapTabsbetav1.0Přepínání pohledů na tentýž záznam: řízené value/onChange, role tablist a šipky mezi taby..tabsToastbetav1.5Imperativní toast pro výsledek akce: toast({ text, undo }) ohlásí, co se stalo, a nezastaví práci..toastToolbarbetav1.0Filtr bar nad seznamem. Drží mezery, zalamování a pravý konec; čím se filtruje, dodává volající..toolbarTooltipbetav1.0Krátký popisek u prvku, na hover i na fokus. Popisuje, nepojmenovává — jméno prvku zůstává na něm..tooltipTopNavbetav2.10Horní lišta aplikace — brand, sekce a účet v jednom řádku. Administrace nemá boční menu; obsah pod lištou jde na plnou šířku..topnavUserMenubetav1.0Menu účtu — identita, organizace, předvolby, odhlášení. Primitivum drží strukturu, ne obsah: vrstvy oddělené linkou a řádek „popisek vlevo, ovládací prvek vpravo“..usermenuPořadí bloků na stránce komponenty je pevné, aby se dala číst napřeskáčku — každý čtenář ví, kde jeho blok začíná.
Z toho pořadí čtou tři různí lidé tři různé části:
Ukázka a sekce kdy použít / kdy ne. Rozhodnutí, ne katalog variant.
Vlastnosti a živý kód ukázky — přesně ten, který se na stránce vykresluje.
Přístupnost a seznam tokenů — podle nich se pozná, co změna tokenu rozbije.