Práčka s predným plnením, 8 kg, invertorový motor
8 kg · 1 400 ot./min · 60 × 85 × 59 cm
Vizuálny jazyk e-shopu, B2B portálu, pokladnice a aplikácie vodiča predajne elektro v Novej Bani. Všetko beží v prehliadači, mobile first, v duchu Apple Human Interface Guidelines: veľa vzduchu, jasná hierarchia, jedna hlavná akcia na obrazovku.
Stav: tretí návrh (30. 10. 2026), 18 komponentov. Obrazovky a doplnky (vodič, tlačoviny) sú na plátne „dnesdoma.sk — obrazovky webu“. Logo Slnko a strecha a paleta podľa erbu Novej Bane (kráľovská modrá + zlatá). Slogan: Všetko pre váš domov na dosah.
Značka je strecha so zlatým slnkom: strecha je „doma“, slnko je „dnes“. Názov dnesdoma.sk je súčasť loga na krivkách (Inter 800), nad „o“ má zlatú striešku — v texte sa píše obyčajne, malými písmenami, bez striešky. Pravidlá, varianty a animácia (zladená s jinglom) sú v komponente Logo; súbory SVG v repozitári design/logo/.
Slogan „Všetko pre váš domov na dosah“ sa píše s malým „váš“ (oslovujeme všetkých zákazníkov). Doplnkový slogan do kampaní: „Pre váš domov ešte dnes“.
success a slovom.brand (Do košíka, Rezervovať, Zaplatiť). Ostatné sú sekundárne.459,00 €, 60 × 85 × 55 cm, 1 400 ot./min, 8 kg, medzera ako oddeľovač tisícov, tabular-nums v stĺpcoch.tap-pos (64 px), suma pos-total, žiadne malé odkazy.| Rola | Token | Kde |
|---|---|---|
| Pozadie | bg, surface, surface-2 | stránka → karty → vnorené polia |
| Text | ink, ink-muted | hlavný a druhotný text |
| Značka | brand, on-brand, brand-tint | hlavná akcia, odkazy, výber, focus |
| Akcia / zľava | accent, on-accent, accent-tint | cenovka v akcii, štítok zľavy, doplnkový predaj |
| Stavy | success, warning, danger | skladom / na objednávku / chyba |
| Zlatá z erbu | gold, on-gold | len na ploche brand alebo ink: slnko a strieška loga, zvýraznenie na modrej |
| Energetické triedy | energy-a … energy-g | len štítok energetickej triedy, farby podľa EÚ štítka |
Pravidlá:
brand je kráľovská modrá, gold zlatá. Erb samotný sa nepoužíva.accent (tmavšia zlatá, v tmavej téme zlatá) znamená výhodu pre zákazníka — akciu, zľavu, vernostné body. Chyby sú vždy danger, nikdy zlaté.gold nie je nikdy text na svetlom pozadí (kontrast 1,6:1). Na svetlom pozadí sa zlatá píše ako accent (#b07d00), na modrej a čiernej ako gold.warning je oranžová, aby sa líšila od zlatej akcie.brand je on-brand, na accent je on-accent.Systémové písmo Apple (SF Pro) s náhradou Inter na Windows a Androide — žiadne súbory písma na stiahnutie, rýchle načítanie.
| Štýl | Veľkosť | Použitie |
|---|---|---|
large-title | 34/41, 700 | názov kategórie |
title-1 | 28/34, 700 | názov produktu |
title-2 | 22/28, 700 | nadpis sekcie |
price | 22/28, 700 | cena |
pos-total | 48/56, 700 | suma v pokladnici |
headline | 17/22, 600 | zvýraznený riadok |
body | 17/24, 400 | bežný text (na mobile nikdy menší) |
callout | 16/21 | parametre na karte |
subhead | 15/20 | popisky polí a filtrov |
footnote | 13/18 | právne poznámky |
space-1 4 · space-2 8 · space-3 12 · space-4 16 · space-5 24 · space-6 32 · space-7 48.space-4 (16 px).radius-sm 8 (štítky, polia) · radius-md 12 (tlačidlá) · radius-lg 20 (karty) · radius-pill (prepínače, filtre).tap-min 44 px, pokladnica tap-pos 64 px.shadow-card (karta pri prechode, plávajúci košík), shadow-sheet (bottom sheet). Inak oddeľujeme plochou surface a čiarou line.Tenké líniové ikony v štýle SF Symbols (na webe napr. sada Lucide, hrúbka 1,75), farba podľa textu vedľa nich. Ikona nikdy nestojí bez popisu okrem všeobecne známych (košík, hľadať, zavrieť).
Komponenty sú CSS triedy s prefixom dd- v components/bundle.css a pomocné funkcie v window.DnesDoma (formatPrice, discountPercent, energyClass, stockState). Aplikácia v Next.js ich prevezme ako React komponenty s rovnakými názvami a props (components/index.d.ts). Obal stránky má triedu dd-root.
| Skupina | Komponent | Na čo |
|---|---|---|
| Značka | Logo | značka Slnko a strecha, logo s názvom, verzia na modrú, animácia |
| Značka | Jingle | zvukové logo (klavír, 4 údery d–ddd), intro s animáciou loga, noty, WAV |
| Predajňa | ShelfLabel | štítok na regál 100 × 50 mm s cenou, triedou a QR kódom |
| Akcie | Button | primárne, sekundárne, textové a pokladničné (64 px) tlačidlo |
| Akcie | FilterChip | rýchle filtre nad zoznamom s počtom výsledkov |
| Akcie | SegmentedControl | prepínanie 2–4 pohľadov (odber, mriežka / zoznam) |
| Produkt | ProductCard | karta v zozname: fotka, štítok, parametre, cena, dostupnosť |
| Produkt | PriceTag | bežná, akciová (-N %) a B2B cena |
| Produkt | StockBadge | Skladom v Novej Bani / zajtra / na objednávku |
| Produkt | EnergyLabel | trieda A–G vo farbách štítka EÚ |
| Produkt | CompareTable | porovnanie 2–4 produktov rovnakého druhu |
| Pokladnica | PosLine | riadok nákupu s EAN, výrobným číslom a počtom kusov |
| Pokladnica | PosTotal | súhrn, suma na zaplatenie, Karta / Hotovosť / QR |
| Pokladnica | Receipt | pokladničný doklad eKasa 80 mm: položky, DPH, QR, UID/OKP/PKP |
| Pokladnica | CustomerDisplay | displej pre zákazníka: nákup, suma, vernostný program, QR platba |
| Objednávka | BottomSheet | výber odberu a dopravy, úplné filtre na mobile |
| Objednávka | OrderStepper | Rezervované → Pripravené → Vydané |
| Objednávka | OrderEmail | transakčný e-mail a SMS: pripravené na vyzdvihnutie, kód a QR na výdaj |
Slnko a strecha: modrá strecha je „doma“, zlaté slnko pod ňou je „dnes“. Názov dnesdoma.sk je na krivkách (Inter 800) a nad písmenom „o“ má zlatú striešku — „o“ je malé slnko pod strechou, takže aj samotný nápis nesie logo. Farby sú z erbu Novej Bane: kráľovská modrá brand a zlatá gold.
dd-logo — značka + názov. Na svetlom pozadí: strecha a „dnesdoma“ brand, „.sk“ ink, slnko a strieška gold.dd-logo dd-logo--on-brand — na ploche brand alebo tmavej fotke: strecha a názov on-brand, „.sk“ gold.dd-logo dd-logo--mark — len značka (hlavička na mobile, pokladnica, favicon, pečiatka).dd-logo dd-logo--mono — jedna farba (currentColor): pečiatka, gravírovanie, čiernobiela tlač.dd-logo dd-logo--animate — slnko vyjde zdola (0–0,30 s), strecha sa nakreslí (0,35–0,71 s), strieška nad „o“ sa dokreslí (0,71–1,01 s). Zladené s jinglom na úder: 1. úder = slnko, 2. a 3. = strecha, 4. (držaný) = strieška (komponent Jingle, DnesDoma.playIntro). Používať pri štarte, po zaplatení a pri potvrdení objednávky. Nikdy v slučke.gold, aj na tmavom pozadí. Na svetlom pozadí je slnko plný kotúč, nikdy len obrys.prefers-reduced-motion: bez pohybu sa ukáže hotové logo.Súbory: logo.svg, logo-white.svg, logo-mono.svg, mark.svg (strecha currentColor), mark-animated.svg, icon.svg, wordmark.svg — v repozitári design/logo/.
<a class="dd-logo dd-logo--animate" href="/" aria-label="dnesdoma.sk">
<svg viewBox="0 0 48 48" aria-hidden="true">
<path class="dd-logo__roof" d="M8 27 L24 11 L40 27"/>
<circle class="dd-logo__sun" cx="24" cy="33" r="8"/>
</svg>
<svg viewBox="0 0 246 48" aria-hidden="true"><!-- krivky z wordmark.svg: dd-logo__word, dd-logo__sk, dd-logo__caret --></svg>
</a>Zvukové logo dnesdoma.sk: skutočný klavír (nahrávky Yamaha C5), štyri údery v rytme „d – ddd“ (jeden, pauza, tri), tretí úder o veľkú terciu vyššie, posledný drží. Malá ozvena miestnosti, žiadne bicie, žiadne ďalšie nástroje. Dĺžka 1,7 s + dozvuk (súbor 2,4 s). Finál schválený 30. 10. 2026.
| Úder | Čas | Tón | Dĺžka | Obraz |
|---|---|---|---|---|
| 1 | 0,000 s | A3 (220 Hz) | 0,28 s | slnko vyjde zdola (0–0,30 s) |
| 2 | 0,353 s | A3 | 0,28 s | strecha sa začne kresliť zľava |
| 3 | 0,527 s | C#4 (277 Hz) | 0,28 s | strecha prechádza vrcholom, dokreslená do 0,71 s |
| 4 | 0,713 s | A3 | drží 1,0 s + dozvuk 0,6 s | strieška nad „o“ sa dokreslí (0,71–1,01 s), logo stojí |
audio/jingle.wav — 2,4 s, 44,1 kHz, mono. Pokladnica, aplikácia, web.audio/jingle-5s.wav — 5 s. Reklama, video, telefónna ústredňa.audio/jingle.py — skladá jingel z nahrávok A3 a C4 (Python + numpy); postup a zdroj nahrávok sú v hlavičke skriptu.brand/intro.html — samostatná stránka: logo + jingel naraz, na prehratie majiteľom a do videa.DnesDoma.playIntro(logoEl); // jingel + animácia loga naraz (rovnaké časy ako v tabuľke)
DnesDoma.playJingle(); // len zvuk: prehrá DnesDoma.jingleSrc (/audio/jingle.wav), pri chybe náhrada cez Web Audio
new Audio('audio/jingle.wav').play(); // nahrávka
Klavír: Salamander Grand Piano, autor Alexander Holm, licencia Creative Commons Attribution 3.0 (zdroj). Pri použití jingla v reklame alebo videu stačí uvedenie autora v tirážke, napr. „Klavír: Salamander Grand Piano, Alexander Holm, CC BY 3.0“.
dnesdoma.sk
Všetko pre váš domov na dosah.
Tlačidlo spúšťa jednu akciu a jeho text hovorí presne, čo sa stane.
dd-btn--primary — jedna hlavná akcia na obrazovke: Do košíka, Rezervovať na predajni, Zaplatiť.dd-btn--secondary — vedľajšia akcia: Porovnať, Pridať do zoznamu.dd-btn--plain — textová akcia v obsahu: Zobraziť parametre, Zmeniť.dd-btn--pos — pokladnica: výška tap-pos (64 px), text 20 px. Spolu s dd-btn--block na celú šírku.tap-min (44 px) aj pri malom texte.brand — nikdy ho neskrývať.<button class="dd-btn dd-btn--primary">Rezervovať na predajni</button>Čip zapína a vypína jeden filter v zozname produktov a ukazuje, koľko výsledkov ostane.
BottomSheet.aria-pressed="true" — pozadie brand-tint, okraj brand, znak ✓ (stav nie je len farbou).dd-chip__count = počet výsledkov po zapnutí; čip s 0 výsledkami sa nezobrazí.tap-min, čipy sa zalamujú (dd-chips).<div class="dd-chips" role="group" aria-label="Filtre">
<button class="dd-chip" aria-pressed="true">Skladom <span class="dd-chip__count">24</span></button>
</div>Prepínač 2–4 rovnocenných pohľadov alebo možností v štýle iOS.
aria-selected="true" má plochu surface na surface-2 a tučný text.BottomSheet so zoznamom.<div class="dd-seg" role="tablist">
<button class="dd-seg__item" role="tab" aria-selected="true">Osobný odber</button>
<button class="dd-seg__item" role="tab" aria-selected="false">Dovoz</button>
</div>8 kg · 1 400 ot./min · 60 × 85 × 59 cm
chladnička 204 l · mraznička 96 l · 185 cm
Karta produktu v zozname ukáže na prvý pohľad tri veci: čo to je, koľko to stojí a či je to v Novej Bani.
surface-2, vľavo dole EnergyLabel (ak ho tovar má).dd-card__params):- práčka: náplň · otáčky · rozmery - chladnička: objem chladiacej · mraziacej časti · výška - umývačka: počet súprav · šírka · hlučnosť - sporák: typ varnej dosky · objem rúry · šírka
PriceTag.StockBadge — nikdy nechýba.shadow-card len pri prechode myšou.<article class="dd-card">
<div class="dd-card__media"><img alt="…"><span class="dd-energy dd-energy--a">A</span></div>
<h3 class="dd-card__title">…</h3>
<p class="dd-card__params">8 kg · 1 400 ot./min · 60 × 85 × 59 cm</p>
<div class="dd-price">…</div>
<span class="dd-stock dd-stock--in">Skladom v Novej Bani <span class="dd-stock__detail">3 ks</span></span>
<div class="dd-card__actions">…</div>
</article>Cena produktu v slovenskom formáte, pri akcii s pôvodnou cenou a percentom zľavy.
dd-price + dd-price__now.dd-price--sale — nová cena vo farbe accent, dd-price__old prečiarknutá, dd-price__badge „-20 %“.dd-price__note.DnesDoma.formatPrice(): 1 249,90 € (čiarka, medzera medzi tisícmi, € za číslom).DnesDoma.discountPercent() — zaokrúhľuje nadol, nikdy nesľúbi viac.accent znamená výhodu — nepoužívať pre zvýšenie ceny ani chyby.tabular-nums, aby sa ceny v zozname zarovnali.<div class="dd-price dd-price--sale">
<span class="dd-price__now">479,00 €</span>
<span class="dd-price__old">599,00 €</span>
<span class="dd-price__badge">-20 %</span>
</div>Dostupnosť tovaru slovom, farbou a bodkou — najdôležitejšia informácia pre zákazníka z Novej Bane a okolia.
| Modifikátor | Text | Farba |
|---|---|---|
dd-stock--in | Skladom v Novej Bani · N ks | success |
dd-stock--order | Na sklade, do predajne zajtra | warning |
dd-stock--out | Na objednávku · dodanie X dní | danger |
Stav a texty vráti DnesDoma.stockState(ksNaPredajni, ksVSklade).
--in pridajte „pripravíme do 2 hodín“, ak je možný osobný odber.<span class="dd-stock dd-stock--in">Skladom v Novej Bani <span class="dd-stock__detail">3 ks</span></span>Štítok energetickej triedy A–G v tvare šípky a vo farbách podľa energetického štítka EÚ.
ProductCard (vľavo dole), v detaile produktu vedľa ceny, v CompareTable, na cenovke v predajni.dd-energy--a … --g; triedu vráti DnesDoma.energyClass("B").energy-a … energy-g sa nepoužívajú nikde inde.on-energy-dark; aria-label="Energetická trieda A".<a href="/stitok/123.pdf" class="dd-energy dd-energy--a" aria-label="Energetická trieda A, energetický štítok">A</a>| Parameter | Práčka 8 kg | Práčka 9 kg | Úzka práčka 7 kg |
|---|---|---|---|
| Cena | 479,00 € | 549,00 € | 429,00 € |
| Energetická trieda | A | A | B |
| Náplň | 8 kg | 9 kg | 7 kg |
| Otáčky | 1 400 ot./min | 1 400 ot./min | 1 200 ot./min |
| Motor | invertorový | invertorový | klasický |
| Rozmery (š × v × h) | 60 × 85 × 59 cm | 60 × 85 × 63 cm | 60 × 85 × 45 cm |
| Dostupnosť | Skladom | Zajtra | Skladom |
Porovnanie 2–4 produktov rovnakého druhu podľa parametrov, s prvým stĺpcom pevne na mieste pri posúvaní.
ProductCard; porovnávať sa dá len rovnaký druh (práčka s práčkou).tr.is-diff zvýrazní riadky, kde sa produkty líšia (prepínač „Len rozdiely“).td.is-best označí najlepšiu hodnotu slovom „najlepšie“ — nie len farbou.dd-compare-wrap, prvý stĺpec ostáva.tabular-nums.<div class="dd-compare-wrap">
<table class="dd-compare">
<thead><tr><th scope="col">Parameter</th><th scope="col">Produkt A</th>…</tr></thead>
<tbody><tr class="is-diff"><th scope="row">Náplň</th><td>8 kg</td><td class="is-best">9 kg</td></tr></tbody>
</table>
</div>Riadok nákupu v pokladnici: tovar alebo služba, počet kusov a suma, ovládané prstom.
dd-pos-line__meta: EAN, výrobné číslo spotrebiča (kvôli záruke), uplatnená akcia (is-discount, farba accent).aria-selected="true", brand-tint) — potom sa dá zmeniť cena, zľava alebo zmazať.tap-pos (64 px), tlačidlá − / + 48 × 48 px.tabular-nums, aby sa stĺpec zarovnal.<div class="dd-pos-list" role="listbox">
<div class="dd-pos-line" role="option" aria-selected="false">
<span class="dd-pos-line__name">Názov<span class="dd-pos-line__meta">EAN …</span></span>
<span class="dd-qty"><button aria-label="Menej">−</button><output>1</output><button aria-label="Viac">+</button></span>
<span class="dd-pos-line__total">479,00 €</span>
</div>
</div>Súhrn nákupu v pokladnici s veľkou sumou na zaplatenie a tromi spôsobmi platby.
PosLine (tablet na šírku), na mobile pod ním.is-discount, farba accent), DPH podľa sadzieb; potom suma štýlom pos-total (48 px).DnesDoma.formatPrice().success) a stav eKasy; ak eKasa čaká, warning so slovom „Odosiela sa do eKasy“.tap-pos, nikdy nie sú vedľa tlačidla Zrušiť nákup.<section class="dd-pos-total">
<div class="dd-pos-total__rows">…</div>
<div class="dd-pos-total__sum"><span class="dd-pos-total__label">Na zaplatenie</span><span class="dd-pos-total__amount">513,98 €</span></div>
<div class="dd-pos-total__pay">…</div>
</section>dnesdoma.sk
Elektro a domácnosť · Nová Baňa
OC Hoťapo, Nová Baňa
IČO 00 000 000 · IČ DPH SK0000000000
POKLADNIČNÝ DOKLAD č. 2026/1-000412
30. 10. 2026 14:34 · Pokladnica 1 · Katka
Práčka predné plnenie 8 kg599,00
v. č. WX2026-04471 · DPH 23 %
Akcia −20 %−120,00
Hadica Aquastop 1,5 m19,90
Toner čierny 2 500 str. 3 × 5,0315,08
Recyklačný poplatokv cene
Základ DPH 23 %417,87
DPH 23 %96,11
SPOLU513,98 €
Platobná karta513,98
Zákazník: Peter Novák · body +51 (spolu 371)
Vernostná úroveň: Strieborná · 3 %
UID: O-A1B2C3D4E5F6
OKP: 1a2b3c4d-5e6f-7a8b-9c0d
PKP: a9b8c7d6e5f4
Kód pokladnice 88812345678900001
Overte doklad: ekasa.financnasprava.sk
Ďakujeme. Všetko pre váš domov na dosah.
Reklamácie a servis: dnesdoma.sk/servis · +421 45 000 000
Pokladničný doklad z eKasy na 80 mm papier (termotlačiareň cez cloud). Monospace písmo, jednofarebné logo, QR kód dokladu a údaje podľa zákona 384/2025 Z. z.
CustomerDisplay), na doklade je QR dokladu.Druhá obrazovka pri pokladnici otočená k zákazníkovi (800 × 480 px alebo tablet). Ukazuje nákup v reálnom čase, sumu, pozdrav podľa vernostného programu a QR kód na platbu mobilom (bezhotovostná možnosť povinná od 1. 5. 2026).
brand, text on-brand, zľavy a zvýraznenia gold; suma pos-total alebo väčšia (56 px), čitateľná z 1 m.DnesDoma.playIntro), potom „Ďakujeme“ na 5 s.8 kg · 1 400 ot./min · 60 × 85 × 59 cm
chladnička 204 l · mraznička 96 l · 185 cm
Štítok na regál v predajni: 100 × 50 mm, tlač z pokladnice alebo zo skladu na samolepiaci papier (A4 = 2 × 5 štítkov) alebo na štítkovú tlačiareň.
headline, značka a model.price, 28 pt na papieri), pri akcii pôvodná cena prečiarknutá a štítok -N % v accent. Vždy s DPH a recyklačným poplatkom.EnergyLabel), povinná pri spotrebičoch.footnote) pre predavača a inventúru.dd-logo--mono), energetická trieda má aj písmeno, akcia má aj slovo „Akcia“.footnote.<div class="dd-shelf dd-shelf--sale">
<div class="dd-shelf__head"><span class="dd-logo dd-logo--mark dd-logo--mono">…</span><span class="dd-shelf__cat">Práčky</span></div>
<h3 class="dd-shelf__title">Práčka s predným plnením, 8 kg</h3>
<p class="dd-shelf__params">8 kg · 1 400 ot./min · 60 × 85 × 59 cm</p>
<div class="dd-shelf__price"><span class="dd-price__now">479,00 €</span><span class="dd-price__old">599,00 €</span><span class="dd-price__badge">Akcia -20 %</span></div>
<div class="dd-shelf__foot"><span class="dd-energy dd-energy--a">A</span><span class="dd-shelf__meta">EAN 8590000000001 · 10234 · 30. 10. 2026</span><span class="dd-shelf__qr" aria-label="QR kód na stránku produktu"></span></div>
</div>Spodný panel na mobile pre jednu voľbu alebo nastavenie bez opustenia stránky.
dd-sheet__grabber), nadpis otázkou, možnosti dd-option (rádio), jedno hlavné tlačidlo.is-free, farba success) — podporuje ROPO.DnesDoma.formatPrice(); zadarmo slovom, nie „0,00 €“.<div class="dd-sheet" role="dialog" aria-labelledby="t">
<span class="dd-sheet__grabber"></span>
<h2 class="dd-sheet__title" id="t">Ako chcete tovar prevziať?</h2>
<label class="dd-option"><input type="radio" name="odber" checked> … <span class="dd-option__price is-free">zadarmo</span></label>
<button class="dd-btn dd-btn--primary dd-btn--block">Pokračovať</button>
</div>Stav objednávky v krokoch, aby zákazník aj predavač videli, kde je a čo nasleduje.
--ex-steps = počet krokov (3 alebo 4); is-done, is-current + aria-current="step".brand-tint, budúci sivé číslo — stav nie je len farbou.<ol class="dd-steps" style="--ex-steps:3">
<li class="dd-step is-done"><span class="dd-step__dot">✓</span><span class="dd-step__label">Rezervované</span><span class="dd-step__time">po 20:32</span></li>
<li class="dd-step is-current" aria-current="step">…</li>
<li class="dd-step">…</li>
</ol>Transakčný e-mail (600 px, tabuľkový layout v produkcii) pre stavy objednávky: prijatá → pripravená na vyzdvihnutie → vydaná / doručená. Ukážka je stav „pripravené“.
brand s logom a číslom objednávky.success pre pripravené), oslovenie menom, čas objednania a prípravy, dokedy vyzdvihnúť.pos-total) a QR kód; predavač naskenuje alebo zadá kód.