übrig

01 · MyšlienkaLístok a pečiať

Übrig je posledných pätnásť minút smeny. Ruky sú mokré, svetlo je ostré, hlava je unavená. Rozhranie preto nie je aplikácia, ale lístok – kus papiera, na ktorom je napísané, čo odchádza, kedy a pre koho – a pečiať, ktorá povie, že to smie ísť. Všetko ostatné (rezervácie, prehľady, štatistiky) je za lístkom, nie pred ním.

02 · ZnačkaTanier so zmiznutým klinom

• Ochranná zóna: okolo znamenia a wordmarku minimálne výška písmena „b“ zo slova übrig.
• Minimálna veľkosť: znamenie 24 px (mobil), 8 mm (tlač). Pod tým redukovaná pečiať.
• Farby značky: znamenie len v Pečiati (na papieri) alebo v Papieri (na atramente). Nikdy okrová, nikdy čierna.
• Zákaz: Sauterov hrniec, tyrkysový prstenec, gradient, 3D, tieň, obrys textu, otočený wordmark.

03 · FarbyPapier, atrament, pečiať – a nič štvrté

Sémantika

Kontrast (WCAG 2.2, vypočítané)

Nočný variant (odberatelia stoja večer pred kuchyňou): Papier ↔ Atrament sa vymenia, Hárok stmavne na #23201B, Pečiať sa zosvetlí na #B5483A, Tlmená na #A79F93. Variant sa zapína podľa systému (prefers-color-scheme) a ide až po pilote – kuchyňa je vždy svetlá.

04 · PísmoTri hlasy: meno, veta, fakt

Stupnica

• Číslice v Plex Mono sú tabulárne – časy „21:30–22:15“ sa nikdy nehýbu pri prepise.
• Pomlčka v rozsahu je en dash (–), oddeľovač je stredná bodka ( · ). Žiadne lomky.
• Písma sa v produkcii self-hostujú (OFL licencie, offline PWA); fallback: Georgia · system-ui · ui-monospace. Prototyp ich ťahá z Google Fonts len na ukážku.

05 · RozloženieJeden stĺpec, jeden palec, jeden dock

• Šírka: 430 px maximum, centrované; na desktope ten istý stĺpec na papierovom pozadí – Übrig je telefón, desktop je len náhľad.
• Okraje: 20 px; vertikálny rytmus 8 px; medzera medzi kartami 8 px, medzi blokmi 24 px.
• Riadok dotyku: min. 62 px (kruh, chip-rad, pole s popiskom). Cieľ dotyku min. 44 × 44 px vždy.
• Sticky lišta: krok vľavo (1 PRÜFEN, Pečiať); vpravo počítadlo (4 / 7, Tlmená), prepínač DE · EN, ⓘ a Unterstützen. Pod lištou znamenie 36 px + wordmark 34 px. Pod 380 px šírky sa z Unterstützen zobrazí len srdce.
• Začiatok obrazovky: každá nová obrazovka (krok, návrat z detailu, „Neue Freigabe“) sa otvára úplne hore. Inde sa posúva len vtedy, keď na to má dôvod – záblesk na nesplnený riadok alebo pole.
• Dock: jedno tlačidlo pripnuté dole, gradient Papier → priehľadný 70 %, rešpektuje safe-area. Nikdy dve tlačidlá v docku.
• Kroky: Prüfen → Meldung → Etikett → Protokoll ako podčiarknuté záložky (Pečiať 2 px), nie ako wizard s číslami v kruhoch.
• Prázdny stav: jedna veta v Tlmenej („Noch kein Eintrag. Lokal im Browser.“), žiadna ilustrácia.

06 · KomponentyLis, kruh, pole, chip, lístok

Lis (tlačidlo)

Zákaz: Material ripple, hover glow, gradient, blur tieň, ikonka v tlačidle, veľké písmená, výkričník v texte tlačidla.

Kruh (otázka Freigabe)

