eweb · dikalvė
EN
Stiliaus knyga

Kalvė kala ir sau

Stiliaus knyga sutvirtina prekės ženklą: spalvas, šriftus, ritmą, komponentus ir naudojimo taisykles viename kodekse. Su ja viskas atrodo vienodai — svetainėje, sąskaitoje, pasiūlyme, vizitinėje. Ji lengvai perduodama komandai ir lieka tavo, kaip ir pats Nuosavybės pasas.

Tai ne paveikslėlis. Tai mūsų pačių knyga, nukalta iš tikrųjų šios svetainės žetonų — ką matai, tai ir veikia.

„Ašmenys" plane nukalame tokią knygą ir tau: logotipą + sistemą. Žiūrėti kainas →

Ženklas

Lockup „eweb · dikalvė"

Ženklas — keturkampė kibirkštis (vario akcentas, pasukta 45°) ir monospace užrašas. Vienas lockup, be variacijų: ten, kur reikia, naudojame būtent jį.

eweb · dikalvė
Pagrindinis lockup — visuomet šis, be pakeitimų
  • Tinka: Aplink ženklą laisvas tarpas — bent vienos kibirkšties kraštinės.
  • Tinka: Mažiausias dydis — 1.5rem aukščio; mažesnis nebeiskaitomas.
  • Netinka: Niekuomet ne tempiamas ar iškraipomas — proporcijos visada tos pačios.
  • Netinka: Spalva keičiama tik akcento žetonu — niekuomet atsitiktine.
Detalės

Komponentai iš tos pačios kalvės

Kiekvienas komponentas čia — tas pats, kuris veikia svetainėje. Nebuvo atskirai pieštas stiliaus knygai: kortelė, mygtukas, chip ir pasiūlymo eilutė imti tiesiai iš puslapio.

Chip
EN◐
Kortelė (.pillar)

Paruošta DI paieškai

Struktūra ir turinys, kuriuos supranta ChatGPT, Perplexity ir Google AI.

Mygtukas (.btn)Pasirinkti
Kontūrinis (.btn.ghost)Žiūrėti kainas
Konfigūratoriaus eilutė
◆ Ašmenys€1900
+ Stiliaus knygaįskaičiuota
Spalvos

Grafito ir vario šeima

Devyni žetonai: šiltas popieriaus fonas, rašalo tekstas ir vienas ryškus akcentas — kalvės varis. Tamsioje temoje visi perverčiami, akcentas šviesesnis, kad kontrastas išliktų.

  • --paper#F2EFE9 · #141210Fonas — šiltas popierius
  • --surface#FBF9F4 · #1E1B16Kortelės, paneliai
  • --ink#1B1813 · #EFEAE0Pagrindinis tekstas
  • --muted#6A645A · #A79F91Antraeilis tekstas, užrašos
  • --line#E3DDD2 · #332E25Linijos, rėmeliai
  • --accent#A8490B · #E07E31Akcentas — kalvės varis
  • --accent-soft#C4691F · #C4691FAkcento užvedimas (hover)
  • --on-accent#FBF7F0 · #171207Tekstas ant akcento
  • --good#3E6B4F · #7FB08CTeigiami ženklai, „sėkmė"

Kontrastas tikrintas axe — WCAG AA, 0 pažeidimų. Kiekvienos pavyzdžio spalvos kvadratas atvaizduotas iš tikrojo CSS žetono, ne iš paveikslėlio.

Tipografija

System-ui + monospace skaičiams

Be išorinių šriftų — system-ui visur, monospace tik skaičiams. Puslapis pasiverčia į sistemą, kuria žiūri lankytojas, o kainos nesivytą tarp eilučių.

Šriftų rinkiniai: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif · ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace

clamp(2.4–4rem) · 760Kalvė kala tau
clamp(1.8–2.6rem) · 760Kalvė kala tau
1.1rem · 760Konkretu, be tuščių pažadų
1.05rem · 650Konkretu, be tuščių pažadų
clamp(16–18px) / 1.65 · 400Nukalame svetaines nuo nulio — kodas ir domenas lieka tavo.
ui-monospace · tabular-nums · 600hash8 · b459b868

Skaičiai visada monospace — kad vertės nesivytų ir būtų lengva palyginti.

Monospace€1900
Proporcionalus€1900
Ritmas

Tarpai, spinduliai, linijos

Vienetas — rem. Tarpai didėja su kampu, spinduliai eina nuo .35rem (chip) iki .9rem (hero), linijos plonos, šešėlis lengvas. Viskas iš tų pačių žetonų, kuriuos matai čia.

--wrapmin(100% − 3rem, 72rem)
radius / btn.45rem
radius / chip.35rem
radius / card.7rem
radius / panel.8rem
radius / hero.9rem
radius / pill2rem
border1px solid var(--line)
border / feat1.5px solid
--shadow0 1px 2px · 0 10px 30px
Balsas

Kalvės balsas

Penkios taisyklės, kuriomis rašome. Ne deklaracijos — įprotis, matomas kiekviename sakinyyje čia.

  • Konkretu, be tuščių pažadų

    TinkaPristatome per kelias dienas.

    NetinkaGreitai ir kokybiškai.

  • Matuojama kalba

    TinkaLighthouse 95+ — patikrink pats.

    NetinkaLabai greita svetainė.

  • Lietuviškai, ne vertimu

    Tinkajuodraštis

    Netinkadraftas

  • Šiluma be saldumo

    TinkaMums įdomu, kad startuotum.

    NetinkaMylim kiekvieną klientą!!!

  • Sakome, ką valdo klientas

    TinkaKodas, domenas, turinys — tavo.

    NetinkaViskuo pasirūpinsime.

Tavo eilė

Tokią knygą nukalame ir tau

Tokį patį kodeksą — ženklą, spalvas, tipografiją, komponentus ir balsą — nukalame tavo verslui.

Pradėti pokalbį →