PDP UI/UX qo‘llanma · v0.7

Rasmiy brend

PDP Yadro

Asoslar: rang, tipografiya, oraliq, ikonkalar, tokenlar, harakat va foydalanish qulayligi. Komponentlar va namunalar vazifaga qarab to‘plamlarda — sayt, ilova, taqdimot va bosma uchun. Ranglar, shrift va logotip tanlangan brenddan olinadi.

Ranglar AI yordamchilari uchun

Umumiy

Bitta manba: dasturchi, dizayner va AI-agent uchun

PDP Design System — PDP ekotizimining barcha raqamli mahsulotlari uchun yagona interfeys qoidalari: rang, shrift, komponentlar, ekran patternlari va foydalanish qulayligi. Komponentlar, token nomlari va qoidalar hamma loyihada bitta; har brend esa o‘z ranglari, shrifti va logotipi bilan. Brendbuk belgini chizadi, bu sahifa undan ekran quradi.

Figma brend doskasi yoki Figma faylidan olingan qoida

Bitta tizim, oltita brend

Brend kartalari

Brendni yon paneldagi tanlovda yoki «Kirish» sahifasidagi kartalarda almashtiring — sahifa qayta yuklanmaydi: komponentlar, namunalar va jadvallar tanlangan brend tokenlari bilan qayta chiziladi, havola esa ?brand= bilan saqlanadi. Mahsulotda brend va rejim <html> atributlari bilan yoqiladi: brend — data-brand, yorug‘ yoki qorong‘i — data-theme.

Kod

<link rel="stylesheet" href="https://design.pdp.uz/ds/tokens/academy.css">
<html data-brand="academy" data-theme="light">

School, University, Online va Junior brendlari: ranglarni brend jamoasi hali tasdiqlamagan, shriftlar tasdiqlangan (27.09.2026). Komponentlar va qoidalar ular uchun ham amal qiladi.

Faol brend: PDP EcoSystemPDP AcademyPDP SchoolPDP UniversityPDP OnlinePDP Junior

Rasmiy Rasmiy

Ranglar

Black #141414
Vivid Malachite #00C508
Bitter Lime #BDFF00

Qora — fon va tinchlik, yashil — brendning o‘zi, limon — diqqat nuqtasi. Limon ustida matn doim qora, yashil ustida — oq. Bulardan tashqari tizimda ajratish ranglari bor: grafik, toifa va eslatma uchun — ular urg‘u emas, faqat ajratadi. Ranglar

Shriftlar

Space Grotesk sarlavhalar

Inter asosiy matn

Ruscha sarlavhada kirill harflari — Golos Text, bitta qatorda. Hammasi ochiq shrift (SIL OFL), sahifaga joylanadi. Tipografiya

Shakl

Tugma — pill (to‘liq yumaloq), maydon — 12 px, karta — 24 px: dizayner taklifi (Rahimjon Gaziyev, 28.09.2026); o‘lcham va holatlar Untitled UI asosida. Tugmalar, Kartalar

Tokenlar

Belgi, logotip, himoya maydoni va muhrlar bu yerda takrorlanmaydi — ular brendbukda. Komponentlar, holatlar va patternlar shu qarorlar va Untitled UI asosida qurilgan; belgisiz qoidalar — DS qarori, tasdiq kutmoqda.

Amaldagi School design system’i (v1.0) alohida sahifada qoladi: /school/. Bu brend — o‘sha qoidalarni PDP Design System’ga ko‘chirish taklifi.

Kim uchun

Dasturchilar uchun

Tokenlarni loyihaga ulang va ekranlarni hujjatlashtirilgan komponentlardan yig‘ing. Komponent kodida birorta ham hex-kod bo‘lmasin — faqat var(--eco-*).
Avval oching
Dizaynerlar uchun

Shkalalar, holatlar va qo‘llash qoidalari. Yangi ekran noldan chizilmaydi — mavjud komponent va bloklardan yig‘iladi, yetmagan qism esa taklif sifatida kiritiladi.
Avval oching
AI-agentlar uchun

Bu sahifani PDP interfeyslari uchun yagona vizual manba sifatida ishlating. Qoidalar aniq yozilgan, tokenlar CSS va JSON’da, tayyor prompt esa ingliz tilida — har brend uchun alohida.
Avval oching

Ichida nima bor

Xarita to‘plamlar menyusidan yig‘iladi: har kartada — to‘plam va uning guruhlari, qator guruhning birinchi bo‘limini ochadi.

Loyihada qanday qo‘llanadi

Tokenlarni meros oling

Brendingizning token faylini loyihaning umumiy stiliga qo‘shing, JSON’ni esa dizayn vositalariga. Komponent qiymatni o‘zi yozmaydi — var(--eco-*) dan oladi; brend data-brand, rejim data-theme atributi bilan almashadi.
Design tokenlar
Kod
```
/* Kurs kartasi — faqat tokenlar */
.course-card {
  background: var(--eco-bg-secondary);
  color: var(--eco-text-primary);
  border-radius: var(--eco-radius-4xl);
  padding: var(--eco-spacing-3xl);
}
```
Komponentlardan yig‘ing

Ekranni tayyor komponentlar va majburiy bloklardan yig‘ing: shapka, karta, forma, holatlar. Kerakli komponent yo‘q bo‘lsa, o‘zingiz chizmang — Boshqaruv bo‘limidagi yo‘l bilan taklif qiling.
Majburiy bloklar

.eco-card · .eco-badge · .eco-btn
Qabul ochiq
Frontend dasturlash

PDP Academy · 8 oy · oyiga 1 200 000 so‘m
Foydalanish qulayligini tekshiring

Relizdan oldin har bir ekranni beshta band bo‘yicha tekshiring. Bittasi bajarilmasa, ekran hali tayyor emas.
Foydalanish qulayligi
- Matn kontrasti kamida 4.5:1, ikonka va chegaralar — 3:1.
- Har bir harakat klaviatura bilan bajariladi, fokus ko‘rinib turadi.
- Holat rang bilan birga so‘z yoki ikonka orqali ham aytiladi.
- 390 px kenglikda gorizontal skroll yo‘q.
- Ekran yorug‘ va qorong‘i rejimda tekshirilgan.

Tamoyillar

Beshta tamoyil — har brendda bir xil

Tamoyillar

Aylana va quyoshdan kelib chiqadigan tamoyillar

Tamoyillar

Belgining tuzilishi — ekranning tuzilishi

Beshta tamoyil belgining konsepsiyasi va Figma brend doskasidan olingan: yadro, ulanish, qora maydon, halol kontrast va X moduli. Har bir ekran va komponent shu beshtasiga tekshiriladi, keyingi bo‘limlar ularni batafsil ochadi.

Frontend dasturlash · 4-modul Massivlar bilan ishlash 14 darsdan 9 tasi o‘tildi

Bitta yadro

Har ekranda bitta asosiy harakat va bitta diqqat markazi: bitta primary tugma, qolgani secondary yoki tertiary.
Tugmalar
Bitta PDP ID — barcha loyihalar

Backend · Node.js — PDP Online’da

Ko‘rinadigan ulanish

Loyihalar umumiy shapka, bir xil patternlar va o‘zaro havolalar bilan bog‘lanadi — foydalanuvchi qayerda ekanini va qayerga o‘ta olishini biladi.
Majburiy bloklar
- Sentabr 1 200 000 so‘mTo‘langan
- Oktabr 1 200 000 so‘m · 05.10 gachaTo‘lov kutilmoqda
- Noyabr 1 200 000 so‘m · 05.11 gacha
Qora maydon — sahna

Fon tinch turadi, rang faqat ma’no bilan keladi: holat, asosiy harakat yoki brend belgisi — bezak uchun emas. Mahsulot ekranida bu maydon odatda yorug‘, brend kontekstida — qora.
Ranglar

Brend ranglari ustidagi matn kontrasti
	Limon	Yashil
Maydondagi matn	Boshlash 15.32:1	Boshlash 2.74:1 · istisno

Halol kontrast

Limon ustida matn doim qora #141414, yashil (#00B533) ustida — oq: yashil ustida qora yo‘q (qaror 30.09.2026). Oddiy matn kamida 4.5:1, katta matn, ikonka va chegaralar kamida 3:1.

Foydalanish qulayligi

1. 4
2. 8
3. 12
4. 16
5. 24
6. 32
7. 48
X = belgi ÷ 9. 40px belgida X ≈ 4.4px — himoya maydoni keyingi qadamga, 8px ga yaxlitlanadi (1X dan kam bo‘lmasin).
Modul ritmi

Logotip X moduliga bo‘ysunganidek, interfeys 4px qadamga bo‘ysunadi: oraliq, o‘lcham va radius faqat tokenlardan olinadi.
Oraliq va shakl

Ma’lumotli ekranda yana uchta qoida

Kabinet, jurnal va dashbord kabi ma’lumotli ekranlarda beshta tamoyilga yana uchtasi qo‘shiladi. Ular ham oltita brendda bir xil — namunalar esa faol brendniki.

PDP Hackathon · 4-jamoa · Kuzgi mavsum 5 bosqichdan 3 tasi bajarildi Demo taqdimoti — 03.10 gacha ID 20431 · sinxronlandi 09:12

Ta’lim birinchi

O‘qish ma’lumoti — progress, baho va muddat — texnik ma’lumotdan oldin turadi. ID, sinxronlash vaqti va tizim holati pastda, kichikroq va neytral rangda.
O‘quv komponentlari
25faol ishtirokchi

5jamoa
3loyiha

Bitta asosiy raqam

Ekranda bitta asosiy metrika bo‘ladi va u eng yirik raqam. Qolgan raqamlar kichikroq va neytral: o‘nta bir xil blok — ierarxiya yo‘q degani.
Sahifa anatomiyasi
- 16Asosiy matn, input va tugma
- 14Label, meta
- 12Eng kichigi: izoh, beyj
Oson o‘qiladi

Asosiy matn 16px, eng kichigi 12px. Ekranni kichik telefonda, proyektorda va katta yoshdagi foydalanuvchi ko‘zi bilan tekshiring: mayda matn mahsulotga ishonchni pasaytiradi.
Foydalanish qulayligi

Qisqa qoidalar

