Design rendszer

Színek

Két téma, ugyanazokkal a nevekkel. A kiírt érték az aktuális témáé: a sötét témát a rendszerbeállítás vagy a data-theme="dark" kapcsolja be.

Felületek és szöveg

Márka

--hero-gradient · – az oldal egyetlen CSS-színátmenete: hero, belső oldalfejlécek, alkalmazássáv.

Állapotok és címkék

Jégstúdió (mindkét témában azonos)

Kontraszt

WCAG 2.x arányok, élőben mérve a fenti tokenekből. Szöveg: legalább 4,5 : 1, felületi elem (keret, mérőcella): legalább 3 : 1. Fehér szöveg égkéken soha (2,75 : 1); sárga szöveg, vonal vagy ikon világos felületen soha.

Tipográfia

Egy család, az Archivo, egyetlen Google Fonts kéréssel. A címek keskeny szélességet használnak (font-stretch 75–87,5 %), a felület és a folyószöveg normálat. Az „élő” érték az aktuális ablakszélességen mért méret.

Magyar tipográfia

Ezres tagolás

4 953 Ft · 38 100 Ft (nem törő szóköz, négyjegyűnél is)

Tizedesjel

2,5 kg · 15,6 kg

Méret, hőmérséklet

4 × 4 cm · Ø 5 cm · −18 °C

Tartomány

22:00–07:00 (nagykötőjel, szóköz nélkül)

Gondolatjel

budapesti gyártásból – 1991 óta

Idézőjel

„Tovább a pénztárhoz”

Dátum

2026. október 7. · röviden: okt. 7.

Díjsor

450 Ft + ÁFA (egyben marad)

Nagybetű

Csak a logóban, a Happy szóvédjegyben és rövidítésekben: ÁFA, ÁSZF, SAP.

Rács és térköz

12 oszlop 1024 px-től (24 px-es réssel), 8 oszlop 768–1023 px között (20), alatta 4 (16). A .wrap legfeljebb 1320 px, a margó clamp(16px, 4vw, 40px). Szövegszélesség legfeljebb 760 px.

Töréspontok

sm · md · lg · xl · xxl

480 · 768 · 1024 · 1280 · 1440 px (min-width)

Ellenőrzés

360, 390, 768, 1024, 1280, 1440 és 1600 px; vízszintes görgetés soha (csak a széles táblázat görög a saját dobozában)

Szekció-ritmus

--section-y = ezen a szélességen (56 → 112 px)

Fejléc

Utility 36 · fősáv 80 (1024 alatt 60, egyedül ez ragad) · webshop alsáv 52 px

Térközskála

Forma és árnyék

Kerekítés: soha pirula alakú gomb. A kártyák nyugalomban laposak (e0 + 1 px vonal), hoverre e1-et kapnak.

Árnyékok

Keretek

Mozgás

Rövid, funkcionális mozgás: szín 150 ms, lenyíló és toast 200 ms, fiók 280 ms. Csökkentett mozgás beállításnál minden átmenet azonnali: ott a pöttyök csak átugranak.

Lejátszás

• Mérőcellák: 120 ms cellánként, 20 ms késleltetéssel; számláló „ugrás” 280 ms (emphasized); kártyakép hoverre 1,02-szeres, 280 ms.
• Soha: görgetésre megjelenő elemek, parallax, automatikusan lapozó karusszel, ismétlődő mozgás, animált színátmenet, animált kabala vagy logó.

Ikonok

Lucide geometria, 24-es rács, 1,75 px vonal, kerek végek; méretek 16, 20 és 24. Egy inline sprite: {{icon truck}} vagy JS-ből IC.ui.icon('truck', 20). Ikon funkciót jelöl, soha nem illusztráció, és soha nem kerül „ikoncsempébe”.

Logó

Saját fehér körvonallal érkezik, úgy használjuk, ahogy van. Arány 1,495 : 1; 100 px magasságig a logo-320, 210 px-ig a logo-640 fájl. Mindig a főoldalra mutat: aria-label="ICE CUBE főoldal".

Méretek (CSS px magasság)

Engedélyezett hátterek

--navy

Hero színátmenet

--navy-deep

Fehér

--bg-2

Jégstúdió

• Soha sárgán, égkéken, fotón vagy a partnerfalon.
• Soha újrarajzolva, átszínezve, levágva (a medve feje sem, favikonnak sem), körvonalazva, árnyékkal, elforgatva, animálva, körbe zárva vagy vízjelként.
• Favikon és alkalmazásikon: a teljes logó navy négyzeten.

180 · 512 px

32 px

Kabala

Oldalanként legfeljebb egy pillanat. 220 px magasságig a mascot-320, 460 px-ig a mascot-674 fájl. Alt: „Az ICE CUBE jegesmedve kabalája”, vagy üres, ha a mellette álló szöveg már elmondja.

