UI kit i komponente | Kumrić Plus

01

Pravac: „Tehnički list“

Arhitektonska preciznost i toplina drveta - katalog ostaje funkcionalan i kada je identitet premium.

01

Precizno, ne hladno

Hairline linije, kote i mono oznake daju osećaj tehničkog crteža; fotografija drveta i topli akcenat vraćaju toplinu.

02

Funkcija ispred ukrasa

Katalog, filteri i checkout su brzi i čitljivi. Efekti nikada ne usporavaju listu proizvoda.

03

Materijal je heroj

Velike teksture dekora i realne fotografije pogona - bez generičkih ikonica i stock ilustracija.

04

Jedan akcenat

Drvo (#A57B55) koristi se štedljivo: kant traka, oznake, primarni potez u sekciji.

02

Logo

Vektorska adaptacija postojećeg znaka: isti simbol - polovina lista testere, monogram K i rez koji prolazi kroz znak. Pročišćene proporcije, jedan set fajlova za svetlu i tamnu podlogu.

KUMRIĆPLUS

Znak (bez tipografije) · favicon i avatar

Zaštitni prostor · minimalna veličina

Zaštitni prostor sa svih strana = 1/2 visine znaka · minimalna visina znaka 28 px (štampa 10 mm)

Upotreba

Na svetloj podlozi crni znak, na tamnoj inverzni - isti fajl, boja se nasleđuje.
U headeru znak 42 px sa tipografijom KUMRIĆ / PLUS.
Na fotografiji: znak u papirnoj traci ili inverzno preko tamnog dela slike.

Izbegavati

Rotiranje, senke, kontura i gradijenti na znaku.
Menjanje odnosa znaka i teksta ili razmaka između njih.
Znak ispod 28 px - tada ide samo monogram K sa rezom.

Prototip koristi rekonstruisan vektor. Za produkciju je potreban originalni logotip u vektoru (AI/EPS/SVG) da bi se poklopio sa brendiranjem na vozilima i odeći.

03

Tipografija

Archivo (variable, wdth 62–125) za sve naslove i tekst; IBM Plex Mono za šifre, mere i oznake. Lokalno hostovani fontovi.

.display · clamp(42–96px) · wght 450 · wdth 112 · tracking −.042em

Od ideje do gotovog elementa

.h1 / .h2 / .h3 / .h4 / .h5

Univer ploče

Pronađite dekor

Tehničke karakteristike

Odgovarajuće kant trake

Korpa

.lead · 17–20px · .body-l · body 16px · .small · .fine

Pločasti materijali, okov, kant trake i profesionalna obrada materijala.

Standardni tekst: univer je iverica oplemenjena melaminskim papirom sa obe strane. Za korpuse kuhinja i plakara standard je 18 mm.

Mali tekst za pomoćne informacije i tabele.

Fine print: cene su sa PDV-om osim ako nije drugačije naznačeno.

.mono · .label · .eyebrow

H1145 ST10 · 2800 × 2070 × 18 mm · 7.490 RSD

Debljina

02Pronađite dekor

.prose - članci i pravne stranice

Kako izabrati kant traku

Za frontove i vidljive ivice preporučujemo 2 mm ABS traku, a za unutrašnje ivice 0,45 mm.

0,45 mm - police i unutrašnje ivice
2 mm - frontovi i radne površine

Kantujemo istom trakom koju ste izabrali uz ploču.

04

Boje

HEX vrednosti prate predlog iz brifa. Tekst na papiru ima kontrast ≥ 12:1, akcenat na svetlom koristi --wood-700.

Papir

#F6F5F2--paperOsnovna pozadina

#EEECE7--paper-2Sekcije, naglašene trake

#E3E0D9--paper-3Ivice, skeleton

#FBFAF8--cardKartice i polja

Mastilo

#171A1C--inkTekst, primarna dugmad, tamne sekcije

#34383A--ink-2Sekundarni tekst i hover

#5E6366--ink-3Pomoćni tekst

#8C9092--ink-4Oznake, brojači

Drvo (akcenat)

#A57B55--woodAkcenat, kant traka, oznake

#8E6743--wood-600Hover akcenta

#6F5033--wood-700Tekst na svetlom (kontrast 5.4:1)

#EDE3D7--wood-100Podloge i istaknuti blokovi

Semantika

#3D6A4C--okNa stanju, uspeh

#9C6B17--warnPoslednji komadi, upozorenje

#A0412D--errGreška, nedostupno

#3D5968--infoInformacija, po porudžbini

Logo je crno-sivi i industrijski, ali sajt nije: papir, drvo i semantičke boje nose ton. Tamne sekcije (B2B, footer, CTA) koriste --ink.

05

Mreža i ritam

Container 1560 px, gutter clamp(16–48 px), 12 kolona. Sekcije clamp(72–144 px). Radijusi 2 px i 4 px - bez SaaS zaobljenja.

12 kolona · column-gap clamp(16–32px)

123456789101112

Razmaci · --section, --gutter, stack

1624324872120

Površine · --card, --paper-2, hairline, senka

card + hairline

paper-2

sh-1

ink

06

Dugmad

Visine 40 / 48 / 56 px, radijus 2 px. Strelica stoji u sopstvenoj ćeliji (.btn__cell) i pomera se na hover.

Varijante

Veličine i strelica

Stanja

Na tamnoj podlozi

Tekstualni link

07

Forme

Labela iznad polja, poruka ispod. Validacija je jasna i nenametljiva - greška se prikazuje posle napuštanja polja.

Polja

Ime i prezime

Email

Na ovu adresu šaljemo potvrdu

PIB

PIB ima 9 cifara.

Način dostave

Napomena opciono

Izbori i količina

Ista adresa za dostavu Želim račun na firmu

Fizičko lice Pravno lice

Samo na stanju

kom

m

Upload - drag & drop (PDF/XLS/XLSX/CSV)

Prevucite krojnu listu ovde ili izaberite fajl sa računara PDF, XLS, XLSX ili CSV · do 20 MB po fajlu

08

Oznake, statusi i cene

Cena ima B2C i B2B varijantu u istom markup-u - prikaz zavisi od atributa html[data-user].

Badge i chip

PopularnoNovoAko postojiOdobrenoU proveriOdbijeno

DrvoKamen18 mmBojaBraon

Dostupnost

Na stanju · 146 komPoslednji komadi · još 9 komPo porudžbini · 5–7 danaTrenutno nije dostupnoU obradiSpremna za preuzimanje

Cena - maloprodaja

7.490RSD / kom B2B −16%6.290RSD / kom~~7.490~~

PDV uključen · prikaz za gosta i B2C

Cena - B2B (rabat, bez PDV-a)

7.490RSD / kom B2B −16%6.290RSD / kom~~7.490~~

Rabat 16% · cena bez PDV-a

09

Kartice

Kartice proizvoda stoje u mreži sa hairline ćelijama; na hover se pojavljuje „kant traka“ na donjoj ivici.

.pcard u .pgrid

EGGERH1145 ST10

Bardolino hrast prirodni

2800 × 2070 · 18 mm

7.490RSD / kom B2B −16%6.290RSD / kom~~7.490~~

Na stanju

Blum71B3550

Clip top Blumotion šarka 110°

Ugradna · sa amortizerom

690RSD / kom B2B −19%560RSD / kom~~690~~

Na stanju

EGGERU636 ST9

Fjord zelena

2800 × 2070 · 18 mm

6.490RSD / kom B2B −16%5.450RSD / kom~~6.490~~

Na stanju

.decor

EGGER · H1145 ST10 Bardolino hrast prirodni

EGGER · F812 ST9 Levanto mermer beli

.proj / .acard / .brand

Kuhinje · 2025 Kuhinja u orahu i betonu Dedinje, Beograd

Saveti6 min čitanja Kako izabrati debljinu kant trake za kuhinjske elemente Kada je 0,45 mm dovoljno, a kada je 2 mm jedino rešenje - vodič kroz habanje, udarce i vlagu.

EGGER Pločasti materijali · Kant trake486 Kronospan Pločasti materijali312

10

Navigacija

Header, mega meni, mobilni meni i footer su deo svake stranice - ovde su elementi unutar sadržaja.

.crumbs

.tabs

Sadržaj prvog taba.

.acc - akordion / FAQ

Da - za većinu dekora na stanju sečemo pola ploče (2800 × 1035 mm).

Standardni rok je 3–5 radnih dana od potvrde ponude.

.pager · .progress

11

Tabele

Tehnički podaci (.spec) i poslovne tabele (.dtable) - brojevi uvek tabularni i desno poravnati.

.spec

Proizvođač	EGGER
Šifra dekora	H1145 ST10
Debljina	18 mm
Format	2800 × 2070 mm
Emisiona klasa	E1 · CARB2

.dtable u .table-wrap

Porudžbina	Stavki	Bez PDV-a	Status
KE-2026-01914	5	98.120	Primljena
KE-2026-01896	6	157.660	Spremna
KE-2026-01847	11	208.010	Isporučena

12

Slojevi i poruke

Modal, drawer i toast dele iste krive i zaključavanje skrola; Esc i klik van zatvaraju sloj.

Okidači (uživo)

.note - inline poruke

Informacija. Cene su sa PDV-om; za B2B nalog prikazuju se cene bez PDV-a.

Uspešno. Krojna lista je poslata - javljamo se sa ponudom.

Pažnja. Za ovaj dekor na stanju je još 9 ploča.

Greška. Plaćanje nije potvrđeno - pokušajte ponovo ili izaberite uplatnicu.

Kantujemo istom trakom - izaberite je u krojnoj listi.

13

Stanja i skeleton

Svako stanje ima objašnjenje i izlaz. Pregled svih sistemskih stanja je na posebnoj strani.

Skeleton kartice

Prazno stanje

Nema proizvoda za izabrane filtere.

Uklonite neki filter ili proširite raspon cene.

Uspeh

Porudžbina je primljena.

01Potvrda na email
02Priprema u magacinu
03Preuzimanje ili dostava

Sva sistemska stanja

14

Ikonice

Jedan set: 24 px mreža, stroke 1.5, prave ivice. Bez emodžija i bez dva stila u istom ekranu.

search

user

cart

cart-plus

arrow-right

arrow-left

arrow-up-right

arrow-down

chevron-down

chevron-up

chevron-right

chevron-left

close

menu

phone

mail

clock

heart

plus

minus

check

check-circle

x-circle

info

alert

upload

download

file

filter

grid

list

trash

refresh

copy

truck

cut

edge

optimize

cnc

drill

box

store

card

bank

cash

lock

building

bolt

bookmark

folder

eye

zoom

share

logout

home

calendar

external

sort

layers

ruler

chat

settings

tag

percent

send

sparkle

image

expand

dot

wrench

15

Potpisni detalji

Elementi po kojima se sajt prepoznaje - koristiti ih štedljivo i uvek sa značenjem.

Kote (dim) i crop marke

Tehnički crtež ploče

Eyebrow sa brojem sekcije

02Pronađite dekor

Brojevi vode kroz stranicu i ponavljaju se u navigaciji sekcija.

Kant traka na hover (pređite preko kartice)

EGGERH3710 ST12

Carini orah prirodni

2800 × 2070 · 18 mm

8.190RSD / kom B2B −16%6.890RSD / kom~~8.190~~

Poslednji komadi

16

Pokret

Samo transform i opacity. Krive: --ease-out za ulaz, --ease za boje, --ease-io za duge poteze.

Trajanja i krive

--t-fast220 msboje, hover

--t450 mspaneli, otvaranje

--t-slow900 mszoom fotografije

reveal900–1100 msulaz na skrol, stagger 70 ms

Primeri

Zoom fotografije · kant traka na ivici · puls indikatora stanja