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.
Logo — fayllar va foydalanish qoidalari
Logo va belgi faqat shu fayllardan olinadi — qo‘lda yoki AI bilan chizilmaydi, boshqa saytdan yuklab olinmaydi.
Faqat tasdiqlangan logo — shriftdan yasalmaydi, qo‘shimcha qo‘shilmaydi. Manba: Figma 9c0Rsd7SrN9Wh0WIWqy1ig (149:2, 149:31). Katta “REDFOX” so‘zi — logo emas, kompaniya nomi (animatsiya qilsa bo‘ladi).
1. Fayllar (SVG)
Repoda: public/redfox/brand/. Rastr (PNG) kerak bo‘lsa — shu SVG’dan eksport qilinadi, alohida chizilmaydi.
2. Belgi ranglari
#FF632BQalqon (tulki boshi)#FFFFFFIyak#000000BurunBelgining ranglari har qanday fonda o‘zgarmaydi — oq, qora yoki rangli fonda ham shu uch rang. Qorong‘i fon uchun faqat yozuv oqqa almashadi (alohida fayl yuqorida).
3. Ilova belgisi (Android, iOS, PWA, avatar)
- Ilova belgisida faqat belgi (yozuvsiz), o‘zgarishsiz, aniq markazda (Ustoz, 18.10: yuqoriga surilgani «tepaga turib qolgandek» ko‘rinadi).
- O‘lchamlar va alohida mahsulot belgisi — Taklif tabida (tasdiq kutilmoqda).
4. Mumkin emas
- Belgini yoki logoni qo‘lda / AI bilan qayta chizish, shriftdan yasash.
- Ranglarni almashtirish, gradient, soya, kontur, shaffoflik qo‘shish.
- Cho‘zish, siqish, qiyshaytirish, burish; qismlarni olib tashlash yoki joyini o‘zgartirish.
- Belgiga yozuv, harf, «OS», «Pro» va boshqa qo‘shimchalar yopishtirish.
- Belgini past kontrastli yoki ola-bula rasm ustiga, yoki o‘z rangidagi (to‘q sariq) fonga qo‘yish — qalqon ko‘rinmay qoladi.
Katta «REDFOX» so‘zini shrift bilan yozib animatsiya qilish mumkin — bu logo emas, kompaniya nomi.
Qoidalar
- 01
Asos — TZ (docs/tz) va namunalar; Figma “Final Design” — faqat zaxira. Oq fon, katta havo, 4 ustunli tartib, ingichka chiziqlar, kulrang plitkalar.
- 02
Yorliqlar, raqamlar, narxlar va tugmalar — mono shrift, KATTA harf, harf oralig‘i −4%.
- 03
Tugma — “[ MATN ]” ko‘rinishida (rangsiz fon); bosiladigan kulrang “pill” — faqat menyu va filtrda.
- 04
Birinchi ekran: sarlavha + 3 shisha statistika kartasi + yirik mijozlar logolari; orqada jonli rang oqimi.
- 05
Footer — doim qora; qolgan bo‘limlar sahifa rangida — scroll’da sahifa qoraymaydi (17.10).
- 06
Ish cover’i — 4:5 (Instagram); masonry’da nisbat tartib uchun o‘zgaradi.
- 07
Menyu — «Aylana» uslubi: qobiq va tugmalar to‘liq yumaloq (17.10).
- 08
Ustoz tasdiqlamagan narsa — faqat «Taklif» tabida; tasdiqlangach shu ro‘yxatga ko‘chadi.
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 #FF632B:Asosiy #141414:Qora #F4F3F1:Fon #FFC6A8:Yordamchi]]Xavfsiz zona
Logo atrofidagi bo‘sh joy chegarasi chiziladi
[[xavfsiz-zona logo=/brand/redfox-logo.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/redfox-logo.svg]]Qurilish — to‘r, aylana va diagonallar
Logo variantlari
Yorug‘ / qorong‘i / monoxrom almashtirgich
[[logo-variantlar logo=/brand/redfox-logo.svg qora=/brand/redfox-logo-dark.svg]]
Minimal o‘lcham
Logo kichrayib boradi, eng kichik o‘lchami belgilanadi
[[minimal-olcham logo=/brand/redfox-logo.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="Plus Jakarta Sans" matn="Brendingizni yaratamiz — nomdan qadoqqacha"]]Aa
Plus Jakarta Sans
Brendingizni yaratamiz — nomdan qadoqqacha
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/redfox-logo.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]]
Reels
Vertikal videolar: kartada ovozsiz parcha, bosilsa to‘liq ekranda ovozi bilan. Ketma-ket qatorlar bitta tasma bo‘ladi (admin → Reels’dan nusxa oling)
[[reels /namuna-reels/reel-1.mp4 prevyu=/namuna-reels/reel-1-prevyu.mp4 poster=/namuna-reels/reel-1.jpg izoh="Namuna 1"]]
[[reels /namuna-reels/reel-2.mp4 prevyu=/namuna-reels/reel-2-prevyu.mp4 poster=/namuna-reels/reel-2.jpg izoh="Namuna 2"]]
[[reels /namuna-reels/reel-3.mp4 prevyu=/namuna-reels/reel-3-prevyu.mp4 poster=/namuna-reels/reel-3.jpg izoh="Namuna 3"]]Maxsus kod
Shu loyihaning HTML/CSS/JS bloki (admin → Kod bloklari)
[[kod salom]]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 to‘q sariq
--c-bg--c-surface--c-surface-2--c-text--c-muted--c-faint--c-border--c-accent--c-danger--c-successShriftlar
Aa
Plus Jakarta Sans — sarlavha va matn (Rahim aka, 12.10).
Aa
Martian Mono — yorliq, narx, raqam, tugma (harf oralig‘i −4%).
--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: plitka va rasm — 4–6px; tugma burchaksiz.
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