• Helyek: főoldali zárósáv (380–420), rólunk (≤ 420), 404 (320), üres kosár (120 / 160), termékoldali jégmérő (56), találat nélküli keresés (140), mobilalkalmazás oldal (240), üres fiók (120).
• Soha heróban, láblécben, webshop listában, a nagy fejléclogó mellett, ikonként; soha levágva, tükrözve, átszínezve, szövegbuborékkal, és legfeljebb egyetlen 200 ms-os áttűnéssel.

Hegyvonulat

A végleges SVG-motívum három formában. A kitöltések CSS-tokenekből jönnek, így követik a témát; sötétben a hó beleolvad az oldal hátterébe. Oldalanként legfeljebb három gerinc; belső oldalon csak a láblécé.

Önálló fájlok prezentációhoz: assets/brand/motif-hero-ridge.svg, motif-back-range.svg, motif-edge.svg. Soha ikonként, felsorolásjelként, mintázatként, töltésjelzőként vagy animálva.

Jégstúdió

Egy stúdió, egy fény: navy hátfal, mélykék padló, 4 : 5 kivágás a termékeknél. Minden termékkép illusztráció, és ezt a képaláírás ki is mondja. Kulcsok: src/data/images.json; beillesztés: {{img kulcs view=meretrajz}} vagy IC.ui.productImage().

A főoldali hero kompozíció (átlátszó háttér a hero színátmenetén) · hero-studio

Fotók

Két valódi fotónk van: a 2,5 kg-os JÉGKOCKA zacskó kivágott packshotja (legfeljebb 450 px magasan) és a darált jég makrója a nagyítóban. Stockfotó, generált fotó, emberek, bárok és járművek nélkül.

Mockupok

A valódi Partner alkalmazás képernyői, demó adatokkal: {{mockup phone-tracking sm}}. Soha nem nagyítjuk, nem vágjuk, nem kap CSS-árnyékot; a felirat oldalanként egyszer szerepel.

• Navy vagy hero sávon a kompozíciók átlátszó -navy-alpha változata kell: {{mockup pair-tracking-invoices navy}}. A lapított -navy fájl nem kerül az oldalra.
• Oldalanként legfeljebb egy kompozíció (kivéve a mobilalkalmazás oldalt).
• Felfüggesztve, amíg az alkalmazás boltja nem a Jégstúdió képeit mutatja: phone-shop és pair-shop-tracking.
• A mobilalkalmazás oldalon az élő alkalmazás fut a saját keretében (mobile/app/index.html, 402 × 874).

Happy-kredit

Pontos markup a DESIGN.md 4.7 szerint, kizárólag a lábléc jogi sorában: {{> happy-credit}}. Más kredit sehol nincs.

HAPPY SOLUTIONS

Designed by Happy Solutions – Ferenc Farkas
Happy Solutions Kft.

Gombok

Mondatkezdő felirat, 6 px kerekítés, ikon 10 px réssel. Nézetrégiónként egy sárga elsődleges gomb; a termékkártya saját régió. Űrlapban és mobil pénztárban az elsődleges gomb teljes szélességű.

Méretek, töltés, siker

Linkek és áruház gombok

Szövegmezők

Címke a mező felett; a nem kötelező mező jelölt, a kötelező nem. 48 px magas mező, 16 px szöveg (iOS-en nincs nagyítás). Ellenőrzés elhagyáskor, utána élőben; beküldéskor összesítő a mezőkre mutató linkekkel.

Élő ellenőrzés

Választók

Natív jelölőnégyzet, rádiógomb és kapcsoló, 20 px-es jelölővel és 44 px-es célterülettel. A szegmentált vezérlő natív rádiócsoport: a nyilakkal is működik.

Rádiókártya

Szegmentált vezérlő

Léptető

[−][mennyiség][+]: M 132 × 48, S 120 × 44. Minimum 1 (ott a mínusz tiltott), maximum 999; begépelésnél elhagyáskor igazodik. Kosárban a törlés külön gomb.

Két léptető összekötése (termékoldal és ragadó sáv): data-qty-sync="#masik-input". Kosárhoz kötött léptető: data-cart-stepper="termek-id".

Chipek és címkék

Szűrőchip 34 px magas, a darabszám a címke után. Az állapotcímkék kulcsai és feliratai azonosak a Partner alkalmazáséval (site.json → statuses, IC.ui.statusTag()).

Visszajelzés

Megjegyzés (inline figyelmeztetés) négy tónusban, toast egyszerre egy, 4 s után eltűnik (hoverre és fókuszra megáll), üres állapotok.

Betöltés és API-hiba

