O‘zbekiston termajamoasi Osiyo kubogiga yo‘l oldi
Bugun 11:4012 480
01 · Asoslar
Brend va tamoyillar
Daryo — O‘zbekistonning tezkor yangiliklar mediasi. Dizayn tili shu vazifadan kelib chiqadi: aniq ierarxiya, imzo ko‘k rang va har bir mayda detalda sezilarli, ammo xalaqit bermaydigan harakat.
Dizayn tamoyillari
4 ta asosiy qoidaKontent — birinchi
Interfeys yangilikka xizmat qiladi: og‘ir, qora sarlavhalar (font-black) e’tiborni ushlaydi, meta-ma’lumot esa yengil va bosiq (font-medium, muted).
Ko‘k — imzo rang
Daryo ko‘ki (#0096D2) katta sirtlarni bo‘yamaydi — u aksent: faol navigatsiya, meta-ikonkalar, chiplar va urg‘u chiziqlarida yashaydi.
Harakat — ma’noli
Uy standarti 500ms. Hover doim javob beradi: rasm 105% ga kattalashadi, sarlavha ko‘karadi, strelkalar almashinadi. Bezak uchun animatsiya yo‘q.
Yengil va chidamli
Effektlar (aurora, shader, blur) faqat qorong‘i tahririyat bo‘limlarida, har doim statik fallback va prefers-reduced-motion hurmati bilan.
Logotip
header balandligi h-7 · 28px
Qorong‘i rejimda logotip brightness-0 invert bilan oq rangga o‘giriladi. Logotip atrofida kamida o‘z balandligining yarmicha bo‘sh joy qoldiring; uni cho‘zish, soya berish yoki qayta bo‘yash taqiqlanadi.
02 · Asoslar
Ranglar
Ikki qatlamli tizim: brend palitrasi (hex, faqat aksent uchun) va semantik tokenlar (oklch, light/dark juftliklari). Interfeys ranglari doim semantik token orqali yoziladi — hex faqat brend elementlarida.
Brend palitrasi
hex · @theme inlineDaryo Blue
Blue Light
Blue Dark
Hover
Hover Light
Navy
Dark
daryo-blueImzo aksent: faol nav, meta-ikonkalar, chiplar
daryo-blue-lightYorqin urg‘u: gradientlar, dark rejim matni
daryo-blue-darkHover chegaralar, drop-cap, «Barchasi» havolalar
daryo-hoverSarlavha hover rangi — har bir kartada
daryo-hover-lightQorong‘i bo‘limlarda sarlavha hover
daryo-navyQorong‘i sirtlar, rasm overlay gradientlari
daryo-darkNeytral to‘q sirt
Semantik tokenlar
bir xil markup — ikki temaTokenlar :root va .dark bloklarida oklch formatida aniqlanadi. Quyidagi ikki panel aynan bitta koddan iborat — o‘ngdagisi faqat dark klass ichida.
Light · :rootoklch
--background
Sahifa foni
--foreground
Asosiy matn
--card
Karta sirti
--muted
Yumshoq fon
--muted-foreground
Ikkilamchi matn
--primary
Asosiy interaktiv
--secondary
Ikkilamchi sirt
--accent
Hover sirti
--destructive
Xavfli amal
--border
Chegaralar
--ring
Fokus halqasi
Dark · .darkoklch
--background
Sahifa foni
--foreground
Asosiy matn
--card
Karta sirti
--muted
Yumshoq fon
--muted-foreground
Ikkilamchi matn
--primary
Asosiy interaktiv
--secondary
Ikkilamchi sirt
--accent
Hover sirti
--destructive
Xavfli amal
--border
Chegaralar
--ring
Fokus halqasi
Rubrika gradientlari
kategoriya sahifalari aksentlariDunyo
O‘zbekiston
Markaziy Osiyo
Pul
Madaniyat
Sport
Layfstayl
Gradient aksentlar faqat mayda detallarda ishlatiladi: sarlavha ostidagi chiziq, 1.5px li nuqta, bento-plitka fonlari. Katta matn bloklariga qo‘llanmaydi.
Status ranglari
holat ranglariO‘sish · Jonli
valyuta ↑, jonli efir nuqtasi
Pasayish
valyuta ↓
Ogohlantirish · PR
ob-havo, reklama belgisi
Video · Efir
video bo‘limi, pulsatsiya
✓ Shunday qiling
- •Interfeys ranglarini doim semantik token orqali yozing:
text-foreground,bg-muted - •Brend ko‘kini aksent sifatida ishlating — ikonka, chip, chiziq, faol holat
- •Qorong‘i sirtlarda matn hoverini
daryo-hover-lightbilan bering
✕ Bunday qilmang
- •Yangi UIda hex qiymatlarni to‘g‘ridan-to‘g‘ri yozmang — token qo‘shing
- •Brend ko‘ki bilan katta fon sirtlarini bo‘yamang — u urg‘u rangi
- •Bir elementda ikkita aksent rangni aralashtirmang
03 · Asoslar
Tipografika
Yagona Fira Sans oilasi vazn zinapoyasi orqali butun ierarxiyani quradi: sarlavhalar og‘ir va zich, matn ochiq va o‘qishga qulay, meta esa yengil hamda raqamlarda tekis.
Shrift oilasi
Google Fonts · 400/500/600/700/800/900Fira Sans
AaBbDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvXxYyZz O‘o‘ G‘g‘ Shsh Chch 0123456789
Vazn zinapoyasi
Daryo500 · Medium · meta
Daryo600 · Semibold · feed sarlavhalari
Daryo700 · Bold · karta sarlavhalari
Daryo800 · Extrabold · blok sarlavhalari
Daryo900 · Black · bo‘lim/sahifa sarlavhalari
Rol shkalasi
Har bir rol — jonli namuna va klasslari bilanMaqola H1
Markaziy Osiyo davlatlari yangi transport kelishuvini imzoladi
Bo‘lim sarlavhasiSectionHeader
So‘nggi yangiliklar
Featured H2
Toshkent metrosida yangi yo‘nalish sinov rejimida ishga tushirildi
Hero sarlavha
O‘zbekiston va Qozog‘iston o‘rtasidagi savdo aylanmasi rekord darajaga yetdi
Karta sarlavhasi
Paxta narxi jahon bozorida yana ko‘tarila boshladi
Feed qatori
Samarqandda xalqaro turizm forumi o‘z ishini boshladi
Maqola matni (lead)
Hukumat qarori bilan yangi transport yo‘lagi loyihasi tasdiqlandi — bu mintaqadagi yuk tashish xarajatlarini sezilarli kamaytiradi.
Asosiy matn
Mutaxassislarning fikricha, yangi kelishuv mintaqa iqtisodiyotiga uzoq muddatli ijobiy ta’sir ko‘rsatadi va logistika sohasida minglab yangi ish o‘rinlarini yaratadi.
Meta
11 iyul 2026, 14:32 · 3 daqiqa o‘qish · 12 480 marta ko‘rilgan
Eyebrow
Iqtisodiyot
Serif aksent
PT Serif · faqat persona/tahririy kontekstda«Jurnalistika — bu har kuni yangidan boshlanadigan hikoya»
Serif aksent (PT Serif) faqat persona/tahririy sarlavhalar va pull-quote’lar uchun ishlatiladi — yangiliklar lentasi, kartalar va interfeys matnlarida hech qachon qo‘llanilmaydi.
Drop-cap
Uzun tahririy maqolalarning birinchi xatboshisiQadimiy Ipak yo‘li bo‘ylab joylashgan shaharlar bugun yana mintaqaviy savdoning markaziga aylanmoqda. Yangi temir yo‘l liniyalari, zamonaviy logistika markazlari va soddalashtirilgan bojxona tartiblari tufayli yuklar Xitoydan Yevropaga ilgarigidan ancha tez yetib bormoqda.
Raqamlar
Hisoblagich va vaqt belgilarida majburiytabular-nums bilan
11:45
09:03
1 234 567
987 011
14:32
Standart (proporsional)Raqam kengliklari har xil — ustun va taymerlarda «sakraydi».
11:45
09:03
1 234 567
987 011
14:32
✓ Shunday qiling
- •Sarlavhani og‘ir tuting (bold → black), meta ma’lumotni esa yengil —
font-medium. - •
tracking-tightni faqat 17px va undan katta sarlavhalarda qo‘llang. - •Barcha hisoblagich va vaqt belgilarida
tabular-numsishlating.
✕ Bunday qilmang
- •900 (black) vaznni oddiy matn xatboshilarida ishlatmang.
- •Bitta kartada uch va undan ortiq vaznni aralashtirmang.
- •Uppercase’ni uzun matnga qo‘llamang — u faqat mayda yorliqlar uchun.
04 · Asoslar
Layout va bo‘shliqlar
Sahifalar kengaytirilgan maxsus konteyner, 12 kolonnali to‘r va izchil bo‘shliq ritmi asosida quriladi — 1200–1400px ekranlarda kontent deyarli to‘liq kenglikdan foydalanadi.
Konteyner
width: 100% · padding-inline: 1rem@640
640px
@768
768px
@1024
1000px
@1200
1180px
@1440
1400px
Kenglik
Har doim to‘liq kenglik, max-width bilan cheklanadi
Ichki chekka
Har bir tomonda 16px doimiy himoya maydoni
Maxsus nuqtalar
xl va 2xl standartdan farq qiladi — konteyner ertaroq o‘sadi
12 kolonnali to‘r
grid grid-cols-12 gap-61
2
3
4
5
6
7
8
9
10
11
12
Kontent · col-span-9
Sidebar · col-span-3
col-span-7
col-span-5
Bo‘shliq shkalasi
Bir bo‘limda — bitta gap qiymatigap-3
12px — Mobil ro‘yxatlar va zich kartalar
gap-5
20px — Karusel va kategoriya tasmasi
gap-6
24px — Kartalar to‘ri va asosiy kolonkalar
gap-x-6 / y-8
32px — Asosiy yangiliklar to‘ri (gorizontal 24, vertikal 32)
space-y-12
48px — Bosh sahifadagi bo‘limlar orasi
Ichki ritm
Ichki bo‘limlar py-6…py-12 oralig‘ida; uzun bo‘limlar content-visibility bilan yengillashtiriladi
Breakpointlar
xl va 2xl — maxsus qiymatlarsm
640pxMobil → kichik planshet: kartalar 2 kolonnaga o‘tadi
md
768pxPlanshet: kategoriya tasmasi 2 kolonna bo‘ladi
lg
1024pxDesktop: 12 kolonnali to‘r va sidebar faollashadi
xl (maxsus)
1200pxKeng desktop: konteyner 1180px gacha kengayadi
2xl (maxsus)
1440pxJuda keng ekran: konteyner 1400px bilan cheklanadi
✓ Shunday qiling
- •12 kolonnali to‘rga yopishing: 9+3, 7/5 yoki 8/4 taqsimotlardan foydalaning
- •Bo‘limlar orasidagi vertikal ritmni space-y-12 bilan saqlang
- •Bir bo‘lim ichida faqat bitta gap qiymatini qo‘llang
✕ Bunday qilmang
- •Ixtiyoriy px qiymatli margin’lar bilan bo‘shliq yaratmang
- •Konteyner ichiga yana konteyner joylashtirmang
- •Sidebar’ni 3 kolonnadan kengaytirmang
05 · Asoslar
Sirtlar: radius, chegara, soya
Sirtlarning qatlamini radius, hairline chegaralar va sovuq (ko‘k-navy tusli) imzo soyalar belgilaydi — yassi ro‘yxatdan mega-menyugacha har bir daraja o‘z uslubiga ega.
Radius shkalasi
Asos: --radius: 0.625rem (10px)6px
Mayda chiplar
8px
Kichik tugmalar
10px
Standart karta
14px
Kartalar (71 marta)
18px
Konteynerlar (88 marta)
22px
Yirik bloklar
pill
Pill va belgilar (320 marta)
Chegara darajalari
Dark rejimda: oklch(1 0 0 / 10%)To‘liq
Standart hairline chegara
Yumshatilgan
Ichki ajratgichlar
Nozik
Fonga yaqin sirtlar
Ring
Layoutga ta’sir qilmaydigan muqobil
Soya to‘plami
Standart shadow-* emas — sovuq tusli imzo soyalarKarta ko‘tarilishi
Hover urg‘usi
Muharrir tanlovi hover
Mega-menyu
Qorong‘i video romka
Glow
Brutalist ofset
Qatlamlar (elevation) qoidasi
Qatlam chuqurlashgani sari soya kuchayadiYassi
Ro‘yxatlar va jadval qatorlari — faqat chegara, soyasiz
Karta
Kontent kartalari — chegara va yumshoq sovuq soya
Suzuvchi
Dropdown va popoverlar — sirtdan aniq ajraladi
Modal
Mega-menyu va modallar — eng chuqur qatlam
✓ Shunday qiling
- •Sovuq (ko‘k-navy tusli) soyalardan foydalaning — ular brendga mos
- •Radiusni rolga moslang: pill = full, karta = lg/xl, konteyner = 2xl
- •Dark rejimda soya o‘rniga ring-white/10 qo‘llang
✕ Bunday qilmang
- •Qora neytral og‘ir soyalar ishlatmang — ular sirtni iflos ko‘rsatadi
- •Bir kartada ikki xil radius aralashtirib yubormang
- •Keskin soya bilan keskin radiusni birga qo‘llamang
06 · Asoslar
Harakat
Harakat tilimiz vazmin va maqsadli: transform hamda opacity asosidagi qisqa o‘tishlar kontentga xalaqit bermasdan interfeysga jon bag‘ishlaydi, prefers-reduced-motion esa har doim hurmat qilinadi.
Davomiylik shkalasi
Qatorlar ustiga kursorni olib boring — farqni his qiling150ms · Mikro
Fokus halqalari, mayda holat almashinuvi
300ms · Ranglar / hover
Rang va fon o‘tishlari, oddiy hoverlar
500ms · Uy standarti
Eng ko‘p ishlatiladigan davomiylik — CTA, kartalar, strelka almashinuvi
700ms · Keng harakat
Rasm zoom, keng siljishlar, Reveal
To‘liq shkala: 150ms mikro-o‘tishlar, 200ms navigatsiya, 300ms ranglar va hover, 500ms uy standarti (eng ko‘p ishlatiladi), 700ms rasm zoom va keng siljishlar, 900–1500ms sekin dekorativ drift uchun.
Easing egri chiziqlari
Karta ustiga kursorni olib boring — nuqta o‘sha easing bilan siljiydiSilliq chiqish (uy standarti)
Reveal va mobil panellar — tez boshlanadi, mayin to‘xtaydi.
Ikki tomonlama (CTA strelka)
CtaButton strelka almashinuvi — sekin kirib, sekin chiqadi.
Prujina (overshoot)
Tab indikatori — manzildan biroz o‘tib, ortga qaytadi.
Imzo patternlar
Har bir demo hover’da jonlanadiReveal — skrollda paydo bo‘lish
Sahifani qayta yuklab, pastga aylantiring — bloklar navbat bilan chiqadiKarta 1
delay=0
Har bir keyingi element 60ms kechikish bilan keladi.
Karta 2
delay=60
Har bir keyingi element 60ms kechikish bilan keladi.
Karta 3
delay=120
Har bir keyingi element 60ms kechikish bilan keladi.
Konvensiya: ro‘yxatlarda kechikish formulasi bilan beriladi. Reveal IntersectionObserver orqali element ekranga kirganda bir marta ishga tushadi va keyin observer uziladi.
Spetsifikatsiya
Reveal trigger
IntersectionObserver, rootMargin pastdan -40px
Reveal siljish
opacity 0→1 va translateY 24px→0, silliq chiqish easing’i bilan
RouteProgress
Kamaytirilgan harakat
Barcha animatsiyalar foydalanuvchi sozlamasini hurmat qiladi
✓ Shunday qiling
- •Asosiy o‘tishlar uchun 500ms uy standartidan foydalaning — butun sayt bo‘ylab bir xil ritm saqlanadi.
- •Faqat transform va opacity’ni animatsiya qiling — ular GPU’da ishlaydi va layout’ni qayta hisoblatmaydi.
- •prefers-reduced-motion’ni hurmat qiling: harakatni kamaytirgan foydalanuvchilarga animatsiyasiz holat ko‘rsating.
✕ Bunday qilmang
- •Layout property’larini (width, height, top, left) animatsiya qilmang — ular har kadrda reflow chaqirib, sahifani sekinlashtiradi.
- •Hover o‘tishlarini 150ms’dan qisqa qilmang — keskin sakrash sifatsiz taassurot qoldiradi.
- •Kontent ustida cheksiz, bezovta qiluvchi animatsiyalar qo‘ymang — harakat e’tiborni matndan tortib olmasligi kerak.
07 · Asoslar
Maxsus effektlar
Aurora fonlar, shisha yuzalar, shimmer skeletlar va imzo gradientlar brendga chuqurlik beradi — ularning barchasi statik fallback va reduced-motion hurmati bilan ishlaydi.
Aurora fon
Qorong‘i tahririyat sahifalari uchun jonli fonQorong‘i tahririyat bo‘limlari uchun fon
Fon bir nechta qatlamdan yig‘iladi: asosiy radial gradientlar chuqurlikni,::before qatlami 22 soniyalik sekin drift harakatini, ::after esa 60 soniyada aylanadigan conic nur qatlamini beradi. .daryo-silk ustidan ipak kabi oqim qo‘shadi. prefers-reduced-motion yoqilganda barcha animatsiyalar o‘chadi va fon statik gradient bo‘lib qoladi.
Shisha (glassmorphism)
Rangli media ustida yarim shaffof yuzalarJonli efir
Shisha yuzalar faqat rangli foto yoki gradient ustida ishlatiladi — oq fon ustida blur effekti ko‘rinmaydi. Matn kontrasti uchun doim yarim shaffof qatlam va nozik oq chegara birga qo‘llanadi.
Shimmer skelet
Yuklanish holatining ikki xil ohangiShimmer (kontent oqimi)
Pulse (kichik elementlar)
Yangiliklar lentasi va maqola kartalari uchun chapdan o‘ngga oqadigan shimmer ishlatiladi — u kontent «kelayotganini» his qildiradi. Avatar, tugma kabi mayda elementlar uchun oddiy pulse yetarli.
Maxsus scrollbar
Lenta uchun 6px gradient scrollbarO‘zbekistonda yangi metro bekati ochildi
Markaziy bank asosiy stavkani o‘zgarishsiz qoldirdi
Toshkentda xalqaro kino festivali boshlandi
Paxta terimi bo‘yicha yangi texnologiya sinovdan o‘tdi
Samarqandda turistlar oqimi rekord darajaga yetdi
IT-park rezidentlari eksport hajmini oshirdi
Milliy terma jamoa navbatdagi o‘yinga tayyorlanmoqda
Yangi avtomobil zavodi qurilishi e’lon qilindi
Maktablarda raqamli darsliklar joriy etilmoqda
Energetika sohasida quyosh stansiyalari kengaymoqda
Farg‘ona vodiysida yangi tezyurar yo‘l ochildi
Sog‘liqni saqlashda telemeditsina xizmatlari yo‘lga qo‘yildi
Eksportchilar uchun yangi imtiyozlar taqdim etildi
Poytaxtda bog‘-park hududlari kengaytirilmoqda
Lentadagi scrollbar 6px kenglikda, thumb esa primary rangdan shaffoflikka o‘tuvchi gradient. Hoverda gradient to‘yinadi, track esa doim ko‘rinmas qoladi.
Gradient to‘plami
Brendning imzo gradientlariRoute progress
Hero radial
Aksent chiziq
Stories halqa
WebGL shader eslatmasi
Og‘ir effekt — faqat kerak joydaPrShaderBackground komponenti @paper-design/shaders-react kutubxonasidagi MeshGradient shaderini speed 0.32 tezlikda ishlatadi. Resurs tejash uchun u faqat viewport yaqinida mount bo‘ladi, low-power rejimda esa statik gradientga tushadi. Shu sababli bu bo‘limda jonli demo ko‘rsatilmaydi.
✓ Shunday qiling
- •Aurora va shader effektlarini faqat qorong‘i tahririyat bo‘limlarida ishlating.
- •Har bir jonli effekt uchun doim statik gradient fallback tayyorlang.
- •prefers-reduced-motion sozlamasini hurmat qiling — animatsiyalar avtomatik o‘chsin.
✕ Bunday qilmang
- •Matn ostida harakatlanuvchi fon qo‘yib, o‘qish kontrastini buzmang.
- •Bir sahifada ikki va undan ortiq WebGL shader ishlatmang.
- •Aurora ustiga yana bir aurora qatlamini qo‘shmang — effektlar bir-birini yutadi.
09 · Komponentlar
Belgilar va chiplar
Belgilar kontentni holat, kategoriya va format bo‘yicha bir qarashda ajratib beradi — ular ixcham, kontrastli va hech qachon tugma vazifasini bajarmaydi.
Badge variantlari
Asosiy shadcn/ui komponentiDefault
Secondary
Destructive
Outline
Brend chiplari
Maqola sarlavhasi va lentadagi brend belgilarKategoriya chipiJamiyat
Trend belgisiTrend
Reklama lentasiReklama
Rasm ustidagi belgilar
Rasm va video ustidagi qatlamlarRasm tegiSport
Jonli / glass belgi
JonliAsosiy
MediaBadge (haqiqiy komponent)
Davomiylik chipi04:32
Teg pillari
Maqola oxiridagi mavzu teglariYordamchi chiplar
Klaviatura va meta-ma’lumot naqshlariKlaviatura tugmalari
⌘KqidiruvEscyopish
Vaqt va ko‘rishlar
12:45 / 11.07.202612 403
✓ Shunday qiling
- •Katta harf va keng tracking’ni faqat mayda yorliqlarda ishlating
- •Rasm ustida glass/blur belgilardan foydalaning — kontrast har qanday fonda saqlanadi
- •Pulsatsiya animatsiyasini faqat jonli holat (efir, trend) uchun qo‘llang
✕ Bunday qilmang
- •Bitta kartada uchtadan ortiq belgi to‘plamang — ular ma’nosini yo‘qotadi
- •Belgini tugma sifatida ishlatmang — bosiladigan element Button bo‘lishi kerak
- •Past kontrastli rang juftliklarini tanlamang — matn har doim o‘qilishi shart
10 · Komponentlar
Forma elementlari
Obuna, izoh va qidiruv kabi barcha kiritish holatlari uchun yagona balandlik, radius va fokus qoidalariga bo‘ysunadigan forma elementlari.
Matn kiritish
Input · TextareaRo‘yxatdan tanlash
SelectTanlov elementlari
Checkbox · RadioGroup · SwitchCheckbox
Radio
Switch
Diapazon tanlash
Slider16px
Tasdiqlash kodi
InputOTPKod +998 90 ••• •• 67 raqamiga yuborildi.
Kompozitsiya
Label + Input + ButtonYangiliklar obunasi
Eng muhim yangiliklarni har kuni ertalab pochtangizda oling.
Maydon anatomiyasi
Barcha maydonlar uchun umumiy qiymatlarBalandlik
Input, Select trigger va Button bir xil balandlikda turadi.
Radius
Barcha kiritish maydonlari uchun yagona burchak radiusi.
Fokus
Fokus holati bir pikselli halqa bilan belgilanadi.
Disabled
O‘chirilgan maydon xiralashadi va kursor bloklanadi.
✓ Shunday qiling
- •Har bir maydonni doim ko‘rinadigan Label bilan bog‘lang — placeholder Label o‘rnini bosa olmaydi.
- •Placeholderda faqat format namunasini ko‘rsating, masalan «siz@misol.uz».
- •Xato holatida nima noto‘g‘ri ekanini aniq va qisqa matn bilan tushuntiring.
✕ Bunday qilmang
- •Muhim ko‘rsatmalarni placeholderda qoldirmang — yozish boshlangach u yo‘qoladi.
- •Matnli yorliqsiz, faqat ikonkaga tayangan kiritish maydonini yasamang.
- •Disabled holatni hover yoki rang o‘zgarishi bilan almashtirmang — u alohida holat.
11 · Komponentlar
Fikr-aloqa va holatlar
Tizim foydalanuvchiga nima bo‘layotganini alert, toast, modal oynalar va yuklanish holatlari orqali aniq va o‘z vaqtida bildiradi.
Alert
Sahifa ichida qoladigan statik xabarlarYangilanish
Tizim yangilandi: endi maqolalarni oflayn rejimda ham o‘qishingiz mumkin.
Xatolik yuz berdi
Sharhingiz yuborilmadi. Internet aloqasini tekshirib, qayta urinib ko‘ring.
Modal qatlamlar
Dialog — qaror, Sheet — yon panel, Drawer — mobilToast xabarlari
Root’da <Toaster /> allaqachon o‘rnatilgan — faqat toast() chaqiriladiTooltip · Popover · HoverCard
Yengil kontekst qatlamlar — fokusni tortib olmaydiProgress va yuklanish
Kutish holatini real kontent shakli bilan ifodalashSo‘rovnoma natijalari yuklanmoqda…13%
— (yonib-o‘chish)
— shimmer (yaltiroq to‘lqin) effekti
Bo‘sh holat
Natija bo‘lmaganda foydalanuvchini yo‘lda qoldirmaslikHech narsa topilmadi
So‘rovingizga mos maqola yo‘q. Kalit so‘zni o‘zgartiring yoki filtrlarni yengillashtiring.
✓ Shunday qiling
- •Toast matnini qisqa va harakatga chorlovchi qiling — «Obuna faollashtirildi», «Bekor qilish».
- •Dialog’ni faqat foydalanuvchidan aniq qaror talab qilinganda oching.
- •Skeleton’ni real kontent shakliga moslang — rasm bloki, sarlavha satrlari, meta qator.
✕ Bunday qilmang
- •Bir vaqtning o‘zida bir nechta dialog ochmang — foydalanuvchi kontekstni yo‘qotadi.
- •Xato xabarini faqat rang bilan bildirmang — matn va ikonka ham qo‘shing.
- •Uzun matnni tooltipga tiqmang — batafsil izoh uchun popover yoki alohida sahifa ishlating.
13 · Komponentlar
Ma’lumotlar taqdimoti
Statistika, jadval va grafiklar o‘quvchiga raqamlarni tez va aniq yetkazishi uchun kartalar, jadval, avatar hamda diagrammalar yagona vizual tilda jamlanadi.
Karta anatomiyasi
CardHeader · CardContent · CardFooterHaftalik statistika
5–11 iyul oralig‘idagi o‘qishlar ko‘rsatkichi
1 212 000
O‘tgan haftaga nisbatan +12% o‘sish
Yangilangan: bugun, 09:00
Statistik kartalar
KPI ko‘rsatkichlari uchun ixcham kartalarKunlik o‘qishlar
1.2M
+12%
Obunachilar
890K
+4.8%
O‘rtacha vaqt
3:24
−0:12
Jadval
Qatorlar hover holatida bg-muted/50 bilan ajratiladi| Sarlavha | Rubrika | O‘qishlar | Sana |
|---|---|---|---|
| Toshkent metrosida yangi bekatlar ochildi | Jamiyat | 482 913 | 10.07.2026 |
| O‘zbekiston termasi Osiyo kubogi yarim finalida | Sport | 356 204 | 09.07.2026 |
| Markaziy bankda asosiy stavka o‘zgarishsiz qoldirildi | Iqtisodiyot | 218 577 | 09.07.2026 |
| Samarqandda xalqaro turizm forumi boshlandi | Turizm | 174 038 | 08.07.2026 |
| Sun’iy intellekt bo‘yicha milliy strategiya e’lon qilindi | Texnologiya | 151 462 | 07.07.2026 |
Avatar
Standart o‘lcham h-10, className orqali moslashadiDTDTDT
DTAKMSNR
Grafik
ChartContainer + recharts, brend ko‘k asosiy seriyaHaftalik o‘qishlar
Kunlar kesimida umumiy o‘qishlar soni
ScrollArea
Uzun ro‘yxatlar uchun cheklangan balandlik✓ Shunday qiling
- •Raqamlarni bilan tekislang — ustundagi qiymatlar bir chiziqda turadi.
- •Jadvalda 5 ustundan oshsa, eng muhim ma’lumotlarni ustuvor qilib, qolganini yashiring yoki qisqartiring.
- •Grafikda brend ko‘k (#0096D2) rangini asosiy seriya uchun ishlating.
✕ Bunday qilmang
- •Jadval ichiga yana bir jadval joylamang — ma’lumotni alohida ko‘rinishga ajrating.
- •Ma’nosiz 3D effektlar va gradientli grafiklardan voz keching — ular o‘qishni qiyinlashtiradi.
- •Avatarni logotip o‘rnida ishlatmang — u faqat shaxs yoki muallifni bildiradi.
14 · Patternlar
Yangilik kartalari
Yangilik kartalari oilasi — standart grid kartasi, thumbnail qatori, raqamlangan trend ro‘yxati, featured overlay hamda bosh sahifa hero kartasi — barcha kontent joylashuvlarini yagona anatomiya, izchil aspect nisbatlar va bir xil hover xatti-harakati bilan qamrab oladi.
Standart karta
grid joylashuvlari uchun asosiy birlikButun karta group cursor-pointer o‘rami ichida bosiladigan hudud hisoblanadi: rasm aspect-video nisbatda, hoverda 105% gacha sekin kattalashadi, sarlavha esa brend hover rangiga o‘tadi. Media belgisi (foto/video) rasmning pastki chap burchagiga qo‘yiladi.
Toshkentda elektromobillar uchun 50 ta yangi quvvatlash shoxobchasi ochildi
Bugun 10:058 214
Thumbnail qator (feed row)
yon panellar va zich lentalar uchunGorizontal qator qat’iy o‘lchamli 88×64 px thumbnail va ikki qatorli sarlavhadan iborat; qatorlar yupqa border-border/50 chiziq bilan ajratiladi, oxirgi qatorda chiziq olib tashlanadi.
Raqamlangan ro‘yxat
«Trendda» blokiEng ko‘p o‘qilgan materiallar tartib raqami bilan beriladi: dumaloq belgi bg-daryo-blue/10 fonda font-black raqamni ko‘rsatadi — rasmsiz ham kuchli vizual ierarxiya hosil bo‘ladi.
Featured overlay karta
rasm ustidagi oq sarlavhaTo‘liq rasmli karta ustiga pastdan yuqoriga from-black/85 gradient qo‘yiladi — oq matn har qanday suratda o‘qiladi. Hoverda sarlavha ostiga chiziq chiziladi, layout esa mutlaqo siljimaydi.
Hero (bosh sahifa) karta
bosh sahifaning yagona bosh kartasiKunning asosiy materiali radial to‘q ko‘k fon ustida beriladi: chapda matn bloki (kategoriya belgisi + pulsatsiyalanuvchi «Asosiy» pilli), o‘ngda esa chap tomonga maska bilan eriydigan rasm. Pastki qirradagi daryo-blue aksent chizig‘i kartani sahifadagi qolgan kontentdan ajratib turadi.
Aspect nisbatlar spetsifikatsiyasi
rasm konteynerlari uchun ruxsat etilgan nisbatlarBitta grid ichida faqat bitta nisbat ishlatiladi — qatorlar tekis tugashi shu bilan kafolatlanadi. Vertikal video reels uchun alohida 9/16 nisbat qo‘llanadi.
16 / 9
Standart karta
16 / 10
Ixcham karta
4 / 3
PR / karusel
1 / 1
Mozaika
Eslatma: vertikal video reels kartalari uchun aspect-[9/16] nisbati ishlatiladi.
✓ Shunday qiling
- •Sarlavha 2 qatordan oshsa, line-clamp bilan qisqartiring — grid qatorlari tekis qoladi.
- •Butun kartani bosiladigan qiling: group o‘rami hover holatini rasm va sarlavhaga birdek uzatadi.
- •Rasm zoom effektini 105% dan oshirmang — sekin va bosiq harakat brendga mos.
✕ Bunday qilmang
- •Bir grid ichida har xil aspect nisbatlarni aralashtirmang — qatorlar buziladi.
- •Rasm ustiga overlay’siz oq matn qo‘ymang — och suratlarda sarlavha o‘qilmay qoladi.
- •Hoverda layoutni siljitadigan effektlar (o‘lcham, margin o‘zgarishi) qo‘llamang — faqat transform va rang o‘zgarsin.
15 · Patternlar
Ikonografiya
Butun interfeys faqat lucide-react to‘plamidan foydalanadi — bir xil chiziq qalinligi va geometriya ikonkalarni matn bilan uyg‘un, tanib olinadigan qiladi.
O‘lcham shkalasi
Har bir kontekst uchun bitta qat’iy o‘lchamsize-3 · 12px
Eng zich meta-qatorlar (kichik kartalar)
size-3.5 · 14px
Standart meta-qator — eng ko‘p ishlatiladigan o‘lcham
size-4 · 16px
Tugmalar ichidagi ikonkalar
size-5 · 20px
Navigatsiya: burger, qidiruv, chevronlar
size-6 · 24px
Media: play tugmalari va hero elementlari (size-7 gacha)
Kutubxona to‘plami
lucide-react — yagona manbaClock
Eye
Calendar
MessageCircle
ArrowRight
ArrowUpRight
ChevronRight
ChevronDown
Zap
Flame
Camera
Video
Play
Search
Menu
User
Sun
Moon
Sparkles
Crown
TrendingUp
Send
Instagram
Facebook
Meta-qator konvensiyasi
Vaqt · ko‘rishlar · sana12:4512 40311.07.2026
Meta ikonkalar (Clock, Eye, Calendar) doim brend ko‘k rangda — text-daryo-blue, matn esa text-muted-foreground bo‘lib qoladi.
Urg‘u (stroke)
Standart 2 · urg‘u 2.2–2.5standart
MediaBadge
nav chevron
✓ Shunday qiling
- •Bitta kontekstda bitta o‘lcham ishlating — meta uchun size-3.5, tugmalarda size-4, navigatsiyada size-5.
- •Meta-qatorda ikonkani doim va bilan bering.
- •Ikonka bilan matn orasida yoki masofa qoldiring.
✕ Bunday qilmang
- •lucide-react’ga boshqa ikonka to‘plamlarini aralashtirmang — chiziq qalinligi va geometriya buziladi.
- •12px (size-3) dan kichik ikonka ishlatmang — mayda ekranlarda o‘qib bo‘lmaydi.
- •Ma’no tashimaydigan, shunchaki bezak uchun qo‘yilgan ikonkalardan voz keching.