Design Library

Design tokeny

Definované jako CSS proměnné v :root plus tmavé plochy specifické pro tmavý styl. Červená se v UI prakticky nepoužívá — zbylo jediné místo, ikona popelnice u nevratného smazání kontaktů; zelená nese stav „v bezpečí", fialová a modrá kreslí gradientové pozadí.

Barvy aplikace se přenášejí do produktu. Barvy prototypu patří obalu (rám telefonu, plovoucí přepínače) nebo je vykresluje operační systém (dialogy oprávnění) — do implementace nepatří.

Systémový font stack (-apple-system … system-ui). Nadpisy tučné se zúženým trackingem. Na tmavém pozadí .pc-title / .pc-lede / .pc-kicker / .pc-sec.

Typografie

Kompletní škála z :root - velikosti (--fs-*), váhy (--fw-*), tracking (--ls-*) a řádkování (--lh-*). Systémový font stack. Ukázky čtou hodnoty přímo z tokenů, takže vždy sedí s CSS.

12 kroků od popisků (10px) po hero číslo (52px).

4 váhy - od medium (500) po extrabold (800). Nadpisy jsou tučné.

Nadpisy mají zúžený tracking; kickery / štítky naopak rozšířený.

Těsné pro nadpisy, normální pro odstavce.

Spacing a zaoblení

Odsazovací krokování (--sp-*) a rádiusy (--r-*) z :root. Ukázky čtou hodnoty přímo z tokenů.

10 kroků od 2px po 34px (--sp-safe = Apple home-indicator safe area). Šířka pruhu = hodnota tokenu.

Sjednocená škála: --r-md (12, ikony, malé prvky, pole a dialogy) · --r-2xl (20, karty a seznamy) · --r-full (999, tlačítka a pilulky). --r-phone (52) = rám telefonu.

Ikony

Inline SVG sprite (<symbol> + <use>), viewBox 24, stroke 2, currentColor (dědí barvu kontextu). Vkládá se jako <svg class="i"><use href="#ic-…"/></svg>.

Nejsou to ikony systému — mají oficiální barvy značek a pevný fill, takže se nesmí přebarvovat ani stylovat přes currentColor. Google má navíc jiný viewBox (48). V portu použij oficiální SDK komponenty, pokud je platforma nabízí.

Tlačítka

Primární akce .pc-cta (plná šířka, bílá). Varianty: .safe (zelená — akce, které něco spouští nebo povolují), .ghost (průhledná, sekundární). Textový odkaz .pc-linkbtn (15px, semibold) — část v <b> je akcentní fialová (--violet-ink). Když je klikatelný celý text a nic se nezvýrazňuje, použij .solo bez <b>.

<button class="pc-cta">Primární</button>
<button class="pc-cta safe">
  <svg class="i"><use href="#ic-check"/></svg> Povolit
</button>
<button class="pc-cta ghost">Ghost</button>
<button class="pc-linkbtn">Už mám účet - <b>Přihlásit</b></button>
<button class="pc-linkbtn solo">Teď ne</button>

Destruktivní textové tlačítko na plnou šířku pro odhlášení z účtu. Jemné červené pozadí zesílí při hoveru; ikona vlevo.

Karty

Nese řádek .pc-ch (ikona .em + text .gr + hodnota .amt). Barevné varianty: .grad (zelená), .warn (jantarová), .blue (modrá).

<div class="pc-card warn">
  <div class="pc-ch">
    <span class="em"><svg class="i"><use href="#ic-image"/></svg></span>
    <div class="gr"><b>Fotkám došlo místo</b><small>…</small></div>
  </div>
  <button class="pc-cta">Vyzkoušet Premium</button>
</div>

Kanonická položka „ikona + nadpis + popis" (Soukromí, Co zálohujeme). Skládá se do .pc-tiles.

Velké centrální číslo dashboardu: štítek .lbl, číslo .big s jednotkou .u, podtitulek .sub.

