Faza 1 · dizajn sistem

Živi stilski vodič

Sve na ovoj strani je pravi produkcijski CSS — isti tokeni i komponente koje će koristiti sajt. Ako je odobreno ovde, odobreno je svuda.

1 · Boje

Krem · #F9EFE4Osnovna pozadina stranice. Kontrast sa tekstom 8,6:1 (AAA).
Bež · #EBDBCAGlavna boja brenda — hero, trake, header/footer. Kontrast 7,2:1 (AAA).
Ten · #C2AA90Linije, okviri, prigušeni UI. Nikada pozadina za tekst (4,4:1).
Indigo · #373B88Sav tekst i primarna dugmad.
Žalfija · #516954„Na stanju”, uspešne akcije, prirodni akcenti.
Ruža · #E0A4BDBedževi, brojač korpe, istaknuti akcenti.
Svetla ruža · #EDC2D4Nežne površine, selekcija teksta, tagovi.
Papir · #FFFCF7Kartice i paneli koji „lebde” iznad krem pozadine.

Pravilo: bež nosi identitet, krem nosi sadržaj, indigo nosi reči. Ruža i žalfija su začin — nikada više od 10% ekrana.

2 · Tipografija

Naslovi — Cormorant Garamond 500/600 · sva tri pisma

Predmeti koji nose dušu

Objects that carry a soul — handcrafted in Belgrade

Предметы, несущие душу — керамика ручной работы

Tekst — Manrope 400 · 17px / 1.7

Svaki tanjir, činija i šolja iz ateljea Jefimija oblikovani su rukom — jedan po jedan. Šđčćž i dijakritici moraju izgledati besprekorno.

Every plate, bowl and cup from the Jefimija studio is shaped by hand — one at a time, for tables that celebrate art.

Каждая тарелка, миска и чашка из мастерской «Јефимија» вылеплена вручную — одна за другой, для столов, которые ценят искусство.

Pomoćni stilovi Nadnaslov — eyebrow sa linijom

Uvodni tekst (lead) — veći, prigušeni indigo, za podnaslove sekcija.

Italik serif — za citate, datume i „ljudske” napomene.

3 · Dugmad i linkovi

Na bež površini

Dugmad su uvek pilule sa verzalnim slovima i prostranim spacingom. Hover: blago podizanje + senka. Maksimalno jedno primarno dugme po ekranu.

4 · Forme

1
Na stanju Rasprodato

5 · Slike i kadrovi

Luk (arch) — potpis brenda. Za proizvode, hero i portrete. Uvek portret 4:5.
Krug — za tipove artikala i avatare. Prirodan za tanjire i činije.
Meki pravougaonik (18px) — za kolekcije, blog i novosti.

Smernice za buduću fotografiju: toplo dnevno svetlo, krem/bež pozadine, bez oštrih senki; proizvodi 4:5, kolekcije 1:1, novosti 16:9. Hover na slikama: blagi zum (4%).

6 · Tagovi, kartice, paneli

Kolekcija Radionice Obaveštenje

7 · Principi

Radimo
  • ✓ Velike fotografije, velikodušan beli prostor — UI se povlači.
  • ✓ Jedan luk, jedan akcenat, jedno primarno dugme po ekranu.
  • ✓ Tanke ten linije (1px) za razdvajanje sekcija.
  • ✓ Blagi pokreti: fade-up pri skrolu, 4% zum na hover, ništa brže od 220ms.
  • ✓ Sve tri jezičke verzije se proveravaju pre odobrenja ekrana.
Ne radimo
  • ✕ Tekst preko ten pozadine (#C2AA90) — pada ispod AA kontrasta.
  • ✕ Više od 10% ekrana u roze/žalfija akcentima.
  • ✕ Senke jače od definisanih tokena, tvrdi crni tonovi.
  • ✕ Agresivne animacije, autoplay zvuk, popup prozori.
  • ✕ Novi stilovi „na ruku” — sve novo prvo ulazi u ovaj vodič.