# PDP Design System — Core kit (Yadro), v0.7

> Always read first: foundations shared by every kit — principles, colour, brand elements, typography, spacing and shape, icons, motion and motion patterns (M3 transitions mapped to --eco-ease-*/--eco-duration-*), motiolanguage library (EcoSystem: ten brand anitext formations — logo bloom, loa(der, success check, subtle error shake, progress, page transition with View Transitions API, toast in/out, confetti-free certificates celeb06.10.2026, 24-houra tionme, number count-up, skeleton — each with tnon-breakeing spaces, money «1 200 000 so‘m / сум / soum», phone +998 78 000 00 00, ICU plurals, a pdpFormat helper because Intl «uz» output differs) and CSS;Uzbek Lottie JSON and dotLottie exporthography (o‘ g‘ = U+2018, tutuq belgisi = U+2019, ASCII apostrophe only in SMS, quotes at« /», ds/ashese, capitalis/moation in UZ/RU/EN, ga liven text checkerated from the logo geometry), sound (EcoSystem: sonic logo that followuses the builoomd rhythm, elight UI earcons from one A-major pentatonic scale, opt-in rules, the 2026 aloudness levels, phapbetics mapping reform iOS/Android/web, file-free Web Astatudio engine /ds/assets/sound/pdp-sound.js and WAVa dpreview cownloadsverter), accessibility, governance, component status table (Ready / Beta / Deprecated / Planned per section, with the last change) and per-component changelog, design tokens and the brand AI files.

Page: https://design.pdp.uz/ds/yadro/ (all six brands; ?brand=<id>, ?theme=light|dark, ?lang=uz|ru|en).
This is the Core kit: the foundations every other kit builds on. Read it first, then the kit for your task (list below) and the brand file of the product you build. The full shared rule set (theme, colour roles, semantic tokens, components, layout, content, accessibility, "never" list) is https://design.pdp.uz/ds/ai/core.md.
Set data-brand="<id>" and data-theme="light" (product default) or "dark" on <html>; load one token file and the fonts (https://design.pdp.uz/ds/fonts/fonts.css). Use tokens, never raw hex.
Component CSS: do not re-implement the PDP classes (.eco-*) — link the published package https://design.pdp.uz/ds/css/v0.7.1/pdp-components.css (@pdp/design-system@0.7.1, immutable; latest: https://design.pdp.uz/ds/css/; manifest: https://design.pdp.uz/ds/css/v0.7.1/manifest.json). Order: fonts → tokens/<brand>.css → pdp-base.css (optional reset) → pdp-components.css → product layer (products/lms.css, products/nextcloud-*.css) → your own CSS. Never copy the package CSS into a project. Guide: https://design.pdp.uz/ds/yadro/#dev-install.

## Kits

- [Brandbook (Brendbuk)](https://design.pdp.uz/ds/brend/ai.md): Read when the task needs the brand itself, not a component: who the brand is, mission, tagline, vision, values, audience and character (tone of voice traits), presented as calm documentation sections (title, short lead, rule blocks with diagrams) from the official brand book content (brand-sources/<brand>/content/brandbook.<lang>.json). Never invent or rephrase mission, tagline, vision or values — quote them. 16 chapters in four groups — Foundation (brand platform, architecture, tone of voice), Elements (logo, colour, typography, graphics and icons, photo and illustration), Expression (style idea, layout, motion, video), Application (co-branding, partner communication, applications, files). Chapter by chapter: brand platform, architecture, logo, co-branding (lockups with PDP projects and external partners: spacing in X, 1 px divider, monochrome parent mark), colour, typography (incl. quotes, dashes, number, date and phone formats), style idea (mark, orbit, coil, circles), photo and illustration, graphics and icons, layout, motion, video and logo shots (bloom/outro, safe zones, captions), tone of voice (traits, name spelling, writing rules, words to avoid, sample copy), applications, partner communication (endorsement line «PDP EcoSystem loyihasi» — where it is mandatory, size and colour) and files. Slides marked «EcoSystem rule — inherited» quote the parent brand book because the project brand book has no own rule — do not invent project-specific rules there. Visual chapters show the real logo files, token colours and renders and link to the Core, Website, Print, Slides and SMM kits instead of repeating their rules. All six brands have all chapters. The old standalone brand book pages (/ecosystem/, /academy/, /school/brand/, /university/, /online/, /junior/) now redirect here. Since r62 every chapter also has: a «How to read» legend (platform), «The brand in 60 seconds» summary, brand model and «What we are / aren’t» slides; slide codes like «03.04» with copy-link buttons (?brand=<id>#bk-<chapter>-<n> works without the brand suffix), «In this chapter» chips and a chapter recap; callouts (important, tip, reference, exception, why) quoted from the brand book; download chips next to slide titles (real repo files only); decision trees («Which logo when», «Which file do I take»), element × brand and usage matrices, background × version and contrast matrices, production colour cards (HEX, RGB, CMYK, Pantone, token), a font tester, motion token curves, layout build sequences and zone diagrams, interactive writing and pre-publication checklists, a glossary (UZ/RU/EN), a changelog and colophon, exports (.ase swatches, Figma variables JSON, draw.io logo library, partner ZIP) and per-chapter «For AI» prompts. Numbers and brand claims on these slides are quoted from brand-sources/<brand>/content/brandbook.<lang>.json (the build rejects a number not found in the cited text); where a brand book has no data the slide is absent for that brand. A print stylesheet makes «Save as PDF» produce one A4 landscape page per slide in Light. Page: https://design.pdp.uz/ds/brend/
- [Core (Yadro)](https://design.pdp.uz/ds/yadro/ai.md): Always read first: foundations shared by every kit — principles, colour, brand elements, typography, spacing and shape, icons, motion and motion patterns (M3 transitions mapped to --eco-ease-*/--eco-duration-*), motiolanguage library (EcoSystem: ten brand anitext formations — logo bloom, loa(der, success check, subtle error shake, progress, page transition with View Transitions API, toast in/out, confetti-free certificates celeb06.10.2026, 24-houra tionme, number count-up, skeleton — each with tnon-breakeing spaces, money «1 200 000 so‘m / сум / soum», phone +998 78 000 00 00, ICU plurals, a pdpFormat helper because Intl «uz» output differs) and CSS;Uzbek Lottie JSON and dotLottie exporthography (o‘ g‘ = U+2018, tutuq belgisi = U+2019, ASCII apostrophe only in SMS, quotes at« /», ds/ashese, capitalis/moation in UZ/RU/EN, ga liven text checkerated from the logo geometry), sound (EcoSystem: sonic logo that followuses the builoomd rhythm, elight UI earcons from one A-major pentatonic scale, opt-in rules, the 2026 aloudness levels, phapbetics mapping reform iOS/Android/web, file-free Web Astatudio engine /ds/assets/sound/pdp-sound.js and WAVa dpreview cownloadsverter), accessibility, governance, component status table (Ready / Beta / Deprecated / Planned per section, with the last change) and per-component changelog, design tokens and the brand AI files. Page: https://design.pdp.uz/ds/yadro/
- [Website (Sayt)](https://design.pdp.uz/ds/sayt/ai.md): Use when building a website, landing page or web interface: buttons, forms, slider, menus, badges, avatars (3D), cards, callouts, app components (tabs, progress, table, pagination, modal, empty state, upload), charts, chip types, rich tooltip and submenu; extra components — command palette, date picker, overlays (sheet, hover card, context menu, toast stack), data table (toolbar, bulk actions), structure (accordion, tree, stepper, carousel, resizable), field patterns (input group, error summary, validation timing), toolbar (toggle group, split button, menubar), inline edit and contextual save bar, status indicators (icon, shape, KPI delta), saved views with filter pills; EcoSystem-only (r92): number input (−/+ stepper, spinbutton), rating and feedback (star input and display, rating summary, NPS 0–10 scale, «Was this helpful?»), countdown and deadline chips, table settings (density 40/52/64, expandable rows, pinned first column), tag / multi-select field (chips inside the field, typeahead listbox, create new, limit), video lesson player (chapters on the timeline, speed, captions, transcript, next-lesson end card), gallery and lightbox viewer (dialog, prev/next, zoom, swipe); page templates — sign-in, sign-up and password reset, multi-step application (question pages, check answers, confirmation), error pages (404, 500, 503 maintenance, 403 — EcoSystem only); email (EcoSystem only, r94): base layout (600 px table layout, tokens compiled to inline hex, dark mode via prefers-color-scheme and [data-ogsc], locked logo header, bulletproof pill button, preheader), 8 ready templates in Uzbek, Russian and English with plain-text parts (email verification, password reset, application received, payment receipt, lesson reminder, certificate ready, event invitation with add-to-calendar and .ics, weekly digest with one-click unsubscribe) at https://design.pdp.uz/ds/email/, staff email signature generator (HTML + plain text) and a pre-send checklist (Gmail clipping < 100 KB, client matrix); backgrounds, live backgrounds, text motion and effects; brand card kinds and signatures; states, required blocks (header, footer, hero, CTA), page anatomy; patterns and guides — interaction states, adaptive layout, writing, microcopy library (310+ ready UI strings in Uzbek, Russian and English with context, max length, tone and an avoid variant; 14 categories incl. validation, destructive confirmations, push/SMS, payments and classes/attendance/certificates; ICU plurals; download https://design.pdp.uz/ds/sayt/microcopy.json and microcopy.csv — reuse these strings by id instead of writing new ones), onboarding and permissions, search, data entry, modality, settings, data visualisation, inclusive language, task list, step-by-step navigation, cookie consent. Every section works in all six brands (tokens, logo slot and fonts follow the active brand). Page: https://design.pdp.uz/ds/sayt/
- [Dashboard (Dashboard)](https://design.pdp.uz/ds/dashboard/ai.md): Use when building a CRM (Nextcloud), dashboard or desktop app screen: Dashboard, Files, Photos, Activity, Talk (incl. call view), Mail, Deck, Tasks, Gantt (Deck timeline), Calendar (incl. appointments), Tables, Forms, Polls, Contacts, Notes, Collectives (wiki), Announcements, Bookmarks, learning blocks (course path, schedule, assignment, grade book, attendance, rating) and app shell (bottom bar, navigation rail, top app bar, FAB; sidebar variants and dashboard layout; notification centre and message-type rules; feature tour — spotlight with blanket, 3–4 steps, EcoSystem only). All 18 Nextcloud apps are EcoSystem-only reskins with real Nextcloud DOM classes. Phone apps (native iOS/Android student app) and Telegram Mini App / bot are in the App kit; shared web components (buttons, forms, tabs, table, modal) are in the Website kit. Page: https://design.pdp.uz/ds/dashboard/
- [Mobile app (Ilova)](https://design.pdp.uz/ds/ilova/ai.md): Use when building for the phone: a Telegram Mini App or bot (Mini App shell with Telegram header, MainButton/SecondaryButton, BackButton, safe areas and 10 screens — catalogue, course, 3-step apply, payment, schedule, profile and certificate, notifications; 7 bot message templates with formatting, emoji and inline-keyboard rules; themeParams → --eco-* bridge downloadable as /ds/telegram/pdp-telegram.css and .js; when to use bot vs Mini App vs website) or the native iOS and Android student app (mobile tokens in pt/sp with Swift, Compose and Android XML files, background ladder instead of shadows, safe areas, 44 pt / 48 dp tap targets, Dynamic Type, haptics; mobile components for iOS 26–27 and Material 3 Expressive; 12 core screens; app icon layers and splash; push, Live Activity and widgets; iOS vs Android differences). EcoSystem only. Desktop CRM, dashboard and Nextcloud screens are in the Dashboard kit; shared web components are in the Website kit. Page: https://design.pdp.uz/ds/ilova/
- [School LMS (LMS)](https://design.pdp.uz/ds/lms/ai.md): Use when building a screen of the PDP School learning management system (LMS): app shell with per-role sidebar (admin, teacher, student, parent), role dashboards, grade journal (attendance + 0–100 grade cell, 5-point mapping ≥90/70/55), attendance roll-call and student calendar, timetable (week, day, admin busy/free matrix), curriculum, lesson player and quiz runner, homework with AI check and teacher review. School brand only (eco-lock-school); component CSS lives in tools/ecosystem-ds/ds/lms/*.css and uses --eco-* tokens only. Page: https://design.pdp.uz/ds/lms/
- [Slides (Taqdimot)](https://design.pdp.uz/ds/taqdimot/ai.md): Use when making a presentation: 60 kinds of 16:9 slides in Dark and Light, deck outlines and presentation rules in the active brand (PowerPoint templates: coming soon). Page: https://design.pdp.uz/ds/taqdimot/
- [Print (Bosma)](https://design.pdp.uz/ds/bosma/ai.md): Use when making a printed A4 document: SOP, job card, form, log book, agreement; margins, running header and footer, pt type scale and the --eco-print-* tokens. Also the A4 templates (office and offset letterhead, SOP with document code and change log, bilingual UZ/RU forms with 0.4 pt writing lines, contract with initials per page), A3 poster with a viewing-distance type scale, 600×1600 mm X-banner, DL and C4 envelopes, A4 presentation folder (front and inside with pocket), DL leaflet cover, A5 notebook cover, A5 door sign and a die-cut sticker sheet, (corner holes, empty bottom 100 mm, small text on a black band in the green version), A6 event badge, CR80 ID card, landscape timetable, A4 landscape attendance register (blank and filled; K5 tile cells, letter marks, totals, signature row), A5 saddle-stitched admission brochure (8 pages: cover, programmes, why PDP, admission steps, prices, FAQ, contacts with QR; 3 mm bleed, 5 mm safe area from trim and fold), the six certificate variants (print: A standard, F official; digital: C standard, E honours, D/B extra), the print colour table (screen HEX/RGB vs CMYK FOGRA39/29) and file naming, document codes and the preflight checklist. Also environmental design: building grilles (University, School), window film (EcoSystem, University, School), A4 wayfinding signs and wall posters (University). Page: https://design.pdp.uz/ds/bosma/
- [SMM (SMM)](https://design.pdp.uz/ds/smm/ai.md): Use when making an Instagram post, carousel or story for EcoSystem: (r94) also YouTube and video — section «Video va YouTube» (#video): four thumbnail families (big word, face + question, tech, series) in Light/Dark with safe-area overlay, phone-size check and A/B test rules, channel banner 2560×1440 with device crops (safe 1546×423), profile picture and watermark, end screen (615×345 video slot, 294 px subscribe circle, last 20 s) and chapter card, lower thirds / lesson title / subtitles / screen-recording keys on 1920×1080 with EBU R95 safe areas, podcast series and episode covers 3000×3000 plus a 16:9 video-podcast thumbnail, Zoom/Teams backgrounds and stage screens (countdown, speaker, break, Q&A, LED 3840×1080), AI background prompts (PDP-VIDEO-v1) and layered SVG construction guides (smm/video/*.svg); fourteen template families — six core (announcement, admission countdown with a Reels cover, event incl. 1:1 for Telegram, 5-slide educational carousel, student testimonial, stat), five additional (story series: Q&A, poll, quiz and answer; Reels cover, intro hook, lower-third, subtitles and outro with the 672 px bottom and 144 px right safe areas; mentor introduction; weekly plan; highlight covers) and three free (holiday greetings, engagement free-zone posts, LinkedIn 1200×627) — with AI background prompt cards (style key PDP-SMM-v1), the profile grid rhythm, 4:5 post templates (button stack, big headline, question card, big number), 1:1 grid posts, the 9:16 story with 270 / 384 px safe zones, and the SMM rules (filled pills, one accent per post, two type sizes plus a mono label). Page: https://design.pdp.uz/ds/smm/

## Brands

- [PDP EcoSystem](https://design.pdp.uz/ds/ai/ecosystem.md): data-brand="ecosystem" — brand colours, text on brand fills, fonts, logo; tokens https://design.pdp.uz/ds/tokens/ecosystem.css
- [PDP Academy](https://design.pdp.uz/ds/ai/academy.md): data-brand="academy" — brand colours, text on brand fills, fonts, logo; tokens https://design.pdp.uz/ds/tokens/academy.css
- [PDP School](https://design.pdp.uz/ds/ai/school.md): data-brand="school" — brand colours, text on brand fills, fonts, logo; tokens https://design.pdp.uz/ds/tokens/school.css
- [PDP University](https://design.pdp.uz/ds/ai/university.md): data-brand="university" — brand colours, text on brand fills, fonts, logo; tokens https://design.pdp.uz/ds/tokens/university.css
- [PDP Online](https://design.pdp.uz/ds/ai/online.md): data-brand="online" — brand colours, text on brand fills, fonts, logo; tokens https://design.pdp.uz/ds/tokens/online.css
- [PDP Junior](https://design.pdp.uz/ds/ai/junior.md): data-brand="junior" — brand colours, text on brand fills, fonts, logo; tokens https://design.pdp.uz/ds/tokens/junior.css

## Sections

### Overview — https://design.pdp.uz/ds/yadro/#intro

**One source for developers, designers and AI agents.** PDP Design System is one set of interface rules for every digital product in the PDP ecosystem: color, type, components, screen patterns and accessibility. Components, token names and rules are the same in every project, while each brand has its own colors, typeface and logo. The brand guidelines draw the mark; this page builds screens from it.

- Blocks: [One system, six brands](https://design.pdp.uz/ds/yadro/#intro-bitta-tizim-oltita); [Faol brend: PDP EcoSystem](https://design.pdp.uz/ds/yadro/#intro-faol-brend-pdp); [Who it’s for](https://design.pdp.uz/ds/yadro/#intro-kim-uchun); [What’s inside](https://design.pdp.uz/ds/yadro/#intro-ichida-nima-bor); [How to use it in a project](https://design.pdp.uz/ds/yadro/#intro-loyihada-qanday)
- PDP classes: .eco-badge (--dot, --success), .eco-btn (--primary, --sm), .eco-card (__meta, __title), .eco-link

### Principles — https://design.pdp.uz/ds/yadro/#principles

**The structure of the mark is the structure of the screen.** The five principles come from the mark’s concept and the Figma brand board: the core, connection, the black field, honest contrast and the X module. Every screen and component is checked against these five, and the following sections cover them in detail.

- Blocks: [One core](https://design.pdp.uz/ds/yadro/#principles-bitta-yadro); [Visible connection](https://design.pdp.uz/ds/yadro/#principles-korinadigan-ulanish); [The black field is the stage](https://design.pdp.uz/ds/yadro/#principles-qora-maydon-sahna); [Honest contrast](https://design.pdp.uz/ds/yadro/#principles-halol-kontrast-3); [Modular rhythm](https://design.pdp.uz/ds/yadro/#principles-modul-ritmi-3); [Three more rules for data screens](https://design.pdp.uz/ds/yadro/#principles-malumotli-ekranda-yana-3); [Rules in brief](https://design.pdp.uz/ds/yadro/#principles-qisqa-qoidalar-3)
- PDP classes: .eco-avatar (--3d, --sm), .eco-badge (--dot, --success, --warning), .eco-btn (--primary, --sm, --tertiary), .eco-card (__meta), .eco-icon (--sm), .eco-link, .eco-segment

### Color (Foundations) — https://design.pdp.uz/ds/yadro/#color

**Color in three layers: brand, status and distinction.** The color system is built the same way in every PDP brand. A brand supplies only its own layer — primitives, the scale calculated from them and 27 brand slots; neutral, status (error, warning, success) and distinction colors are shared. Below are the active brand’s colors. Click a color to copy its HEX.

- Blocks: [Black field, green life, lime energy](https://design.pdp.uz/ds/yadro/#color-qora-maydon-yashil); [Additional greens found in the file](https://design.pdp.uz/ds/yadro/#color-faylda-uchraydigan); [Gradient](https://design.pdp.uz/ds/yadro/#color-gradient); [Helper colour — Green: Done](https://design.pdp.uz/ds/yadro/#color-yordamchi-rang-green); [Token chain: primitive → semantic → component](https://design.pdp.uz/ds/yadro/#color-token-zanjiri-primitiv); [Brand slots: dark and light](https://design.pdp.uz/ds/yadro/#color-brend-slotlari-qorongi); [Scales](https://design.pdp.uz/ds/yadro/#color-shkalalar); [Chart tokens](https://design.pdp.uz/ds/yadro/#color-grafik-tokenlari); [Distinction colors](https://design.pdp.uz/ds/yadro/#color-ajratish-ranglari); [Three layers: which color works where](https://design.pdp.uz/ds/yadro/#color-uch-qatlam-qaysi); [Contrast: which pairs work](https://design.pdp.uz/ds/yadro/#color-kontrast-qaysi-juftlik)
- PDP classes: .eco-badge (--dot, --error, --success, --warning), .eco-btn (--primary, --sm)

### Light and Dark stages (Foundations) — https://design.pdp.uz/ds/yadro/#stages

**The global mode is for the site; a design keeps its own.** The Light/Dark button at the top is for the reader’s comfort: it switches only the DS site — background, side panel, header, text, doc cards, tables and code. The design on show keeps its own mode. When both looks matter, they are shown on separate, fixed stages.

- Blocks: [Uch qoida](https://design.pdp.uz/ds/yadro/#stages-uch-qoida); [Juftlik: Light | Dark](https://design.pdp.uz/ds/yadro/#stages-juftlik-light-dark); [Local switch](https://design.pdp.uz/ds/yadro/#stages-mahalliy-almashtirgich); [Fixed stage](https://design.pdp.uz/ds/yadro/#stages-qotirilgan-sahna); [How to write it in the source](https://design.pdp.uz/ds/yadro/#stages-manbada-qanday-yoziladi)
- PDP classes: .eco-badge (--dot, --success), .eco-btn (--primary, --tertiary)

### Brand elements (Foundations) — https://design.pdp.uz/ds/yadro/#brand

**What makes a screen EcoSystem.** Five elements make a screen EcoSystem at first glance: the black field, the mark, a sparing lime accent, the dot grid on the X module and the line orbits. Colors, mark and X module come from the Figma brand guidelines; how to use them in the interface is a proposal. Figma

- Blocks: [The black field is the stage](https://design.pdp.uz/ds/yadro/#brand-qora-maydon-sahna); [Mark — core, rays, dots](https://design.pdp.uz/ds/yadro/#brand-belgi-yadro-nurlar); [Lime — sparingly, and only with black text](https://design.pdp.uz/ds/yadro/#brand-limon-kam-va); [Dot grid — a texture from the X module](https://design.pdp.uz/ds/yadro/#brand-nuqtali-tor-x); [Orbits — a line element](https://design.pdp.uz/ds/yadro/#brand-orbitalar-chiziqli)
- PDP classes: .eco-btn (--lg, --primary, --tertiary), .eco-choice, .eco-icon, .eco-link, .eco-progress, .eco-switch

### Typography (Foundations) — https://design.pdp.uz/ds/yadro/#type

**Type roles: heading, text and code.** Every brand has three roles: the heading typeface (--eco-font-display), the text typeface (--eco-font-body) and the code font (--eco-font-mono). The scale, line heights and weights are the same in every brand; the brand supplies the type families and the display tracking.

- Blocks: [Space Grotesk calls out, Inter explains](https://design.pdp.uz/ds/yadro/#type-space-grotesk-chaqiradi); [Space Grotesk](https://design.pdp.uz/ds/yadro/#type-space-grotesk); [Inter](https://design.pdp.uz/ds/yadro/#type-inter); [IBM Plex Mono](https://design.pdp.uz/ds/yadro/#type-ibm-plex-mono); [Space Grotesk weights](https://design.pdp.uz/ds/yadro/#type-space-grotesk-vaznlari); [Type scale](https://design.pdp.uz/ds/yadro/#type-matn-shkalasi); [Ready for the new alphabet](https://design.pdp.uz/ds/yadro/#type-yangi-alifbo-uchun)
- PDP classes: .eco-btn (--secondary, --sm, --tertiary)

### Spacing and shape (Foundations) — https://design.pdp.uz/ds/yadro/#foundations

**Spacing grows mostly in 4 px steps.** Spacing, radius, shadow and grid come from tokens. Don’t invent values in a layout — use the token: when the rhythm is shared, the course page, the personal account and the catalog card all look like one family.

- Blocks: [Spacing scale](https://design.pdp.uz/ds/yadro/#foundations-oraliq-shkalasi); [Link to the X module — rhythm, not value](https://design.pdp.uz/ds/yadro/#foundations-x-moduli-bilan); [Radius: the Untitled UI scale](https://design.pdp.uz/ds/yadro/#foundations-burchaklar-untitled-ui); [Shadows and layers](https://design.pdp.uz/ds/yadro/#foundations-soya-va-qatlamlar); [Grid and breakpoints](https://design.pdp.uz/ds/yadro/#foundations-grid-va-breakpointlar)
- PDP classes: .eco-badge (--dot, --success), .eco-btn (--lg, --primary), .eco-card (__meta, __title), .eco-choice, .eco-field, .eco-icon (--lg), .eco-input, .eco-label, .eco-switch

### Icons (Foundations) — https://design.pdp.uz/ds/yadro/#icons

**One set, two states.** All PDP products use Phosphor icons — one set in every brand. Regular (outline) by default, Fill (solid) for active, selected or on states. Color comes from the text.

- Blocks: [Library: Phosphor, Regular and Fill](https://design.pdp.uz/ds/yadro/#icons-kutubxona-phosphor); [Sizes: 16, 20, 24](https://design.pdp.uz/ds/yadro/#icons-olchamlar-16-20); [In a tile and next to text](https://design.pdp.uz/ds/yadro/#icons-plitkada-va-matn); [All icons in the sprite](https://design.pdp.uz/ds/yadro/#icons-spritedagi-barcha); [Project icons](https://design.pdp.uz/ds/yadro/#icons-loyiha-ikonkalari); [Track icons](https://design.pdp.uz/ds/yadro/#icons-yonalish-ikonkalari); [Usage](https://design.pdp.uz/ds/yadro/#icons-qollanish)
- PDP classes: .eco-alert (--success), .eco-btn (--secondary, --xs), .eco-chip, .eco-field, .eco-icon (--lg, --sm), .eco-input, .eco-input-wrap, .eco-on

### Dates, numbers and money (Language and text) — https://design.pdp.uz/ds/yadro/#formats

**Dates, times, numbers, money and phone numbers — the same in three languages.** Interface, print, slides and social — one format everywhere: 06.10.2026, 19:00, 1 200 000 soum, +998 78 000 00 00. In Russian and English only words and separators change. The browser’s Intl Uzbek format cannot be trusted — use the formatter below. Sources: Unicode CLDR, GOV.UK, the Microsoft Style Guide and the brand book’s “Tone of voice” chapter.

- Status: Beta (since 06.10.2026) — new, under art-director review; class names may still change.
- Blocks: [At a glance](https://design.pdp.uz/ds/yadro/#formats-bir-qarashda); [Formatter: type once, get all three languages](https://design.pdp.uz/ds/yadro/#formats-formatlagich-kiriting); [Counts and plurals](https://design.pdp.uz/ds/yadro/#formats-sanoq-va-koplik); [Intl’s Uzbek format — check it](https://design.pdp.uz/ds/yadro/#formats-intl-ozbekcha-formati); [Rules](https://design.pdp.uz/ds/yadro/#formats-qoidalar)
- PDP classes: .eco-btn (--secondary, --sm), .eco-field, .eco-hint, .eco-input, .eco-input-group (__addon, __input), .eco-label

### Spelling and punctuation (Language and text) — https://design.pdp.uz/ds/yadro/#orthography

**Spelling: o‘ and g‘, the tutuq belgisi, quotes, dashes and capitals.** Uzbek text is Latin only, with one apostrophe system: o‘ and g‘ use ‘, the tutuq belgisi uses ’. Mixed apostrophes break search, confuse screen readers and look sloppy. Here: the characters, a checker, capitalisation and punctuation in three languages, and the 2026 alphabet reform. Sources: the 1995 “Main spelling rules of the Uzbek language” and the brand book’s “Tone of voice” chapter.

- Status: Beta (since 06.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Uzbek Latin characters](https://design.pdp.uz/ds/yadro/#orthography-ozbek-lotin-belgilari); [Checker](https://design.pdp.uz/ds/yadro/#orthography-tekshiruvchi); [Capitalisation](https://design.pdp.uz/ds/yadro/#orthography-bosh-harf); [Punctuation](https://design.pdp.uz/ds/yadro/#orthography-tinish-belgilari); [The 2026 alphabet reform](https://design.pdp.uz/ds/yadro/#orthography-alifbo-islohoti-2026); [Russian and English copy](https://design.pdp.uz/ds/yadro/#orthography-ruscha-va-inglizcha)
- PDP classes: .eco-btn (--primary, --secondary, --sm, --tertiary), .eco-callout (--info, __body, __content, __icon, __title), .eco-field, .eco-hint, .eco-input, .eco-label

### Motion (System) — https://design.pdp.uz/ds/yadro/#motion

**Motion shows what changed — nothing else.** Three durations and three easing curves cover every PDP product and work the same in every brand — a brand changes color, not motion. In an interface, people read motion longer than 400 ms as lag, so the slowest token is 360 ms.

- Blocks: [Duration and easing](https://design.pdp.uz/ds/yadro/#motion-davomiylik-va-egri); [Where things move and where they don’t](https://design.pdp.uz/ds/yadro/#motion-qayerda-harakat-bor); [Microinteractions](https://design.pdp.uz/ds/yadro/#motion-mikrointeraksiyalar); [Reduce motion](https://design.pdp.uz/ds/yadro/#motion-harakatni-kamaytirish)
- PDP classes: .eco-badge (--dot, --success), .eco-btn (--primary, --secondary, --sm, --tertiary), .eco-card (--interactive, __meta, __title), .eco-chip, .eco-choice, .eco-icon, .eco-skeleton, .eco-switch

### Motion patterns (System) — https://design.pdp.uz/ds/yadro/#motion-patterns

**The Material 3 motion system — in our tokens.** Motion explains how the screen changed: where something came from, where it went, what turned into what. We have three durations and three curves (Motion) — here the Material Design 3 tokens and four transition patterns are mapped to them. No new tokens are added: instead of M3’s 16 durations and 10 curves — our 3 + 3.

- Blocks: [M3 token → PDP token](https://design.pdp.uz/ds/yadro/#motion-patterns-m3-tokeni-pdp); [Four transition patterns](https://design.pdp.uz/ds/yadro/#motion-patterns-tort-otish-naqshi); [Rules](https://design.pdp.uz/ds/yadro/#motion-patterns-qoidalar)
- PDP classes: .eco-btn (--ghost, --icon, --outline, --primary, --sm), .eco-segment (--sm)

### Motion library (System) — https://design.pdp.uz/ds/yadro/#motion-library

**Motion library: ten ready-made brand animations.** Mark reveal, loading, success, error, progress, page transition, toast, certificate celebration, count-up and skeleton — each with a live example, a timeline and ready-to-use CSS. Everything is built from three durations and three curves (Motion) — no new tokens. The key ones also ship as Lottie files: for the mobile app, Telegram mini app and video. Inspired by IBM Carbon (productive and expressive motion), Material 3 and LottieFiles guidelines.

- EcoSystem only: shown only in the EcoSystem brand (other brands show a note); internal projects do not build CRM/ERP screens.
- Status: Beta (since 06.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Catalog](https://design.pdp.uz/ds/yadro/#motion-library-katalog); [Specification](https://design.pdp.uz/ds/yadro/#motion-library-spetsifikatsiya); [Lottie files: Light and Dark](https://design.pdp.uz/ds/yadro/#motion-library-lottie-fayllar-light); [Productive and expressive motion](https://design.pdp.uz/ds/yadro/#motion-library-samarali-va-ifodali)
- PDP classes: .eco-btn (--primary, --secondary, --sm, --tertiary), .eco-choice, .eco-field, .eco-hint, .eco-input, .eco-input-wrap, .eco-label, .eco-loader (--lg, --md, --sm, __core, __o, __ray, __spin), .eco-only, .eco-progress, .eco-skeleton, .eco-switch, .eco-toast

### Sound (System) — https://design.pdp.uz/ds/yadro/#sound

**Sound: a sonic logo and eight UI sounds.** Sound is an optional layer of the brand: bright, calm and short. The sonic logo echoes the bloom rhythm — core, rays, dots; the UI sounds come from the same scale, so they all sound like one family. Off by default, plays only when the user clicks and is never the only signal. Inspired by Mastercard (one melody — a whole sound system), Netflix and Intel (2–5 notes), Material Design (earcons and hero sounds), Apple HIG (haptics).

- EcoSystem only: shown only in the EcoSystem brand (other brands show a note); internal projects do not build CRM/ERP screens.
- Status: Beta (since 06.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Sonic logo — hear the bloom](https://design.pdp.uz/ds/yadro/#sound-ovozli-belgi-bloom); [UI sounds](https://design.pdp.uz/ds/yadro/#sound-interfeys-tovushlari); [Settings: Light and Dark](https://design.pdp.uz/ds/yadro/#sound-sozlamalar-light-va); [Volume, frequency and channels](https://design.pdp.uz/ds/yadro/#sound-balandlik-chastota-va); [Vibration (haptics)](https://design.pdp.uz/ds/yadro/#sound-tebranish-haptics); [File-free approach: pdp-sound.js](https://design.pdp.uz/ds/yadro/#sound-faylsiz-yondashuv-pdp)
- PDP classes: .eco-btn (--primary, --secondary, --sm, --tertiary), .eco-only, .eco-range (--thin), .eco-switch

### Accessibility (System) — https://design.pdp.uz/ds/yadro/#a11y

**Everyone can read it, everyone can use it.** All PDP products meet at least WCAG 2.2 AA. The rules are the same in every brand: how focus looks, what the keyboard does, what to check before a release. Only the color pairs depend on the brand — they’re computed from the active brand’s tokens.

- Blocks: [Who uses it and where — PDP EcoSystem](https://design.pdp.uz/ds/yadro/#a11y-kim-va-qayerda); [Color pairs — PDP EcoSystem](https://design.pdp.uz/ds/yadro/#a11y-rang-juftliklari-pdp); [Focus and keyboard](https://design.pdp.uz/ds/yadro/#a11y-fokus-va-klaviatura); [Tap targets and text size](https://design.pdp.uz/ds/yadro/#a11y-bosish-maydoni-va); [Forms: the label is visible, the error is announced](https://design.pdp.uz/ds/yadro/#a11y-formalar-label-korinadi); [Motion, language, structure and images](https://design.pdp.uz/ds/yadro/#a11y-harakat-til-tuzilma); [Pre-release check](https://design.pdp.uz/ds/yadro/#a11y-relizdan-oldingi)
- PDP classes: .eco-badge (--dot, --warning), .eco-btn (--block, --icon, --primary, --secondary, --sm, --tertiary, --xl), .eco-check, .eco-chip, .eco-choice, .eco-field, .eco-hint, .eco-icon (--sm), .eco-input, .eco-input-wrap, .eco-label

### Governance (System) — https://design.pdp.uz/ds/yadro/#governance

**One system, six brands — one path.** PDP Design System is one system for every PDP project: components, semantic tokens and rules are shared, and each brand supplies its own layer — colors, typeface and logo. This section shows who decides, when the version goes up, what a brand can change, how a new component and a new screen are checked and how a change reaches design.pdp.uz.

- Blocks: [Two statuses: Figma-labeled and unlabeled](https://design.pdp.uz/ds/yadro/#governance-ikki-holat-figma); [Brands and their owners](https://design.pdp.uz/ds/yadro/#governance-brendlar-va-ularning); [Who is responsible for what](https://design.pdp.uz/ds/yadro/#governance-kim-nimaga-javob); [What a brand can change](https://design.pdp.uz/ds/yadro/#governance-brend-nimani-ozgartira); [Version number: MAJOR.MINOR.PATCH](https://design.pdp.uz/ds/yadro/#governance-versiya-raqami-major); [Open questions — PDP EcoSystem](https://design.pdp.uz/ds/yadro/#governance-ochiq-savollar-pdp); [A new component and a screen before release](https://design.pdp.uz/ds/yadro/#governance-yangi-komponent-va); [How a change travels: from proposal to site](https://design.pdp.uz/ds/yadro/#governance-ozgarish-yoli-taklifdan); [Change request template](https://design.pdp.uz/ds/yadro/#governance-ozgarish-sorovi-shabloni)
- PDP classes: .eco-btn (--secondary, --sm), .eco-check, .eco-choice, .eco-icon

### Component status (System) — https://design.pdp.uz/ds/yadro/#comp-status

**Component status: what is ready, what is new, what is deprecated.** Every section — which kit, which brands and what status: Done — use it in products; Beta — new, under art-director review; Deprecated — not for new work, the replacement is named; Planned — not there yet. The table is built from the menu at build time, never by hand. Inspired by GitHub Primer (Component status) and Atlassian (Beta labels).

- Status: Beta (since 06.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Overview](https://design.pdp.uz/ds/yadro/#comp-status-umumiy-korinish); [All components](https://design.pdp.uz/ds/yadro/#comp-status-barcha-komponentlar); [How a status changes](https://design.pdp.uz/ds/yadro/#comp-status-holat-qanday-ozgaradi)
- PDP classes: .eco-icon, .eco-input (--sm), .eco-input-group (--sm, __addon, __addon--icon, __input)

### Component changelog (System) — https://design.pdp.uz/ds/yadro/#comp-log

**Component changelog: what changed, when and why.** Changes per component, newest first: a new section, a size or colour rule, a deprecated variant. Pick a component to keep only its entries. General news lives in «What’s new» on the Intro page; the full rules are in the design rules file. Inspired by the GitHub Primer, Atlassian and Shopify Polaris changelogs.

- Status: Beta (since 06.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Changes](https://design.pdp.uz/ds/yadro/#comp-log-ozgarishlar); [How an entry is added](https://design.pdp.uz/ds/yadro/#comp-log-yozuv-qanday-qoshiladi)
- PDP classes: .eco-input (--sm), .eco-segment (--sm)

### Design tokens (For machines) — https://design.pdp.uz/ds/yadro/#tokens

**Ready to use in code.** Values ship as CSS custom properties and JSON. Token names are the same in all six brands — --eco-*; the values come from the brand. Semantic tokens work in two modes: light is the product default, dark is the supported alternative and the brand context. Try switching this page too with the mode toggle.

- Blocks: [Two modes side by side](https://design.pdp.uz/ds/yadro/#tokens-ikki-rejim-yonma); [Untitled UI names](https://design.pdp.uz/ds/yadro/#tokens-untitled-ui-nomlari); [Brand layer — PDP EcoSystem](https://design.pdp.uz/ds/yadro/#tokens-brend-qatlami-pdp); [Migrating from old names](https://design.pdp.uz/ds/yadro/#tokens-eski-nomlardan-kochish)
- PDP classes: .eco-btn (--primary, --tertiary)

### For developers: install (For machines) — https://design.pdp.uz/ds/yadro/#dev-install

**Connecting the component CSS: one source.** ERP, LMS and Desk take the component CSS from one place — design.pdp.uz/ds/css/ or the npm package @pdp/design-system. No copies: a copy inside a project drifts away from the original over time. Current version — {{CSSPKG_VER}}.

- Blocks: [File map](https://design.pdp.uz/ds/yadro/#dev-install-fayllar-xaritasi); [Plain HTML: include order](https://design.pdp.uz/ds/yadro/#dev-install-oddiy-html-ulanish); [Vite and React (LMS): together with Tailwind v4](https://design.pdp.uz/ds/yadro/#dev-install-vite-va-react); [Nextcloud (Desk): moving the sync to URLs](https://design.pdp.uz/ds/yadro/#dev-install-nextcloud-desk); [Pinning and updating](https://design.pdp.uz/ds/yadro/#dev-install-versiyani-qotirish-va); [What not to do](https://design.pdp.uz/ds/yadro/#dev-install-nima-qilinmaydi)
- PDP classes: .eco-btn (--md, --primary)

### For AI (For machines) — https://design.pdp.uz/ds/yadro/#ai

**Give your AI assistant the rules once.** Without rules, Claude, Cursor or Copilot make up the design on their own: purple gradients, emoji icons, unreadable text on brand fills. Every brand has its own prompt: the shared rules — components, tokens, accessibility — plus that brand’s colors, typeface and logo. The prompt is in English — models follow instructions more precisely in English, and the interface copy still comes out in Uzbek.

- Blocks: [By task: kit files](https://design.pdp.uz/ds/yadro/#ai-vazifaga-qarab-toplam); [Set it up in three steps](https://design.pdp.uz/ds/yadro/#ai-uch-qadamda-ulang); [Ready-made file — PDP EcoSystem](https://design.pdp.uz/ds/yadro/#ai-tayyor-fayl-pdp); [Prompt — PDP EcoSystem](https://design.pdp.uz/ds/yadro/#ai-prompt-pdp-ecosystem); [Where to put it](https://design.pdp.uz/ds/yadro/#ai-qayerga-qoyish); [Check the result](https://design.pdp.uz/ds/yadro/#ai-natijani-tekshiring)
- PDP classes: .eco-avatar (--3d), .eco-badge (--solid), .eco-btn (--primary, --secondary, --sm, --tertiary), .eco-card (__meta, __title), .eco-icon, .eco-modal, .eco-on

### Prompt library (For machines) — https://design.pdp.uz/ds/yadro/#prompts

**Ready-made prompts: on-brand results from an AI chat.** For teachers and staff: when you need a presentation, letter, announcement, web page or document, ask ChatGPT, Claude or Gemini instead of waiting for a designer. Each prompt makes the AI read the PDP Design System file first, write in the PDP tone and in correct Uzbek Latin, and ask for any missing facts. Rules for developers and AI agents — For AI.

- Blocks: [How to use](https://design.pdp.uz/ds/yadro/#prompts-qanday-ishlatiladi); [Presentation](https://design.pdp.uz/ds/yadro/#pr-g-taqdimot); [Text](https://design.pdp.uz/ds/yadro/#pr-g-matn); [Website and page](https://design.pdp.uz/ds/yadro/#pr-g-sayt); [Dashboard and CRM](https://design.pdp.uz/ds/yadro/#pr-g-ilova); [Print](https://design.pdp.uz/ds/yadro/#pr-g-bosma)
- PDP classes: .eco-btn (--secondary, --sm), .eco-field, .eco-icon, .eco-input, .eco-input-wrap, .eco-segment

## Ready-made prompts (Prompt kutubxonasi)

15 copy-paste prompts in Uzbek for teachers and staff (non-designers) who use ChatGPT, Claude or Gemini: https://design.pdp.uz/ds/yadro/#prompts. Each one tells the assistant to read https://design.pdp.uz/llms.txt and the kit file below first, to follow the PDP writing rules (https://design.pdp.uz/ds/sayt/#writing), to write Uzbek Latin with ‘ (U+2018) in o‘ and g‘, dates as DD.MM.YYYY, to invent no colours or fonts and to ask for missing facts. Text in [brackets] is filled in by the person. If someone pastes one of them, follow it as written.

- [Lesson presentation](https://design.pdp.uz/ds/yadro/#pr-dars) (Presentation) — When you need a 10–15 slide deck for a lesson or seminar. Kit: https://design.pdp.uz/ds/taqdimot/ai.md
- [Parent meeting](https://design.pdp.uz/ds/yadro/#pr-yigilish) (Presentation) — For a parent meeting at the start of a term or school year. Kit: https://design.pdp.uz/ds/taqdimot/ai.md
- [Results report](https://design.pdp.uz/ds/yadro/#pr-hisobot) (Presentation) — For reporting numbers at the end of a term, semester or year. Kit: https://design.pdp.uz/ds/taqdimot/ai.md
- [Announcement](https://design.pdp.uz/ds/yadro/#pr-elon) (Text) — A short announcement about an event, a change or a deadline: Telegram, Nextcloud, notice board. Kit: https://design.pdp.uz/ds/yadro/ai.md
- [Letter to parents](https://design.pdp.uz/ds/yadro/#pr-xat) (Text) — For a formal but warm letter or notice to parents. Kit: https://design.pdp.uz/ds/yadro/ai.md
- [Official letter](https://design.pdp.uz/ds/yadro/#pr-rasmiy) (Text) — An official letter to an organisation, ministry or partner, printed on letterhead. Kit: https://design.pdp.uz/ds/bosma/ai.md
- [Social media post](https://design.pdp.uz/ds/yadro/#pr-post) (Text) — Copy for an Instagram or Telegram post. The visual SMM kit is not ready yet. Kit: https://design.pdp.uz/ds/smm/ai.md
- [Course page](https://design.pdp.uz/ds/yadro/#pr-kurs) (Website and page) — Copy and structure of a landing page for a new course or programme. Kit: https://design.pdp.uz/ds/sayt/ai.md
- [Event page](https://design.pdp.uz/ds/yadro/#pr-tadbir) (Website and page) — A page for an open day, olympiad or workshop. Kit: https://design.pdp.uz/ds/sayt/ai.md
- [Application form](https://design.pdp.uz/ds/yadro/#pr-ariza) (Website and page) — A web form for admission, sign-up or a request. Kit: https://design.pdp.uz/ds/sayt/ai.md
- [Nextcloud announcement](https://design.pdp.uz/ds/yadro/#pr-nc-elon) (Dashboard and CRM) — An announcement to staff or a group through the Nextcloud Announcement Center. Kit: https://design.pdp.uz/ds/dashboard/ai.md
- [Forms survey](https://design.pdp.uz/ds/yadro/#pr-forms) (Dashboard and CRM) — For building a survey or feedback form in Nextcloud Forms. Kit: https://design.pdp.uz/ds/dashboard/ai.md
- [Deck task list](https://design.pdp.uz/ds/yadro/#pr-deck) (Dashboard and CRM) — For splitting event or project work into a Nextcloud Deck board. Kit: https://design.pdp.uz/ds/dashboard/ai.md
- [Order or SOP](https://design.pdp.uz/ds/yadro/#pr-sop) (Print) — An internal order, instruction or standard operating procedure, printed on A4. Kit: https://design.pdp.uz/ds/bosma/ai.md
- [Certificate text](https://design.pdp.uz/ds/yadro/#pr-sertifikat) (Print) — Text for a course, olympiad or event certificate, diploma or letter of thanks. Kit: https://design.pdp.uz/ds/bosma/ai.md

## Tokens these sections use

Semantic tokens referenced by the classes above (common/base.css) and by the sections' own CSS. Values per brand and theme: https://design.pdp.uz/ds/tokens/<brand>.css.

- Backgrounds: --eco-bg-brand-primary, --eco-bg-brand-solid, --eco-bg-brand-solid_hover, --eco-bg-disabled, --eco-bg-error-primary, --eco-bg-overlay, --eco-bg-primary, --eco-bg-primary-solid, --eco-bg-primary_alt, --eco-bg-primary_hover, --eco-bg-quaternary, --eco-bg-secondary, --eco-bg-secondary_hover, --eco-bg-success-primary, --eco-bg-success-solid, --eco-bg-tertiary, --eco-bg-warning-primary
- Text: --eco-text-brand-secondary, --eco-text-brand-secondary_hover, --eco-text-brand-tertiary, --eco-text-disabled, --eco-text-error-primary, --eco-text-error-primary_hover, --eco-text-placeholder, --eco-text-primary, --eco-text-primary_on-brand, --eco-text-quaternary, --eco-text-secondary, --eco-text-success-primary, --eco-text-tertiary, --eco-text-warning-primary, --eco-text-white
- Borders: --eco-border-brand, --eco-border-disabled, --eco-border-primary, --eco-border-secondary, --eco-border-tertiary
- Icons (fg): --eco-fg-brand-primary, --eco-fg-brand-primary_alt, --eco-fg-brand-secondary, --eco-fg-disabled, --eco-fg-error-primary, --eco-fg-error-secondary, --eco-fg-info-primary, --eco-fg-primary, --eco-fg-quaternary, --eco-fg-secondary, --eco-fg-success-primary, --eco-fg-success-secondary, --eco-fg-tertiary, --eco-fg-warning-primary, --eco-fg-white
- Brand and buttons: --eco-badge-solid-bg, --eco-badge-solid-fg, --eco-board-1, --eco-board-2, --eco-board-3, --eco-board-4, --eco-board-5, --eco-board-6, --eco-brand-button, --eco-brand-button-accent, --eco-brand-button-ink, --eco-brand-button-secondary-fg, --eco-brand-on-button, --eco-brand-on-button-accent, --eco-brand-on-button-ink, --eco-brand-primary, --eco-cat-black, --eco-cat-blue, --eco-cat-green, --eco-cat-red, --eco-cat-teal, --eco-chart-1, --eco-chart-2, --eco-chart-3, --eco-chart-4, --eco-chart-5, --eco-chart-6, --eco-chart-div-1, --eco-chart-div-2, --eco-chart-div-3, --eco-chart-div-4, --eco-chart-div-5, --eco-chart-seq-1, --eco-chart-seq-2, --eco-chart-seq-3, --eco-chart-seq-4, --eco-chart-seq-5, --eco-rainbow-1, --eco-rainbow-2, --eco-rainbow-3, --eco-rainbow-4, --eco-rainbow-5, --eco-rainbow-c2, --eco-rainbow-c3, --eco-rainbow-c4, --eco-tab-pill-bg, --eco-tab-pill-fg, --eco-tab-pill-shadow
- Type: --eco-font-body, --eco-font-display, --eco-font-display--letter-spacing, --eco-font-mono, --eco-text-display-2xl, --eco-text-display-2xl--letter-spacing, --eco-text-display-2xl--line-height, --eco-text-display-lg, --eco-text-display-lg--letter-spacing, --eco-text-display-lg--line-height, --eco-text-display-md, --eco-text-display-md--letter-spacing, --eco-text-display-md--line-height, --eco-text-display-sm, --eco-text-display-sm--letter-spacing, --eco-text-display-sm--line-height, --eco-text-display-xl, --eco-text-display-xl--letter-spacing, --eco-text-display-xl--line-height, --eco-text-display-xs, --eco-text-display-xs--letter-spacing, --eco-text-display-xs--line-height, --eco-text-lg, --eco-text-lg--line-height, --eco-text-md, --eco-text-md--line-height, --eco-text-sm, --eco-text-sm--line-height, --eco-text-xl, --eco-text-xl--line-height, --eco-text-xs, --eco-text-xs--line-height
- Spacing: --eco-spacing-10xl, --eco-spacing-11xl, --eco-spacing-2xl, --eco-spacing-3xl, --eco-spacing-4xl, --eco-spacing-5xl, --eco-spacing-6xl, --eco-spacing-7xl, --eco-spacing-8xl, --eco-spacing-9xl, --eco-spacing-lg, --eco-spacing-md, --eco-spacing-sm, --eco-spacing-xl, --eco-spacing-xs, --eco-spacing-xxs
- Radius: --eco-radius-2xl, --eco-radius-3xl, --eco-radius-4xl, --eco-radius-full, --eco-radius-lg, --eco-radius-md, --eco-radius-none, --eco-radius-sm, --eco-radius-xl, --eco-radius-xs, --eco-radius-xxs
- Shadow and focus: --eco-focus-gap, --eco-focus-ring, --eco-focus-ring-error, --eco-focus-w, --eco-shadow-2xl, --eco-shadow-3xl, --eco-shadow-lg, --eco-shadow-md, --eco-shadow-sm, --eco-shadow-xl, --eco-shadow-xs, --eco-shadow-xs-skeuomorphic
- Glass: --eco-glass-backdrop, --eco-glass-fill, --eco-glass-fill-hover, --eco-glass-ink, --eco-glass-rim, --eco-glass-solid
- Motion: --eco-duration-base, --eco-duration-fast, --eco-duration-slow, --eco-ease-emphasized, --eco-ease-exit, --eco-ease-standard
- Primitives: --eco-color-academy-green, --eco-color-academy-yellow, --eco-color-black, --eco-color-junior-cyan, --eco-color-junior-cyan-deep, --eco-color-junior-deep, --eco-color-junior-ink, --eco-color-junior-sky, --eco-color-lime, --eco-color-malachite, --eco-color-malachite-button, --eco-color-neutral-300, --eco-color-neutral-50, --eco-color-neutral-500, --eco-color-neutral-700, --eco-color-neutral-900, --eco-color-school-blue, --eco-color-school-blue-950, --eco-color-school-cyan, --eco-color-school-navy, --eco-color-school-pink, --eco-color-school-yellow, --eco-color-surface, --eco-color-surface-strong, --eco-color-university-navy, --eco-color-university-teal, --eco-color-university-teal-700, --eco-color-university-teal-dark, --eco-color-university-yellow, --eco-color-white, --eco-gradient-stop-1, --eco-gradient-stop-2, --eco-gradient-stop-3, --eco-gradient-stop-4
- Other: --eco-field-focus-w, --eco-field-radius-affix, --eco-field-radius-multiline, --eco-icon-lg, --eco-icon-md, --eco-icon-sm, --eco-illo-base-on-grey, --eco-illo-ground-on-grey, --eco-illo-shade-on-grey, --eco-slider-fill

## Other kits

- [Brandbook (Brendbuk)](https://design.pdp.uz/ds/brend/ai.md): Read when the task needs the brand itself, not a component: who the brand is, mission, tagline, vision, values, audience and character (tone of voice traits), presented as calm documentation sections (title, short lead, rule blocks with diagrams) from the official brand book content (brand-sources/<brand>/content/brandbook.<lang>.json). Never invent or rephrase mission, tagline, vision or values — quote them. 16 chapters in four groups — Foundation (brand platform, architecture, tone of voice), Elements (logo, colour, typography, graphics and icons, photo and illustration), Expression (style idea, layout, motion, video), Application (co-branding, partner communication, applications, files). Chapter by chapter: brand platform, architecture, logo, co-branding (lockups with PDP projects and external partners: spacing in X, 1 px divider, monochrome parent mark), colour, typography (incl. quotes, dashes, number, date and phone formats), style idea (mark, orbit, coil, circles), photo and illustration, graphics and icons, layout, motion, video and logo shots (bloom/outro, safe zones, captions), tone of voice (traits, name spelling, writing rules, words to avoid, sample copy), applications, partner communication (endorsement line «PDP EcoSystem loyihasi» — where it is mandatory, size and colour) and files. Slides marked «EcoSystem rule — inherited» quote the parent brand book because the project brand book has no own rule — do not invent project-specific rules there. Visual chapters show the real logo files, token colours and renders and link to the Core, Website, Print, Slides and SMM kits instead of repeating their rules. All six brands have all chapters. The old standalone brand book pages (/ecosystem/, /academy/, /school/brand/, /university/, /online/, /junior/) now redirect here. Since r62 every chapter also has: a «How to read» legend (platform), «The brand in 60 seconds» summary, brand model and «What we are / aren’t» slides; slide codes like «03.04» with copy-link buttons (?brand=<id>#bk-<chapter>-<n> works without the brand suffix), «In this chapter» chips and a chapter recap; callouts (important, tip, reference, exception, why) quoted from the brand book; download chips next to slide titles (real repo files only); decision trees («Which logo when», «Which file do I take»), element × brand and usage matrices, background × version and contrast matrices, production colour cards (HEX, RGB, CMYK, Pantone, token), a font tester, motion token curves, layout build sequences and zone diagrams, interactive writing and pre-publication checklists, a glossary (UZ/RU/EN), a changelog and colophon, exports (.ase swatches, Figma variables JSON, draw.io logo library, partner ZIP) and per-chapter «For AI» prompts. Numbers and brand claims on these slides are quoted from brand-sources/<brand>/content/brandbook.<lang>.json (the build rejects a number not found in the cited text); where a brand book has no data the slide is absent for that brand. A print stylesheet makes «Save as PDF» produce one A4 landscape page per slide in Light. Page: https://design.pdp.uz/ds/brend/
- [Website (Sayt)](https://design.pdp.uz/ds/sayt/ai.md): Use when building a website, landing page or web interface: buttons, forms, slider, menus, badges, avatars (3D), cards, callouts, app components (tabs, progress, table, pagination, modal, empty state, upload), charts, chip types, rich tooltip and submenu; extra components — command palette, date picker, overlays (sheet, hover card, context menu, toast stack), data table (toolbar, bulk actions), structure (accordion, tree, stepper, carousel, resizable), field patterns (input group, error summary, validation timing), toolbar (toggle group, split button, menubar), inline edit and contextual save bar, status indicators (icon, shape, KPI delta), saved views with filter pills; EcoSystem-only (r92): number input (−/+ stepper, spinbutton), rating and feedback (star input and display, rating summary, NPS 0–10 scale, «Was this helpful?»), countdown and deadline chips, table settings (density 40/52/64, expandable rows, pinned first column), tag / multi-select field (chips inside the field, typeahead listbox, create new, limit), video lesson player (chapters on the timeline, speed, captions, transcript, next-lesson end card), gallery and lightbox viewer (dialog, prev/next, zoom, swipe); page templates — sign-in, sign-up and password reset, multi-step application (question pages, check answers, confirmation), error pages (404, 500, 503 maintenance, 403 — EcoSystem only); email (EcoSystem only, r94): base layout (600 px table layout, tokens compiled to inline hex, dark mode via prefers-color-scheme and [data-ogsc], locked logo header, bulletproof pill button, preheader), 8 ready templates in Uzbek, Russian and English with plain-text parts (email verification, password reset, application received, payment receipt, lesson reminder, certificate ready, event invitation with add-to-calendar and .ics, weekly digest with one-click unsubscribe) at https://design.pdp.uz/ds/email/, staff email signature generator (HTML + plain text) and a pre-send checklist (Gmail clipping < 100 KB, client matrix); backgrounds, live backgrounds, text motion and effects; brand card kinds and signatures; states, required blocks (header, footer, hero, CTA), page anatomy; patterns and guides — interaction states, adaptive layout, writing, microcopy library (310+ ready UI strings in Uzbek, Russian and English with context, max length, tone and an avoid variant; 14 categories incl. validation, destructive confirmations, push/SMS, payments and classes/attendance/certificates; ICU plurals; download https://design.pdp.uz/ds/sayt/microcopy.json and microcopy.csv — reuse these strings by id instead of writing new ones), onboarding and permissions, search, data entry, modality, settings, data visualisation, inclusive language, task list, step-by-step navigation, cookie consent. Every section works in all six brands (tokens, logo slot and fonts follow the active brand). Page: https://design.pdp.uz/ds/sayt/
- [Dashboard (Dashboard)](https://design.pdp.uz/ds/dashboard/ai.md): Use when building a CRM (Nextcloud), dashboard or desktop app screen: Dashboard, Files, Photos, Activity, Talk (incl. call view), Mail, Deck, Tasks, Gantt (Deck timeline), Calendar (incl. appointments), Tables, Forms, Polls, Contacts, Notes, Collectives (wiki), Announcements, Bookmarks, learning blocks (course path, schedule, assignment, grade book, attendance, rating) and app shell (bottom bar, navigation rail, top app bar, FAB; sidebar variants and dashboard layout; notification centre and message-type rules; feature tour — spotlight with blanket, 3–4 steps, EcoSystem only). All 18 Nextcloud apps are EcoSystem-only reskins with real Nextcloud DOM classes. Phone apps (native iOS/Android student app) and Telegram Mini App / bot are in the App kit; shared web components (buttons, forms, tabs, table, modal) are in the Website kit. Page: https://design.pdp.uz/ds/dashboard/
- [Mobile app (Ilova)](https://design.pdp.uz/ds/ilova/ai.md): Use when building for the phone: a Telegram Mini App or bot (Mini App shell with Telegram header, MainButton/SecondaryButton, BackButton, safe areas and 10 screens — catalogue, course, 3-step apply, payment, schedule, profile and certificate, notifications; 7 bot message templates with formatting, emoji and inline-keyboard rules; themeParams → --eco-* bridge downloadable as /ds/telegram/pdp-telegram.css and .js; when to use bot vs Mini App vs website) or the native iOS and Android student app (mobile tokens in pt/sp with Swift, Compose and Android XML files, background ladder instead of shadows, safe areas, 44 pt / 48 dp tap targets, Dynamic Type, haptics; mobile components for iOS 26–27 and Material 3 Expressive; 12 core screens; app icon layers and splash; push, Live Activity and widgets; iOS vs Android differences). EcoSystem only. Desktop CRM, dashboard and Nextcloud screens are in the Dashboard kit; shared web components are in the Website kit. Page: https://design.pdp.uz/ds/ilova/
- [School LMS (LMS)](https://design.pdp.uz/ds/lms/ai.md): Use when building a screen of the PDP School learning management system (LMS): app shell with per-role sidebar (admin, teacher, student, parent), role dashboards, grade journal (attendance + 0–100 grade cell, 5-point mapping ≥90/70/55), attendance roll-call and student calendar, timetable (week, day, admin busy/free matrix), curriculum, lesson player and quiz runner, homework with AI check and teacher review. School brand only (eco-lock-school); component CSS lives in tools/ecosystem-ds/ds/lms/*.css and uses --eco-* tokens only. Page: https://design.pdp.uz/ds/lms/
- [Slides (Taqdimot)](https://design.pdp.uz/ds/taqdimot/ai.md): Use when making a presentation: 60 kinds of 16:9 slides in Dark and Light, deck outlines and presentation rules in the active brand (PowerPoint templates: coming soon). Page: https://design.pdp.uz/ds/taqdimot/
- [Print (Bosma)](https://design.pdp.uz/ds/bosma/ai.md): Use when making a printed A4 document: SOP, job card, form, log book, agreement; margins, running header and footer, pt type scale and the --eco-print-* tokens. Also the A4 templates (office and offset letterhead, SOP with document code and change log, bilingual UZ/RU forms with 0.4 pt writing lines, contract with initials per page), A3 poster with a viewing-distance type scale, 600×1600 mm X-banner, DL and C4 envelopes, A4 presentation folder (front and inside with pocket), DL leaflet cover, A5 notebook cover, A5 door sign and a die-cut sticker sheet, (corner holes, empty bottom 100 mm, small text on a black band in the green version), A6 event badge, CR80 ID card, landscape timetable, A4 landscape attendance register (blank and filled; K5 tile cells, letter marks, totals, signature row), A5 saddle-stitched admission brochure (8 pages: cover, programmes, why PDP, admission steps, prices, FAQ, contacts with QR; 3 mm bleed, 5 mm safe area from trim and fold), the six certificate variants (print: A standard, F official; digital: C standard, E honours, D/B extra), the print colour table (screen HEX/RGB vs CMYK FOGRA39/29) and file naming, document codes and the preflight checklist. Also environmental design: building grilles (University, School), window film (EcoSystem, University, School), A4 wayfinding signs and wall posters (University). Page: https://design.pdp.uz/ds/bosma/
- [SMM (SMM)](https://design.pdp.uz/ds/smm/ai.md): Use when making an Instagram post, carousel or story for EcoSystem: (r94) also YouTube and video — section «Video va YouTube» (#video): four thumbnail families (big word, face + question, tech, series) in Light/Dark with safe-area overlay, phone-size check and A/B test rules, channel banner 2560×1440 with device crops (safe 1546×423), profile picture and watermark, end screen (615×345 video slot, 294 px subscribe circle, last 20 s) and chapter card, lower thirds / lesson title / subtitles / screen-recording keys on 1920×1080 with EBU R95 safe areas, podcast series and episode covers 3000×3000 plus a 16:9 video-podcast thumbnail, Zoom/Teams backgrounds and stage screens (countdown, speaker, break, Q&A, LED 3840×1080), AI background prompts (PDP-VIDEO-v1) and layered SVG construction guides (smm/video/*.svg); fourteen template families — six core (announcement, admission countdown with a Reels cover, event incl. 1:1 for Telegram, 5-slide educational carousel, student testimonial, stat), five additional (story series: Q&A, poll, quiz and answer; Reels cover, intro hook, lower-third, subtitles and outro with the 672 px bottom and 144 px right safe areas; mentor introduction; weekly plan; highlight covers) and three free (holiday greetings, engagement free-zone posts, LinkedIn 1200×627) — with AI background prompt cards (style key PDP-SMM-v1), the profile grid rhythm, 4:5 post templates (button stack, big headline, question card, big number), 1:1 grid posts, the 9:16 story with 270 / 384 px safe zones, and the SMM rules (filled pills, one accent per post, two type sizes plus a mono label). Page: https://design.pdp.uz/ds/smm/

Before you finish, check your output against the Core rules and this kit, and name any rule you could not follow.