Az ic:ready előtt a termékterületek csontvázat mutatnak: .skeleton (--text, --title, --media, --btn, --chip, --block, szélesség: --w), .product-card--skeleton (IC.ui.skeletonCards(n)), [data-skeleton], .is-loading. Ha a Happy API nem érhető el (ic:error), a közös .api-error blokk áll a helyükön: IC.ui.apiError({ title, message }); az API magyar üzenete változatlanul jelenik meg, az „Újrapróbálom” gomb ([data-api-retry]) az IC.retry()-t hívja.

Toast

Üres állapotok

A kosara üres.

Válasszon a raktáron lévő termékeink közül – 10 kg-tól házhoz visszük.

Termékek

Nincs találat erre: „pizza”.

Erre gondolt?

jéggömb darált 10 kg prémium koktél

Navigáció

Az utility sáv, a márka fejléce és a lábléc élőben látható ezen az oldalon; a webshop fejléce bármelyik webshop oldalon (Webshop). Alább a részei és a ritkább állapotok.

Webshop fejléc részei

Morzsamenü

Fülek

Oldalfejlécek

A márka belső oldalainak fejléce ennek az oldalnak a teteje: {{> page-header title="…" lead="…"}}. A webshop oldalaké világos, --bg-2 alapon:

Termékkártya

Az egyetlen termékkártya: IC.ui.productCard(), vagy deklaratívan <div class="product-grid" data-product-cards="id1,id2">. Élő: a „Kosárba” valóban a kosárba tesz, az ár követi a bruttó/nettó módot, a teljes kártya a termékoldalra visz.

Állapotok

Kompakt (két oszlop 480 px alatt)

240 px-nél keskenyebb kártyán (konténer-lekérdezés) egyetlen teljes szélességű „Kosárba”, ami az első hozzáadás után léptetővé válik; nettó sor helyett Ft/kg.

Listasor (768 px-től)

A listasor 768 px-től jelenik meg; telefonon a lista helyett a kompakt kártyarács áll. Nézze meg szélesebb ablakban.

Termékoldal

A termékoldal építőelemei. Egyetlen termékoldal van, webshop/termek.html?id=<azonosító>: a Happy API-ból renderelődik a böngészőben. Élő példák: Jégkocka 4 × 4 cm és Darált jég, 10 kg gyűjtő.

Árak

Bruttó Nettó

Prémium: csomag, kilogramm és darab – csak ismert érték (becsült tömegnél nincs Ft/kg)

Jégtömb: csomag és kilogramm

Raktáron

Akár még aznap kiszállítjuk – a pontos időpontot a pénztárban választja ki.

Kiszerelés

• 2,5 kg zsák
• 5 kg zsák
• 10 kg karton (4 × 2,5 kg)
• 10 kg szatyros (4 × 2,5 kg)
• 10 kg gyűjtő (5 × 2 kg)

Forma

Jégkocka 4 × 4 cm

Kiszerelés

48 db / zacskó

Tömeg

≈ 2,8 kg*

Darabtömeg

≈ 58 g / db

Tárolás

Fagyasztva, −18 °C-on

Cikkszám

HZ PRÉMIUM 4X4 48DB/ZACSKÓ

*becsült tömeg: a webshop nem közli, a darabszám és a darabtömeg alapján számoltuk.

A mobil ragadó vásárlósáv (.pdp-sticky) 1024 px alatt jelenik meg, amint a vásárlódoboz kigördült: nézze meg egy termékoldalon telefonszélességen.

Jégmérő

A 10 kg / 20 kg-os tálca: 20 cella, cellánként 1 kg, két tízes csoportban. Kék: ami már a kosárban van; sárga: ez a tétel a választott mennyiséggel. IC.ui.thresholdMeter(totals, { variant, itemKg, pickup }) vagy data-meter="full|compact".

Kosár és pénztár

Kosársor (IC.ui.cartLine()), a kosárfiók alja, a pénztár lépései és választói, összesítő kártya. A minták számai valódi árakból jönnek: 2 × Jégkocka 4 × 4 cm és 1 × Darált jég 10 kg.

Pénztár

Fiók

Ugyanaz a fiktív partner, mint a Partner alkalmazásban: Gleccser Bár (Gleccser Gasztro Kft.), kapcsolattartó Kovács Anna. Mindig „demó adatok” jelöléssel.

Tartalmi blokkok

Díjkártya ({{> fees-card}}), címkártya ({{> location-card}}, soha beágyazott térkép), adattáblázat, GYIK-harmonika és idővonal. A nagyobb szekciómintákat lásd a Minták alatt.

Adattáblázat

Nettó Ft/kg, az előző 30 nap vásárlásai alapján. *Az élő oldalon így szerepel – egyeztetés alatt.

Rétegek

Fiókok, kereső, párbeszédablak: fókuszcsapda, az Escape bezár, a fókusz visszatér az indító elemre, a háttér nem görög (IC.overlay.open(el)). Nyissa meg az élő példányokat: