Manbaa · dizayn tizimi · 2026-10-21

Manbaa dizayn tizimi

Asl nusxa şu yerda — FoxUI'da. Manbaa saytidagi /design-system şu sahifani oyna orqali körsatadi. Yaxşi qöşimça huquqi FoxUI'ga ötadi, loyiha uni FoxUI'dan oladi.

45 komponent6 FoxUI'dan8 RS DS'dan31 Manbaa'niki1 topşirildi3 FoxUI'ga almaştiriladi

Brend ranglari

Asos

Manbaa binafşasi#8A5CF5 · --mb-binafsha-ikonBelgi va ikonlar (Ustozning öz binafşasi, PDP çizmalari)

Yoruğ

  • Havola va tugma#7C49F4--mb-binafsha → --eco-text-brand-primary, --eco-bg-brand-solidoqda 5,1:1 (#8A5CF5 — 4,3:1, kiçik matnga yetmaydi)
  • Bosilganda (hover)#6E36F3--mb-binafsha-hover
  • Yumşoq fon#F5F0FE--mb-binafsha-yumshoq → --eco-bg-brand-primary
  • Yumşoq fon 2#ECE3FD--mb-binafsha-yumshoq-2
  • Brend çiziği#C4ADFA--mb-binafsha-chiziq
  • Ikon#8A5CF5--mb-binafsha-ikon

Qoronği

  • Havola va tugma#A57FFE--mb-binafshaUstoz tanlovi, #191919 da 5,9:1
  • Bosilganda (hover)#B897FF--mb-binafsha-hover
  • Yumşoq fon#241B3A--mb-binafsha-yumshoq
  • Yumşoq fon 2#2F2352--mb-binafsha-yumshoq-2
  • Brend çiziği#5D43B8--mb-binafsha-chiziq
  • Ikon#9F79F7--mb-binafsha-ikon
  • Kök rang butunlay yöq (Vikipediya rangi, 19.10).
  • Yaşil — faqat işonç ma'nosi (işonçlilik şkalasining yuqori uçi, ✓).
  • Havolada doimiy tagçiziq yöq — faqat hover/fokusda.
  • Brend fon ustidagi matn — --eco-text-primary_on-brand (qoronğida ham oq).

Asos

Logo Tasdiqlangan

Belgi: qora blok — M kesigi, çap-yuqorida töq sariq xatçöp lentasi, içida mayda «OÇIQ / MANBA». Hover'da blok kengayib «MANBAA» çiqadi. Vektorlar Figma'dan aynan (manbaa/src/lib/logo.ts) — çizilmaydi, özgartirilmaydi.

Tipografiya

Sarlavha · Domine

Alişer Navoiy — hayoti va ijodi

Matn · Inter

Har bir fakt manbasi bilan: gap oxiridagi kiçik raqam bosilsa, manba kartoçkasi çiqadi.

Ranglar · yoruğ

  • Sahifabg-page
  • Yuzabg-surface
  • Matntext-primary
  • Ikkinçi matntext-secondary
  • Brendbg-brand-solid
  • Brend matnitext-brand
  • Brend fonibg-brand-subtle
  • Çiziqborder-color-default

Ranglar · qoronği

  • Sahifabg-page
  • Yuzabg-surface
  • Matntext-primary
  • Ikkinçi matntext-secondary
  • Brendbg-brand-solid
  • Brend matnitext-brand
  • Brend fonibg-brand-subtle
  • Çiziqborder-color-default

Ranglar — FoxUI mavzusi «siyoh» (data-fx-theme="siyoh"); Manbaa öz rangini qöşmaydi.

Komponentlar