• Dva stavy: prázdny (Linka obrys, Tlmená text) a plný (Pečiať bod, Atrament text, Pečiať obrys karty). Žiadny tretí, žiadna fajka.
• „i“ vpravo v každom riadku (40 px cieľ, Tlmená): rozbalí pod riadkom jednu až dve vety, čo otázka znamená a prečo (13 px, Atrament-2, bodkovaná deliaca linka). Riadok je čitateľný aj bez rozbalenia; vysvetlenie nikdy nenahrádza krátky text otázky.
• Potvrdzovací riadok na konci Meldung (rovnaký kruh): „Allergene und Konsumieren bis sind geprüft und richtig.“ – povinný; bez neho lis zatrasie a riadok zablisne.
• Sémantika: role="checkbox" aria-checked, celý riadok je cieľ (62 px).
• Sedem otázok je fixný zoznam; poradie sa nemení, aby si ho kuchár zapamätal telom.

Pole a chip

• Popisok vždy nad poľom, Plex Mono verzálky. Placeholder je príklad, nie popisok.
• Pole vo fokuse: obrys Atrament. Pole s chybou: obrys ostáva Linka, pod poľom veta v Tlmenej, a jeden záblesk.
• Chipy (14 alergénov): kapsula, Linka obrys; vybraný = Pečiať obrys + Atrament text. Nikdy vyplnená kapsula.

Kontakt: tri polia

• „Kontakt“ je rozdelený na Betrieb (povinný), Telefon (povinný, type=tel) a E-Mail (voliteľný, formát sa kontroluje). Na lístku a v správe sa spájajú strednou bodkou: „Restaurant Sonne · 079 555 11 22 · kueche@sonne.ch“.

Sticky lišta a „Unterstützen“

• Horná lišta (krok · počítadlo · ⓘ · Unterstützen) je prilepená hore a dostane Linka spodný okraj až po posunutí. Tlačidlo Unterstützen je kapsula s Atrament obrysom a srdcom – jediné tlačidlo, ktoré je viditeľné na každej obrazovke. Otvára list „Ein Abend übrig kostet elf Franken“ s tromi spôsobmi pomoci a „Link teilen“ (Web Share / schránka). Spendenkonto príde s Vereinom – dovtedy list hovorí pravdu a nič nepredstiera.

Listy (concept, welcome, detail)

• Spodný list na Hárku (14 px zaoblenie hore), tmavý závoj 42 %, krížik 44 px vpravo hore, Esc a klepnutie mimo zatvárajú. Vysúva sa o 24 px za 240 ms; uvítací list po 7/7 sa „rozroluje“ zhora (clip-path 520 ms).
• Detail záznamu v protokole: dátum · Fraunces nie – názov jedla v Atkinson 700, dvojstĺpcový zoznam faktov (Plex Mono popisky), tri lisy: Bearbeiten (Atrament), Etikett zeigen (ghost), Eintrag löschen (ghost s Pečiať obrysom – jediné miesto, kde má ghost červený okraj).

Lístok (etiketa a správa)

• Hárok, obrys 1,25 px Atrament, rádius 4 px, tvrdý tieň 6 px Linka (papier na papieri). Perforácia = 18–22 bodiek Linka.
• Hierarchia je zákon: jedlo → porcie · stav → kontakt → alergény → zubereitet → konsumieren bis → abholen → adresa → „Vor dem Servieren durcherhitzen.“ Rovnaké poradie vo WhatsApp texte aj v tlači.
• Pečiať FREIGEGEBEN + znamenie vpravo hore – až po siedmich áno. Návrh bez pečiate je „Entwurf“ a nemá červenú.

Info-bublina (Hinweis)

• Jedna bublina na obrazovku, vždy hore pod záložkami, Hárok s Linka obrysom a šípkou k záložke; text Atkinson 14 px v Atramente-2, popisok INFO v Plex Mono. Žiadna červená, žiadna ikona okrem ⓘ v hlavičke.
• Obsah: najviac dve vety – čo obrazovka chce a čo sa stane ďalej. Nikdy marketing, nikdy „Tipp des Tages“.
• Zavretie × si obrazovka pamätá (localStorage); ⓘ v hlavičke bubliny vypne alebo znovu zapne všetky. Nikdy neblokuje dock ani obsah, nikdy sa neobjaví ako modal.
• Prekladá sa s jazykom; pri tlači etikety sa netlačí.

