Preskoči na sadržaj
v1.0 · vanilla · zero deps

Neobrutalism
UI Kit

Samostalna komponentna biblioteka. Debele crne ivice, tvrde senke bez blur-a, nula radijusa i boje koje viču. Svaki blok je označen HTML komentarom — otvori source, kopiraj, zalepi.

Pogledaj tokene
01

Design tokens

Klikni na swatch da kopiraš hex. Sve boje su CSS custom properties na :root — zameni šest vrednosti i ceo kit menja paletu.

Core palette
Extended palette
Borders & shadows
--nb-border

3px solid var(--nb-black)

--nb-border-thick

4px solid var(--nb-black)

--nb-shadow-sm

3px 3px 0 var(--nb-black)

--nb-shadow

6px 6px 0 var(--nb-black)

--nb-shadow-lg

10px 10px 0 var(--nb-black)

--nb-shadow-active

2px 2px 0 var(--nb-black)

Kopiraj u svoj projekat
:root — tokens 
:root{
  /* CORE PALETTE */
  --nb-yellow:  #FFD93D;
  --nb-pink:    #FF5E9C;
  --nb-purple:  #9B5DE5;
  --nb-green:   #3DDC97;
  --nb-black:   #111111;
  --nb-cream:   #FFF6E5;

  /* EXTENDED */
  --nb-red:     #FF4F4F;
  --nb-blue:    #4D8BFF;
  --nb-white:   #FFFFFF;
  --nb-gray:    #D8D2C2;

  /* BORDERS */
  --nb-border:       3px solid var(--nb-black);
  --nb-border-thick: 4px solid var(--nb-black);
  --nb-radius:       0px;

  /* HARD SHADOWS (no blur) */
  --nb-shadow-sm:     3px  3px 0 var(--nb-black);
  --nb-shadow:        6px  6px 0 var(--nb-black);
  --nb-shadow-lg:    10px 10px 0 var(--nb-black);
  --nb-shadow-hover:  9px  9px 0 var(--nb-black);
  --nb-shadow-active: 2px  2px 0 var(--nb-black);

  /* TYPE */
  --nb-font-display: 'Archivo Black', sans-serif;
  --nb-font-body:    'Inter', sans-serif;

  /* MOTION */
  --nb-dur:  .15s;
  --nb-ease: cubic-bezier(.2,.9,.3,1.3);
}
02

Typography

Dva fonta: Archivo Black za display naslove (h1–h3), Inter za sve ostalo — h4–h6 idu na Inter 900 jer je Archivo Black pretežak na malim veličinama.

Display — Archivo Black 400

Aa

ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 &@#!?

Body — Inter 400 / 500 / 700 / 900

400 — Regular. Neobrutalizam ne traži tanke poteze.

500 — Medium. Podrazumevani weight za inpute.

700 — Bold. Linkovi, labele, nav.

900 — Black. Dugmad, bedževi, mali naslovi.

Heading scale

Heading one

h1 · Archivo Black
clamp(2.5rem, 8vw, 5.5rem)

Heading two

h2 · Archivo Black
clamp(1.9rem, 5vw, 3.25rem)

Heading three

h3 · Archivo Black
clamp(1.4rem, 3.4vw, 2.1rem)

Heading four

h4 · Inter 900 · 1.3rem
Heading five
h5 · Inter 900 · 1.05rem
Heading six
h6 · Inter 900 · .875rem · ls .08em

Lead paragraph — .nb-lead. Koristi se odmah ispod h1 ili h2.

Body tekst. Line-height 1.65, max-width 66ch da red ostane čitljiv. Link izgleda ovako i na hover dobija žutu podlogu.

Small / muted — .nb-small .nb-muted. Za captions i meta podatke.

body · Inter 400
1rem / 1.65
03

Buttons

Hover: blagi tilt (−1.2°) + pomeraj gore-levo, senka raste 6px → 9px. Active: skok dole-desno, senka pada na 2px — kao da je dugme fizički pritisnuto.

Variants
Sizes
With icon & as link
Saznaj više
04

Form fields

Focus stanje: polje odskoči gore-levo, senka naraste, pozadina postane žuta. Nemoguće je promašiti gde ti je kursor.

Klikni u polje da vidiš focus stanje.
Unesi validan URL (npr. https://primer.rs)
05

Cards

Tri tipa: obična, sa obojenim top-tab-om (folder stil), i stat kartica sa ikonicom + badge brojem.

Basic

Obična kartica

Bela pozadina, 3px ivica, 6px hard senka. Na hover se podiže gore-levo.

Default

Obojena kartica

Dodaj .nb-card--yellow / --pink / --green / --purple.

.nb-card--yellow

Purple varijanta

Tekst automatski prelazi u belu radi kontrasta.

.nb-card--purple
Tabbed (folder style)
Collections

Design inspo

Top-tab je zaseban element iznad kartice, sa border-bottom:0 i negativnim margin-om.

24 linka
Reading list

Za kasnije

Boju taba menjaš modifikatorom — --pink, --green, --yellow.

9 linkova
Archive

Arhiva

Tab i kartica se podižu zajedno na hover jer je hover na roditelju.

132 linka
Stat cards (icon + badge)
+12

1.284

Sačuvani linkovi

NEW

36

Kolekcije

99+

248

Omiljeno

06

Badges & tags

Iste ivice i senke, samo manje. NEW tag je nakrivljen i ima treptajuću tačku.

Colors
Default Yellow Pink Purple Green Red Blue Black
Pills, status & NEW
Pill Live NEW HOT BETA
Removable chips
design css vanilla-js neobrutalism
08

Alerts & toasts

Ista komponenta služi i kao inline alert i kao toast — toast samo dobija wrapper .nb-toast i ide u fiksni stack.

Inline alerts

Sačuvano

Link je dodat u kolekciju „Design inspo".

Info

Sinhronizacija ide na svakih 15 minuta.

Upozorenje

Ostalo ti je 3 slobodna mesta u besplatnom planu.

Toasts (klikni)
09

Checkbox & toggle

Kvadratni checkbox sa 3px ivicom, kvačica se skalira iz nule. Toggle je kvadratni track sa kvadratnim knob-om — bez ijednog zaobljenja.

Checkbox
Radio
Toggle switch