Ekranda bitta primary tugma qoldiring — qolgan harakatlar secondary yoki tertiary.
Rang, oraliq, radius va soyani faqat --eco-* tokenlaridan oling.
Limon ustida qora matn (#141414), yashil ustida — oq matn ishlating.
Holatni rang bilan birga matn yoki ikonka orqali ham bildiring.
Shapkada loyiha nomi va loyiha almashtirgich tursin.
Tugma va maydonni 12px, kartani 24px radius bilan chizing (--eco-radius-xl, --eco-radius-4xl).
Fokus halqasi har bir interaktiv elementda ko‘rinib tursin.
Har bir ekranni ikki rejimda va 390px kenglikda tekshiring.

Tamoyillar to‘qnashsa, halol kontrast yutadi: brend rangi matnni o‘qib bo‘lmaydigan qilsa, rang o‘zgaradi — matn emas. Har bir band keyingi bo‘limlarda ochiladi: Oraliq va shakl, Ikonkalar, Tugmalar, Foydalanish qulayligi.

Ranglar

Rang uch qatlamda: brend, holat va ajratish

Rang tizimi hamma PDP brendlarida bir xil tuzilgan. Brend faqat o‘z qatlamini beradi — primitivlar, ulardan hisoblangan shkala va 27 ta brend sloti; neytral, holat (xato, ogohlantirish, muvaffaqiyat) va ajratish ranglari umumiy. Quyida — faol brend ranglari. Rangni bosing — HEX nusxalanadi.

Bosma uchun CMYK qiymatlari — Bosma: CMYK ranglar.

Qora maydon, yashil hayot, limon energiya

Figma

Uchta asosiy rang. Qora — fon va tinchlik, Vivid Malachite — brendning o‘zi, Bitter Lime — diqqat nuqtasi.

Figma’da Bitter Lime uchun RGB 188, 255, 0 yozilgan; HEX #BDFF00 aslida 189, 255, 0 ga teng. Bu yerda HEX bo‘yicha hisoblangan qiymat berilgan.

Faylda uchraydigan qo‘shimcha yashillar

Figma

Gradient

Figma

--eco-gradient-stop-1 #F2FFC7 · 0%
--eco-gradient-stop-2 #BDFF00 · 22%
--eco-gradient-stop-3 #00C508 · 58%
--eco-gradient-stop-4 #013A04 · 100%

To‘xtash nuqtalari — o‘z tokeni: --eco-gradient-stop-N; --eco-gradient shulardan yig‘iladi.

Figma’dagi yozuvda 1-rang #000000 deb berilgan, lekin chizilgan gradient och limon rangdan boshlanadi. Bu yerda rasmdan o‘lchangan #F2FFC7 ishlatildi — dizayn jamoasi tasdiqlashi kerak.

Yordamchi rang — Green: Done

Figma

Token --eco-color-green-done. Light rejimdagi barcha yashil matn: bo‘lim eyebrow’i («05 — TIPOGRAFIYA», IBM Plex Mono Medium 14 px), karta sarlavhalari, yorliqlar va havolalar. Oqda 4,18 : 1, kulrang #F5F5F5 da 3,84 : 1 — 4,5 dan past, foydalanuvchi tasdiqlagan istisno (01.10.2026). Yashil maydonlar (tugma, checkbox, beyj) o‘zgarmaydi — ustida oq matn. Dark’da yashil matn avvalgi rangida.

Token zanjiri: primitiv → semantik → komponent

PrimitivQiymatning o‘zi, ma’nosi yo‘q. Har brend shu qatlamga o‘z ranglari va shkalalarini qo‘shadi.--eco-color-<brend>-700
SemantikVazifa: «havola», «asosiy tugma foni», «fokus». Qiymati brend va rejimga qarab primitivdan olinadi.--eco-text-brand-secondary
KomponentTugma, havola, tab faqat semantik tokenni oladi — primitivni hech qachon..eco-btn--primary

Shuning uchun komponent kodi hamma brendda bir xil: farq faqat semantik qatlamda. Brend 27 ta brend slotini (bg-brand-*, text-brand-*, fg-brand-*, border-brand, focus-ring, chart-1, chart-seq-*, muvaffaqiyat) o‘z primitivlariga yo‘naltiradi, qolgan semantik tokenlar qulflangan — Design tokenlar.

Brend slotlari: qorong‘i va yorug‘

Namunalar jonli: har katak o‘z rejimidagi tokenni ko‘rsatadi. Nisbat — o‘sha rejim fonida (#141414 yoki oq) o‘lchangan; maydon ustidagi matn — o‘z juftligi: --eco-text-primary_on-brand, tugma taxalluslarida — --eco-brand-on-*.

Rol	Qorong‘i	Yorug‘
Brend maydoni: boshqaruv, beyj`--eco-bg-brand-solid`	`#BDFF00`matn #141414 · 15,32 : 1	`#00B533`matn #FFFFFF · 2,74 : 1
Maydon hover`--eco-bg-brand-solid_hover`	matn o‘sha	matn o‘sha
Brend tugmasi`--eco-brand-button`	matn `--eco-brand-on-button`	matn `--eco-brand-on-button`
Aksent tugma`--eco-brand-button-accent`	matn `--eco-brand-on-button-accent`	matn `--eco-brand-on-button-accent`
To‘q tugma`--eco-brand-button-ink`	teskari neytral	qora yoki brendning to‘q rangi
Ikkilamchi tugma matni`--eco-brand-button-secondary-fg`	kulrang tugmada	kulrang tugmada
Havola, tanlangan tab`--eco-text-brand-secondary`	`#BDFF00`15,32 : 1	`#00A603`3,25 : 1
Ikkinchi brend matni`--eco-text-brand-tertiary`	sarlavha, raqam	sarlavha, raqam
Brend beyj foni`--eco-bg-brand-primary`	matn — havola rangi	matn — havola rangi
Fokus halqasi`--eco-focus-ring`	`#BDFF00`	`#048307`
Grafik 1-seriyasi`--eco-chart-1`	brend urg‘usi	brend urg‘usi
Muvaffaqiyat`--eco-bg-success-solid`	holat, brend emas	holat, brend emas

Yorug‘ rejimda urg‘u — yashil, qorong‘ida — limon. Limon oq fonda matn emas (1.20 : 1), yashil ustiga oq matn qo‘ymang (2.34 : 1). Istisno: yashil tugmada (#00B533) oq matn — brend qarori (30.09.2026), kontrast 2,7 : 1.

Barcha 27 brend kaliti — yorug‘ va qorong‘i qiymatlar

Token	Yorug‘	Qorong‘i
`--eco-text-primary_on-brand`	`#FFFFFF`	`#141414`
`--eco-text-brand-primary`	`#00A603`	`#BDFF00`
`--eco-text-brand-secondary`	`#00A603`	`#BDFF00`
`--eco-text-brand-secondary_hover`	`#014C02`	`#CFFF80`
`--eco-text-brand-tertiary`	`#00A603`	`#00C508`
`--eco-text-success-primary`	`#026503`	`#63E95D`
`--eco-border-brand`	`#048307`	`#BDFF00`
`--eco-fg-brand-primary`	`#048307`	`#BDFF00`
`--eco-fg-brand-primary_alt`	`#00C508`	`#BDFF00`
`--eco-fg-brand-secondary`	`#00C508`	`#00C508`
`--eco-fg-success-primary`	`#048307`	`#00C508`
`--eco-fg-success-secondary`	`#00C508`	`#40D63C`
`--eco-bg-brand-primary`	`#E9FED8`	`rgba(189, 255, 0, .10)`
`--eco-bg-brand-secondary`	`#C6FFC0`	`rgba(189, 255, 0, .18)`
`--eco-bg-brand-solid`	`#00B533`	`#BDFF00`
`--eco-bg-brand-solid_hover`	`#02A307`	`#CFFF80`
`--eco-bg-success-primary`	`#E7FFE4`	`rgba(0, 197, 8, .16)`
`--eco-bg-success-solid`	`#00B533`	`#00B533`
`--eco-focus-ring`	`#048307`	`#BDFF00`
`--eco-chart-1`	`#00B533`	`#BDFF00`
`--eco-chart-seq-1`	`#E5FFC0`	`#014C02`
`--eco-chart-seq-2`	`#BDFF00`	`#048307`
`--eco-chart-seq-3`	`#00B533`	`#00C508`
`--eco-chart-seq-4`	`#026503`	`#63E95D`
`--eco-chart-seq-5`	`#013A04`	`#BDFF00`
`--eco-chart-div-4`	`#40D63C`	`#40D63C`
`--eco-chart-div-5`	`#048307`	`#048307`

Shkalalar

Interfeysga oraliq tuslar kerak: och fon, chegara, oq fondagi matn. Brend shkalalari OKLCH’da brend rangidan hisoblangan va asl rang o‘z bosqichiga qadalgan; ● — asl rang.

Tuzilma Untitled UI asosida: har shkalada 12 bosqich, eng ochiq 25 dan eng to‘q 950 gacha. Neytral, xato (error) va ogohlantirish (warning) — barcha brendlar uchun umumiy. Muvaffaqiyat uchun alohida shkala yo‘q — success tokenlari yashil shkaladan oladi.Muvaffaqiyat (success) tokenlari Academy yashilidan oladi.Muvaffaqiyat — umumiy success shkalasi (School DS v1.0 dagi yashil bilan bir xil).

Yashil · Vivid Malachite

Limon · Bitter Lime

Neytral · Black

Xato · Error

Ogohlantirish · Warning

Grafik tokenlari

Grafikning o‘z nom fazosi bor: --eco-chart-1 … --eco-chart-6 — kategoriya seriyalari (1-slot doim faol brend urg‘usi, qolgan beshtasi — shu brendning o‘z ranglari, qora va kulranglar), --eco-chart-seq-1 … -5 — ketma-ket shkala, brend rangidan (kam → ko‘p), --eco-chart-div-1 … -5 — qarama-qarshi shkala: xato ↔ brend, o‘rtasi neytral. Komponent HEX’ni to‘g‘ridan-to‘g‘ri olmaydi — shu tokenlarni oladi. Oltitadan ortiq seriya kerak bo‘lsa — naqsh yoki yorliq qo‘shing. Jonli namunalar, kontrast va CVD hisobi — Grafiklar bo‘limida.

data-theme="dark"

data-theme="light"

Ajratish ranglari

Figma

Ekranda ko‘p narsani bir-biridan ajratish kerak: grafik seriyalari, toifalar, loyihalar. Buning uchun alohida palitra o‘ylab topilmaydi — faqat dizayner bergan ranglar olinadi. Avvalgi «PDP Portal 2025» ish ranglari (7 tus × 12 bosqich) olib tashlandi (qaror 01.10.2026). Rang yoqmasa, dizayner yangisini chizadi.

Grafik seriyalari

--eco-chart-2…6

Qorachart-2Dark’da oq
Aksentchart-3brendning o‘zi
4-seriyachart-4brendning o‘zi
5-seriyachart-5brendning o‘zi
6-seriyachart-6brendning o‘zi

1-seriya — faol brend, qolgan beshtasi — shu brendning o‘z ranglari, qora (Dark’da oq) va kulranglar, shu tartibda. Boshqa brend rangi grafikda ishlatilmaydi (art direktor, 05.10.2026).

Toifa tuslari

--eco-cat-*

Matn rangiQorablackToifa beyji
YashilgreenToifa beyji
To‘q yashilKo‘kblueToifa beyji
KulrangTealtealToifa beyji
LimonQizilredToifa beyji

Toifa va teg beyjlari uchun xilma-xillik to‘plami; avatarlar uni ishlatmaydi — Beyjlar va statuslar.

EcoSystem’da ko‘k, teal va qizil yo‘q: kalit nomi (blue, teal, red) — slot, rang brendniki. Yagona ko‘k — «Kutmoqda» holati (--eco-fg-info-primary).

Doska ranglari

--eco-board-1…6

1board-1YashilAcademy
2board-2Qora (Dark’da oq)School
3board-3KulrangJunior
4board-4Och yashilOnline
5board-5To‘q yashilUniversity
6board-6Limon

Doska, kalendar, vazifalar ro‘yxati, teg va tanlov nuqtalari (Nextcloud bloklari). Maydon ustidagi matn — --eco-board-ink-1…6.

Uch qatlam: qaysi rang qayerda ishlaydi

Rang tanlashdan oldin savol bitta: bu ovozmi, holatmi yoki ajratishmi.

Brend — ovozBrend primitivlari va ulardan hisoblangan shkalalar. Asosiy tugma, aksent, havola, fokus halqasi, brend yuzalari. --eco-color-*

Semantik — holatXato, ogohlantirish, muvaffaqiyat, axborot. Faqat natija va xabar uchun (alert, beyj, eslatma bloki .eco-callout--*), bezak uchun emas. --eco-text-error-primary

AjratishMa’no bermaydi, faqat bir-biridan ajratadi: seriya, toifa, loyiha. Faqat dizayner bergan ranglar. --eco-chart-* --eco-cat-*

Ajratish rangi qayerda ishlaydi

Grafik seriyalarida — to‘g‘ridan-to‘g‘ri emas, --eco-chart-* orqali: Grafiklar.
Toifa va teg beyjlarida: --eco-cat-* tusidan och fon va to‘q matn — Beyjlar va statuslar.
Loyiha aksentlarida: --eco-project-* — loyihaning o‘z brend rangi — Loyihalar oilasi.
Illyustratsiya, bo‘sh holat rasmi va bezak nuqtalarida.
Har joyda ma’no yorliq, ikonka yoki naqsh bilan ham beriladi — rangning o‘zi yetmaydi.

Toifa to‘plamidagi yashil va qizil holat ranglariga (muvaffaqiyat, xato) o‘xshaydi, shuning uchun toifa beyjida nuqta yo‘q. Eslatma bloklari ajratish rangini ishlatmaydi — faqat semantik ohanglar: holatni ajratish rangi bilan bermang. Ranglar dizayner to‘plamidan; almashtirish kerak bo‘lsa, qarorni dizayner qiladi.

Matn uchun ajratish rangi tint ustida to‘qlashtiriladi: yorug‘da qoraga, qorong‘ida oqqa aralashtiriladi (color-mix). Matn kamida 4,5 : 1, belgi va chiziq — 3 : 1.

Kontrast: qaysi juftlik ishlaydi

WCAG 2.2

Eng muhim qoida: limon ustiga oq matn qo‘ymang, yashil ustiga qora qo‘ymang — limonda qora, yashil maydonda (#00B533) oq (qaror 30.09.2026). Oq fonda yashil matn kerak bo‘lsa, green-800 oling.

Eng muhim qoida: ko‘k ustida matn oq, pushti ustida — qora. Oq fonda mayda ko‘k matn kerak bo‘lsa, school-blue-700 oling.

Eng muhim qoida: teal ustida matn oq, sariq ustida — qora. Oq fonda teal matn kerak bo‘lsa, university-teal-700 oling.

Eng muhim qoida: feruza ustida matn to‘q (junior-ink). Feruza oq fonda matn bo‘lmaydi; havola — junior-cyan-700.

Namuna	Matn / fon	Nisbat	Daraja	Qayerda
Aa	`Bitter Lime` / Black	15.32 : 1	AAA	Aksent: havola, fokus, muhim raqam
Aa	Oq / Black	18.42 : 1	AAA	Asosiy matn
Aa	`neutral-400` / Black	6.88 : 1	AA	Ikkinchi darajali matn
Aa	`Black` / Bitter Lime	15.32 : 1	AAA	Limon tugma ustidagi matn
Aa	Oq / Malachite	2.34 : 1	Yaroqsiz	Istisno: faqat rang namunasi yorlig‘i (qaror 30.09.2026); yashil maydon — Button color
Aa	`Malachite` / Oq	2.34 : 1	Yaroqsiz	Oq fonda faqat bezak, matn emas
Aa	`green-700` / Oq	4.94 : 1	AA	Oq fondagi yashil matn va havola
Aa	`Bitter Lime` / Oq	1.20 : 1	Yaroqsiz	Ishlatmang
Aa	Oq / Button color	2.74 : 1	Yaroqsiz	Istisno: yashil maydonda oq matn — brend qarori (30.09.2026)

Light va Dark sahnalar

Global rejim — sayt uchun, dizayn — o‘z rejimida

Yuqoridagi Light/Dark tugmasi o‘quvchining qulayligi uchun: u faqat DS saytini — fon, yon panel, shapka, matn, hujjat kartalari, jadval va kodni almashtiradi. Ko‘rsatilayotgan dizayn o‘z rejimida qoladi. Ikkala ko‘rinish kerak bo‘lsa — u alohida, qotirilgan sahnalarda ko‘rsatiladi.

Uch qoida

Sig‘sa — juftlikKomponent ikki qotirilgan sahnada yonma-yon: Light | Dark. Har sahnada mono yorliq. Tor ekranda — ustma-ust.
Katta blok — mahalliy almashtirgichDashboard, ilova maketi, slayd devori, uzun shablon — blok ustida o‘z Light/Dark tugmasi. Standart — dizaynning asosiy rejimi (odatda Light).
Brendga qotirilgan — almashmaydiBosma — qog‘oz (Light), Aurora foni — faqat Light, SMM’ning ikki versiyali kadrlari — har biri o‘z rejimida. Berilmagan Dark versiya o‘ylab topilmaydi.

Juftlik: Light | Dark

global rejimni almashtirib ko‘ring — sahnalar o‘zgarmaydi

Light tugma · beyj · maydon

Qabul ochiqOnlayn Mahsulot dizayni 6 oy · haftasiga 3 dars · loyiha bilan

Dark tugma · beyj · maydon

Qabul ochiqOnlayn Mahsulot dizayni 6 oy · haftasiga 3 dars · loyiha bilan

Mahalliy almashtirgich

tanlov shu sessiyada eslab qolinadi

katta blok · ilova maketi

Almashtirgich — DS qobig‘ining boshqaruvi, dizaynning qismi emas: sahna tashqarisida, sahifa rejimida. Tab bilan tugmaga o‘tiladi, Enter yoki Probel — tanlash, ← / → — qo‘shni rejim; tanlangan tugmada aria-pressed="true".

Qotirilgan sahna

bosma · qog‘oz doim Light

Manbada qanday yoziladi

Atribut	Natija	Qachon
`data-stage="pair"`	Build blokni ikki sahnaga ko‘chiradi: Light \| Dark, yorliqlari bilan; Dark nusxada `id` va `name` — `-dk`	Komponent, holatlar, kichik namuna
`data-stage="pair-stack"`	Xuddi shu, doim ustma-ust	Keng qator: tugmalar, chiplar, jadval qatori
`data-stage="switch"`	Blok ustida Light/Dark almashtirgich; standart — `data-theme` yoki Light	Dashboard, ilova maketi, slayd devori, uzun shablon
`data-stage="light"` · `"dark"`	Qotirilgan sahna	Bosma, Aurora, bitta versiyali dizayn
`data-stage="page"`	Ataylab sahifa rejimida	Hujjat jadvalidagi kichik namuna (status lug‘ati beyji)
`<section data-stages>`	Bo‘lim yangi qoidada: belgisiz `.demo`, `.dd__stage`, `.fig__stage` — Light	Har o‘tkazilgan bo‘lim

Sahna — [data-theme] tashuvchisi: ichida --eco-* tokenlari, sahifa rollari (--page-*, aksent matni) va komponent o‘zgaruvchilari sahna rejimida qayta hisoblanadi.
Bo‘lim CSS’ida :root[data-theme="light"] … yozilmaydi — ichki sahnada buziladi; o‘rniga #bo‘lim [data-theme="light"] … yoki #bo‘lim, #bo‘lim [data-theme] { --x: var(--eco-…) }. Build tekshiradi.
Build har to‘plam bo‘yicha hisob chiqaradi: mavzusiz sahnalar soni — keyingi bosqichlar uni nolga tushiradi.

Brend elementlari

Ekranni EcoSystem’ga xos qiladigan belgilar

Beshta element ekranni birinchi qarashdayoq EcoSystem’niki qiladi: qora maydon, belgi, kam ishlatiladigan limon aksent, X modulidagi nuqtali to‘r va chiziqli orbitalar. Ranglar, belgi va X moduli Figma brendbukidan olingan; ularni interfeysda qanday ishlatish — taklif. Figma

Qora maydon — sahna

Figma

PDP Academy · kuzgi qabul

Frontend dasturlash: olti oyda birinchi loyiha

Darslar Toshkentda va onlayn. Boshlanish — 01.10.2026, oyiga 1 290 000 so‘m.

Maydon ranglari · bosing — nusxalanadi

CTA — limon tugma, matni qora. U maydondagi eng yorqin nuqta, shuning uchun har qanday qora ekranda birinchi ko‘rinadi. Ikkinchi harakat — rangsiz tugma: neytral fon (tertiary) yoki chegara (outline), matni oq.

Maydonga data-theme="dark" qo‘ying: ichidagi tugma, matn va chegaralar o‘zi qorong‘i tokenlarga o‘tadi. Ranglarni qo‘lda yozmang.

#141414Faqat brend qorasi. Sof #000 va kulrang “deyarli qora” ishlatilmaydi.

Katta yuzaHero, promo lenta, yon panel, footer. Karta, tugma yoki beyj qora maydon bo‘lmaydi.

BittadanYorug‘ ekranda bitta asosiy qora maydon: hero yoki promo lenta. Yon panel bundan mustasno.

ChiziqsizQorong‘i rejimda sahifa ham qora — maydon bir pog‘ona och yuza (--eco-bg-secondary) bilan ajraladi, chegara chizilmaydi.

Belgi — yadro, nurlar, nuqtalar

Figma

YadroQora fonda oq, oq fonda qora
22 nurBitter Lime · #BDFF00
11 + 11 nuqtaVivid Malachite · #00C508

LogotipShapka, hujjat, email. Atrofida kamida 1X bo‘sh joy. Logotip · Himoya maydoni

PDP Academy

1 248 bitiruvchi ishga joylashdi

Suv belgisiBurchakda, bir rangli, 6–10 %, ko‘pi bilan ⅓ qismi kesiladi. Brend usullari

BloomSahifada bir marta: yadro → nurlar → nuqtalar, 1,2 s gacha. Harakat

Ikonka, bullet yoki loader o‘rnida.
Matn ichida so‘z yoki harf o‘rnida.
Ranglari almashtirilgan, aylantirilgan yoki cho‘zilgan holda.
Bir ekranda bir nechta rangli belgi.

Belgi tuzilishi va ranglari — Figma brendbukidan: nuqta va nur ranglari fonga qarab o‘zgarmaydi, faqat yadro almashadi. To‘liq qoidalar brendbukda: Logotip, Himoya maydoni, Variantlar.

Limon — kam va faqat qora matn bilan

Figma

Qora fonda — limon

Frontend dasturlash · React asoslari

18 / 29 dars · 62 %

Oq fonda — yashil

Frontend dasturlash · React asoslari

18 / 29 dars · 62 %

Ikkala karta bir xil kod: aksent --eco-bg-brand-solid tokenidan olinadi va rejimga qarab o‘zi limon yoki yashil (#00B533) bo‘ladi. Ustidagi matn limonda qora, yashilda oq (qaror 30.09.2026).

15,3 : 1 · AAAQora matn limon ustida
15,3 : 1 · AAALimon matn qora fonda

Bitta CTAEkranda bitta asosiy tugma: qorong‘ida limon, yorug‘da yashil. Qolgan harakatlar — secondary yoki tertiary tugma.

Kichik yuzaTugma, progress, faol holat, kicker. Katta limon fon — faqat gradient ichida.

Qora matnLimon ustida faqat #141414. Oq matn limonda o‘qilmaydi.

Oq fonda yashilYorug‘ rejimda limon faqat aksent tugmada: asosiy tugma — yashil #00B533, matn — green-700.

Bitta limon tugma, ikkinchisi — rangsiz tertiary. Ko‘z darhol asosiy harakatni topadi.

Nuqtali to‘r — X modulidan tekstura

Figma

to‘r qadami = X

Modulni ko‘rsatish

216 px ÷ 9 = 24 pxBelgi kengligi ÷ 9 = X = to‘r qadami. Belgi to‘rning aynan 9 katagiga tushadi, shuning uchun bezak va logotip bitta modulda turadi.

Jim tekstura: 2 px nuqta, --eco-text-primary 12 %, bir burchakdan chiqib chetga qarab so‘nadi.
Qayerda: hero, bo‘sh holat, bo‘lim foni, muqova.
To‘liq parametrlar va misollar — Brend usullari; X ning ta’rifi — Himoya maydoni.

Orbitalar — chiziqli element

Figma

Brend elementlari

Halqa, quyosh va doira kesma

Brend elementlari

Toza sahna, bitta qahramon

Junior brendbuki: 5-qism, vizual uslub

Brend elementlari

Qora maydon, bitta dalil, yashil CTA

Online brendbuki: 5-qism, vizual uslub

Brend elementlari

To‘q ko‘k maydon, pill va katta Onest

School brendbuki: 5-qism, vizual uslub

Brend elementlari

Foto, halqali belgi va sariq aksent

University brendbuki: 5-qism, vizual uslub

Tipografiya

Shrift rollari: sarlavha, matn va kod

Har brendda uchta rol bor: sarlavha shrifti (--eco-font-display), matn shrifti (--eco-font-body) va kod shrifti (--eco-font-mono). Shkala, qator balandligi va vaznlar hamma brendda bir xil; brend shrift oilasini va display matnining harf oralig‘ini beradi.

Space Grotesk chaqiradi, Inter tushuntiradi

Rasmiy

Sarlavha — Space Grotesk, interfeys matni — Inter, kod va qiymatlar — IBM Plex Mono. Ruscha sarlavhada kirill harflari — Golos Text, bitta qatorda. Dizayner qarori, tasdiqlangan 27.09.2026.

Space Grotesk

Sarlavhalar — Medium · kichik sarlavhalar — Regular · harf oralig‘i −4%

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
01 02 03 04 05 06 07 08 09 ! @ # $ % ^ & * ( ) =

Biz bilan kurslarni muvaffaqiyatli tamomlang va orzu qilgan ish o‘rningiz egasiga aylaning!

Mutaxassislik kurslarini to‘liq tamomlagan talabalarga sertifikat beriladi.

Bakalavriat va magistraturaga hujjat qabuli boshlandi.

BoldSemiBoldMediumRegularLight

Space Grotesk — Google Fonts (yangi oynada)Kirill: Golos Text — Google Fonts, yangi oynada

Inter

Interfeys matni — Regular, Medium, Semibold

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
01 02 03 04 05 06 07 08 09 ! @ # $ % ^ & * ( ) =

Yagona tizim — har bir talaba uchun shaxsiy kabinet mavjud bo‘lib, bunda o‘quv jarayonidagi barcha ma’lumotlarni ushbu yagona tizim orqali kuzatishlari mumkin.

Talaba shaxsiy kabinetda dars jadvali, baholar va kutubxona navbatini kuzatib boradi.

BoldSemiBoldMediumRegularLight

Inter — Google Fonts (yangi oynada)

IBM Plex Mono

Kod, token nomi, HEX qiymat; bo‘lim eyebrow’i — Medium 14 px, katta harflar, oraliq 12 %

--eco-font-display--letter-spacing: -0.04em;

IBM Plex Mono — Google Fonts (yangi oynada)

Space Grotesk vaznlari

Rasmiy

LightRegularMediumSemiBoldBold

Lotin — Space Grotesk, kirill — Golos Text (bir pog‘ona yengil, 96%). Bitta shrift oilasi: brauzer har harfni o‘zi tanlaydi.

Aa Бб 2026 — «PDP Academy»

Matn shkalasi

Untitled UI asosida, barcha brendlar uchun bitta: oltita display o‘lcham (sarlavha shrifti, Medium) va beshta matn o‘lchami (asosiy shrift). Har o‘lchamning o‘z qator balandligi bor; Space Grotesk’li brendlarda har display o‘lchamda harf oralig‘i −4% (--eco-font-display--letter-spacing: -0.04em). Kalit ustunidagi nomga --eco- qo‘shing: --eco-text-display-lg, qator balandligi — --eco-text-display-lg--line-height.

Display — Space Grotesk Medium · −4%
text-display-2xl	72 / 90 · −4%Hero, landing	Ekotizim
text-display-xl	60 / 72 · −4%Landing sarlavhasi	Bugun boshlang
text-display-lg	48 / 60 · −4%Promo bo‘lim sarlavhasi	Loyihalar o‘zaro bog‘langan
text-display-md	36 / 44 · −4%Bo‘lim sarlavhasi	Sertifikat beriladi
text-display-sm	30 / 38 · −4%Sahifa sarlavhasi, KPI raqami	Shaxsiy kabinet
text-display-xs	24 / 32 · −4%Ilova sahifasi sarlavhasi	Bugungi darslar
Matn — Inter
Matn — Google Sans Flex
text-xl	20 / 30Karta sarlavhasi, lead	O‘quv jarayonidagi barcha ma’lumotlar bitta joyda.
text-lg	18 / 28Lead	Kurs 8 oy davom etadi, haftasiga uch dars.
text-md	16 / 24Asosiy matn, maydon matni	Har bir talaba uchun shaxsiy kabinet mavjud.
text-sm	14 / 20Label, izoh, jadval	Kursni tamomlagach sertifikat beriladi.
text-xs	12 / 18Kichik beyj, tooltip, jadval sarlavhasi	Oxirgi kirish: bugun, 09:41

Regular 400asosiy matn, izoh, jadval Medium 500label, beyj, jadval sarlavhasi Semibold 600tab, ajratilgan raqam

Vaznlar Untitled UI rollari bo‘yicha: interfeysda Inter uchta vaznda ishlaydi — Regular, Medium, Semibold. Display o‘lchamlar doim Space Grotesk Medium; karta sarlavhasi (.eco-card__title) ham Space Grotesk Medium, o‘lchami text-xl. Light va Bold vaznlari interfeys shkalasida yo‘q — ular taqdimot va bosma materiallar uchun.

Kod

/* O‘lcham, qator balandligi va shrift — bitta font qisqartmasida */
h1     { font: 500 var(--eco-text-display-lg)/var(--eco-text-display-lg--line-height) var(--eco-font-display);
         letter-spacing: var(--eco-text-display-lg--letter-spacing); }
.label { font: 500 var(--eco-text-sm)/var(--eco-text-sm--line-height) var(--eco-font-body); }

Yangi alifbo uchun tayyor

Rasmiy

2026-yil lotin alifbosi islohotidagi to‘rt harf — ö, ğ, ş, ç — sarlavha, matn va kod shriftlarida bor: fayllar /ds/fonts/ dan, zaxira shriftga o‘tmaydi. Qonun kuchga kirganda shriftlar va DS tayyor. Imlo va o‘tish tartibi — Alifbo islohoti 2026.

Sarlavha · 500 · 64 px

Öz kelajagingizni bugun quring

Sarlavha · 500 · 32 px

Ğalaba — izçil mehnat natijasi

Matn · 400 · 32 px

Çiroyli, tuşunarli, öziga xos

Matn · 400 · 16 px

Şahar markazidagi çiroyli binoda yangi öquv yili boşlandi: darslar ertalab va keçqurun, ğoliblar uçun alohida guruh.

Kod · 400 · 16 px

şahar: "Toşkent" · öquvçilar: 1 200 · ğolib: true

ÖöÖöÖöU+00D6 · U+00F6

ĞğĞğĞğU+011E · U+011F

ŞşŞşŞşU+015E · U+015F

ÇçÇçÇçU+00C7 · U+00E7

Space Grotesk, Golos Text, Inter, IBM Plex Mono — ochiq shriftlar (SIL OFL). Fayllar design.pdp.uz/ds/fonts/ da, sahifaga joylanadi — bitta ulanish: <link rel="stylesheet" href="https://design.pdp.uz/ds/fonts/fonts.css">. Sharp Grotesk vebda ishlatilmaydi; bosma, taqdimot va Figma shablonlari keyingi bosqichda o‘tadi, logotip yozuvi har doim konturda.

Oraliq va shakl

Oraliq asosan 4 px qadam bilan o‘sadi

Oraliq, burchak, soya va grid tokenlardan olinadi. Maketda qiymatni o‘ylab topmang — tokenni oling: ritm bir xil bo‘lsa, kurs sahifasi ham, shaxsiy kabinet ham, katalog kartasi ham bitta oilaga o‘xshaydi.

Oraliq shkalasi

Untitled UI nomlari: --eco-spacing-xxs dan --eco-spacing-11xl gacha 16 qadam, yana none (0). Asosan 4 px qadam; 2 va 6 px — faqat ikonka atrofi va zich joylar uchun. Kichik qadamlar komponent ichida, o‘rtachalari komponentlar orasida, kattalari bo‘limlar orasida ishlaydi. Shkalada yo‘q qiymat (10, 14, 28 px) kerak bo‘lsa — yaqin qadamni oling. Istisno — komponent ichidagi o‘lchamlar: maydondagi 10 × 14 px chekka Untitled UI’dan aynan olingan.

Komponent ichida
--eco-spacing-xxs2Zich joy: beyjning vertikal chekkasi, toggle dastagi atrofi, segment bandlari oralig‘i
--eco-spacing-xs4Tugmada ikonka va matn, beyj ichida nuqta va yozuv, segment treki chekkasi 4/8, bandlar oralig‘i 2
--eco-spacing-sm6Zich joy: label, maydon va izoh orasi, katta tugmada ikonka va matn, chip ichida
--eco-spacing-md8Sarlavha va meta satr, checkbox va uning yozuvi, chiplar orasi, alert ikonkasi va matni
--eco-spacing-lg12Ikonka plitkasi va matn, beyj va sarlavha
Komponentlar orasida
--eco-spacing-xl16Alert va toast ichki chekkasi, forma maydonlari orasi, mobil gutter va chekka
--eco-spacing-2xl20Forma guruhlari orasi, modal tugmalari ustidagi masofa
--eco-spacing-3xl24Karta va modal ichki chekkasi, kartalar orasi (planshet va desktop), kontent va amal tugmasi
--eco-spacing-4xl32Blok ichidagi guruhlar orasi, planshet va desktop chekkasi
--eco-spacing-5xl40Sahifa sarlavhasi va kontent orasi, bo‘sh holat ichida
Bo‘limlar orasida
--eco-spacing-6xl48Bo‘lim ichidagi bloklar orasi
--eco-spacing-7xl64Mobil ekranda bo‘limlar orasi, hero ichidagi masofa
--eco-spacing-8xl80Planshetda landing bo‘limlari orasi
--eco-spacing-9xl96Desktop landing bo‘limlari orasi
--eco-spacing-10xl128Desktop hero blokining yuqori va pastki chekkasi
--eco-spacing-11xl160Kamdan-kam: promo sahifadagi eng katta tanaffus

.eco-card · oraliqlar

Qabul ochiq

Frontend dasturlash

8 oy · haftasiga 3 dars · Chilonzor filiali

1 200 000 so‘m / oy

Oraliqlarni ko‘rsatish

24 · --eco-spacing-3xl — karta ichki chekkasi, har tomondan
12 · --eco-spacing-lg — beyj va sarlavha
8 · --eco-spacing-md — sarlavha va meta satr: bir guruh
24 · --eco-spacing-3xl — ma’lumot va amal: alohida guruh

Qoida: bir guruh ichidagi oraliq guruhlar orasidagidan kichik bo‘ladi. Shunda ko‘z bloklarni chiziqsiz ajratadi.

X moduli bilan aloqa — ritm, qiymat emas

X — belgi kengligining to‘qqizdan biri Figma. U logotip bilan birga kattalashadi, shuning uchun tugma va kartalar oralig‘i X’da o‘lchanmaydi. Bog‘lanish faqat ritmda: belgini 36, 72, 108 yoki 144 px qilib qo‘ysangiz, X = 4, 8, 12 yoki 16 px — shkaladagi qadam, va himoya maydonini token bilan yozasiz.

Belgi 36 pxX = 4 px → --eco-spacing-xsYig‘ilgan yon panel, ilova paneli, email imzosi

Belgi 72 pxX = 8 px → --eco-spacing-mdKirish ekrani, bo‘sh holat, sertifikat burchagi

Belgi 144 pxX = 16 px → --eco-spacing-xlHero, poster, tadbir ekrani

Shtrixlangan hoshiya — 1X himoya maydoni. X shkalaga tushmasa (masalan, belgi 40 px → X = 4.44 px), himoya maydonini yuqoriga — keyingi qadamga yaxlitlang: 6 px (--eco-spacing-sm). Pastga (4 px) yaxlitlamang: 1X dan kam bo‘lib qoladi.

Burchaklar: Untitled UI shkalasi

none · 0--eco-radius-noneJadval katagi, to‘liq kenglikdagi rasm va banner
xxs · 2--eco-radius-xxsGrafik ustuni, ko‘rsatkich chizig‘i
xs · 4--eco-radius-xsCheckbox sm (16 px), havola-tugma fokusi
sm · 6--eco-radius-smBeyj (badge turi), tag (chip), checkbox md
md · 8--eco-radius-mdSuzuvchi progress yorlig‘i, badge lg, sahifalash, skeleton
lg · 10--eco-radius-lgIkonka plitkasi 40–48 px, kichik rasm, eslatma bloki (callout)
xl · 12--eco-radius-xlMaydon, select, input guruhi, toast, tooltip, fayl yuklash
2xl · 16--eco-radius-2xlxs tugma (32 px) va xs tugmalar guruhi
3xl · 20--eco-radius-3xlKatta media blok, promo karta, menyu qatori
4xl · 24--eco-radius-4xlTugma (pill), karta, alert, modal, dropdown menyu, landing bloklari
full · 9999--eco-radius-fullPill beyj, avatar, toggle, radio, progress, slider, segment va tab pill

Light komponent shkaladan oladi

--eco-radius-4xl · 24

Telefon raqam

--eco-radius-xl · 12

Dilnoza KarimovaUI/UX dizayn · 3-guruh · 92 ball

--eco-radius-4xl · 24

Dark komponent shkaladan oladi

--eco-radius-4xl · 24

Telefon raqam

--eco-radius-xl · 12

Dilnoza KarimovaUI/UX dizayn · 3-guruh · 92 ball

--eco-radius-4xl · 24

Komponentga alohida radius tokeni yo‘q — komponent shkaladagi qadamni oladi: tugma, karta, alert, modal va dropdown menyu 4xl (24; xs tugma — 2xl, 16), maydon, toast va tooltip xl (12), eslatma bloki lg (10), beyj va chip sm (6), avatar, toggle, segment va tab pill full. Shkala Untitled UI asosida; tugma, maydon va karta burchagi — dizayner taklifi (Rahimjon Gaziyev, 28.09.2026; pill tugma — 29.09.2026). Untitled UI React kodidagi Tailwind sinflari boshqacha nomlangan: rounded = xs 4, rounded-md = sm 6, rounded-lg = md 8, rounded-xl = xl 12, rounded-2xl = 2xl 16.

Light

Grafik dizayn

Dark

Grafik dizayn

Ichki burchak = tashqi − chekka: 16 − 8 = 8. Burchaklar parallel ketadi.

Soya va qatlamlar

Untitled UI asosida yetti daraja: xs, sm, md, lg, xl, 2xl, 3xl — va hozir ishlatilmaydigan xs-skeuomorphic (ichki chiziq va pastki qirra). Yorug‘ rejimda balandlikni soya beradi. Qorong‘i rejimda soya #141414 fonda deyarli ko‘rinmaydi — u yerda yuzaning ochroq tusi va chegara ishlaydi. Token nomlari bir xil, lekin qorong‘ida soya to‘qroq (alfa 4 barobar) va faqat suzuvchi qatlamga qo‘shiladi. Suzuvchi qatlam va modal foni — --eco-bg-primary_alt: qorong‘ida --eco-bg-tertiary bilan bir xil, yorug‘da oq.

data-theme="light" · soya

xsJadval kartasi, modern ikonka--eco-shadow-xs

smToggle dastagi--eco-shadow-sm

mdPopover--eco-shadow-md

lgTooltip, toast, dropdown menyu, hover karta--eco-shadow-lg

xlModal, bottom sheet--eco-shadow-xl

2xlKamdan-kam: hero--eco-shadow-2xl

3xlKamdan-kam: hero--eco-shadow-3xl

xs-skeuHozir ishlatilmaydi--eco-shadow-xs-skeuomorphic

data-theme="dark" · yuza bosqichi

0Tekis--eco-bg-primary

1Ko‘tarilgan--eco-bg-secondary

2Suzuvchibg-primary_alt + shadow-lg

3Ustki qatlambg-primary_alt + shadow-xl

Token	Qayerda	Qorong‘i rejimda
`--eco-shadow-xs`	Jadval kartasi, modern ikonka, slider yorlig‘i; tugma va maydon soyasiz	Shu token; ajratishni `--eco-border-secondary` yoki tertiary chegara beradi
`--eco-shadow-xs-skeuomorphic`	Hozir ishlatilmaydi: modern ikonka — `--eco-shadow-xs`, tugmalar soyasiz	Shu token
`--eco-shadow-sm`	Toggle va slider dastagi. Tanlangan tab pill’i — o‘z soyasi: `--eco-tab-pill-shadow`	Tab pill ikkala rejimda oq, o‘z soyasi bilan
`--eco-shadow-md`	Popover	`--eco-bg-primary_alt` + `--eco-border-secondary`
`--eco-shadow-lg`	Tooltip, toast, dropdown menyu va tanlov ro‘yxati (`.eco-menu`), hover’dagi karta (`.eco-card--raised`)	`--eco-bg-primary_alt` + `--eco-border-secondary`
`--eco-shadow-xl`	Modal, bottom sheet; orqasida `--eco-bg-overlay`	`--eco-bg-primary_alt` + `--eco-border-secondary` + `--eco-shadow-xl`
`--eco-shadow-2xl` · `3xl`	Kamdan-kam: hero ustidagi suzuvchi karta, marketing illyustratsiyasi	Odatda kerak emas: yuza va chegara yetadi

Grid va breakpoint’lar

Untitled UI breakpoint’lari, mobil birinchi: 768 px gacha 4 ustun, 768–1023 da 8, 1024 dan boshlab 12. Konteyner 1280 px (--eco-max-width-container) dan kengaymaydi va markazda turadi. Gutter va chekka — oraliq tokenlari. Oynani toraytiring — namuna ham qayta taxlanadi.

Light .eco-grid

Hozirgi ekran: 2xl · 12 ustun · gutter 24 · konteyner 1280xl · 12 ustun · gutter 24 · konteyner 1280lg · 12 ustun · gutter 24md · 8 ustun · gutter 24sm · 4 ustun · gutter 16xs · 4 ustun · gutter 16xxs · 4 ustun · gutter 16

span 12 / 8 / 4 · sarlavha

span 4 · karta

Dark .eco-grid

span 12 / 8 / 4 · sarlavha

span 4 · karta

Breakpoint	Ekran	Ustun	Gutter	Chekka	Konteyner	Qurilma
`xxs`	320–599	4	16 · `spacing-xl`	16 · `spacing-xl`	100%	Telefon
`xs`	600–639	4	16 · `spacing-xl`	16 · `spacing-xl`	100%	Katta telefon
`sm`	640–767	4	16 · `spacing-xl`	16 · `spacing-xl`	100%	Katta telefon, gorizontal
`md`	768–1023	8	24 · `spacing-3xl`	32 · `spacing-4xl`	100%	Planshet
`lg`	1024–1279	12	24 · `spacing-3xl`	32 · `spacing-4xl`	100%	Noutbuk
`xl`	1280–1535	12	24 · `spacing-3xl`	32 · `spacing-4xl`	maks. 1280 px	Katta monitor
`2xl`	1536 dan	12	24 · `spacing-3xl`	32 · `spacing-4xl`	maks. 1280 px	Keng monitor

Kod

/* Breakpoint’lar — tokens.json → breakpoint; media query ichida CSS o‘zgaruvchisi ishlamaydi */
.eco-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--eco-spacing-xl);
            padding-inline: var(--eco-spacing-xl); max-width: var(--eco-max-width-container); margin-inline: auto; }
@media (min-width: 768px)  { .eco-grid { grid-template-columns: repeat(8, minmax(0, 1fr));
                                         gap: var(--eco-spacing-3xl); padding-inline: var(--eco-spacing-4xl); } }
@media (min-width: 1024px) { .eco-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

Ikonkalar

Bitta to‘plam, ikki holat

Barcha PDP mahsulotlari Phosphor ikonkalaridan foydalanadi — hamma brendda bitta to‘plam. Odatda — Regular (kontur), faol, tanlangan yoki yoqilgan holatda — Fill (to‘ldirilgan). Rang matndan olinadi.

Kutubxona: Phosphor, Regular va Fill

Kutubxona: Phosphor Icons v2.1.1 · MIT litsenziya
Og‘irlik: regular — odatiy, fill — faol holat
Chizish to‘ri: 256 × 256, ichki chekka 16 birlik
Chiziq qalinligi: 16 birlik: 24 px da 1.5 px, 16 px da 1 px
Bo‘yoq: fill: currentColor — kontur ham shakl sifatida chizilgan
Rang: currentColor — matn rangini oladi

regular asosiyMenyu, tugma, maydon, matn yonida — hamma joyda

fillFaol, tanlangan, yoqilgan: joriy menyu bandi, tanlangan tab, «Saqlangan»

boldFaqat kichik doiradagi holat belgisi (16 px gacha): check-bold, x-bold

Hamma PDP brendlari Phosphor’da. Bir to‘plam bo‘lgani uchun foydalanuvchi bir loyihadan boshqasiga o‘tganda “uy”, “kalendar”, “profil” belgilari bir xil tanish ko‘rinadi. Phosphor’da har ikonkaning Fill varianti bor, shuning uchun faol holat boshqa to‘plamdan olinmaydi (qaror 01.10.2026; avval — Lucide). PDP School DS v1.0 (/school/) ham Phosphor’da.

Fill qayerda: yon panel va pastki menyuning joriy bandi, tanlangan tab va segment, yoqilgan tugma («Saqlangan», «Sevimli»), kurs yo‘lidagi joriy dars (play-fill), reyting yulduzi. Qolgan hamma joyda — Regular. Holat faqat ikonka bilan bildirilmaydi: fon yoki rang ham o‘zgaradi.

O‘lchamlar: 16, 20, 24

--eco-icon-sm · .eco-icon--sm

Matn ichida, meta satr, jadval, alert, kichik tugma (xs).

21.09.202618:3024 talaba

--eco-icon-md · .eco-icon

Maydon, toast, menyu bandi. Standart o‘lcham.

--eco-icon-lg · .eco-icon--lg

Navigatsiya (pastki menyu, yon panel), ikonka plitkasi, bo‘sh holat.

Komponent ichida o‘lcham qotirilgan: tugmada 20 px (xs da 16 px), beyj ichida 12 px (lg da 14 px). Boshqa joyda faqat 16, 20 yoki 24 ni oling.

Plitkada va matn yonida

Light plitka · ikonka · burchak

32 · 16 · r8

40 · 20 · r12

48 · 24 · r16

40 · doira

success

accent

Dark plitka · ikonka · burchak

32 · 16 · r8

40 · 20 · r12

48 · 24 · r16

40 · doira

success

accent

Light ikonka + matn

Frontend dasturlash12-dars · React komponentlari
Toshkent, Chilonzor filiali
Dushanba, chorshanba, juma · 18:30
To‘lov har oyning 5-sanasigacha qabul qilinadi. Kechiksa, jadval saqlanadi, sertifikat esa qarz yopilgach beriladi.

Dark ikonka + matn

Frontend dasturlash12-dars · React komponentlari
Toshkent, Chilonzor filiali
Dushanba, chorshanba, juma · 18:30
To‘lov har oyning 5-sanasigacha qabul qilinadi. Kechiksa, jadval saqlanadi, sertifikat esa qarz yopilgach beriladi.

Plitkada ikonka plitkaning yarmi: 32 → 16, 40 → 20, 48 → 24. Doira — faqat avatar o‘rnida va xabar manbasida. Matn bir qator bo‘lsa, ikonka markaz bo‘yicha; ko‘p qator bo‘lsa, birinchi qator bilan tekislanadi (namunada fon bilan belgilangan qator). Ikonka va matn orasi 8 px, plitka va matn orasi 12 px.

Sprite’dagi barcha ikonkalar

102 ta ikonkabosing — Phosphor nomi nusxalanadi

Sprite’dan chaqirish — pastda. Id — i-<kalit> (kalit — sichqoncha ostidagi yozuv), to‘ldirilgani — i-<kalit>-fill. Ikonka yolg‘iz turgan tugmaga aria-label bering.

Kod

<svg class="eco-icon" aria-hidden="true"><use href="#i-book-open"/></svg>

Holati o‘zgaradigan tugmada (aria-pressed, aria-selected, aria-current) ikkala og‘irlik bitta svg ichida: base.css holatga qarab almashtiradi.

Kod

<svg class="eco-icon" aria-hidden="true"><use href="#i-heart"/><use class="eco-on" href="#i-heart-fill"/></svg>

Loyiha ikonkalari

PDP AcademyBitiruv, kasbgraduation-cap
PDP OnlineEkran orqali darslaptop
PDP UniversityKampus, oliy ta’limbuilding-2
PDP SchoolMaktab, o‘quvchilarschool
PDP JuniorBolalar, ijodsparkles

Bu belgilar loyiha logotipi o‘rnini bosmaydi. Ular kichik joylar uchun: ekotizim menyusi, filtr, bildirishnoma manbasi, “Boshqa loyihalar” ro‘yxati. Logotip sig‘adigan joyda logotipni qo‘ying.

Yo‘nalish ikonkalari

Frontend dasturlashSayt va veb-ilova interfeysicode
Backend dasturlashServer, ma’lumotlar bazasi, APIlayers
Mobil dasturlashAndroid va iOS ilovalarsmartphone
UI/UX dizaynInterfeys, prototip, tadqiqotlayout-grid
Grafik dizaynLogotip, poster, SMM vizualimage
Data ScienceTahlil, statistika, MLchart-line
KiberxavfsizlikTarmoq va ma’lumot himoyasilock
Digital marketingSMM, reklama, sotuv voronkasitrending-up

Har bir kurs yo‘nalishiga bitta belgi, hamma loyihada bir xil: katalog filtri, kurs kartasi, kabinet menyusi, dars jadvali. Yangi yo‘nalish ochilsa, belgisi shu ro‘yxatga qo‘shiladi — sprite’da yo‘q bo‘lsa, Phosphor’dan olinadi. Belgi yo‘nalish nomi o‘rnini bosmaydi: yonida doim matn turadi.

Qo‘llanish

Light

To‘lov qabul qilindi. 1 200 000 so‘m · 21.09.2026

Dark

To‘lov qabul qilindi. 1 200 000 so‘m · 21.09.2026

Holatni ikonka va aniq matn bilan bildiring.

Light

Dark

Bir qatorda — bir to‘plam, bir og‘irlik, bir o‘lcham.

Light

Dark

Tanlangan holatda ikonka to‘ldiriladi (Fill), fon va rang ham o‘zgaradi. Bosib ko‘ring.

Oq fonda ikonka — matn rangida; yashil kerak bo‘lsa --eco-text-brand-tertiary (7.3 : 1).

Sana, raqam va pul

Sana, vaqt, son, pul va telefon — uch tilda bir xil

Interfeys, bosma hujjat, taqdimot va SMM — hammasida bitta format: 06.10.2026, 19:00, 1 200 000 so‘m, +998 78 000 00 00. Ruscha va inglizcha matnda faqat so‘z va ajratgich o‘zgaradi. Brauzerning Intl o‘zbekcha formatiga ishonib bo‘lmaydi — pastdagi formatlagichni oling. Manba — Unicode CLDR, GOV.UK va Microsoft Style Guide, brendbuk «Ohang» bobi.

Imlo va tinish belgilari

Imlo: o‘ va g‘, tutuq belgisi, qo‘shtirnoq, tire va bosh harf

O‘zbekcha matn — faqat lotin yozuvida, bitta apostrof tizimida: o‘ va g‘ — ‘, tutuq belgisi — ’. Apostrof aralashsa, qidiruv so‘zni topmaydi, ekran o‘qigich noto‘g‘ri o‘qiydi, matn chalkash ko‘rinadi. Bu yerda — belgilar, tekshiruvchi, bosh harf va tinish belgilari uch tilda hamda 2026-yil alifbo islohoti. Manba — 1995-yil «O‘zbek tilining asosiy imlo qoidalari», brendbuk «Ohang» bobi.

Harakat

Harakat nima o‘zgarganini ko‘rsatadi — boshqa hech narsani

Uchta davomiylik va uchta egri chiziq barcha PDP mahsulotlariga yetadi va har brendda bir xil ishlaydi — brend faqat rangni almashtiradi, harakatni emas. Interfeysda 400 ms dan uzoq harakatni foydalanuvchi kechikish deb qabul qiladi, shuning uchun eng sekin token — 360 ms.

Davomiylik va egri chiziq

Sekin ko‘rish · ×4

Tizimingizda “harakatni kamaytirish” yoqilgan: namunalar darhol yakuniy holatga o‘tadi. Aynan shunday bo‘lishi kerak.

Token	Qiymat	Qayerda
`--eco-duration-fast`	120 ms	Hover va bosishdagi rang, fon va chegara; chip; checkbox; yopilish (chiqish) harakatlari.
`--eco-duration-base`	200 ms	Switch, tab chizig‘i, tooltip, dropdown, karta hover.
`--eco-duration-slow`	360 ms	Disclosure va accordion, modal, toast kirishi, brend belgisi harakatining qismlari.
`--eco-ease-standard`	`.2, 0, 0, 1`	Ekranda qolgan element holati o‘zgarganda: rang, o‘lcham, balandlik.
`--eco-ease-emphasized`	`.2, .7, .2, 1`	Kirish va ko‘tarilish: element tez boshlanib, yumshoq to‘xtaydi — toast, modal, switch tugmachasi, karta hover, brend belgisi harakati.
`--eco-ease-exit`	`.4, 0, 1, 1`	Chiqish: element tezlashib ketadi. Faqat fast yoki base bilan — ketish kirishdan qisqa.

Egri chiziqli qatorlar farqni sezish uchun slow (exit — base) bilan o‘ynaydi. “Sekin ko‘rish” butun bo‘limdagi tokenlarni 4 barobar cho‘zadi — faqat o‘rganish uchun.

Qayerda harakat bor, qayerda yo‘q

Harakatlanadi

Hover va bosishRang, fon va 97,5 % gacha kichrayish — fast. Javob darhol seziladi.
Switch va tabTugmacha siljiydi, tab chizig‘i ko‘chadi — base. Checkbox faqat rangini almashtiradi — fast.
Disclosure va accordionBalandlik ochiladi — slow; chevron buriladi — base.
Toast va modal8 px ko‘tarilib paydo bo‘ladi, shaffoflik bilan yo‘qoladi.
Belgi bloom’iYagona uzun harakat (≈ 1,1 s): sahifada bir marta, yuklanishda. Brend usullari bo‘limiga qarang.
Belgi ochilishiYagona brend harakati (≈ 0,5 s): halqa, keyin quyosh; sahifada bir marta, yuklanishda. Qoidalari — pastda.
Brend belgisiHozircha harakatsiz: o‘z harakati brendbukda belgilanadi. Unga qadar belgi yuklanishda ham, hover’da ham joyida turadi.

Harakatlanmaydi

MatnHarflar, so‘zlar va raqamlar animatsiya qilinmaydi. KPI qiymati darhol ko‘rinadi.
Katta layout sakrashlariKontentni itaruvchi banner, butun sahifa siljishi, ekran bo‘ylab uchib kirish yo‘q.
Fokus halqasiKechikishsiz, darhol paydo bo‘ladi.
Aylanish va katta masshtabKarta, matn va logotip aylanmaydi — faqat chevron (180°) va yuklanish belgisi. Masshtab 1,02 dan oshmaydi.
Cheksiz harakatFaqat yuklanish belgisi (.eco-loader) va skeleton takrorlanadi.

Light

Dark

Keladigan xabar joyini skeleton bilan oldindan band qiling — matn joyida qoladi.

Light

1 248 bitiruvchi ishga joylashdi

Dark

1 248 bitiruvchi ishga joylashdi

Raqamni darhol, yakuniy qiymati bilan ko‘rsating.

Mikrointeraksiyalar

bosing, ustiga olib boring, Tab bilan yuring

Tugma bosilishi · 97,5 % gacha kichrayadi · fast

Qabul ochiqFrontend dasturlash8 oy · 01.10.2026 dan · kechki guruh

Karta hover · 2 px yuqoriga + soya · base

Dars eslatmalari SMS xabarlar

Switch · tugmacha 16 px · base · emphasized

HTML va CSS asoslari
JavaScript
React va loyiha ishi

Disclosure · balandlik · slow · standard

Toast · kirish 8 px · slow · chiqish fast

Chip tanlovi · rang · fast · siljishsiz

Element	Nima o‘zgaradi	Tokenlar
Tugma hover	Fon rangi	`fast` · `standard`
Tugma bosilishi	`scale(.975)`	`fast` · `standard`
Karta hover	`translateY(-2px)`, `shadow-lg`; chiziq yo‘q	`base` · `emphasized`
Switch	Tugmacha `translateX(16px)`, trek rangi	`base` · `emphasized`
Disclosure	Balandlik 0 → auto (`slow`); chevron 180° (`base`)	`standard`
Toast	Kirish: 8 px + shaffoflik; 4 s turadi; chiqish: shaffoflik	`slow` · `emphasized` / `fast` · `exit`
Yon panel yig‘ilishi	Kenglik 248 ↔ 72 px; ikonkalar joyida qoladi, yozuvlar shaffoflik bilan yo‘qoladi	`slow` · `standard`
Fokus halqasi	Paydo bo‘ladi	0 ms — darhol

97,5 %tugma bosilishi

2 pxkarta ko‘tarilishi

8 pxtoast va modal kirishi — eng uzun siljish

≤ 1,02masshtab chegarasi

Harakatni kamaytirish

Tizimda prefers-reduced-motion: reduce yoqilgan bo‘lsa, o‘tishlar darhol bo‘ladi: siljish, masshtab va balandlik animatsiyasi o‘chadi, rang ham darhol almashadi. Kirish animatsiyasidan faqat shaffoflik qoladi — fast bilan. Ma’no yo‘qolmaydi: holat matn va rang bilan ko‘rinadi.

Element	Oddiy	Kamaytirilganda
Tugma, chip, havola	Rang · fast	Rang darhol almashadi
Karta hover	−2 px + soya · base	Soya va siljish darhol, animatsiyasiz
Switch, disclosure	Siljish, balandlik · base / slow	Darhol yakuniy holat
Yon panel	Kenglik 248 ↔ 72 px · slow	Yakuniy kenglik darhol
Toast	8 px + shaffoflik · slow	Faqat shaffoflik · fast
Belgi bloom’i	≈ 1,1 s	Yakuniy belgi darhol
Belgi ochilishi	≈ 0,5 s · halqa, keyin quyosh	Tayyor belgi darhol, harakatsiz
Skeleton, yuklanish belgisi	Cheksiz	Skeleton to‘xtaydi, belgi faqat xira-yorqin pulsatsiya qiladi; “Yuklanmoqda…” matni va `aria-busy` qoladi
Sahifa scroll’i	`smooth`	`auto`

Kod

/* 1. O‘tishlar darhol: holat o‘zgaradi, harakat yo‘q */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
  .eco-skeleton, .eco-btn.is-loading::after { animation-duration: 0s; animation-iteration-count: 1; }
}

/* 2. Kirish animatsiyasi → faqat shaffoflik */
.eco-toast { animation: eco-rise var(--eco-duration-slow) var(--eco-ease-emphasized) both; }
@media (prefers-reduced-motion: reduce) {
  .eco-toast { animation: eco-fade var(--eco-duration-fast) linear both; }
}
@keyframes eco-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes eco-fade { from { opacity: 0; } }

/* 3. Brend belgisi harakati — sahifada bir marta va faqat ruxsat bo‘lsa */
const calm = matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!calm) mark.classList.add('is-play');

Harakat naqshlari

Material 3 harakat tizimi — bizning tokenlarda

Harakat ekran qanday o‘zgarganini tushuntiradi: qayerdan chiqdi, qayerga ketdi, nima nimaga aylandi. Bizda uch davomiylik va uch egri chiziq bor (Harakat) — bu yerda Material Design 3 tokenlari va to‘rt o‘tish naqshi ularga bog‘langan. Yangi token qo‘shilmaydi: M3 dagi 16 davomiylik va 10 egri chiziq o‘rniga — bizning 3 + 3.

Harakat kutubxonasi

Harakat kutubxonasi: o‘nta tayyor brend animatsiyasi

Belgi ochilishi, yuklanish, muvaffaqiyat, xato, jarayon, sahifa o‘tishi, toast, sertifikat bayrami, raqam sanash va skeleton — har biri jonli namuna, vaqt jadvali va tayyor CSS bilan. Hammasi uchta davomiylik va uchta egri chiziqdan (Harakat) tuzilgan — yangi token yo‘q. Muhimlari Lottie fayl sifatida ham bor: mobil ilova, Telegram mini-ilova va video uchun. G‘oya — IBM Carbon (samarali va ifodali harakat), Material 3, LottieFiles tavsiyalari.

Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.

Tovush

Tovush: ovozli belgi va sakkizta interfeys tovushi

Tovush — brendning ixtiyoriy qatlami: yorqin, sokin va qisqa. Ovozli belgi bloom ritmini takrorlaydi — o‘zak, nurlar, nuqtalar; interfeys tovushlari o‘sha gammadan olingan, shuning uchun hammasi bitta oila bo‘lib eshitiladi. Sukut bo‘yicha o‘chiq, faqat foydalanuvchi bosganda chalinadi va hech qachon yagona belgi emas. G‘oya — Mastercard (bitta kuy — butun tovush tizimi), Netflix va Intel (2–5 nota), Material Design (earcon va hero sound), Apple HIG (haptics).

Bu bo‘lim hozircha faqat EcoSystem uchun yozilgan. Ko‘rish uchun yuqoridagi brend almashtirgichda EcoSystem’ni tanlang — boshqa loyihalarga tasdiqdan keyin qo‘shiladi.

Boshqaruv

Bitta tizim, oltita brend — bitta yo‘l

PDP Design System — barcha PDP loyihalari uchun bitta: komponentlar, semantik tokenlar va qoidalar umumiy, har brend esa o‘z qatlamini beradi — ranglar, shrift va logotip. Bu bo‘lim kim qaror qilishini, versiya qachon oshishini, brend nimani o‘zgartira olishini, yangi komponent va ekran qanday tekshirilishini va o‘zgarish qaysi yo‘l bilan design.pdp.uz saytiga chiqishini ko‘rsatadi.

Ikki holat: Figma belgili va belgisiz

Figma

Tasdiqlangan brend qoidasi

Brend egasining Figma fayli yoki rasmiy hujjatidan olingan: ranglar, shrift, logotip va uning o‘lchov moduli. Mahsulotlar uni o‘zgartirmasdan ishlatadi. Har brendning manbasi — pastdagi jadvalda.

Belgisiz — design system qarori

Manbada hali yo‘q qaror: shkalalar, semantik tokenlar, komponentlar, patternlar — va to‘rtta yangi brendning ranglari. Ishlatish mumkin, lekin keyingi versiyada o‘zgarishi mumkin — tasdiq kutadi.

BelgisizFigmato‘rt shart bajarilganda

Sinovdan o‘tgan Kamida bitta mahsulotda haqiqiy ekranda ishlatilgan — masalan, kurs sahifasida yoki kabinetda.
Tekshirilgan Oltita brendda, ikki rejimda, 390px kenglikda; matn kontrasti ≥ 4.5:1.
Figma’da chizilgan Brendning Figma fayliga qoida yoki komponent sifatida qo‘shilgan.
Brend egasi tasdiqlagan Blokka “Figma” belgisi qo‘yiladi, pastdagi Versiyalarga PATCH sifatida yoziladi.

Rad etilgan taklif sahifadan olib tashlanadi, sababi esa Versiyalar yozuvida qoladi — xuddi shu savol qayta ko‘tarilmasligi uchun.

Brendlar va ularning egalari

Har brend — bitta brend moduli: tools/ecosystem-ds/brands/<id>.js. Unda brend primitivlari, 27 ta brend kaliti, shrift va logotip turadi; qolgan hamma narsa umumiy. Faol brend qatori ajratilgan.

Brend	Holat	Brend egasi	Brend manbasi	Brendbuk
PDP EcoSystemfaol	Rasmiy	EcoSystem brend jamoasi · ota brend	Figma: `PDP EcoSystem Brand Color 2026`	/ecosystem/
PDP Academyfaol	Rasmiy	Academy brend egasi · marketing	Figma: `PDP Academy Logo 2026`	/academy/
PDP Schoolfaol	Tasdiq kutadi	School jamoasi	PDP School Guideline, School DS v1.0; shrift — Onest (qaror)	Tayyorlanmoqda · amaldagi DS — /school/
PDP Universityfaol	Tasdiq kutadi	University jamoasi	Sayt logotiplari (SVG), palitra A; Figma manbasi yo‘q	Tayyorlanmoqda
PDP Onlinefaol	Tasdiq kutadi	Online jamoasi	Belgi — Academy Figma to‘plamidan; logotip — 1-variant (biz chizdik)	Tayyorlanmoqda
PDP Juniorfaol	Tasdiq kutadi	Junior jamoasi	Belgi — Academy Figma to‘plamidan; logotip — 1-variant «Oila» (biz chizdik)	Tayyorlanmoqda

«Tasdiq kutadi» holatidagi brend ishlatiladi, lekin ranglari va shrifti brend jamoasi tasdiqlaguncha o‘zgarishi mumkin. Tasdiqdan keyin modulda status: 'rasmiy' qo‘yiladi va Versiyalarga yoziladi.

Kim nimaga javob beradi

Qaror sohasi	Brend egasi har brendning o‘z jamoasi	DS maintaineri DS kodi, tokenlar	Mahsulot jamoasi sayt, kabinet, ilova
Brend ranglari, logotip, belgi, shrift	Qaror	Kontrastni tekshiradi	Ishlatadi
Brend kalitlari: tugma, havola va fokus qaysi rejimda qaysi rang (27 ta)	Tasdiqlaydi	Qaror	Taklif beradi
Umumiy tokenlar: neytral, holat ranglari, `--eco-chart-`, `--eco-cat-`, oraliq, radius	Xabardor	Qaror	Taklif beradi
Umumiy komponentlar `.eco-*`	Maslahat	Qaror	Taklif beradi
Loyiha aksenti `--eco-project-*`	Tasdiqlaydi	Qaror	Taklif beradi
Mahsulot ekranlari va oqimlari	Maslahat	Maslahat	Qaror
Versiya, changelog, deploy	Xabardor	Qaror	Xabardor

Qaror — yakuniy so‘z va javobgarlik Tasdiqlaydi — uning roziligisiz chiqmaydi Maslahat — fikri oldindan so‘raladi Taklif beradi — o‘zgarishni boshlay oladi

Brend nimani o‘zgartira oladi

Umumiy — hamma brendda bir xil

Brend o‘zgartirmaydi — faqat PDP Design System versiyasi orqali.

Token nomlari --eco-* va komponent tuzilmasi .eco-*
--eco-color-neutral-*, -error-*, -warning-* — neytral va holat shkalalari
--eco-chart-2…6, --eco-cat-* — grafik seriyalari va toifa tuslari (dizayner bergan ranglar; tartibini build brendga qarab tanlaydi)
--eco-spacing-*, --eco-radius-*, matn shkalasi, soyalar, harakat tokenlari
Kontrast, fokus, klaviatura va reduced motion qoidalari

Brend moduli beradi

Shart: build har brendni ikki rejimda tekshiradi — xato bo‘lsa sahifa yig‘ilmaydi.

--eco-color-<brend>-* — brend primitivlari va shkalalari
27 ta brend kaliti: --eco-bg-brand-*, --eco-text-brand-*, --eco-fg-brand-*, --eco-border-brand, --eco-focus-ring, --eco-chart-1, -seq-*, muvaffaqiyat kalitlari
--eco-font-display, --eco-font-body, --eco-gradient
Logotip, belgi va ularning eng kichik o‘lchami
--eco-project-<o‘z id> — faqat o‘z loyihasining aksenti; qo‘shnilariniki tegilmaydi

// tools/ecosystem-ds/brands/<id>.js — brend moduli (qisqartirilgan)
module.exports = derive({
  id: '<id>', name: 'PDP …', status: 'taklif',   // tasdiqdan keyin — 'rasmiy'
  primitives: { … },                 // brend ranglari — brend egasi
  semantic: () => slots({ … }),       // 27 brend kaliti, ikki rejim — DS maintaineri
  fonts: { display, body, mono },      // shrift — brend egasi
  logo: { symbols: 'brands/<id>/symbols.html' },
});
// build tekshiradi: 27 kalit, brend maydonidagi matn ≥ 4.5:1, grafik seriyalari
// orasida ΔE ≥ 0.10, sahifa fonidagi yuza ≥ 3:1 (yoki sababi yozilgan)

Brend ranglari — brend qarori: ularni faqat shu brend egasi o‘zgartiradi. Ajratish ranglari va umumiy tokenlar — tizim qarori, ularni DS maintaineri dizayner bergan ranglardan belgilaydi. Bir brendning rangi boshqa brendda ishlatilmaydi — build buni brend literallari tekshiruvi bilan ushlaydi.

Versiya raqami: MAJOR.MINOR.PATCH

MAJOR 1.0 → 2.0: Token o‘chirildi yoki nomi o‘zgardi, komponentning HTML tuzilishi o‘zgardi. Mahsulotlar kodini yangilaydi — migratsiya izohi bilan.
MINOR 0.4 → 0.5: Yangi token, komponent, pattern yoki brend qo‘shildi. Mavjud kod o‘zgarishsiz ishlayveradi.
PATCH 0.5.0 → 0.5.1: Qoida matni aniqlashtirildi, xato yoki kontrast tuzatildi, taklif “Figma” belgisini oldi, brend tasdiqlandi. Token nomlari o‘zgarmaydi.

v0.1–0.2 21.09.2026
EcoSystem asosida: brend asoslari, tokenlar, komponentlar, patternlar, foydalanish qulayligi, AI uchun qoidalar.
v0.3 22.09.2026
Untitled UI asosi: token nomlari, komponent o‘lchamlari, variantlar va holatlar; ilova komponentlari.
v0.4 23.09.2026
Ish ranglari, grafik va loyiha tokenlari; mahsulot uchun asosiy rejim — yorug‘. 26.09 da Academy brendi (v0.1) alohida sahifada chiqdi.
v0.5 26.09.2026
Yagona PDP Design System: bitta sahifa, oltita brend. EcoSystem va Academy — rasmiy, School, University, Online va Junior — taklif. Har brend uchun token va AI fayllari; eski DS manzillari shu sahifaga yo‘naltiriladi.
v0.6 30.09.2026
Reskin 2 (dizayner taklifi, 29.09.2026): har brendda tugma taxalluslari --eco-brand-button, --eco-brand-button-accent, --eco-brand-button-ink (matn juftliklari --eco-brand-on-* bilan) va ikkilamchi tugma matni --eco-brand-button-secondary-fg; EcoSystem — --eco-color-malachite-button (#00B533). School (taklif) — ko‘k #0019FF, tugma #0055FF, aksent moviy #00E0FF; Junior (taklif) — #00CDDA va #004450. EcoSystem va Academy qiymatlari o‘zgarmadi. Yangi komponentlar (Taklif): dropdown menyu va ro‘yxat elementi, eslatma bloki (callout), input guruhi, OTP, slider.
v0.7 01.10.2026 · joriy
Reskin 3–4 (Figma «Yangi», 30.09–01.10.2026): sahifa bo‘ylab qidiruv; fonga ega obyektlar atrofida chiziq yo‘q; yashil va teal tugma ustida oq matn; yangi tablar, progress va avatarlar; logotiplar Figma konturlaridan, School — shoxli belgi va ko‘k #0019FF; hamma brendda Light fon #F5F5F5; muallif izohlari juda och.
v1.0 reja
Barqaror versiya: brendlar tasdiqlangan, asosiy takliflar ko‘rib chiqilgan, token nomlari muzlatilgan.

1.0 gacha (0.x) minor versiyada ham token nomi o‘zgarishi mumkin — yangilashdan oldin shu yozuvlarni o‘qing. Raqam yon paneldagi belgida, <meta name="pdp-ds-system"> tegida (deploy’dan keyin CI shu teg bo‘yicha sahifani tekshiradi) va shu ro‘yxatda yangilanadi. Brendbuklarning versiyasi alohida.

Ochiq savollar — PDP EcoSystemPDP AcademyPDP SchoolPDP UniversityPDP OnlinePDP Junior

Faol brend bo‘yicha brend jamoasi javob berishi kerak bo‘lgan savollar. Hal bo‘lguncha sahifada qat’iyroq variant ishlaydi.

Loyiha aksentlari. --eco-project-* EcoSystem brendida o‘zgarmaydi; boshqa brend faqat o‘z aksentini qayta belgilaydi.EcoSystem brend egasi
Sharp Grotesk litsenziyasi. Vebda ishlatilmaydi (shriftlar — SIL OFL, 27.09.2026 dan); bosma, ofis va Figma shablonlari keyingi bosqichda o‘tadi, logotiplar konturda.EcoSystem brend egasi

Yangi komponent va ekran chiqishidan oldin

Tizim yomon qarorlardan emas, hujjatlashtirilmagan istisnolardan buziladi. Chapda — yangi komponent qanday qo‘shiladi, o‘ngda — har bir ekran chiqishidan oldingi tekshiruv. Qoidalar oltita brendda bir xil.

Yangi komponent — 4 qadam

Borligini tekshiringO‘ntadan to‘qqiztasi aslida yangi emas: bu boshqa mazmundagi karta, beyj yoki ro‘yxat qatori. Avval shu sahifadan eng yaqin komponent yoki patternni qidiring.
Tokenlardan yig‘ingRang, oraliq, radius va soya — faqat shkalalardan. Qiymat yetishmasa, bu komponent haqida emas, token haqidagi suhbat: o‘zgarish so‘rovi oching.
Holatlarni tavsiflangDefault, hover, active, focus, disabled va loading. Komponent ma’lumot ko‘rsatsa — bo‘sh holat va xato holati ham.
Sahifaga qo‘shingKomponent shu sahifada jonli namuna va qoidasi bilan turgandagina mavjud: oltita brendda, ikki rejimda, 390px kenglikda. Hujjatsiz komponent — yo‘q komponent.

Ekran chiqishidan oldin

Aynan bitta primary tugma va bitta asosiy metrika Rang, oraliq va radius — faqat tokenlardan: --eco-* Ma’lumotli har blokda uch holat: skeleton, bo‘sh holat va xato Tekshirilgan kengliklar: 1440, 1024, 768 va 390px 768px dan tor ekranda jadval kartalar ro‘yxatiga aylangan Matn o‘zbek, rus va ingliz tilida sig‘adi, hech narsa kesilmagan Ikonkalar faqat Phosphor’dan (faol holatda Fill), emoji yo‘q Foydalanish qulayligi ro‘yxati o‘tilgan: kontrast, fokus, klaviatura

## Ekran chiqishidan oldin · PDP Design System

- [ ] Aynan bitta primary tugma va bitta asosiy metrika
- [ ] Rang, oraliq va radius — faqat tokenlardan: --eco-*
- [ ] Ma’lumotli har blokda uch holat: skeleton, bo‘sh holat va xato
- [ ] Tekshirilgan kengliklar: 1440, 1024, 768 va 390px
- [ ] 768px dan tor ekranda jadval kartalar ro‘yxatiga aylangan
- [ ] Matn o‘zbek, rus va ingliz tilida sig‘adi, hech narsa kesilmagan
- [ ] Ikonkalar faqat Phosphor’dan (faol holatda Fill), emoji yo‘q
- [ ] Foydalanish qulayligi ro‘yxati o‘tilgan: kontrast, fokus, klaviatura

O‘zgarish yo‘li: taklifdan saytgacha

Taklif
O‘zgarish so‘rovi ochiladi: nima, nega, qaysi brend va mahsulotlarga ta’sir qiladi.
GitLab issue · shablon pastda
Figma
Dizayner yechimni maketda ko‘rsatadi. Brend rangi, shrift yoki logotipga tegsa — shu brend egasi ko‘radi.
brendning Figma fayli
Bo‘lim fayli
Qoida va jonli namuna bo‘lim fayliga yoziladi, ruscha matn — ds/i18n/ru/<id>.json ga. Brend qiymati — faqat brend moduliga: brands/<id>.js.
tools/ecosystem-ds/ds/sections/NNN-id.html
Yig‘ish
Sahifa oltita brendda, ikki rejimda va 390px kenglikda tekshiriladi. Natija — site/ds/, token va AI fayllari — ham commit qilinadi.
node tools/ecosystem-ds/build.js --project pdp
Merge request
DS maintaineri ko‘rib chiqadi; brend qiymatiga tegsa — shu brend egasi ham tasdiqlaydi.
MR → main
Deploy
Merge’dan so‘ng CI sahifa manbaga mosligini tekshiradi, site/ papkasini serverga ko‘chiradi va meta teglarni tekshiradi.
design.pdp.uz/ds/

O‘zgarish so‘rovi shabloni

## O‘zgarish so‘rovi · PDP Design System

- **Nima o‘zgaradi:** token / komponent / pattern / brend moduli
- **Qayerda:** bo‘lim yoki fayl — masalan, `ds/sections/060-color.html` yoki `brands/school.js`
- **Nega:** qaysi muammoni hal qiladi; misol ekran — Figma havolasi
- **Qaysi brendlar:** hammasi / EcoSystem / Academy / School / University / Online / Junior
- **Versiya turi:** MAJOR / MINOR / PATCH
- **Holat:** Taklif

### Tekshiruv
- [ ] oltita brendda, qorong‘i va yorug‘ rejimda ko‘rildi
- [ ] 390px kenglikda gorizontal skroll yo‘q
- [ ] kontrast: matn ≥ 4.5:1; ikonka, chegara va fokus ≥ 3:1
- [ ] faqat `--eco-*` tokenlari; brend qiymati faqat brend modulida
- [ ] Versiyalarga yozuv qo‘shildi

Muallif: ism, jamoa · 26.09.2026

Komponentlar holati

Komponentlar holati: nima tayyor, nima yangi, nima eskirgan

Har bir bo‘lim — qaysi to‘plamda, qaysi brendlarda va qanday holatda: Tayyor — mahsulotda ishlating; Beta — yangi, art direktor ko‘rib chiqmoqda; Eskirgan — yangi ishda ishlatilmaydi, o‘rniga nima borligi yozilgan; Rejada — hali yo‘q. Jadval menyudan yig‘ishda tuziladi, qo‘lda yozilmaydi. G‘oya — GitHub Primer (Component status) va Atlassian (Beta yorliqlari).

Komponentlar tarixi

Komponentlar tarixi: nima, qachon va nima uchun o‘zgardi

Har komponent bo‘yicha o‘zgarishlar — yangidan eskiga: yangi bo‘lim, o‘lcham yoki rang qoidasi, eskirgan variant. Komponentni tanlang — faqat unga tegishli yozuvlar qoladi. Umumiy yangiliklar — Kirish’dagi «Nima yangi»; to‘liq qoidalar — dizayn qoidalari faylida. G‘oya — GitHub Primer, Atlassian va Shopify Polaris changelog’lari.

Tokenlar

Kodda ishlatish uchun tayyor

Qiymatlar CSS o‘zgaruvchilari va JSON ko‘rinishida beriladi. Token nomlari oltita brendda bir xil — --eco-*, qiymatlari brendniki. Semantik tokenlar ikki rejimda ishlaydi: mahsulot uchun asosiysi — yorug‘, qorong‘i esa qo‘llab-quvvatlanadigan muqobil va brend konteksti. Sahifaning o‘zini ham rejim tugmasi bilan almashtirib ko‘ring.

Ikki rejim yonma-yon

bir xil markup, faqat data-theme farq qiladi

data-theme="dark" · muqobil

Kursni tamomlang, sertifikat oling

Qora fonda brend maydoni va havola yorqin pog‘onada. Batafsil

bg-secondaryFaol

data-theme="light" · mahsulot uchun asosiy

Kursni tamomlang, sertifikat oling

Oq fonda havola va fokus o‘qiladigan to‘qroq pog‘onaga o‘tadi. Batafsil

bg-secondaryFaol

Untitled UI nomlari

Semantik tokenlar Untitled UI nomlarini oladi, oldiga --eco- qo‘shiladi. Nom rangni emas, vazifani aytadi: qiymat brend va rejimga qarab o‘zgaradi, nom o‘zgarmaydi. Chiziqcha (-) nom qismlarini ajratadi, pastki chiziq (_) — holat yoki variantni.

--eco-prefiks
bg-guruh
brand-rol
soliddaraja yoki tur
_hoverholat

Guruhlar va darajalar

text-: Matn. primary — sarlavha va asosiy matn, secondary — label va tugma, tertiary — izoh, quaternary — eng past daraja.
fg-: Matn bo‘lmagan belgi: ikonka, nuqta, progress. Darajalar text- dagidek.
bg-: Fon. primary — sahifa, secondary — karta, tertiary va quaternary — ichki qatlam va trek.
border-: Chegara. primary — checkbox va radio (≥ 3 : 1), secondary — ajratilgan chegara, tertiary — bo‘luvchi va jadval kartasi.
brand- error- warning- success-: Rang roli. brand — faol brendning rangi, success — muvaffaqiyat shkalasi (brend o‘z yashilini berishi mumkin).

Qo‘shimchalar

_hover: Hover holati: text-secondary_hover, bg-brand-solid_hover.
_alt: Muqobil qiymat: bg-primary_alt — suzuvchi qatlam foni (qorong‘ida neutral-800, yorug‘da oq).
_on-brand: Brend rangli fon ustida: text-primary_on-brand — brend maydonidagi matn; rangi brendga qarab qora, oq yoki brendning to‘q rangi.
-solid: To‘liq bo‘yalgan, kontrastli fon: bg-brand-solid, bg-error-solid. -solid siz — och fon: bg-brand-primary.
_subtle: Yumshoqroq variant: border-error_subtle.

Toifa va loyiha ranglari

--eco-cat-*: Beshta toifa tusi — xilma-xillik to‘plami: black, green, blue, teal, red. Toifa va teg beyjlari uchun — avatar, tugma, havola, fokus va status uchun emas.
--eco-project-*: Beshta loyiha aksenti: academy, school, junior, university, online — loyihaning o‘z brend rangi. Loyihani tanitadi; pog‘onasi rejimga qarab o‘zgaradi, rang qolgan holida.

Grafik tokenlari

--eco-chart-1…6: Toifa seriyalari qat’iy tartibda: 1-seriya doim 1-token va u brend rangi. Oltitadan ortiq seriya kerak bo‘lsa — naqsh yoki yorliq qo‘shing.
--eco-chart-seq-1…5: Ketma-ket shkala kam → ko‘p uchun: faol brend rangining bitta ladder’i.
--eco-chart-div-1…5: Qarama-qarshi shkala: bir uchi xato, ikkinchisi muvaffaqiyat, o‘rtasi neytral.

Shisha tokenlari

--eco-glass-fill -fill-hover: Shisha foni va hover foni: Dark — qora 20 % (hover 32 %), Light — oq 40 % (hover 58 %).
--eco-glass-backdrop: backdrop-filter qiymati: Dark — blur(3px) brightness(1.25), Light — blur(3px) brightness(1.06).
--eco-glass-rim: 1 px qirra gradienti — yorug‘lik chap-tepadan (Dark — oq 60 % dan, Light — oqdan shaffofga). Chiziq emas, shishaning o‘zi.
--eco-glass-ink -solid: Shisha ustidagi matn va ikonka (Dark — oq, Light — qora); blur’siz brauzer uchun zaxira fon.

Rejimga ergashadi; rejimdan qat’i nazar — .eco-glass--dark / .eco-glass--light. Komponentlar: .eco-glass, .eco-btn--glass (Sayt → Tugmalar).

Umumiy token	Qorong‘i	Yorug‘	Qayerda
`--eco-text-primary`	`neutral-50`	`black`	Sarlavha, asosiy matn
`--eco-text-secondary`	`neutral-200`	`neutral-700`	Label, tugma matni
`--eco-text-tertiary`	`neutral-400`	`neutral-600`	Izoh, meta satr, ikkinchi darajali matn
`--eco-bg-primary`	`black`	`white`	Sahifa foni, karta ichidagi maydon
`--eco-bg-secondary`	`neutral-900`	`surface`	Karta, maydon, segment, jadval sarlavhasi
`--eco-bg-primary_alt`	`neutral-800`	`white`	Suzuvchi qatlam: dropdown, modal
`--eco-border-primary`	`neutral-500`	`neutral-500`	Checkbox va radio chegarasi (≥ 3 : 1)
`--eco-border-tertiary`	`neutral-50 · 14%`	`black · 14%`	Bo‘luvchi chiziq, jadval kartasi chegarasi

Bu tokenlar oltita brendda bir xil. Qiymat ustunida — primitiv rang: neutral-50 = --eco-color-neutral-50. Brendga bog‘liq 27 ta kalit — pastda, faol brend uchun.

Yorug‘ bg-secondary — loyihaning kulrang foni --eco-color-surface (brend qatlamida): hozircha hamma loyihada #F5F5F5, keyin har loyihaga o‘z foni. Hover, faol, disabled va tertiary fonlar ham undan hisoblanadi — tussiz kulrang zina.

Yorug‘ bg-brand-primary — loyihaning och brend tusi --eco-color-brand-tint (brend qatlamida): tanlangan karta, informatsion karta, bosilgan chip, brend beyji. EcoSystem, Academy va Online’da #E9FED8 (qaror 01.10.2026).

Brend qatlami — PDP EcoSystem

Rasmiy

Brend primitivlari brendniki

Brend ranglari va ulardan hisoblangan shkalalar. Belgini bosib nusxalang.

Brend kalitlari 27 ta

Shu semantik tokenlar brend primitivlariga ulangan. Nomi o‘zgarmaydi — faqat qiymati.

--eco-bg-brand-*, --eco-text-brand-*, --eco-fg-brand-*
--eco-border-brand, --eco-focus-ring, --eco-text-primary_on-brand
--eco-*-success-*
--eco-chart-1, -seq-*, -div-4, -div-5

Umumiy tokenlar hamma brendda

Brend qayta yozmaydi: ular PDP Design System versiyasi bilan o‘zgaradi.

--eco-color-neutral-*, -error-*, -warning-*
--eco-chart-2…6, --eco-cat-*, --eco-project-*, --eco-glass-*
Neytral matn, fon va chegara tokenlari
Matn shkalasi, oraliqlar, burchaklar, soyalar, harakat

27 ta brend kalitining qiymatlari · yorug‘ va qorong‘i rejim

Token	Yorug‘	Qorong‘i
`--eco-text-primary_on-brand`	`#FFFFFF`	`#141414`
`--eco-text-brand-primary`	`#00A603`	`#BDFF00`
`--eco-text-brand-secondary`	`#00A603`	`#BDFF00`
`--eco-text-brand-secondary_hover`	`#014C02`	`#CFFF80`
`--eco-text-brand-tertiary`	`#00A603`	`#00C508`
`--eco-text-success-primary`	`#026503`	`#63E95D`
`--eco-border-brand`	`#048307`	`#BDFF00`
`--eco-fg-brand-primary`	`#048307`	`#BDFF00`
`--eco-fg-brand-primary_alt`	`#00C508`	`#BDFF00`
`--eco-fg-brand-secondary`	`#00C508`	`#00C508`
`--eco-fg-success-primary`	`#048307`	`#00C508`
`--eco-fg-success-secondary`	`#00C508`	`#40D63C`
`--eco-bg-brand-primary`	`#E9FED8`	`rgba(189, 255, 0, .10)`
`--eco-bg-brand-secondary`	`#C6FFC0`	`rgba(189, 255, 0, .18)`
`--eco-bg-brand-solid`	`#00B533`	`#BDFF00`
`--eco-bg-brand-solid_hover`	`#02A307`	`#CFFF80`
`--eco-bg-success-primary`	`#E7FFE4`	`rgba(0, 197, 8, .16)`
`--eco-bg-success-solid`	`#00B533`	`#00B533`
`--eco-focus-ring`	`#048307`	`#BDFF00`
`--eco-chart-1`	`#00B533`	`#BDFF00`
`--eco-chart-seq-1`	`#E5FFC0`	`#014C02`
`--eco-chart-seq-2`	`#BDFF00`	`#048307`
`--eco-chart-seq-3`	`#00B533`	`#00C508`
`--eco-chart-seq-4`	`#026503`	`#63E95D`
`--eco-chart-seq-5`	`#013A04`	`#BDFF00`
`--eco-chart-div-4`	`#40D63C`	`#40D63C`
`--eco-chart-div-5`	`#048307`	`#048307`

CSS yuklab olish JSON (DTCG) Barcha brendlar — all.css

tokens/ecosystem.css · brend qatlami

/* Brend qatlami — brendbuk belgilaydi, loyiha o‘zgartirmaydi */
:root {
  --eco-color-black: #141414;
  --eco-color-malachite: #00C508;
  --eco-color-lime: #BDFF00;
  --eco-color-lime-light: #B5F500;
  --eco-color-malachite-button: #00B533;
  --eco-color-green-done: #00A603;
  --eco-gradient-stop-1: #F2FFC7;
  --eco-gradient-stop-2: var(--eco-color-lime);
  --eco-gradient-stop-3: var(--eco-color-malachite);
  --eco-gradient-stop-4: var(--eco-color-green-950);
  --eco-gradient: linear-gradient(90deg, var(--eco-gradient-stop-1) 0%, var(--eco-gradient-stop-2) 22%, var(--eco-gradient-stop-3) 58%, var(--eco-gradient-stop-4) 100%);
  --eco-color-surface: #F5F5F5;
  --eco-color-brand-tint: #E9FED8;
  --eco-font-display: "PDP Display", "PDP Display Fallback", system-ui, sans-serif;
  --eco-font-body: "Inter", "Inter Fallback", system-ui, sans-serif;
  --eco-font-mono: "IBM Plex Mono", "IBM Plex Mono Fallback", ui-monospace, monospace;
  --eco-logo-min-full: 120px;
  --eco-logo-min-mark: 16px;
  --eco-logo-min-badge: 64px;
}

Shrift: Space Grotesk + Golos Text (sarlavha) va Inter (matn). Ulash havolasi token fayli boshidagi izohda.

<!-- bitta brend: shu brendning fayli -->
<html lang="uz" data-theme="light">
<link rel="stylesheet" href="https://design.pdp.uz/ds/tokens/ecosystem.css">

<!-- bir ilovada bir nechta brend: all.css + data-brand -->
<html lang="uz" data-brand="ecosystem" data-theme="light">
<link rel="stylesheet" href="https://design.pdp.uz/ds/tokens/all.css">

Eski nomlardan ko‘chish

Oldingi spetsifikatsiyalardagi token nomlari — masalan, --pdp-* — PDP Design System’da semantik tokenlarga to‘g‘ri keladi. Ko‘chirishda nomni almashtiring, qiymatni emas: qiymat faol brenddan keladi. Ikki nom tizimini bitta sahifada aralashtirmang.

Eski nom	PDP Design System	Vazifasi
`--pdp-brand-50`	`--eco-bg-brand-primary`	Och brend foni
`--pdp-brand-100`	`--eco-bg-brand-secondary`	Och fon va yumshoq chegara
`--pdp-brand-600`	`--eco-bg-brand-solid`	Brend maydoni, belgilangan boshqaruv; tugma — `--eco-brand-button`
`--pdp-brand-700`	`--eco-bg-brand-solid_hover`	Brend maydoni hover holati
`--pdp-brand-800`	`--eco-text-brand-secondary`	Havola va kichik brend matni
`--pdp-brand-300 · 400 · 950 · deep, --pdp-yellow`	`--eco-color-<brend>-*`	Brend primitivlari: komponentda to‘g‘ridan-to‘g‘ri ishlatilmaydi, faqat semantik token orqali
`--pdp-pink`	`--eco-color-<brend>-pink`	Palitra pushtisi; UI aksenti emas, holat rangi emas
`--pdp-bg-app, --pdp-bg-row-alt`	`--eco-bg-secondary`	Ilova foni va jadvalning zebra qatori
`--pdp-bg-surface`	`--eco-bg-primary`	Karta va yuza
`--pdp-text-primary · secondary · muted`	`--eco-text-primary · secondary · tertiary`	Matn ranglari umumiy: brend ularni o‘zgartirmaydi
`--pdp-text-inverse`	`--eco-text-primary_on-brand`	Brend maydonidagi matn
`--pdp-border`	`--eco-border-tertiary`	Bo‘luvchi chiziq; karta chiziqsiz
`--pdp-success · warning · error`	`--eco-bg-success-solid · warning · error`	To‘liq holat foni; och fon va matn — -primary tokenlari
`--pdp-info`	`--eco-bg-brand-solid`	Alohida info rangi yo‘q: neytral yoki brend
`--pdp-radius-panel · tile · icon · pill`	`--eco-radius-4xl · 2xl · xl · full`	24 · 16 · 12 px va to‘liq yumaloq; karta radiusi — 24 px
`--pdp-shadow-card`	`--eco-shadow-xs`	Karta soyasiz va chiziqsiz
`--pdp-shadow-navy, --pdp-shadow-modal`	`--eco-shadow-xl`	Modal va suzuvchi qatlam
`--pdp-shadow-cta`	`--eco-shadow-xs-skeuomorphic`	Tugmada ishlatilmaydi: tugmalar soyasiz
`--pdp-font`	`--eco-font-display, --eco-font-body`	Sarlavha va matn shrifti
`--pdp-transition-fast`	`--eco-duration-fast + --eco-ease-standard`	150 → 120 ms
`--pdp-transition-slow`	`--eco-duration-slow + --eco-ease-emphasized`	280 → 360 ms
`--pdp-field`	`--eco-gradient`	Brend gradienti — har brendniki

Qiymati o‘zgargan joylar ham bor: matn rangi, soya va harakat davomiyligi umumiy tokenlardan olinadi, shuning uchun ko‘chirilgan ekran biroz boshqacha ko‘rinadi — bu kutilgan farq.

Dasturchilar uchun

Komponentlar CSS’ini ulash: bitta manba

ERP, LMS va Desk komponentlar CSS’ini bitta joydan oladi — design.pdp.uz/ds/css/ yoki npm paketi @pdp/design-system. Nusxa ko‘chirilmaydi: loyihadagi nusxa vaqt o‘tib asl nusxadan farqlanib ketadi. Joriy versiya — 0.7.1.

AI uchun

AI yordamchiga qoidalarni bir marta bering

Qoidalar berilmasa, Claude, Cursor yoki Copilot dizaynni o‘zicha o‘ylab topadi: binafsha gradient, emoji ikonkalar, brend maydonida o‘qilmaydigan matn. Har brendning o‘z prompti bor: umumiy qoidalar — komponentlar, tokenlar, foydalanish qulayligi — va shu brendning ranglari, shrifti va logotipi. Prompt ingliz tilida — modellar ko‘rsatmani shu tilda aniqroq bajaradi, interfeys matni esa baribir o‘zbekcha chiqadi.

Vazifaga qarab: to‘plam fayllari

Agentga butun Design System emas, vazifasiga mos to‘plam beriladi. Har to‘plamning ai.md faylida faqat shu to‘plam bo‘limlari, bloklari, PDP klasslari va ular ishlatadigan tokenlar bor — build ularni bo‘lim ma’lumotidan yig‘adi.

Yo‘naltiruvchi fayl: design.pdp.uz/llms.txt — to‘plamlar ro‘yxati va qaysi birini qachon o‘qish. Avval Yadro, keyin vazifa to‘plami va brend prompti (pastda).

To‘plam	Qachon	AI fayli
Brendbuk	Brend bilan tanishish 16 bob: brend platformasi (missiya, shior, vizyon, qadriyatlar, auditoriya, xarakter), arxitektura, logotip, kobrending, rang, shrift, uslub g‘oyasi, foto, grafika, maket, harakat, video, ohang, qo‘llash, hamkorlar va fayllar.	`ds/brend/ai.md`
Yadro	Asoslar Asoslar: rang, tipografiya, oraliq, ikonkalar, tokenlar, harakat va foydalanish qulayligi — barcha to‘plamlar uchun umumiy.	`ds/yadro/ai.md`
Sayt	Veb-sayt yoki landing Tugmalar, formalar, kartalar, menyular, grafiklar, holatlar, kirish va ariza sahifalari, sahifa anatomiyasi, naqshlar, fonlar va effektlar.	`ds/sayt/ai.md`
Dashboard	Dashboard yoki CRM ekrani Nextcloud ilovalari — Dashboard, Fayllar, Photos, Faollik, Talk, Mail, Deck, Tasks, Gantt, Calendar, Tables, Forms, Polls, Contacts, Notes, Collectives, Announcements, Bookmarks — o‘quv bloklari va ilova navigatsiyasi.	`ds/dashboard/ai.md`
Ilova	Mobil ilova yoki Mini App Telegram Mini App, bot xabarlari va mavzu ko‘prigi; iOS va Android talaba ilovasi — tokenlar, komponentlar, ekranlar, ikonka, push va platforma farqlari.	`ds/ilova/ai.md`
LMS	School LMS ekrani PDP School o‘quv tizimi: ilova karkasi va rollar menyusi, dashboardlar, baholar jurnali, davomat, dars jadvali, kurs va test, uy vazifasi — School tokenlarida.	`ds/lms/ai.md`
Taqdimot	Taqdimot 61 turdagi 16:9 slayd (Dark va Light), taqdimot tuzilmalari va qoidalari; PowerPoint shablonlari — tez kunda.	`ds/taqdimot/ai.md`
Bosma	Bosma hujjat A4 hujjatlar va shablonlar (blank, SOP, blankalar, shartnoma), poster, beydj, ID karta, sertifikat, CMYK ranglar va preflight.	`ds/bosma/ai.md`
SMM	SMM post yoki story EcoSystem shablonlari: Instagram post va story, YouTube muqovasi va banneri, titrlar, podkast va vebinar ekranlari.	`ds/smm/ai.md`

Uch qadamda ulang

Tokenlarni qo‘shing
Tokenlar bo‘limidan faol brendning CSS faylini yuklab oling va loyihaga ulang. Prompt shu token nomlariga tayanadi.
Promptni nusxalang
Pastdagi “Promptni nusxalash” tugmasini bosing yoki agentga fayl havolasini bering. Matnni qisqartirmang — har bir qator bitta qoida.
Doimiy ko‘rsatmaga qo‘ying
Har chatga emas, loyiha qoidalari fayliga bir marta qo‘ying. Qaysi fayl — pastdagi jadvalda.

Tayyor fayl — PDP EcoSystem

Rasmiy

Shu brend uchun prompt alohida matn fayli sifatida ham bor — agent uni to‘g‘ridan-to‘g‘ri o‘qiydi: design.pdp.uz/ds/ai/ecosystem.md. Tokenlar: tokens/ecosystem.css.

Boshqa brend mahsuloti uchun sahifadagi brend tanlovidan brendni almashtiring — prompt va fayl ham almashadi. Bitta loyihaga bitta brend prompti qo‘yiladi.

Prompt — PDP EcoSystem

Rasmiy

ai/ecosystem.mdingliz tilidav0.6 · 01.10.2026

Kod

# PDP EcoSystem — UI rules for AI assistants (PDP Design System v0.6, brand "ecosystem")

You write UI for PDP EcoSystem, the parent brand of PDP Academy, PDP Online, PDP University, PDP School and PDP Junior. Follow these rules exactly. If a request conflicts with a rule, follow the rule and say which rule you kept. Tokens: https://design.pdp.uz/ds/tokens/ecosystem.css (CSS custom properties) or https://design.pdp.uz/ds/tokens/ecosystem.json (W3C DTCG). Load one token file only.
The system is based on Untitled UI: structure, sizes, variants, states and token names come from Untitled UI (with the --eco- prefix); colours, fonts and the logo are EcoSystem's.

## Mode
- Products are light-first: for a product screen the light mode is the default. Set data-theme="light" on <html> — bare :root is the dark mode.
- Dark is the supported alternative, not the product default: leave data-theme off (or set "dark") for brand surfaces — hero, covers, the brand book — and when the user asks for dark.
- Light: page background #FFFFFF, brand fill green #00B533 with white text. Dark: page background #141414, brand fill lime with black text. All semantic tokens switch; component CSS stays the same.
- Every component works in both modes. Never hard-code colours in components; use var(--eco-*).

## Brand colours (fixed, from the brand book)
- Vivid Malachite #00C508 (--eco-color-malachite): brand green — the mark, decoration and brand graphics.
- Button color #00B533 (--eco-color-malachite-button): every green component fill in UI — light-mode brand fill, primary button, checked controls, solid badge, brand band.
- Black #141414 (--eco-color-black): backgrounds and text.
- Bitter Lime #BDFF00 (--eco-color-lime): dark-mode brand fill (primary button, links, focus ring).
- Green: Done #00A603 (--eco-color-green-done): all green text in the light mode — section eyebrows, card titles, labels and links (--eco-text-brand-secondary); 3.25:1 on #FFFFFF, 2.98:1 on #F5F5F5 — art director exception (05.10.2026). Never a fill: green fills stay #00B533 with white text.
- Gradient --eco-gradient: #F2FFC7 0%, #BDFF00 22%, #00C508 58%, #013A04 100%; every stop has its own token --eco-gradient-stop-1…4 (the gradient is built from them). Brand moments only, never behind body text.
- Primitive scales (25, 50, 100…900, 950): --eco-color-green-*, --eco-color-lime-*, --eco-color-neutral-*, --eco-color-error-*, --eco-color-warning-*. Components use semantic tokens, not primitives.
- No black text or marks on a green fill (brand decision 30.09.2026): text and marks on green are white #FFFFFF. Text on lime fills is ALWAYS black #141414 (15.3:1).
- Exception: white text on green fills (#00B533) — brand decision (30.09.2026): no black text or marks on a green fill, contrast 2.7:1. Every green component fill (primary button, checked checkbox and switch, solid badge, brand band, success call to action) is #00B533 with white text and marks: EcoSystem light mode, Academy, Online. Take the colour from the tokens (--eco-text-primary_on-brand, --eco-brand-on-*), never hard-code it. Black on green appears only in SMM designs and large banners, never in UI.
- Exception: the selected tab label is pure black or pure white exactly as in the design (user decision 30.09.2026), for every brand, even below 4.5:1 (white on the University teal pill). Unselected tab labels are black at 70 % (white at 70 % in the dark mode). Take them from --eco-tab-label, --eco-tab-label-strong and --eco-tab-*-fg, never hard-code them.
- Exception: white text on teal fills in PDP University — brand decision (30.09.2026): no black text or marks on a teal fill, contrast 3.05:1. Every teal component fill (primary button, checked checkbox and switch, solid badge, brand band) takes white text and marks through the tokens (--eco-text-primary_on-brand, --eco-brand-on-*); the yellow accent keeps black text. Black on teal appears only in media and SMM designs, never in UI.
- Never lime text on white or light surfaces (1.2:1). Never #00C508 as text on white (2.3:1).
- Light mode: brand text = --eco-text-brand-tertiary and links = --eco-text-brand-secondary, both Green: Done #00A603 (3.25:1 on white, 2.98:1 on the #F5F5F5 grey surface — art director exception, 05.10.2026); link hover green-900. Green-700 #048307 stays for borders and the focus ring, never for text.

## Distinction colours — these are NOT brand accents
- There is no separate working palette: the old PDP Portal 2025 working-colour scales were removed (01.10.2026). Only colours the designer gave tell things apart.
- Chart series: --eco-chart-2…6 (see Charts). Category badges: --eco-cat-{black|green|blue|teal|red} through .eco-badge--cat-* (the diversity set; avatars do not use it). The key names are slots: in EcoSystem the set is text colour, green, dark green, grey and lime, and the board / calendar / tag dots --eco-board-1…6 (text on the fill --eco-board-ink-1…6) are green, black (white in Dark), grey, light green, dark green and lime — no blue, cyan, teal, yellow or red. Callout tones: .eco-callout--tip (green), --warning (orange), --note (teal), --important (purple), colours from the callout frame.
- A distinction colour NEVER becomes a button, a link, a focus ring or a status (success, warning, error). Those stay brand (lime/malachite) and the status scales. The category green and red look like status colours: a category badge never gets a dot and always carries a word.
- Brand colours keep their jobs unchanged: accent, primary action, link, focus, brand surfaces.
- Contrast still applies: text on a category tint ≥ 4.5:1 (the components mix the colour toward black in the light mode and toward white in the dark mode), marks and borders ≥ 3:1, in both modes.
- Product surfaces (page, card, divider) come from --eco-color-neutral-* and the project's light grey surface --eco-color-surface (--eco-bg-secondary in the light mode; currently neutral #F5F5F5 in every project, each project will get its own later) through the semantic tokens, never from a distinction colour.
- Light mode hover, active, disabled and tertiary backgrounds (--eco-bg-primary_hover, --eco-bg-active, --eco-bg-secondary_hover, --eco-bg-tertiary, --eco-bg-disabled) are hue-less greys derived from --eco-color-surface (--eco-color-surface-active, -hover, -tertiary; currently #F7F7F7, #E6E6E6, #E6E6E6, and #F5F5F5 for disabled). Never use the green-tinted neutral-50/100/200 steps as a light background; they stay for text, icons and borders.

## Charts
- Categorical series in a fixed order: --eco-chart-1, -2, -3, -4, -5, -6. Series 1 always takes chart-1 (the brand). Series 2–6 are the brand's OWN colours plus near-black/near-white and greys (art director, 05.10.2026) — EcoSystem light: #00B533 green, near-black (neutral-900, not pure black), lime, greys; EcoSystem dark: lime, near-white (neutral-100), malachite, greys. Never another brand's colour: no blue, yellow, teal or aqua in EcoSystem charts. Black is a primary colour — use it before reaching for grey. Never reshuffle the order per chart; take the colour from the token, never the HEX.
- Maximum six series. Need more? Merge the tail into “Boshqa”, or separate them with a pattern or a direct label — never invent a seventh colour.
- Never put two close greens next to each other (e.g. green-700 beside #00B533 beside green-300). Lime is fine for fills and bars; in the light mode it is 1.2:1 on white, so a lime line or slice always carries a direct label.
- Sequential (low → high): --eco-chart-seq-1…5, one green ladder — ONLY for ordered magnitude (heatmap, activity calendar, density). Never use it for categorical series or stacked parts. Diverging (error ↔ success): --eco-chart-div-1…5, neutral in the middle.
- Colour never carries meaning alone: label the series or add a pattern. Axes and gridlines ≥ 3:1 against the background; series colours follow the known limits above.

## Project accents
- --eco-project-{academy|school|junior|university|online}: one accent per active ecosystem project, its own brand colour (school blue, a lighter step in dark; university teal; junior cyan; online yellow — the Academy family sun). Values come from the tokens; the hue stays, only the step may shift with the mode.
- Use them to tell projects apart: project chip, filter, legend, card stripe, avatar background. Not for buttons, links or focus.
- A project may re-map its own --eco-project-* token; it may not re-map the brand colours or another project's accent.

## Semantic tokens (use inside components)
- Backgrounds: --eco-bg-primary (page), --eco-bg-secondary (cards, sections, progress track), --eco-bg-tertiary (progress track on grey surfaces), --eco-bg-quaternary, --eco-bg-primary_alt (dialogs, popovers, raised cards), --eco-bg-primary_hover, --eco-bg-secondary_hover, --eco-bg-active, --eco-bg-disabled, --eco-bg-overlay (behind dialogs), --eco-bg-primary-solid (tooltips, toasts)
- Text: --eco-text-primary, --eco-text-secondary (+ _hover), --eco-text-tertiary (muted, + _hover), --eco-text-quaternary, --eco-text-placeholder, --eco-text-disabled, --eco-text-white, --eco-text-brand-primary, --eco-text-brand-secondary (links, + _hover), --eco-text-brand-tertiary, --eco-text-primary_on-brand (text on brand fills: white on the light-mode green fill, black on the dark-mode lime fill)
- Borders: --eco-border-primary (strong strokes; ≥ 3:1), --eco-border-secondary (strong dividers, hover), --eco-border-tertiary (dividers, table rows), --eco-border-disabled, --eco-border-brand (input focus, drag-over), --eco-border-error, --eco-border-error_subtle
- Foreground (icons): --eco-fg-primary, --eco-fg-secondary, --eco-fg-tertiary, --eco-fg-quaternary (+ _hover), --eco-fg-white, --eco-fg-disabled, --eco-fg-brand-primary, --eco-fg-brand-primary_alt (on inverted surfaces such as .eco-toast), --eco-fg-brand-secondary, --eco-fg-error-primary, --eco-fg-error-secondary, --eco-fg-warning-primary, --eco-fg-success-primary, --eco-fg-success-secondary
- Brand fills: --eco-bg-brand-solid (+ _hover) for checked controls, solid badges and brand bands; --eco-bg-brand-primary, --eco-bg-brand-secondary for soft tints. In the light mode --eco-bg-brand-primary is the project's brand tint --eco-color-brand-tint (#E9FED8 in EcoSystem, Academy and Online): selected cards, info cards, pressed chips, brand badges; never mix your own tint from the brand colour.
- Buttons: --eco-brand-button with --eco-brand-on-button (primary), --eco-brand-button-accent with --eco-brand-on-button-accent, --eco-brand-button-ink with --eco-brand-on-button-ink; secondary text --eco-brand-button-secondary-fg. Never mix the pairs.
- Status: success, warning, error, plus info only for the “Waiting” status (.eco-badge--info, icon --eco-fg-info-primary) — the only blue in EcoSystem. Soft fill --eco-bg-{success|warning|error}-primary, solid fill --eco-bg-{success|warning|error}-solid, text --eco-text-{success|warning|error}-primary, icon --eco-fg-{success|warning|error}-primary; error also has --eco-bg-error-secondary, --eco-bg-error-solid_hover, --eco-text-error-primary_hover.
- Focus: --eco-focus-ring; --eco-focus-ring-error on destructive controls.
- Shadows: --eco-shadow-xs (modern featured icons, table cards), --eco-shadow-sm, --eco-shadow-md, --eco-shadow-lg (dropdowns, toasts, raised cards), --eco-shadow-xl (dialogs), --eco-shadow-2xl, --eco-shadow-3xl. Buttons, inputs and plain cards have no shadow.
- Light ↔ dark: brand fill green #00B533 ↔ lime; links green-done #00A603 ↔ lime; focus green-700 ↔ lime; --eco-bg-primary #FFFFFF ↔ #141414; text on brand fills white ↔ black.
- Removed in v0.3, never use: --eco-surface*, --eco-accent*, --eco-on-accent, --eco-text-muted, --eco-border-strong, --eco-space-N, --eco-control-*, --eco-type-*, --eco-tracking-*, --eco-shadow-1/2/3, --eco-danger-*, --eco-info-*.

## Typography
- Headings: --eco-font-display ("PDP Display": Space Grotesk for Latin, Golos Text for Cyrillic, one weight lighter at 96%). Medium 500 for display/h1/h2, Regular 400 for h3/h4. Display text of 20px and larger: letter-spacing −4% (var(--eco-font-display--letter-spacing)); never on uppercase eyebrows or labels.
- Body and UI: --eco-font-body (Inter). Code: --eco-font-mono (IBM Plex Mono). Load all of them with one <link rel="stylesheet" href="https://design.pdp.uz/ds/fonts/fonts.css"> (self-hosted, SIL OFL).
- Scale, size/line-height in px: --eco-text-xs 12/18, --eco-text-sm 14/20, --eco-text-md 16/24, --eco-text-lg 18/28, --eco-text-xl 20/30, --eco-text-display-xs 24/32, --eco-text-display-sm 30/38, --eco-text-display-md 36/44, --eco-text-display-lg 48/60, --eco-text-display-xl 60/72, --eco-text-display-2xl 72/90.
- Every size has a --line-height pair; every display size also has --letter-spacing (−4%). Use: font: 500 var(--eco-text-display-lg)/var(--eco-text-display-lg--line-height) var(--eco-font-display); letter-spacing: var(--eco-text-display-lg--letter-spacing). Other styles use 0.
- Sentence case. Body and input text 16px (--eco-text-md); buttons 16/24 in --eco-font-body, weight 500 (xs and sm 14/20); labels and hints 14px. Nothing below 12px.
- Section eyebrows (the uppercase label above a section title, e.g. “05 — TYPOGRAPHY”): --eco-font-mono, Medium 500, 14px, letter-spacing 0.12em, uppercase, in every brand. In EcoSystem, Academy and Online all green text in the light mode — eyebrows, card titles, labels and links — is --eco-color-green-done, an exception below 4.5:1 approved by the user (01.10.2026). Green fills keep their colour and white text.

## Spacing, shape, size
- Spacing scale only, px: --eco-spacing-{none 0, xxs 2, xs 4, sm 6, md 8, lg 12, xl 16, 2xl 20, 3xl 24, 4xl 32, 5xl 40, 6xl 48, 7xl 64, 8xl 80, 9xl 96, 10xl 128, 11xl 160}.
- Radius scale only, px: --eco-radius-{none 0, xxs 2, xs 4, sm 6, md 8, lg 10, xl 12, 2xl 16, 3xl 20, 4xl 24, full 9999}.
- Buttons, cards, alerts, dialogs, dropdown menus: 24px (--eco-radius-4xl; buttons are pills; xs buttons 16px; menu rows 20px); link-style buttons 4px (--eco-radius-xs). Inputs, selects, input groups, comboboxes, date and search fields: pill (--eco-field-radius-affix = --eco-radius-full), 44px high (sm 40px); multi-line textarea 20px (--eco-field-radius-multiline); OTP cells 12px. Toasts, tooltips: 12px (--eco-radius-xl). Callouts: 10px (--eco-radius-lg). Chips and --badge badges: 6px (--eco-radius-sm; lg badges 8px). Fully round (--eco-radius-full) only for single-line fields, pill badges, avatars, radios, switches, progress bars, sliders, segments and pill tabs.
- Heights: buttons xs 32, sm 36, md 40 (default), lg 44, xl 48px; inputs sm 40, md 44px (default). Buttons have a fixed height and horizontal padding only (xs 12, sm and md 16, lg 20, xl 24px; icon-only: a square, no padding); inputs take their height from padding + line-height.
- Content width: --eco-max-width-container 1280px.
- Icons: Phosphor Icons v2.1.1 (MIT) — Regular weight by default, Fill weight for active / selected / on states (current nav item, selected tab or segment, pressed toggle such as Saved or Favourite, current lesson, rating star); Bold only for tiny status marks in circles (check-bold, x-bold). Sizes --eco-icon-sm 16px, --eco-icon-md 20px, --eco-icon-lg 24px; colour is currentColor.
- Motion: --eco-duration-fast 120ms (hover, press), --eco-duration-base 200ms (toggles, tabs), --eco-duration-slow 360ms (panels); easing --eco-ease-standard, --eco-ease-emphasized (entering), --eco-ease-exit (leaving).
- Breakpoints (min-width): xs 600, sm 640, md 768, lg 1024, xl 1280, 2xl 1536px. Grid: 4 columns below 768px, 8 from md, 12 from lg; gutter 16px, 24px from md. Mobile first; no horizontal scroll at 390px.

## Components (reuse these class names; if the CSS is missing, implement them with these names and tokens)
- .eco-btn: sizes --xs | --sm | md (default, no class) | --lg | --xl; variants --primary | --accent | --ink | --secondary | --tertiary | --outline | --ghost | --link-color | --link-gray | --primary-destructive | --secondary-destructive | --tertiary-destructive | --link-destructive; --icon (square, icon only), --block (full width); .is-loading; [disabled]. While a button waits, put .eco-loader.eco-loader--sm.eco-loader--mono (aria-hidden) before the label and change the label (“Saqlanmoqda…”). Pill, no shadow; only --outline has a ring (1px, the same neutral as the tertiary fill in the dark mode). Hover darkens the fill; focus = hover fill + ring; pressed: scale(.975). Icon 16px (lg, xl: 20px), gap 8px (xs: 4px). In link variants wrap the label in <span> for the hover underline. Joined buttons: .eco-btn-group > .eco-btn.
- .eco-field > .eco-label (+ .req) + .eco-input (input, textarea, select; --sm 40px, md 44px default; no border: --eco-bg-secondary fill, --eco-bg-primary inside a card) + .eco-hint; .eco-input-wrap with a leading and/or trailing .eco-icon; .is-error (or aria-invalid="true"), .is-success
- .eco-otp (fieldset) > legend.eco-label + .eco-hint + .eco-otp__row (6 × input.eco-input.eco-otp__cell, 42×44px, 3 + 3 with an optional span.eco-otp__sep) + .eco-otp__foot (text + .eco-btn--link-color “resend”, aria-disabled while the timer runs). First cell autocomplete="one-time-code", all inputmode="numeric", no maxlength (spread a pasted code from the first cell); error: .is-error + aria-invalid="true" on every cell, message with role="alert"; checking: aria-busy="true"; disabled: fieldset[disabled].
- .eco-input-group (+ --sm; 44px default, 40px sm; inner pill 32 / 28px) > .eco-input-group__addon | select.eco-input-group__select (inside the addon) | button.eco-input-group__btn (--icon = icon only) + input.eco-input-group__input. One pill surface (radius var(--eco-field-radius-affix) = --eco-radius-full; plain .eco-input stays 12px), 6px inset, NO divider lines. Prefix/suffix = a pill inside the field (height = field − 12px); only a part with a function (select, button: copy, show, apply) or static text (%, .pdp.uz, +998) gets its own fill; static icons (globe, search, mail, lock) are .eco-input-group__addon--icon: no fill, --eco-fg-quaternary, like a search icon; --plain = text without fill. Fills come from context: on white the field is --eco-bg-secondary and the pill --eco-bg-primary_alt; on grey (.eco-card, .eco-input-group--on-grey) the field is --eco-bg-primary and the pill --eco-bg-secondary (custom properties --field-bg / --affix-bg, Light and Dark). Focus: 1.5px --eco-brand-button ring around the whole group; error: constant 1.5px --eco-focus-ring-error ring + message with an icon below. A text affix is a second <label for> of the input; with a select: role="group" + aria-labelledby on the group, aria-label on the select. At ≤ 479px a button pill with an icon shows the icon only.
- .eco-choice > .eco-check | .eco-radio (16px, --md 20px) | .eco-switch (36×20, --md 44×24) + label text (+ <small> hint); .eco-check--round (24px, + --lg 28px; + --media on photos) for multi-select on phones, lists, photos and avatars. Native inputs (spans with .is-on in aria-hidden mock-ups). Checkbox and radio geometry from Figma «Telegram Design System» (07.10.2026): unchecked = transparent inside + a neutral --eco-border-primary ring (1.5px at 16, 2px at 20; the one allowed control ring), hover = ring in the brand button colour; checked checkbox = square (13% corners) filled with --eco-brand-button + a round-cap tick in --eco-brand-on-button, indeterminate = the same fill + a dash; checked radio = brand ring + brand dot (47% of the size); on a brand-filled surface set --ctl-on: var(--btn-p-fg). One radio and one checkbox style only — never a check-circle radio or a solid disc with a white dot. Switch = brand fill + --eco-text-primary_on-brand thumb.
- .eco-slider (#slider): .eco-slider__head + .eco-slider__control (track, fill, 1–2 range inputs, optional __tip); --steps = step dots. Fill --eco-slider-fill (brand colour, both modes), white thumb, soft shadow only — no ring on track, thumb or bubble.
- .eco-badge: type pill (default) | --badge (6px corners); size --sm 22 | md 24 (default) | --lg 28px; colour --gray (default) | --brand | --success | --warning | --error; --dot. --solid (brand fill: green #00B533 with white text in light, lime with black text in dark) only for “Yangi”.
- .eco-chip (button[aria-pressed], 6px corners), .eco-avatar (--xs 24 | --sm 32 | --36 (design size: Inter 500 12/20, icon 16px) | md 40 default | --lg 48 | --xl 56 | --2xl 64px; .eco-avatar__status)
- Avatars (section “Avatarlar”, #avatars): an avatar always has a coloured background — no gradient (blurred orb) avatars and no grey circle with an icon or initials (art director decision, 04.10.2026). Every person, the current user included (lists, tables, chat, comments, rankings, kanban, groups), uses a 3D avatar (background colour baked into the image, the same in Light and Dark) — <span class="eco-avatar eco-avatar--3d" aria-hidden="true"><img src="https://design.pdp.uz/ds/assets/avatars/avatar-{01…16}.webp" alt="" width="40" height="40" loading="lazy" decoding="async"></span>; image picked by a stable hash of the user id, neighbours differ (images: Figma Community set by Arthur Belfort, CC BY 4.0 — credit kept in /ds/assets/avatars/README.md). Non-person agents — AI-mentor, bots, the system, groups — and the project mark use .eco-avatar--tint: a solid brand-tint circle (--eco-avatar-tint-bg) with a brand-colour Phosphor icon (#i-sparkles for the AI-mentor, #i-bot, #i-users) or the project initials (--eco-avatar-tint-ink). There is no initials fallback for people (--solid, --ink-*, --cat-* removed, 02.10.2026). Colours come from the --eco-avatar-* tokens. No real photos, no ring or border around an avatar, no animation.
- The EcoSystem project mark may also use .eco-avatar--accent (lime circle, green initials) or --inverse (#1F1F1F circle, lime initials).
- .eco-card (--raised, --interactive; .eco-card__title, .eco-card__meta): 24px corners, 24px padding, --eco-bg-secondary, no border (1px transparent keeps the size), no shadow; --raised and --interactive hover add --eco-shadow-lg
- .eco-tabs > .eco-tab[role=tab][aria-selected] (underline; pill — .eco-tabs--pill; --fill = equal widths), .eco-segment > button[aria-pressed] (--fill; --stacked — icon on top), .eco-link
- Dropdown menu and list (section “Menyu va ro‘yxat”, #menus): .eco-dropdown > button[aria-haspopup=menu|listbox][aria-expanded][aria-controls] + .eco-menu[role=menu|listbox][hidden] (--eco-bg-primary_alt + shadow-lg) > .eco-menu__group (.eco-menu__label), .eco-menu__sep, .eco-menu__item[role=menuitem|menuitemradio|menuitemcheckbox|option] (svg 16 or .eco-avatar 36, .eco-menu__body > .eco-menu__title + .eco-menu__desc, .eco-menu__kbd or .eco-menu__end; .eco-menu__check, --dot for one choice; --danger last, in its own group). Rows 36 / 38 / 56px. Arrows, Home/End, typeahead; Esc returns focus to the trigger. Form fields keep a native <select>.
- .eco-table (td.num), .eco-alert (--brand --success --warning --error; svg.eco-alert__icon + .eco-alert__body > __title + __desc, optional .eco-btn--sm.eco-alert__cta), .eco-toast, .eco-tooltip (+ <small>), .eco-progress > span (--v; fill --eco-brand-button, track --eco-bg-secondary, no stroke), .eco-progress-field (__head: __label + optional __info icon, __value with % + __status icon in role="status" — spinner #i-loader, .is-complete #i-circle-check, .is-error #i-circle-x; then .eco-progress or .eco-progress-row; __hint below, error message with role="alert"), .eco-progress-row (.eco-progress + <b>40%</b>), .eco-progress-float (--bottom; label bubble with shadow, no stroke), .eco-skeleton
- .eco-callout (tone: none = neutral grey | --brand | --info | --warning | --error | --success; variants: --compact, dismissible with .eco-callout__close), role="note": span.eco-callout__icon[aria-hidden] > svg (Phosphor fill: notepad-text, sparkles, info, triangle-alert, circle-x, circle-check), then div.eco-callout__content > p.eco-callout__title + div.eco-callout__body + optional div.eco-callout__actions > a.eco-callout__action (or one .eco-btn--sm); optional button.eco-callout__close[aria-label] > svg #i-x. Calm filled surface from semantic tokens only (brand tint follows the brand, info is the status blue --eco-cat-blue), 32px icon tile, title Inter 600 16/24 in --eco-text-primary, body 14/20 at 76% of the text colour; no border, left stripe or shadow, no decorative tones (teal/purple are gone). Old names still work: --note = neutral, --tip = --brand, --important = --info. A status or system response is .eco-alert.
- App components (section “Ilova komponentlari”, #app): tabs (.eco-tabs underline; pill — .eco-tabs--pill or .eco-segment in a grey track, stroke-less: neutral by default — white pill with a soft shadow and a black label, --inverse — black pill with a white label, --brand and --accent — brand pills from the --eco-tab-* tokens; sizes --sm | --md | --lg; the old --button-border | --button-gray | --button-brand names still work), progress bar, field with states and circle (.eco-progress, .eco-progress-field, .eco-progress-circle --xxs | --sm | --md, --p number), table in a card (.eco-table-card with .eco-table and .eco-pagination), pagination (.eco-pagination, --minimal), dialog (.eco-modal in .eco-modal-overlay or <dialog class="eco-modal">; --xs 320 | 480 | --md 640 | --lg 800, <dialog> only --cover | --full; --blur backdrop; cancel --tertiary), empty state (.eco-empty, --md), file upload (.eco-dropzone + .eco-file list), kanban board — moved to the Ilova page as the Nextcloud Deck reskin (/ds/ilova/#kanban: Deck DOM classes .app-deck, .stack, .card, .card-labels .labels li with a --eco-board-* dot, .duedate[data-due-state], .icon-badge; grey stacks, white cards, no outlines; EcoSystem tokens only). Copy their markup from that section.
- Icon markup (Phosphor symbols in an SVG sprite, id "i-<key>", filled twin "i-<key>-fill"): <svg class="eco-icon" aria-hidden="true"><use href="#i-search"/></svg>. On a control whose state changes (aria-pressed, aria-selected, aria-current) put both weights in one svg and let base.css switch them: <svg class="eco-icon" aria-hidden="true"><use href="#i-heart"/><use class="eco-on" href="#i-heart-fill"/></svg>

## Layout
- One primary action per screen: at most one .eco-btn--primary. Next to a coloured button (primary, accent, ink) put only a colourless one: .eco-btn--tertiary (neutral fill, the default) or .eco-btn--outline (no fill, 1px neutral ring; on busy or coloured backgrounds). Never two coloured buttons side by side; .eco-btn--secondary (brand-coloured text) is for a lone secondary action, never next to a primary. Otherwise use a link button.
- Buttons and single-line inputs are pills; multi-line textareas 20px, cards 24px.
- Lime and green are accents. Most of the screen stays white (light mode) or black (dark mode).
- Layer surfaces with --eco-bg-secondary / --eco-bg-tertiary fills, not borders or heavy shadows. No stroke around a filled object (card, control, chip, tab, stage): switches and slider tracks sit on --eco-bg-tertiary (--eco-bg-primary inside a grey card), checkboxes and radios use their thin neutral ring; a selected chip or card is a brand tint without a ring; a selected tab is a solid pill or the 2px underline, without a ring. Keep dividers inside components (key–value rows, table rows, card footers), focus rings and error strokes. Only floating layers (dropdowns, dialogs, toasts) get --eco-shadow-lg or --eco-shadow-xl.

## Screens
- Look for an existing component or pattern first (sections “Majburiy bloklar”, “Sahifa anatomiyasi”, “Ilova komponentlari”). Build a new component only when nothing fits, and start from the closest one.
- One lead metric per screen, next to the one primary action: the lead number is the largest on the screen; other numbers are smaller and neutral.
- Learning data first: progress, grades and deadlines come before technical data (IDs, sync times, system status).
- Every screen that shows data ships three states: loading (.eco-skeleton in the shape of the content; a page or action wait shows .eco-loader, never a border spinner), empty (.eco-empty: icon, title, one action) and error (what happened, plus a retry action).
- Responsive cabinet: sidebar 248px from 1280px, a 72px icon rail with tooltips from 1024px, a drawer with an overlay from 768px, a bottom tab bar (4–5 items, each ≥ 48px) below 768px. Below 768px each table row becomes a card with its main value and status.
- Headings go h1 → h2 → h3 without skipping a level; tabular data is a real <table> with th cells.
- Check every button, badge and tab label in Uzbek, Russian and English: Uzbek is often the longest (Russian ≈ +1%, English ≈ −7% on average), so design for the Uzbek length first, leave ~30% room, and labels never truncate.

## Content and language
- UI copy in Uzbek Latin unless asked for Russian. <html lang="uz">; Russian pages lang="ru".
- Write o‘ and g‘ with U+2018 (‘) and the tutuq belgisi with U+2019 (’): o‘quvchi, g‘olib, ma’lumot, e’tibor. Never ASCII ' or ` there. Quotes: “…”.
- Realistic content: courses (Frontend dasturlash, UI/UX dizayn, Backend · Node.js), names (Dilnoza, Jasur, Madina), prices in so‘m (1 200 000 so‘m), dates DD.MM.YYYY (21.09.2026). No lorem ipsum.
- Tone: short, direct, imperative.

## Accessibility minimums (WCAG 2.2 AA)
- Text ≥ 4.5:1; large text (≥ 24px), icons and focus ring ≥ 3:1. Status never by colour alone.
- Exception: avatar initials keep the designed colours even below 4.5:1 on the tint (user decision 30.09.2026). The avatar is decorative (aria-hidden="true") and the name is always shown next to it as text.
- Focus: :focus-visible — 1.5px ring (--eco-focus-w) drawn with box-shadow: 0 0 0 2px var(--eco-bg-primary), 0 0 0 calc(2px + var(--eco-focus-w)) var(--eco-focus-ring), plus outline: var(--eco-focus-w) solid transparent for forced-colors (Chrome rounds outline widths to whole px). Never 2px. Never remove it. Destructive controls use --eco-focus-ring-error. Fields (input, textarea, select, OTP, input group, search, combobox, date, tag and chat inputs) all share ONE focus state: outline: var(--eco-field-focus-w) solid var(--eco-brand-button); outline-offset: 0 — 1.5px, the brand button colour, following the field radius; --eco-focus-ring-error on a field with an error. Never 2px and never --eco-focus-ring on a field. Inside a brand-filled area set --eco-focus-ring: var(--eco-text-primary_on-brand).
- Touch targets ≥ 40px on mobile: md (40px) buttons by default, lg (44px) or xl (48px) for the main mobile action. xs (32px) and sm (36px) buttons and chips only in dense UI, at least 8px apart.
- Real elements: <button>, <a href>, <input> with a visible <label>. Icon-only buttons get an Uzbek aria-label.
- Keyboard: logical Tab order, Esc closes overlays and returns focus, arrow keys move inside tabs and segments.
- Form errors: text + icon + colour, aria-invalid="true", aria-describedby to the message.
- Images: meaningful Uzbek alt text; decorative images alt="" or aria-hidden="true".
- Honour prefers-reduced-motion: no movement, near-zero durations.

## Never
- No purple, blue or rainbow gradients; no gradient except --eco-gradient (avatars have no gradients).
- No distinction colour (chart series, category tone) as a button, link, focus ring or status; none where a brand or status token exists.
- No seventh chart colour, no re-ordered or re-tuned chart series.
- No emoji as icons and no other icon sets; use Phosphor (Regular, Fill for active states).
- No lime text on white or light backgrounds; no white text on lime; no black text or marks on green.
- No new colours, fonts, radii, shadows or spacing values outside the tokens.
- No sharp-cornered buttons, inputs or cards, no pill-shaped inputs, no more than one primary button per screen.
- No ALL CAPS body text; no text in images.
- Do not stretch, recolour, rotate or restyle the PDP EcoSystem logo; keep 1X clear space (X = mark width / 9).

Before you finish, check your output against this list and name any rule you could not follow.

Qayerga qo‘yish

Vosita	Joy	Izoh
Claude Code	`CLAUDE.md`	Har sessiya boshida o‘qiladi. Mavjud faylga alohida bo‘lim qilib qo‘shing.
Claude (claude.ai)	Project → Instructions	Shu loyihadagi barcha chatlarga ta’sir qiladi.
Cursor	`.cursor/rules/pdp-ui.mdc`	Fayl boshiga `alwaysApply: true` frontmatter qo‘ying.
GitHub Copilot	`.github/copilot-instructions.md`	VS Code’dagi Copilot Chat ham, github.com’dagi Copilot ham o‘qiydi.
Boshqa agentlar	`AGENTS.md`	OpenAI Codex va boshqa ko‘plab agentlar o‘qiydigan umumiy fayl.

Faylni git’ga qo‘shing — butun jamoa bir xil qoidalar bilan ishlaydi. Loyihada boshqa brend prompti bo‘lsa, uni almashtiring: ikki brend qoidasi birga ziddiyat beradi.

Natijani tekshiring

Light

Yangi

Frontend dasturlash

8 oy · 01.10.2026 dan · 1 200 000 so‘m / oy

Dark

Yangi

Frontend dasturlash

8 oy · 01.10.2026 dan · 1 200 000 so‘m / oy

Tokenlar, pill tugma, 24px karta, bitta primary; brend maydonida faqat --eco-text-primary_on-brand rangidagi matn.

Tekshiruv so‘rovi

Natija shubhali bo‘lsa, yordamchiga shu so‘rovni yuboring. Oxirgi so‘z baribir insonda — foydalanish qulayligi ro‘yxati bo‘yicha tekshiring.

Ekranning o‘zini — Boshqaruv bo‘limidagi «Ekran chiqishidan oldin» ro‘yxati bo‘yicha: bitta primary tugma va bitta asosiy metrika, uch holat, to‘rt kenglik, uch til.

Review this UI against the PDP EcoSystem rules (PDP Design System, brand "ecosystem": https://design.pdp.uz/ds/ai/ecosystem.md). List every violation (brand colours, text on brand fills, contrast, logo, radius, spacing, fonts, icons, Uzbek orthography, accessibility; missing loading, empty or error states; more than one primary action or lead metric; tables that do not become cards below 768px), then fix them without adding new colours.

Prompt kutubxonasi

Tayyor promptlar: AI chatdan brendga mos natija

O‘qituvchi va xodimlar uchun: taqdimot, xat, e’lon, sahifa yoki hujjat kerak bo‘lsa — dizayner kutmasdan ChatGPT, Claude yoki Gemini’dan so‘rang. Har prompt AI’ga avval PDP Design System faylini o‘qitadi, PDP ohangida, to‘g‘ri o‘zbek lotin yozuvida yozdiradi va yetishmagan ma’lumotni so‘ratadi. Dasturchilar va AI agentlar uchun qoidalar — AI uchun.

Qanday ishlatiladi

Nusxalang
Vazifangizga mos promptni toping va «Nusxalash» tugmasini bosing.
AI chatga qo‘ying
ChatGPT, Claude yoki Gemini’da yangi suhbat oching va promptni qo‘ying. Havolalarni o‘chirmang — AI qoidalarni shu fayllardan o‘qiydi.
Qavslarni to‘ldiring
[qavs] ichidagi maydonlar o‘rniga o‘z ma’lumotingizni yozing. AI savol bersa — javob bering, natijada sana, ism va raqamlarni tekshiring.

Shakl	`1.5px` halqa (`--eco-focus-w`, box-shadow), `outline-offset: 2px` — tugma, chip, checkbox, havola va kartada bir xil. Halqa element shaklini takrorlaydi: tugmada — pill
Rang	`--eco-focus-ring` — qorong‘i rejimda `#BDFF00`, yorug‘ rejimda `#048307`; sahifa fonida kamida 3 : 1. Xavfli (destructive) tugmada — `--eco-focus-ring-error`
Brend maydonida	Halqa maydondagi matn rangida bo‘ladi — pastdagi `.on-accent` qoidasi
Input	Maydon atrofida 1,5 px tashqi halqa `--eco-brand-button`, oraliqsiz (xato holatida — `--eco-focus-ring-error`)
Olib tashlash	Taqiqlanadi. `outline: none` faqat o‘rniga shunchalik ko‘rinadigan belgi berilganda

`Tab` `Shift+Tab`	Keyingi / oldingi element. Tartib ekrandagi tartib bilan bir xil; `tabindex` faqat 0 yoki −1
`Enter`	Havolani ochadi, tugmani bosadi
`Space`	Tugmani bosadi, checkbox va switch’ni almashtiradi
`Esc`	Modal, menyu, tooltip’ni yopadi; fokus uni ochgan tugmaga qaytadi
`←` `→`	Segment va tablar ichida tanlovni siljitadi. Guruhga `Tab` bilan bir marta kiriladi
`↑` `↓`	Menyu va ro‘yxat ichida qatorlar bo‘ylab (aylanma); harf — shu harfdan boshlangan qatorga
`Home` `End`	Birinchi / oxirgi tab yoki variant
Birinchi `Tab`	“Asosiy qismga o‘tish” havolasi ko‘rinadi va menyuni aylanib o‘tadi

Bitta manba: dasturchi, dizayner va AI-agent uchun

Bitta tizim, oltita brend

Faol brend: PDP EcoSystemPDP AcademyPDP SchoolPDP UniversityPDP OnlinePDP Junior

Ranglar

Shriftlar

Shakl

Kim uchun

Dasturchilar uchun

Dizaynerlar uchun

AI-agentlar uchun

Ichida nima bor

Loyihada qanday qo‘llanadi

Tokenlarni meros oling

Komponentlardan yig‘ing

Foydalanish qulayligini tekshiring

Beshta tamoyil — har brendda bir xil

Aylana va quyoshdan kelib chiqadigan tamoyillar

Belgining tuzilishi — ekranning tuzilishi

Bitta yadro

Ko‘rinadigan ulanish

Qora maydon — sahna

Halol kontrast

Modul ritmi

Ma’lumotli ekranda yana uchta qoida

Ta’lim birinchi

Bitta asosiy raqam

Oson o‘qiladi

Qisqa qoidalar

Rang uch qatlamda: brend, holat va ajratish

Qora maydon, yashil hayot, limon energiya

Faylda uchraydigan qo‘shimcha yashillar

Gradient

Yordamchi rang — Green: Done

Token zanjiri: primitiv → semantik → komponent

Brend slotlari: qorong‘i va yorug‘

Shkalalar

Yashil · Vivid Malachite

Limon · Bitter Lime

Neytral · Black

Xato · Error

Ogohlantirish · Warning

Grafik tokenlari

Ajratish ranglari

Grafik seriyalari

Toifa tuslari

Doska ranglari

Uch qatlam: qaysi rang qayerda ishlaydi

Ajratish rangi qayerda ishlaydi

Kontrast: qaysi juftlik ishlaydi

Global rejim — sayt uchun, dizayn — o‘z rejimida

Uch qoida

Juftlik: Light | Dark

Mahalliy almashtirgich

Qotirilgan sahna

Manbada qanday yoziladi

Ekranni EcoSystem’ga xos qiladigan belgilar

Qora maydon — sahna

Belgi — yadro, nurlar, nuqtalar

Limon — kam va faqat qora matn bilan

Nuqtali to‘r — X modulidan tekstura

Orbitalar — chiziqli element

Halqa, quyosh va doira kesma

Toza sahna, bitta qahramon

Qora maydon, bitta dalil, yashil CTA

To‘q ko‘k maydon, pill va katta Onest

Foto, halqali belgi va sariq aksent

Shrift rollari: sarlavha, matn va kod

Space Grotesk chaqiradi, Inter tushuntiradi

Space Grotesk

Inter

IBM Plex Mono

Space Grotesk vaznlari

Matn shkalasi

Yangi alifbo uchun tayyor

Oraliq asosan 4 px qadam bilan o‘sadi

Oraliq shkalasi

Frontend dasturlash

X moduli bilan aloqa — ritm, qiymat emas

Burchaklar: Untitled UI shkalasi

Soya va qatlamlar