07 · PohybLis, zatrasenie, záblesk, pečiať, otvorenie

Pohyb v Übrig má jednu úlohu: povedať, čo urobiť ďalej. Nikdy nezabáva, nikdy sa neopakuje v slučke, nikdy nebeží dva naraz. Trvania sú štyri: 80 ms (dotyk), 240 ms (odpoveď), 600 ms (upozornenie: zatrasenie, záblesk), 900 ms (pozvanie: jemné zatrasenie lisu). Krivka: cubic-bezier(.36,.07,.19,.97) pre odpoveď, ease-out pre záblesk.

Spúšťacia animácia (cold start)

Scenár ≈ 2,4 s do tlačidla „Eintreten“ (pôvodných 1,3 s dvakrát predĺžených o 35 % na Richardovu požiadavku, 25. 9. 2026); animácia sa už nekončí sama – čaká na tlačidlo, aby bol tagline vždy dočítaný. Hrá sa raz pri studenom štarte (nie pri prepínaní krokov, nie pri návrate z pozadia do 10 minút). Ukončí ju tlačidlo „Eintreten“ (lis, jemne sa raz zatrasie o 3,15 s: ±4 px, 900 ms), po ňom sa otvorí konceptová obrazovka. Pri prefers-reduced-motion je celý záber statický a tlačidlo hneď viditeľné.

08 · PrístupnosťMeria sa, nehodnotí sa

• Kontrast textu ≥ 4,5 : 1 pre všetok text, bez výnimky. Zmerané 25. 9. 2026: Tlmená #7A746C na Papieri dávala 4,0 : 1 a používala sa aj na vety pod poľami (hint, 13 px) – výnimka „len popisky“ sa v kóde nedodržala. Tlmená je preto stmavená na #6B655D (5,0 : 1 na Papieri, 5,3 : 1 na Hárku); Mosadz sa nikdy nepoužíva ako farba textu (2,3 : 1). Strážca: e2e test počíta pomer z vypočítaných štýlov a padne pod 4,5.
• Cieľ dotyku ≥ 44 × 44 px; riadky 62 px; medzera medzi cieľmi ≥ 8 px.
• Farba nikdy sama: kruh má bod aj zmenu textu; lis má text; pečiať má slovo FREIGEGEBEN.
• Fokus viditeľný: 2 px Atrament obrys s odsadením 2 px; poradie tabulátora = poradie čítania.
• Pohyb: všetko okrem lisu (80 ms) sa vypne pri prefers-reduced-motion: reduce; zatrasenie sa nahradí textom pod tlačidlom. Aby používateľ vedel, prečo sa nič nehýbe, pätička ukáže vetu „Bewegung reduziert: dein Gerät hat ‹Bewegung reduzieren› aktiv“ (iOS: Nastavenia → Prístupnosť → Pohyb).
• Písmo sa škáluje so systémom (rem), rozloženie funguje do 200 % zväčšenia bez horizontálneho posunu.
• Jazyk jednoduchý: krátke vety, žiadne skratky okrem °C a Port.; nemčina na ploche, lebo kuchyňa hovorí nemecky.
• Semantika: role="checkbox" na kruhu, aria-live="polite" na počítadle 4 / 7, aria-describedby pre vetu pod poľom.

09 · JazykKrátko, nemecky, bez výkričníkov