Cenový plán na paywallu, vkládá se do .pc-card - typicky .pc-card.blue (zvýrazněný nabízený tarif) nebo .pc-card.current (váš stávající tarif). Uvnitř: štítek .tag (varianta .now = „váš tarif"), hlavička .head s .name a .price (jednotka v <span>), a seznam vlastností <ul> s odrážkami .ck (zelená fajfka) nebo .ck.lock (šedý zámek = nedostupné). Drobné písmo pod tarifem řeší .pc-fineprint.

<div class="pc-card blue">
  <div class="pc-plan">
    <div class="tag">Nejoblíbenější</div>
    <div class="head">
      <span class="name">Premium 200 GB</span>
      <span class="price">149 Kč<span> / měsíc</span></span>
    </div>
    <ul>
      <li><span class="ck">…</span> 200 GB pro fotky</li>
      <li><span class="ck lock">…</span> Jen 1 zařízení</li>
    </ul>
  </div>
  <p class="pc-fineprint">Jinak se aktivuje za 10 dní.</p>
</div>

Třísloupcová mřížka čtvercových náhledů fotek (aspect-ratio:1). Náhled je <div> s background-image. Používá se v kartách médií jako rychlý přehled zálohovaných fotek.

Kruhový avatar s iniciálami. Základní .av (40px) se používá v řádcích (.pc-list) a horní liště (.pc-top); velký .av.lg (54px, modro-fialový gradient) v hlavičce profilu. Základní avatar je stylovaný jen ve svém kontextu, proto je zde ukázán uvnitř .pc-top.

Rychlé akce

Řada kruhových akcí .pc-actions (ikona .ic + popisek .t). Zvýrazněná akce má .ic.key (brand). Modifikátor .three vycentruje tři akce.

<div class="pc-actions three">
  <button>
    <span class="ic key"><svg class="i"><use href="#ic-upload"/></svg></span>
    <span class="t">Zálohovat</span>
  </button>
</div>

Seznamy

Sloučené řádky v jedné kartě. Řádek začíná avatarem .av nebo ikonou .em, končí switchem .pc-sw, hodnotou .val nebo šipkou .chev.

<div class="pc-list">
  <div class="row">
    <span class="em"><svg class="i"><use href="#ic-refresh"/></svg></span>
    <div class="gr"><b>Auto záloha</b><small>…</small></div>
    <div class="pc-sw on"></div>
  </div>
</div>

Akordeon uvnitř .pc-list. Vrchní .row je klikací; třída .open na .exp rozbalí tělo .exp-body (řádky .exp-row s ikonou, popiskem a hodnotou .val) a otočí chevron .chev o 90°. V katalogu je ukázán staticky s .open.

<div class="pc-list">
  <div class="exp open">
    <div class="row">…<span class="chev">›</span></div>
    <div class="exp-body">
      <div class="exp-row">…Fotoaparát<span class="val">2 400</span></div>
    </div>
  </div>
</div>

Řádek v .pc-list pro nedostupnou položku (např. zařízení mimo zkušební verzi). .locked ho ztlumí (opacity) a doprava přidá zámek .em-lock. Pro kontrast je nad ním aktivní řádek se zelenou fajfkou .ok-check.

Zvýrazněná hodnota na konci řádku. .val.hot = zlatá (upsell / výzva k upgradu), .val.ok = zelená (aktivní / v pořádku). Bez modifikátoru je .val tlumená.

Řádek feedu oznámení v .pc-list. Ikona .em nese barevnou variantu podle typu: .ok (zelená), .warn (žlutá), .info (modrá). Nepřečtené oznámení má .unread (zvýrazněné pozadí, bílý titulek), vpravo je čas .time. Nad seznamem bývá hlavička .notif-head s nadpisem a tlačítkem .notif-mark („Označit vše").

Formuláře

Pole .pc-field (label + input), přepínač .pc-sw, checklist síly hesla .pw-req, validační chyba .val-err.

<div class="pc-field">
  <label>E-mail</label>
  <input type="email" placeholder="vas@email.cz">
</div>
<ul class="pw-req">
  <li class="met"><span class="dot">…</span>Alespoň 8 znaků</li>
</ul>
<div class="val-err show">…Zadejte platný e-mail.</div>

Toggle. Přidej .on pro zapnutý stav (zelená).

Navigace

Avatar .av + jméno vlevo, kruhové tlačítko .bell (s indikátorem) vpravo.

Dvě podoby téhož: s titulkem na obrazovkách se sticky hlavičkou (20× v prototypu) a samostatné tlačítko tam, kde hlavička není, protože nahoře stojí ilustrace nebo velký nadpis. Vzhled tlačítka je v obou případech shodný — liší se jen to, jestli má vedle sebe titulek.

Vícenásobný výběr v seznamu. Přepínač znamená „zapnout funkci", tohle vybírá položky — proto kroužek s fajfkou. Řádek je celý klikací, role="checkbox".

iOS vzor pro výběr z krátkého seznamu na konci řádku. Otevírá .pc-menu. Ušetří celý řádek oproti segmentovému přepínači.

Kontextové menu nad obsahem. Podklad je sklo přilepené hlavičky (--pc-glass), aby prototyp neměl dvě různá průhledná pozadí. Fajfka označuje aktivní volbu, role="listbox".

Nad dlouhým seznamem. Hledání ignoruje diakritiku.

Jantarové, ne červené — červená je vyhrazená značce a chybovým stavům.

Rohy rámečku, animovaná linka a stavová hláška pod ním. QR placeholder ic-qrcode je výplňová grafika, ne tahová ikona.

Segmenty s oddělovačem. Oddělovač se nekreslí, když je na ose jediná hodnota.

Identita bez karty — velký avatar, jméno, e-mail, vše na střed.

Místo inline style="color:…". .amt-warn nese jantarovou pro čísla ve stavu „potřebuje pozornost" (--gold-ink, v light ztmavená kvůli AA).

Hlavní navigace v aplikaci. V tmavém režimu poloprůhledná tmavá. Aktivní tab má .on (bílá).

Feedback a stavy

Zelené kolečko s fajfkou - jednotný znak stavu „zálohováno".

Průběžný ukazatel přes celý proces zakládání účtu: registrace → 4× oprávnění → první záloha. Je prvním prvkem v .body dané obrazovky, šířku výplně nastavuje setOnbProgress(id) podle pořadí v poli ONB_STEPS. Gradient používá --violet → --blue, tedy barvy loga a ilustrací.

<div class="onb-progress"><i></i></div>

// JS — pořadí kroků na jednom místě
ONB_STEPS = ['signup', 'perm_photos', 'perm_contacts',
             'perm_bg', 'perm_notif', 'firstsync']

Standardní .pc-field obalený v .pw-wrap, které vpravo vloží tlačítko pro zobrazení hesla. Funkce togglePw(id) přepne type mezi password a text a vymění ikonu (#ic-eye / #ic-eyeOff). Input má vpravo padding, aby text nezajížděl pod ikonu.

<div class="pw-wrap">
  <input type="password" id="pw">
  <button class="pw-eye" onclick="togglePw('pw')">…</button>
</div>

Šestimístný kód s rozpalem číslic. inputmode="numeric" vyvolá číselnou klávesnici, autocomplete="one-time-code" nabídne kód ze schránky nebo SMS. Nečíselné znaky se odfiltrují při psaní.

Vodorovný pruh průběhu / zaplnění. Vnitřní <i> nese šířku (width) a barvu podle stavu - zelená --safe-ring (v pořádku) nebo zlatá --gold (plné / pozor). Pozadí pruhu se nastavuje inline (rgba(255,255,255,.1)).

Dočasné potvrzení, které vyjede zdola a po chvíli zmizí. V aplikaci se volá JS funkcí toast('zpráva'), která přidá třídu .show. V katalogu je zobrazen staticky se .show.

Potvrzovací panel, který v aplikaci vyjíždí zespodu přes ztmavovací masku .pc-sheetmask. Obsahuje úchyt .grip, nadpis <h3>, text <p> a sloupec akcí .acts s tlačítky .keep (bílé, ponechat) a .danger (destruktivní). V katalogu je ukázán staticky na místě (inline position:relative;transform:none).

Víckrokový tok bez opuštění sheetu — uživatel nevypadne z kontextu, obrazovka pod ním se nemění. Každý krok je .auth-view, přepíná se atributem hidden přes showEmailView(id). Aktivní pohled vyplní sheet (flex:1), takže patička .auth-foot drží dole.

<div class="auth-view" id="email-view-login">…</div>
<div class="auth-view" id="email-view-forgot" hidden>…</div>

showEmailView('forgot')  // přepnutí

Žádost o systémové oprávnění (fotky, kontakty, běh na pozadí, oznámení). Používá stejnou komponentu jako ostatní native screens - .nat-alert s primary:true, takže „Povolit" je modré a „Nepovolit" šedé. Volá se přes sysPrompt('photos'); odmítnutí přepne obrazovku do stavu „bez přístupu to nepůjde".

sysPrompt('photos')  // photos | contacts | bg | notif

// nebo obecně:
nativeAlert({title, body, cancel, confirm,
  primary: true, onConfirm, onCancel})

Novější iOS styl (18+) systémových dialogů - pilulková tlačítka vedle sebe místo děleného alertu. Primary (.nat-btn.primary, plné modré) potvrzuje přihlášení v Apple sheetu; sekundární (.nat-btn, šedá) je v OAuth alertu, kde žádná akce není zvýrazněná. Dvě varianty: .nat-sheet = Sign in with Apple (plovoucí karta u spodní hrany, ikona appky a účet), .nat-alert = OAuth přes web (Google, Facebook). Rozměry odečtené z reálných iOS dialogů. Dialogy nereagují na motiv - v reálné appce je vykresluje OS, proto vypadají stejně nad světlou i tmavou obrazovkou.

„PhoneCopy" chce použít k přihlášení „accounts.google.com"

Aplikace a webová stránka budou moct sdílet vaše osobní data.

Zrušit Pokračovat

Přihlášení přes Apple

Přihlaste se k „PhoneCopy" pod svým účtem Apple.

🙂Moudrý Vojtěch

Přihlásit se

Kopírovat

// JS API - obsah se plní z index.html
nativeAlert({title, body, cancel, confirm, onConfirm})
nativeSheet({title, body, account, avatar, confirm, onConfirm})
closeNative()

// zkratky pro přihlášení
authApple()   // sheet
authWeb('accounts.google.com')  // alert

Prototyp shell (lešení)

Prvky, které existují jen v prototypu a při implementaci reálné aplikace se zahodí: rám telefonu, levý panel s obrazovkami, přepínače nahoře. Mají vlastní fixní paletu (tokeny --shell-*) a nereagují na světlý/tmavý motiv - je to vývojářský nástroj, ne součást produktu. Díky tomu vypadají hamburger i přepínače stejně v prototypu i v katalogu a při přepínání nepřeskakují.

Lešení, které se v produkci nahradí skutečným zařízením a routingem:

Fixní tmavé tokeny přepínačů. Nepřepisují se v light theme (na rozdíl od --pc-* / --ink), takže shell drží stejný vzhled bez ohledu na motiv i stránku.

Ilustrace

Rastrové ilustrace (PNG 1024×1024) použité v onboardingu, oprávněních a obnově. Zdroje jsou čtvercové; výslednou výšku řídí třída — viz níže. Přepni motiv (nahoře) a uvidíš, jak fungují v light i dark.

Dvě velikosti podle toho, co je pod ilustrací. .pc-illus / .pc-permhero = plná šířka těla (358 px), ilustrace nese sdělení. .compact (max-height:240px) když pod ní soupeří karty nebo seznam. Uvnitř .body.onb se ilustrace navíc smrští podle volného místa (flex:1, max-height:260px).

welcome.png Úvodní obrazovka. Vzpomínky vylétají do bezpečí — „Odteď se o vaše vzpomínky nemusíte bát.“

privacy.png Onboarding „Soukromí“. Zámek v kruhu EU hvězd — data v Evropě, „Vaše data jsou jenom vaše.“

what.png Onboarding „Co zálohujeme“. Fotka, kontakt a video — „Postaráme se o všechno podstatné.“

forgot_sent.png Zapomenuté heslo — potvrzení. Odkaz odeslán — „Zkontrolujte schránku.“

perm_photos.png Oprávnění 1/4 — přístup k fotkám. Fotky putují do mraku.

perm_contacts.png Oprávnění 2/4 — přístup ke kontaktům. Telefonní seznam v bezpečí.

perm_bg.png Oprávnění 3/4 — běh na pozadí. Záloha běží sama i v noci.

perm_not.png Oprávnění 4/4 — oznámení. „Ať víte, že je hotovo.“

first_sync.png První záloha — průběh. Data tečou do bezpečí.

perm_camera.png Oprávnění ke kameře před skenováním QR. Telefon čte kód z obrazovky počítače.

backup_not_found.png Prázdná média — ještě nezálohováno. Otevřená krabice s přeškrtnutým cloudem.

restore_found.png Nalezená záloha — obnova. Data se vracejí do telefonu — „Našli jsme vaši zálohu.“