Media
Bitta rasm, GIF yoki video; eni: toliq / keng / konteyner
[[media /design-system/namuna/mokap-1.svg izoh="Media bloki — rasm, GIF yoki video" en=konteyner]]
Dizayn tizimi
Saytdagi har bir rang, shrift va komponent shu yerda. Yangi narsa avval shu sahifaga tushadi.
Qoidalar
- 01
Asos — namunalar gibridi: #3 Fancy Solutions (oq fon, nuqtali to‘r, ismli kursorlar, yorqin urg‘ular, yumaloq burchaklar) va #5 Dalee (“/” urg‘u belgisi, strelkali pill kartalar).
- 02
Sarlavhalar oddiy harf bilan, oldida binafsha “/” belgisi; yorliqlar — kichik, qalin.
- 03
Tugmalar — yumaloq “pill”, strelka ↗ bilan; asosiysi to‘q, ikkinchi darajalisi chegara bilan.
- 04
Kartalar — 16–28px burchak; xizmat kartalari yorqin rangli raqam bilan (binafsha, laym, pushti, to‘q sariq).
- 05
Menyu — pastda suzuvchi qorong‘i pill (desktop); telefonda — burger.
- 06
Birinchi ekran: sarlavha + 3 rangli statistika kartasi + mijozlar logolari; orqada nuqtali to‘r va ismli kursorlar.
- 07
Mening (Claude) taklifim bo‘lgan joylar sahifa izohida “[Mening taklifim]” deb belgilanadi.
Ko‘rgazma — loyiha sahifasi uchun interaktiv bloklar
Admin → Ishlar → loyiha → Final (yoki Ishxona) matniga alohida qatorda yoziladi yoki “+ Ko‘rgazma bloki” menyusidan qo‘yiladi. Ranglar — shu brend tokenlaridan.
Media qatori
2–4 ta rasm yoki video yonma-yon
[[qator /design-system/namuna/mokap-2.svg /design-system/namuna/mokap-3.svg /design-system/namuna/mokap-4.svg]]
Rang palitrasi
Brend ranglari: HEX, RGB, CMYK; bosilsa nusxa oladi
[[palitra #6C47FF:Asosiy #141414:Qora #F4F3F1:Fon #FFC6A8:Yordamchi]]Xavfsiz zona
Logo atrofidagi bo‘sh joy chegarasi chiziladi
[[xavfsiz-zona logo=/brand/webfox-soz-vaqtincha.svg zona=0.25]]
xxXavfsiz zona — logo atrofida 25% bo‘sh joy
Logo qurilishi
To‘r va yordamchi chiziqlar chiziladi, so‘ng logo paydo bo‘ladi
[[logo-qurilish logo=/brand/webfox-soz-vaqtincha.svg]]Qurilish — to‘r, aylana va diagonallar
Logo variantlari
Yorug‘ / qorong‘i / monoxrom almashtirgich
[[logo-variantlar logo=/brand/webfox-soz-vaqtincha.svg qora=/brand/webfox-soz-vaqtincha-oq.svg]]
Minimal o‘lcham
Logo kichrayib boradi, eng kichik o‘lchami belgilanadi
[[minimal-olcham logo=/brand/webfox-soz-vaqtincha.svg px=24 mm=8]]Eng kichik o‘lcham: ekranda 24 px, bosmada 8 mm
Tipografika
Katta “Aa”, qalinlik slayderi, alifbo (Google Fonts nomi)
[[tipografika shrift="Onest" matn="Saytingiz va ilovangizni yaratamiz — g‘oyadan ishga tushirishgacha"]]Aa
Onest
Saytingiz va ilovangizni yaratamiz — g‘oyadan ishga tushirishgacha
Aa Bb Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Xx Yy Zz Oʻoʻ Gʻgʻ Shsh Chch 0123456789
To‘g‘ri / noto‘g‘ri
To‘g‘ri qo‘llash va 4 ta xato: cho‘zish, burish, rang, soya
[[togri-notogri logo=/brand/webfox-soz-vaqtincha.svg]]Oldin / keyin
Surib solishtirish slayderi
[[oldin-keyin /design-system/namuna/oldin.svg /design-system/namuna/keyin.svg]]
OldinKeyinMokaplar (parallaks)
Scroll’da turli tezlikda siljiydigan 2–4 mokap
[[mokap /design-system/namuna/mokap-1.svg /design-system/namuna/mokap-2.svg /design-system/namuna/mokap-3.svg]]Qurilma ramkasi
Uzun sayt skrinshoti ramka ichida o‘zi aylanadi
[[qurilma /design-system/namuna/sayt.svg tur=desktop]]
Ilova ekranlari
Mobil ekranlar telefon ramkasida, suriladigan qator
[[ekranlar /design-system/namuna/ekran-1.svg /design-system/namuna/ekran-2.svg /design-system/namuna/ekran-3.svg /design-system/namuna/ekran-4.svg /design-system/namuna/ekran-5.svg]]
Maxsus kod
Shu loyihaning HTML/CSS/JS bloki (admin → Kod bloklari)
[[kod salom]]Logo
webfox/Yorug‘ fon
webfox/Qorong‘i fon
VAQTINCHA so‘z-belgi: WebFox’ning tasdiqlangan logosi hali yo‘q. Tasdiqlangan logo kelgach faqat u ishlatiladi.
Ranglar
Standart — yorug‘. Qorong‘i rejim — menyudagi ☀/☾ tugmasi. Bo‘lim tuslari mavzudan mustaqil.
Sahifa (mavzuga bog‘liq)
--c-bg--c-surface--c-surface-2--c-text--c-muted--c-faint--c-border--c-accent--c-danger--c-successink — doim qora (Ishlar, Bog‘lanish)
--c-bg--c-surface--c-surface-2--c-text--c-muted--c-faint--c-border--c-accent--c-danger--c-successaccent — doim binafsha
--c-bg--c-surface--c-surface-2--c-text--c-muted--c-faint--c-border--c-accent--c-danger--c-successShriftlar
Aa
Onest — sarlavha va matn (o‘zbek lotin harflari, ‘ va ’ belgilari bilan).
Aa
Geist Mono — raqamlar, narxlar, kod uslubidagi yorliqlar.
--fs-xsYorliq, izoh
--fs-smIkkinchi darajali matn
--fs-baseAsosiy matn
--fs-lgKarta sarlavhasi
--fs-title3BO‘LIM SARLAVHASI
--fs-xlSAHIFA SARLAVHASI
--fs-displayKatta jumla
Oraliqlar va burchaklar
--space-1--space-2--space-3--space-4--space-5--space-6--space-7Burchak: kartalar 16px, katta bloklar 28px, tugma va chiplar — to‘liq yumaloq. Kontent kengligi: 1280px gacha, chekka 6%.
Tugmalar va menyu
Sahifa boshi
Portfolio
Xizmat qatori va tarif
- [01]
Xizmat nomi
Xizmat tavsifi — qisqa, 1–2 qator: nima qilamiz va mijoz nima oladi.
- Boshlang‘ich narx
- 24,200,000 so‘m
- Muddat
- 14 kunda