• Primárny jazyk de-CH („ss“, nikdy „ß“): Grüsse, Strasse, heiss. FR, IT a EN sú preklady (úvodná stránka ich má všetky štyri, výber cez menu v hornej lište). Preklady nikdy nie sú zdroj.
• Tón: pokojný kolega po smene. Rozkazovací spôsob v tlačidlách („Freigeben“, „Etikett zeigen“), oznamovací v texte („Sieben Fragen. Alle Ja.“).
• Žiadne výkričníky, žiadne emoji, žiadne „Super!“, žiadne „Oops“. Chyba znie: „Noch 3 von 7.“
• Formáty: čas 21:30–22:15 (en dash, bez medzier), dátum 25.09. 18:40, porcie „18 Port.“ v meta, „18 Portionen“ na lístku.
• Značka sa neprekladá: wordmark „übrig“, tagline „nach dem service“ a pečiať FREIGEGEBEN ostávajú nemecké vo všetkých jazykoch. Navigácia a texty sa prekladajú (EN: Check · Message · Label · Log); prepínač jazyka DE · EN je v hornej sticky lište (Plex Mono, aktívny jazyk podčiarknutý Pečiaťou), aby bol dostupný na každej obrazovke. Interné kľúče (názvy alergénov, otázok) ostávajú nemecké, preklad je len na povrchu.

10 · TlačEtiketa, ktorá prežije chladničku

• Formát: A6 na výšku alebo termopáska 80 mm; čierna tlač, pečiať ako obrys (červená sa v termotlači stráca). Vždy jedna strana: tlačový štýl skryje všetko okrem lístka, zruší min-height 100dvh a nastaví @page A4, 14 mm; overené v Chromiu (PDF = 1 strana).
• Perforácia sa tlačí ako bodky; wordmark Fraunces vľavo hore, znamenie vpravo hore 12 mm.
• Poradie riadkov = poradie lístka na obrazovke. Nič navyše (QR len ak nesie odkaz na protokol v app).
• Písmo na etikete min. 10 pt; alergény tučne; „Konsumieren bis“ ako najväčší údaj po názve jedla.

11 · ZákazyČo Übrig nikdy neurobí

12 · TokenyJediné miesto, kde sú čísla