Har birida otasi: FoxUI — FoxUI'dan oladi · RS DS — Rahim Sadiy DS'dan · Manbaa — loyihaniki (nomzod — FoxUI'ga topşiriladi; almaştiriladi — FoxUI'da muqobili bor, loyiha unga ötadi; moslangan — FoxUI asosida loyihada sozlangan; yetim — loyihada qoladi, 2+ loyiha sörasa otaga kötariladi).

  • Tugma, karta, kiriş maydoni
    RS DSOtadan

    Rahim Sadiy DS'dan (rs-ds), FoxUI'ga köçirilmoqda

  • Işonçlilik körsatkiçi (C3)
    ManbaaFoxUI'ga topşirildiv0.39.0

    fx-meter data-variant="graded" — katta, ixçam, kvadrat

    FoxUI'da Jonli namuna ↗
  • Ikki baho: Insonlar va SI hay'ati2-navbat
    ManbaaNomzod
    Jonli namuna ↗
  • Nişon kartasi3-navbat
    ManbaaNomzod
  • Umr çiziqlari (zamondoşlar)4-navbat
    ManbaaNomzod
    Jonli namuna ↗
  • «Hozir» paneli5-navbat
    ManbaaNomzod
    Jonli namuna ↗
  • Filtr çipi va sanoq
    FoxUIOtadan

    FoxUI'dan sinxron (foxui:sync) — 13 faylda filtr chiplari (Fox MB, 20.10)

    FoxUI'da
  • Bayroq
    ManbaaFoxUI'ga almaştiriladi

    Hozir Manbaa'ning Bayroq.astro; FoxUI flag'ga ötadi

    FoxUI'da
  • «Raqamlarda» — dinamik KPI
    RS DSOtadan

    RS charts kpiTile (ds:sync); valyuta belgisi Manbaa qöşimçasi

    FoxUI'da
  • Mavzu kartoçkasi (havolani oldindan köriş)
    FoxUIOtadan

    Mavzu kartoçkasi — FoxUI fx-hovercard'dan sinxron (Fox MB, 20.10)

    FoxUI'da
  • Ulaşiş va iqtibos
    ManbaaFoxUI'ga almaştiriladi

    Iqtibos (O'zDSt/APA) qismi — Manbaa'ga xos, nomzod

    FoxUI'da
  • Filtrlar paneli
    ManbaaFoxUI'ga almaştiriladi
    FoxUI'da
  • Sayt versiyasi va «Nima yangi»
    FoxUIOtadan

    «Nima yangi» — FoxUI fx-changelogfeed'dan sinxron (Fox MB, 20.10)

    FoxUI'da
  • Telefon menyusi
    RS DSOtadan

    RS MegaNav mobil qismidan moslangan (MobilMenyu.astro)

    FoxUI'da
  • Manba raqami
    ManbaaNomzod

    FoxUI'dagi fx-sources bilan soliştiriladi

    Jonli namuna ↗
  • Işonç belgisi
    ManbaaYetim
    Jonli namuna ↗
  • Avatar: tirik va tarixiy şaxs
    ManbaaYetim

    fx-avatar ustida: tirik — doira, tarixiy — 3×4

  • Izoh va etalon
    ManbaaYetim
  • Ovoz tugmalari (insonlar bahosi)
    ManbaaYetim

    «Ikki baho» bilan birga köriladi

  • Reyting röyxati
    ManbaaYetim
  • «Bugun» bloki
    ManbaaYetim
  • Dunyo xaritasi va taqqoslaş
    ManbaaYetim
  • Kitob muqovalari
    RS DSOtadan

    RS DS BookCover (ds:sync); author prop'i 11.10 da RS'ga qöşilgan

  • Nuqtali kiçik xarita
    ManbaaYetim
  • Hayot yöli — «Odisseya» xaritasi
    ManbaaYetim
    Jonli namuna ↗
  • «Bilasizmi?»
    ManbaaYetim
  • «Özingizni sinang»
    ManbaaYetim
  • «Birinçi manba» belgisi
    ManbaaYetim
  • Faxriylar va darajalar
    ManbaaYetim
  • SI mualliflik belgisi (inson / SI muallif çipi)
    ManbaaNomzod

    Ustoz «A · Uçqun» variantini tanladi (19.10): SI — töq sariq ✦ doira, inson — yaşil boş harf

    Jonli namuna ↗
  • Yuborilganlar lentasi
    ManbaaYetim
  • Profil sahifasi bloklari
    FoxUIOtadan
    avatarbadgeringsstatchecklistheatmaptabstimelineemptyJonli namuna ↗
  • Sozlamalar sahifasi
    FoxUIOtadan
    FoxUI'da Jonli namuna ↗
  • Rejim almaştirgiç (☀/☾, aylana oçiliş)
    FoxUIMoslangan

    FoxUI #154 asosida Manbaa tokenlarida; «Tizim» yöq (Manbaa qarori: standart — yoruğ). foxui:sync'ga ötkaziş — segment.css bilan

    FoxUI'da
  • Nişon kartasi (oçilgan / yopiq + progress)3-navbat
    ManbaaNomzod

    .mb-pf__nishon — profil hero'sida 3 ta eng yaqini

    Jonli namuna ↗
  • Profil menyusi (avatar dropdown)
    RS DSOtadan

    RS AuthButton'dan moslangan (ProfilMenyu.astro): Telegram/Google tanlovi, Profil, Yuborilganlar, Sozlamalar, Admin, Çiqiş

  • Tezkor qidiruv (Ctrl+K)
    RS DSOtadan

    RS Search.astro'dan moslangan

  • Mahalliy graf
    RS DSOtadan

    RS graph-view/graph-layout (ds:sync)

  • Grafiklar (çiziq, ustun, KPI)
    RS DSOtadan

    RS charts (ds:sync), ranglar — Manbaa binafşa palitrasi

  • Bölim işonç antennasi
    ManbaaYetim

    Sarlavha yonidagi ixçam körsatkiç (antenna / halqa / mini spidometr)

    Jonli namuna ↗
  • Sanad zanjiri va blok mualliflik çiziği
    ManbaaYetim

    Keyin «manba zanjiri» (citation chain) bölib umumlaşişi mumkin

    Jonli namuna ↗
  • Qöşnilar xaritasi (zoom, doimiy ölçamli yozuvlar)
    ManbaaYetim
    Jonli namuna ↗
  • Boş sahifa: bilim yulduzlar turkumi (bezak)
    ManbaaYetim

    Qotirilgan surat, bazaga boğliq emas (Ustoz, 19.10)

    Jonli namuna ↗
  • Boş sahifa: bölimlar bento + «Işonç qanday quriladi»
    ManbaaYetim
    Jonli namuna ↗
  • Mötabar nişoni
    ManbaaYetim

    .mb-mutabar — Qur'on bo'limi uçun (reja)

Qoidalar

  • Işonç bali «sovğa qilinmaydi» — faqat hisobdan; şubha ballni kesadi.
  • Işonç körsatkiçi çiziqli (C3); spidometr rad etilgan — köp joy oladi, aniq öqilmaydi.
  • Filtr chipidagi sanoq — alohida kiçik belgi, pill emas: chip matni özi raqam bölgani uçun raqamlar aralaşmasin.
  • Har yuklangan rasm WebP'ga ögiriladi va 1080p dan oşmaydi; şaxs surati 3×4.
  • Asosiy aksent — binafşa (havola, tugma, fokus); yaşil faqat ma'no: işonç, ✓.
  • Havolada doimiy tagçiziq yöq — rangidan taniladi; tagçiziq hover va klaviatura fokusida.
  • Qoronği rejim havola rangi #A57FFE (Ustoz tanlovi); yoruğda #7C49F4 — #8A5CF5 tusidan kontrastga moslangan.
  • Boş sahifadagi raqamlar va jonli qator faqat haqiqiy ma'lumot — soxta «ösiş» effekti yöq.
  • SI — töq sariq ✦ doira; inson — yaşil boş harf; binafşa faqat havola va tugma uçun.

Qarorlar tarixi

  1. Logo tasdiqlandi — barça holatlari DS'da (belgi, kengaygan, ranglar); töq sariq #F0A358 — yangi aksent, faqat lenta uçunUstoz: «Logoning barça holatlarini Design Systemga kiritaversin… DS'ni asta şakllantiramiz»
  2. Çiziqsiz libos — data-fx-edge="hybrid" (sync modes ["edge"]); brend ranglari global token darajasidaUstoz «qabul»: yuzalar fon bilan ajraladi; primary ranglar aniq böldi — DS sahifasida eng tepada
  3. SI mualliflik belgisi — «A · Uçqun», töq sariq; Ikki bahodagi SI hay'ati ham töq sariqBinafşa endi havola rangi — SI u bilan adaşmasin
  4. Tasnif Manbaa kodi böyiça tuzatildi: 8 ta komponent hali FoxUI'dan olinmagan — «almaştiriladi»Fox MB tekşiruvi: sahifa haqiqatni körsatsin, rejani emas
  5. Dizayn tizimining asl nusxasi — foxui.dev; manbaa.uz/design-system — oynaBitta haqiqat, qayta çiziş yöq (RedFox CRM, FoxOS modeli)
  6. Işonç çiziği FoxUI'ga topşirildi (0.39.0, fx-meter graded)Ustoz tamoyili: yaxşi qöşimça huquqi FoxUI'ga, loyiha uni FoxUI'dan oladi
  7. Kökdan voz keçildi — aksent binafşa; FoxUI'da «Siyoh» mavzusi böldiVikipediya rangiga öxşamasin; FoxOS ham şu mavzuni oldi
  8. Işonç körsatkiçi — C3 çiziği; spidometr rad etildiUstoz 10 variantni körib tanladi
  9. Vaqtinçalik matnli logo «Manbaa», ikkinçi «a» ajratiladimanba.uz band — adaşmaslik
Libosni sozlangButun sayt şu zahoti kiyinadi

Libos

Premium liboslar — obunada: bepul 3 ta ustiga yana 13 ta. Bu yerda hammasini sinab körasiz. Narxlar

Brendlar ilhomida · 11

Faqat uslub ilhomi; belgilar — Simple Icons (CC0) va logobank.uz (Uzum), savdo belgilari egalariga tegişli.

Rejim
Qölda sozlaş — dasturçilar uçun

Rang

Şakl va çegara

Şrift juftligi

Qölda tanlaş

Qulaylik

Harakat
Ziçlik
Material (tajriba)