:root{
  /* farba */
  --paper:#F3EEE6;  --sheet:#FFFBF4;  --ink:#1A1814;  --ink-2:#2A2622;
  --stamp:#9C3B2E;  --stamp-dk:#6E2A21;  --brass:#C4A36A;  --rule:#D8D0C4;  --mute:#6B655D;
  /* tvar */
  --radius:4px;  --radius-card:10px;  --radius-chip:999px;  --shadow:3px;  --row:62px;  --gutter:20px;  --col:430px;
  /* písmo */
  --f-name:"Fraunces",Georgia,serif;  --f-text:"Atkinson Hyperlegible",system-ui,sans-serif;  --f-fact:"IBM Plex Mono",ui-monospace,monospace;
  --fs-word:34px; --fs-dish:20px; --fs-text:16px; --fs-line:14px; --fs-meta:13px; --fs-label:11px;
  /* pohyb */
  --t-touch:80ms;  --t-answer:240ms;  --t-cue:600ms;  --t-shake:600ms;  --t-nudge:900ms;  --e-answer:cubic-bezier(.36,.07,.19,.97);
}
@media (prefers-color-scheme: dark){:root{--paper:#1A1814;--sheet:#23201B;--ink:#F3EEE6;--ink-2:#E6DFD3;--rule:#3A352E;--mute:#A79F93;--stamp:#B5483A}}
@media (prefers-reduced-motion: reduce){:root{--t-answer:0ms;--t-cue:0ms;--t-shake:0ms;--t-nudge:0ms}}

Tokeny sa neprepisujú v komponentoch. Kto potrebuje nové číslo, mení tento blok a manuál – v tom istom commite.

13 · Rozhodnutia tímuČo sme zvážili a prečo

1. Dve znamenia → jedno. Návrh „nach dem service“ (plný červený kruh) a board (dvojitý kruh s klinom) sa prekrývali. Klin nesie myšlienku (jedlo, ktoré odchádza), plný kruh ju stráca. Plný kruh ostáva len tam, kde klin nie je čitateľný: ikona, favicon.
2. Chyba bez červenej. Bežné systémy hlásia chybu červenou; tu je červená povolenie. Chybu preto nesie pohyb (zatrasenie) a text. Kompromis: text chyby je Tlmená, nie Atrament, aby sa nemýlil s obsahom.
3. Tichý lis nie je disabled. Disabled tlačidlo nič nepovie. Tichý lis po klepnutí navedie: zatrasenie + záblesk na prvý nesplnený riadok. Toto je Richardova požiadavka „tlačidlá sa zatrasú, polia zablisnú“ – s limitom raz na pokus, aby sa z navigácie nestal hluk.
4. Záblesk okrovou, nie červenou. Okrová je jediný teplý akcent bez významu „povolené“. Používa sa len v pohybe (kontrast 2,07 : 1 ju vylučuje z textu).
5. Spúšťacia animácia ≈ 2,4 s, končí tlačidlom „Eintreten“. Pôvodne 1,3 s a automatické zmiznutie; Richard ju 25. 9. dvakrát predĺžil o 35 % a chcel, aby bol tagline dočítaný – preto scéna už nemizne sama, ale čaká na lis „Eintreten“, ktorý sa raz jemne zatrasie. Po ňom nasleduje konceptová obrazovka (čo Übrig je, štyri kroky, tlačidlá „Los geht’s“ a „Unterstützen“), zatvárateľná krížikom, pozadím alebo Esc. Pri návrate z pozadia sa nehrá. Reduced motion = statický záber.
6. Nočný variant až po pilote. Kuchyňa je vždy svetlá; odberatelia vonku by tmavý variant ocenili. Tokeny sú pripravené, zapnutie je rozhodnutie po prvých týždňoch.
7. Fraunces len pre mená. Pokušenie dať italic všade sme odmietli: pri 14 px v kuchyni klesá čitateľnosť. Atkinson Hyperlegible je navrhnutý pre slabý zrak – to je hlas viet.
8. Protokol sa otvára a edituje. Záznam je tlačidlo; detail ukáže všetky polia, „Bearbeiten“ ich nahrá späť do Meldung a lis potom hovorí „Änderung speichern“ (záznam sa prepíše, dátum vzniku ostane, pribudne „geändert“). Zmazanie len s potvrdením.
9. Žiadny toast. Potvrdením akcie je lístok alebo záznam v protokole. Toast by bol štvrtý prvok, ktorý súperí o pozornosť.
10. Tlačidlo bez ikony. Slovo v nemčine je jednoznačnejšie než ikona a lis má vyzerať ako pečiatka, nie ako app-bar.
11. Nestaviame. Tento manuál + prototyp sú podklad na Richardovo schválenie; do index.html a app/ ide až po „beriem lístok“ – najprv tokeny, potom komponenty, potom pohyb.

14 · Ďalší krokKontrolný zoznam pred nasadením

• ☑ Richard schválil manuál nasadením („vieme to nahodiť live“).
• ☐ Písma self-hostované (OFL) vo fonts/ – z tohto prostredia nemožné (jsDelivr a npm registry vracajú 403), Google Fonts priznané v Datenschutz; tokeny zatiaľ v každom súbore zvlášť (tri súbory, jeden blok – zlúčiť pri ďalšom kroku app).
• ☑ Statická stránka (Freigabe-Check, Meldung, Etikett, Protokoll) prevlečená na lístok a pečiať – live 25. 9. 2026.
• ☑ Plattform-App (prihlásenie, ponuky, rezervácie, admin) na tie isté tokeny – 25. 9. 2026 večer, logika nedotknutá, overené snímkami všetkých šiestich pohľadov; lístky a pečiať v zozname ponúk čakajú na prvé skutočné dáta.
• ☑ Pohyb podľa kapitoly 07, kontrola s prefers-reduced-motion.
• ☐ Kontrast a ciele dotyku premerané na reálnom telefóne v kuchyni pri ostrom svetle (kontrast je od 25. 9. strážený testom, dotyk ostáva na Richardovom telefóne).
• ☑ Ikona aplikácie a favicon z redukovanej pečiate; manifest PWA (manifest.webmanifest, icons/, og obrázok) – 25. 9. 2026.

Živá stránka: übrig Bern – celý tok Prüfen → Meldung → Etikett → Protokoll v novom vizuáli. Pôvodný odkaz na prototyp presmeruje tam. Audit celého projektu a plán ďalších krokov: Audit a plán.