# PDP Design System — Website kit (Sayt), v0.7

> 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/ (all six brands; ?brand=<id>, ?theme=light|dark, ?lang=uz|ru|en).
Read first: the Core kit https://design.pdp.uz/ds/yadro/ai.md (foundations, tokens, motion, accessibility) and the brand file of the product you build (list below). The full shared rule set is https://design.pdp.uz/ds/ai/core.md. This file lists only what the Website kit adds: its sections, their blocks, the PDP class names they use and the tokens those classes need.
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.

## Sections

### Text and number motion (Backgrounds and effects) — https://design.pdp.uz/ds/sayt/#text-motion

**Text motion — to focus attention on one place.** A KPI number counts up, an announcement chip shimmers, a hero heading resolves from blur, a word rotates, an AI reply types itself out, a testimonial strip scrolls by. Each effect plays once or in a slow loop; the meaning reads in full without motion. Inspired by Magic UI and Aceternity UI.

- Blocks: [Six effects](https://design.pdp.uz/ds/sayt/#text-motion-oltita-effekt)
- PDP classes: .eco-avatar (--3d, --tint), .eco-badge (--sm, --solid), .eco-btn (--icon, --tertiary, --xs), .eco-segment (--sm), .eco-shine (__t)

### Effects and connections (Backgrounds and effects) — https://design.pdp.uz/ds/sayt/#effects

**Visible connection and borders without strokes.** Live beams and an orbit that show how the parts of the system connect, a glow border for the selected plan, a cursor-following spotlight and a banner shine. Under the PDP rule there is no stroke around a card: the border is a soft glow behind it, and the light sits in the card background itself. Inspired by Magic UI and Aceternity UI.

- Blocks: [Seven effects](https://design.pdp.uz/ds/sayt/#effects-yettita-effekt)
- PDP classes: .eco-badge (--sm, --solid), .eco-btn (--primary, --sm), .eco-segment (--sm), .eco-toast (__body)

### Background patterns (Backgrounds and effects) — https://design.pdp.uz/ds/sayt/#backgrounds

**The background is a stage, not content: dots, cells and grids.** Calm backgrounds for the hero, empty states, the sign-in screen and promo bands. Three are static (CSS gradient — no images, zero weight), three are live: flickering grid, cells and retro grid. Inspired by Magic UI and Aceternity UI; colours come from the active brand tokens: black field, brand colour and accent.

- Blocks: [Six patterns](https://design.pdp.uz/ds/sayt/#backgrounds-oltita-naqsh)
- PDP classes: .eco-btn (--rainbow), .eco-segment (--sm)

### Live backgrounds (Backgrounds and effects) — https://design.pdp.uz/ds/sayt/#bg-motion

**Black field, brand colour and accent — in motion.** Five live backgrounds for promo bands, the hero, event announcements and the sign-in screen: aurora, ripple, meteors, beams and particles. All in CSS or a small canvas (no libraries), in brand colours, with a clear centre for text. Inspired by Aceternity UI and Magic UI.

- Status: Beta (since 05.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Five live backgrounds](https://design.pdp.uz/ds/sayt/#bg-motion-beshta-jonli-fon)
- PDP classes: .eco-btn (--primary), .eco-segment (--sm)

### Aurora background (Backgrounds and effects) — https://design.pdp.uz/ds/sayt/#aurora

**Aurora — the EcoSystem Light background.** The approved background for the DS banner, presentation cover and hero: soft colours flowing into one another with a white field around the mark. Brand-fixed — Light only: even when the page switches to Dark, the aurora stays light; there is no Dark version.

- EcoSystem only: the block always uses the EcoSystem tokens (in the DS it is wrapped in class="eco-lock-ecosystem"); do not make per-brand variants.
- Blocks: [Hero and banner](https://design.pdp.uz/ds/sayt/#aurora-hero-va-banner); [Cover background](https://design.pdp.uz/ds/sayt/#aurora-muqova-foni)
- PDP classes: .eco-aurora (__bg), .eco-btn (--glass, --primary), .eco-cover (--dark, --light), .eco-glass (--light), .eco-segment (--sm)
- Nextcloud DOM classes reproduced in the example: .snip-fold (__chev, __sum)

### Buttons (Components) — https://design.pdp.uz/ds/sayt/#buttons

**One screen — one primary action.** A button is an action the user performs. Colour tells its role: primary, accent, secondary and tertiary, link and destructive; a screen has one primary button. Variants, sizes and states are based on Untitled UI; the look is the designer’s proposal (Rahimjon Gaziyev, 29.09.2026): pill, body font, no shadow; only outline has a border. The mockup had no loading, pressed state, link style or 44/48 px sizes — they continue the same style. Colours come from the active brand tokens: the same class takes its own colour in every brand.

- EcoSystem only: the block always uses the EcoSystem tokens (in the DS it is wrapped in class="eco-lock-ecosystem"); do not make per-brand variants.
- Blocks: [Thirteen variants, one primary](https://design.pdp.uz/ds/sayt/#buttons-on-uch-variant); [Pick the size for the place](https://design.pdp.uz/ds/sayt/#buttons-olcham-joyga-qarab); [States](https://design.pdp.uz/ds/sayt/#buttons-holatlar); [Icons, link style and full width](https://design.pdp.uz/ds/sayt/#buttons-ikonka-havola-korinishi); [Tooltip — extra context](https://design.pdp.uz/ds/sayt/#buttons-tooltip-qoshimcha-izoh); [Groups, placement and colored backgrounds](https://design.pdp.uz/ds/sayt/#buttons-guruh-joylashuv-va); [Rainbow button — for hero and promo](https://design.pdp.uz/ds/sayt/#buttons-kamalak-tugma-hero); [Glass buttons and surfaces](https://design.pdp.uz/ds/sayt/#buttons-shisha-tugmalar-va); [Joined button group](https://design.pdp.uz/ds/sayt/#buttons-tutash-tugmalar-guruhi); [Specification](https://design.pdp.uz/ds/sayt/#buttons-spetsifikatsiya)
- PDP classes: .eco-badge (--dot, --success), .eco-btn (--accent, --block, --ghost, --glass, --icon, --ink, --lg, --link-color, --link-destructive, --link-gray, --outline, --primary, --primary-destructive, --rainbow, --rainbow-light, --secondary, --secondary-destructive, --sm, --tertiary, --tertiary-destructive, --xl, --xs), .eco-btn-group (--fill), .eco-cover (--dark, --light, --still), .eco-field, .eco-glass (--pill, --tile), .eco-icon (--sm), .eco-input, .eco-label, .eco-tooltip
- Nextcloud DOM classes reproduced in the example: .bi (__col, __list), .bz (__s), .dd (__stage), .demo (--surface, __label), .dlg (__m, __t), .fig (__stage), .gls (__badge, __card, __d, __row, __tag, __tiles), .phone (__bar, __card, __cta, __m, __p, __t), .snip-fold (__chev, __sum), .stage (--lbl2), .stage-pair (--stack), .vl (__g, __r, __s, __t)

### Forms (Components) — https://design.pdp.uz/ds/sayt/#forms

**Labels are always visible, errors are stated clearly.** A form is a conversation with the user. Every field has a visible label and, when needed, a hint and an error message that says how to fix it. A field matches its button’s height: md field 44 px — lg button, sm field 40 px — md button. Structure and sizes are based on Untitled UI; the field’s look is a proposal by designer Rahimjon Gaziyev (29.09.2026).

- Blocks: [Field anatomy](https://design.pdp.uz/ds/sayt/#forms-maydon-anatomiyasi); [Sizes: sm and md](https://design.pdp.uz/ds/sayt/#forms-olchamlar-sm-va); [States and field types](https://design.pdp.uz/ds/sayt/#forms-holatlar-va-maydon); [Input group: prefix and suffix](https://design.pdp.uz/ds/sayt/#forms-input-guruhi-prefiks); [Selection: checkbox, radio, switch, segment](https://design.pdp.uz/ds/sayt/#forms-tanlov-checkbox-radio); [Checkbox va radio: anatomiya](https://design.pdp.uz/ds/sayt/#forms-checkbox-va-radio); [SMS code and file upload](https://design.pdp.uz/ds/sayt/#forms-sms-kod-va); [Example: course enrollment](https://design.pdp.uz/ds/sayt/#forms-namuna-kursga-yozilish); [Error messages: specific and blame-free](https://design.pdp.uz/ds/sayt/#forms-xato-matni-aniq)
- PDP classes: .eco-alert (--success), .eco-btn (--icon, --lg, --link-color, --primary, --secondary, --tertiary), .eco-check (--md, --media, --round), .eco-choice (--md), .eco-field, .eco-hint, .eco-icon, .eco-input (--sm), .eco-input-group (--sm, __addon, __addon--icon, __addon--plain, __btn, __input, __select), .eco-input-reveal, .eco-input-wrap, .eco-label, .eco-on, .eco-otp (__cell, __foot, __row, __sep), .eco-progress, .eco-radio (--md), .eco-segment (--fill, --stacked), .eco-switch (--md)

### Slider (Components) — https://design.pdp.uz/ds/sayt/#slider

**Pick a value or a range by dragging.** A slider is for an approximate number or range: price, discount, volume. If an exact number is needed, use a field. The primary look is a single thumb with step dots and a value bubble; a two-thumb range and a scale are an additional variant. Shape — designer proposal (Rahimjon Gaziyev, 29.09.2026), colors — from brand tokens.

- Blocks: [Single value and range](https://design.pdp.uz/ds/sayt/#slider-bitta-qiymat-va); [Two sizes: bold and thin](https://design.pdp.uz/ds/sayt/#slider-ikki-olcham-qalin); [States](https://design.pdp.uz/ds/sayt/#slider-holatlar); [Keyboard and screen reader](https://design.pdp.uz/ds/sayt/#slider-klaviatura-va-ekran)
- PDP classes: .eco-hint, .eco-label, .eco-range (--thin), .eco-slider (--steps, --thin, __control, __fill, __head, __input, __marks, __tip, __track, __value)

### Menu and list (Components) — https://design.pdp.uz/ds/sayt/#menus

**A menu is for actions, a list is for choosing.** A menu opens below a button and offers several actions; a selection list lets the user pick one value out of several. Both are built from the same row: icon or avatar, title and description, and a keyboard shortcut or mark at the end. Shape, size and states come from the designer’s layout (HeroUI); colour, focus and contrast come from PDP Design System tokens.

- Blocks: [Dropdown menu](https://design.pdp.uz/ds/sayt/#menus-dropdown-menyu); [List item](https://design.pdp.uz/ds/sayt/#menus-royxat-elementi)
- PDP classes: .eco-avatar (--3d), .eco-btn (--secondary, --sm), .eco-dropdown, .eco-field, .eco-label, .eco-menu (__body, __check, __check--dot, __desc, __end, __group, __item, __item--danger, __kbd, __label, __sep, __title)

### Labels and statuses (badge) (Components) — https://design.pdp.uz/ds/sayt/#badges

**Name the status in one word, and let color confirm it.** A badge briefly states an object’s status or category. Color signals urgency, while the word carries the meaning — so a badge never goes without a word. The status vocabulary is the same for all PDP products — the brand only changes the colors.

- Blocks: [Seven variants — seven meanings](https://design.pdp.uz/ds/sayt/#badges-yettita-variant-yettita); [Two types, three sizes](https://design.pdp.uz/ds/sayt/#badges-ikki-tur-va); [Dot for status, no dot for category](https://design.pdp.uz/ds/sayt/#badges-nuqta-holat-nuqtasiz); [Category badge: color tells groups apart](https://design.pdp.uz/ds/sayt/#badges-toifa-beyji-rang); [Status vocabulary](https://design.pdp.uz/ds/sayt/#badges-statuslar-lugati); [Brand fill — only for “New”](https://design.pdp.uz/ds/sayt/#badges-brend-fon-faqat); [Chips: filter and tag](https://design.pdp.uz/ds/sayt/#badges-chiplar-filtr-va); [Avatar: size, image and group](https://design.pdp.uz/ds/sayt/#badges-avatar-olcham-rasm); [Counter, dot and avatar status](https://design.pdp.uz/ds/sayt/#badges-hisoblagich-nuqta-va); [Accent chip — one achievement or tally](https://design.pdp.uz/ds/sayt/#badges-aksent-chipi-bitta)
- PDP classes: .eco-avatar (--2xl, --3d, --lg, --sm, --tint, --xl, --xs, __status, __status--busy, __status--off), .eco-badge (--badge, --brand, --cat-black, --cat-blue, --cat-green, --cat-red, --cat-teal, --dot, --error, --info, --lg, --sm, --solid, --success, --warning), .eco-btn (--icon, --secondary, --sm, --tertiary), .eco-card (__title), .eco-chip (--accent), .eco-field, .eco-hint, .eco-icon (--lg, --sm), .eco-label, .eco-link

### Avatars (Components) — https://design.pdp.uz/ds/sayt/#avatars

**The project’s own avatar and other users.** An avatar is a small mark for a user. People get a 3D avatar (the background colour is baked into the image); the project and agents (AI-mentor, bot, system, group) get initials or an icon on a solid brand-tint circle. The background is always coloured: no gradient (blurred orb) and no grey avatars.

- Blocks: [3D avatars](https://design.pdp.uz/ds/sayt/#avatars-3d-avatarlar); [Project and agent avatar](https://design.pdp.uz/ds/sayt/#avatars-loyiha-va-agent); [Diversity: other users](https://design.pdp.uz/ds/sayt/#avatars-xilma-xillik-boshqa); [Tokens and size](https://design.pdp.uz/ds/sayt/#avatars-tokenlar-va-olcham)
- PDP classes: .eco-avatar (--2xl, --36, --3d, --accent, --inverse, --lg, --sm, --tint, --xl, --xs, __status), .eco-icon

### Cards (Components) — https://design.pdp.uz/ds/sayt/#cards

**One card — one object and one primary action.** A card gathers information about one object — a project, course, metric or announcement — in one place. Radius 24 px, no border and no shadow — a proposal by designer Rahimjon Gaziyev (28.09.2026); structure based on Untitled UI; the rules are a proposal for all PDP products.

- Blocks: [Anatomy](https://design.pdp.uz/ds/sayt/#cards-anatomiya); [Three levels: base, interactive, raised](https://design.pdp.uz/ds/sayt/#cards-uch-daraja-base); [Project and course cards](https://design.pdp.uz/ds/sayt/#cards-loyiha-va-kurs); [Metric, announcement and empty card](https://design.pdp.uz/ds/sayt/#cards-korsatkich-elon-va); [Grid and mobile](https://design.pdp.uz/ds/sayt/#cards-grid-va-mobil); [Usage](https://design.pdp.uz/ds/sayt/#cards-qollanish); [Info, selectable and image cards](https://design.pdp.uz/ds/sayt/#cards-informatsion)
- PDP classes: .eco-badge (--brand, --dot, --error, --solid, --success, --warning), .eco-btn (--primary, --secondary, --tertiary), .eco-card (--interactive, --raised, __meta, __title), .eco-icon (--lg, --sm), .eco-progress

### Callouts (Components) — https://design.pdp.uz/ds/sayt/#callouts

**A short aside that stands apart from the main text.** A callout is a calm filled surface in the flow of text: a small icon tile, a title, body text and, if needed, one link or button. No border and no shadow. The tone is chosen by meaning only — neutral, brand, info, warning, error, success; there are no decorative colours. The brand tone follows the active brand; the others are the same in all six brands.

- Blocks: [Six tones, Light and Dark](https://design.pdp.uz/ds/sayt/#callouts-olti-ohang-light); [Anatomy](https://design.pdp.uz/ds/sayt/#callouts-anatomiya); [Three variants](https://design.pdp.uz/ds/sayt/#callouts-uch-korinish); [Which tone when](https://design.pdp.uz/ds/sayt/#callouts-qaysi-ohang-qachon); [Rules](https://design.pdp.uz/ds/sayt/#callouts-qoidalar)
- PDP classes: .eco-btn (--secondary, --sm), .eco-callout (--brand, --compact, --error, --info, --success, --warning, __action, __actions, __body, __close, __content, __icon, __title)

### App components (Components) — https://design.pdp.uz/ds/sayt/#app

**Seven components for account and dashboard screens.** Tabs, progress, table, pagination, modal, empty state and file upload — Untitled UI’s app components on PDP tokens. Structure, sizes and states come from Untitled UI; color, focus and contrast follow the PDP Design System rules. Every component works in both modes and at a width of 390 px. The kanban board and other app blocks are on the “App” page.

- Blocks: [Tabs](https://design.pdp.uz/ds/sayt/#app-tablar); [Progress: bar and circle](https://design.pdp.uz/ds/sayt/#app-progress-chiziq-va); [Table card](https://design.pdp.uz/ds/sayt/#app-jadval-kartasi); [Pagination](https://design.pdp.uz/ds/sayt/#app-sahifalash); [Modal](https://design.pdp.uz/ds/sayt/#app-modal-2); [Empty state](https://design.pdp.uz/ds/sayt/#app-bosh-holat); [File upload](https://design.pdp.uz/ds/sayt/#app-fayl-yuklash)
- PDP classes: .eco-avatar (--3d), .eco-badge (--brand, --dot, --error, --sm, --success, --warning), .eco-btn (--icon, --link-destructive, --primary, --primary-destructive, --secondary, --sm, --tertiary), .eco-check (--md), .eco-dropzone (__hint, __input, __text), .eco-empty (--md, __actions, __art, __text, __title), .eco-featured-icon (--error, --md, --modern), .eco-field, .eco-file (__body, __del, __meta, __name, __status, __status--error, __status--ok), .eco-files, .eco-icon, .eco-input (--sm), .eco-input-wrap, .eco-label, .eco-loader (--sm, __core, __o, __ray, __spin), .eco-modal (--blur, --md, --xs, __actions, __body, __close, __text, __title), .eco-modal-overlay, .eco-on, .eco-pagination (--minimal, __btns, __gap, __info, __next, __page, __pages, __prev), .eco-progress, .eco-progress-circle (--md, --sm, --xxs, __v), .eco-progress-field (__head, __hint, __info, __label, __status, __value), .eco-progress-float (--bottom), .eco-progress-row, .eco-segment (--brand, --lg, --md, --sm), .eco-tab, .eco-table (__actions, __check, __hit, __person, __sort), .eco-table-card (__actions, __body, __desc, __foot, __head, __heading, __title), .eco-tabpanel, .eco-tabs (--accent, --brand, --fill, --inverse, --md, --pill)

### Charts (Components) — https://design.pdp.uz/ds/sayt/#charts

**One chart — one idea.** Charts have their own tokens: six categorical colors and two five-step scales. The first series is always the brand color; the other five are the brand’s own colors, black and greys; the token itself switches with the mode. Every chart answers one question: one series is highlighted, values are labeled directly, and the grid is barely visible.

- Blocks: [Palette: six series and two scales](https://design.pdp.uz/ds/sayt/#charts-palitra-olti-seriya); [Line chart: change over time](https://design.pdp.uz/ds/sayt/#charts-chiziqli-grafik-vaqt); [Bars and donut: comparison and share](https://design.pdp.uz/ds/sayt/#charts-ustun-va-donut); [Scales: sequential and diverging](https://design.pdp.uz/ds/sayt/#charts-shkalalar-ketma-ket); [KPI tile: number, change and trend](https://design.pdp.uz/ds/sayt/#charts-kpi-plitka-raqam); [Rules and sizes](https://design.pdp.uz/ds/sayt/#charts-qoidalar-va-olchamlar); [Stacked bar: composition over time](https://design.pdp.uz/ds/sayt/#charts-toplangan-ustun-tarkib); [Annual statistics: months and a KPI pair](https://design.pdp.uz/ds/sayt/#charts-yillik-statistika-oylar); [Chart anatomy](https://design.pdp.uz/ds/sayt/#charts-grafik-anatomiyasi); [Which chart for which question](https://design.pdp.uz/ds/sayt/#charts-qaysi-savolga-qaysi); [Line and area: trend, crosshair and tooltip](https://design.pdp.uz/ds/sayt/#charts-chiziq-va-maydon); [Bars: vertical, grouped, stacked and 100%](https://design.pdp.uz/ds/sayt/#charts-ustunlar-vertikal); [Share: donut, pie, rings and gauge](https://design.pdp.uz/ds/sayt/#charts-ulush-donut-doira); [KPI tiles: sparkline, mini bars and target](https://design.pdp.uz/ds/sayt/#charts-kpi-plitkalar-sparkline); [Activity calendar: density by day](https://design.pdp.uz/ds/sayt/#charts-faollik-kalendari-kun); [Funnel: admissions and sales](https://design.pdp.uz/ds/sayt/#charts-voronka-qabul-va); [Scatter, bubble and radar](https://design.pdp.uz/ds/sayt/#charts-nuqtali-pufakli-va); [Treemap and waterfall](https://design.pdp.uz/ds/sayt/#charts-treemap-va-sharshara); [Combo: bars and line, two axes](https://design.pdp.uz/ds/sayt/#charts-kombinatsiya-ustun-va); [Progress and bullet](https://design.pdp.uz/ds/sayt/#charts-progress-va-bullet); [Flow: Sankey diagram](https://design.pdp.uz/ds/sayt/#charts-oqim-sankey-diagrammasi); [Timeline: mini Gantt](https://design.pdp.uz/ds/sayt/#charts-vaqt-jadvali-mini); [Leaderboard: ranked list with bars](https://design.pdp.uz/ds/sayt/#charts-reyting-tartiblangan); [Big number: the chart as illustration](https://design.pdp.uz/ds/sayt/#charts-katta-raqam-grafik); [States: empty, loading, error](https://design.pdp.uz/ds/sayt/#charts-holatlar-bosh)
- PDP classes: .eco-badge (--error, --sm, --success), .eco-btn (--sm, --tertiary), .eco-icon (--sm), .eco-link, .eco-skeleton, .eco-table

### Chip types (Components) — https://design.pdp.uz/ds/sayt/#chip-types

**One shape, four jobs.** A chip is a small, compact control. It always looks the same (neutral fill, pill or 8 px corners, no stroke), but it has four jobs: it suggests an action, filters a list, shows an entered value or offers a ready-made reply. Don’t mix jobs — one type per row. Built on .eco-chip (Badges and statuses); a label that shows a status is a badge, not a chip. Inspired by Material Design 3 “Chips” and Apple HIG “Token fields”.

- Blocks: [Four types](https://design.pdp.uz/ds/sayt/#chip-types-tort-tur); [Behaviour and accessibility](https://design.pdp.uz/ds/sayt/#chip-types-xatti-harakat-va)
- PDP classes: .eco-avatar (--3d), .eco-chip (--assist, --input, --menu, --suggest, __x)

### Rich tooltip and submenu (Components) — https://design.pdp.uz/ds/sayt/#popovers

**Longer explanation — rich tooltip; deeper menu — submenu.** A plain tooltip gives a one-line name (Buttons). When a term, a limit or a calculation needs explaining, use a rich tooltip: a title, two or three lines of text and an optional link. When one group of actions in a menu grows too large, use a nested submenu — one level only. Inspired by Material Design 3 “Rich tooltips”, “Cascading menus” and Apple HIG “Popovers”.

- Blocks: [Rich tooltip](https://design.pdp.uz/ds/sayt/#popovers-rich-tooltip); [Nested menu](https://design.pdp.uz/ds/sayt/#popovers-ichma-ich-menyu)
- PDP classes: .eco-btn (--link-color, --link-gray), .eco-menu (__end, __item, __item--danger, __sep, __title), .eco-rtip (__acts, __text, __title)

### Commands and search (More components) — https://design.pdp.uz/ds/sayt/#command

**In one keystroke: ⌘K, combobox and Kbd.** In a CRM with many sections, hunting through menus with the mouse is slow. The command palette (⌘K) finds a page, a student and an action in a single search; the combobox lets you search and pick from a long list; Kbd is a keyboard shortcut label. Inspired by shadcn/ui (Command, Combobox, Kbd); shape and colours use PDP tokens.

- Blocks: [Command palette — ⌘K](https://design.pdp.uz/ds/sayt/#command-buyruqlar-paneli-k); [Combobox — search and pick](https://design.pdp.uz/ds/sayt/#command-combobox-qidirib-tanlash); [Kbd — keyboard shortcut label](https://design.pdp.uz/ds/sayt/#command-kbd-tezkor-tugma)
- PDP classes: .eco-avatar (--3d), .eco-chip, .eco-cmd (__empty, __foot, __group, __input, __item, __label, __list, __search), .eco-combobox (--multi, __chev, __empty, __field), .eco-field, .eco-hint, .eco-icon (--sm), .eco-input, .eco-kbd (--lg, --on-dark), .eco-kbd-combo, .eco-label, .eco-menu (__body, __check, __desc, __end, __item, __title)

### Date picker (More components) — https://design.pdp.uz/ds/sayt/#datepicker

**Calendar, date and range: for classes, deadlines and reports.** Class day, assignment deadline and reporting period are the most used fields in the CRM. One calendar in three views: an inline calendar, a date picker that opens below a field, and a range picker with preset periods. Inspired by shadcn/ui (Calendar, Date Picker); colours use PDP tokens: the selected day is a brand fill with a white number, the range is a brand tint.

- Blocks: [Calendar and date picker](https://design.pdp.uz/ds/sayt/#datepicker-kalendar-va-sana); [Range picker — with preset periods](https://design.pdp.uz/ds/sayt/#datepicker-oraliq-tanlash-tayyor)
- PDP classes: .eco-btn (--icon, --primary, --sm, --tertiary, --xs), .eco-cal (__cell, __day, __grid, __head, __month, __months, __nav, __nav--next, __nav--prev, __title, __wd), .eco-field, .eco-hint, .eco-label, .eco-popover

### Panels and layers (More components) — https://design.pdp.uz/ds/sayt/#overlays

**Without leaving the page: panel, card, menu and notification.** View a record without leaving the list (Sheet), quick info on hovering a name (Hover card), the right-click menu (Context menu) and the results of several background processes (Toast stack). Inspired by shadcn/ui (Sheet, Drawer, Hover Card, Context Menu, Sonner); surfaces match .eco-menu and .eco-modal: white layer, shadow, no stroke.

- Blocks: [Sheet — side and bottom panel](https://design.pdp.uz/ds/sayt/#overlays-sheet-yon-va); [Hover card — a short card over a name](https://design.pdp.uz/ds/sayt/#overlays-hover-card-ism); [Context menu — right click](https://design.pdp.uz/ds/sayt/#overlays-context-menu-ong); [Toast stack — several results](https://design.pdp.uz/ds/sayt/#overlays-toast-toplami-bir)
- PDP classes: .eco-avatar (--3d), .eco-badge (--dot, --error, --success, --warning), .eco-btn (--icon, --primary, --sm, --tertiary), .eco-hovercard (__foot, __head, __name, __role, __stats), .eco-menu (__body, __item, __item--danger, __kbd, __sep, __title), .eco-segment (--sm), .eco-sheet (--end, __body, __foot, __grip, __head, __sub, __title), .eco-toast (__act, __body, __x), .eco-toaster

### Data table (More components) — https://design.pdp.uz/ds/sayt/#datatable

**Working with lists: search, filter, select and bulk actions.** The CRM’s main screen is a list of students, payments and groups. The table card (App components) gets a toolbar: search, faceted filters (with a count next to each value), visible columns, sorting, row selection and a bulk actions bar. Inspired by shadcn/ui Data Table.

- Blocks: [Toolbar and bulk actions](https://design.pdp.uz/ds/sayt/#datatable-asboblar-qatori-va)
- PDP classes: .eco-avatar (--3d), .eco-badge (--brand, --sm), .eco-btn (--icon, --link, --primary, --secondary, --sm, --tertiary, --xs), .eco-check, .eco-icon, .eco-input (--sm), .eco-input-wrap, .eco-menu (__item), .eco-pagination (__btns), .eco-segment (--sm), .eco-skeleton, .eco-table (__check, __sort), .eco-table-card (__actions, __body, __foot, __head, __heading, __title)

### Table settings (More components) — https://design.pdp.uz/ds/sayt/#table-settings

**Table settings: density, expandable rows and a pinned column.** CRM staff work with tables all day: some need many rows on one screen, others want them roomy and easy to read. Three densities, extra details inside a row (without leaving the page) and a first column that stays put while scrolling sideways. Search, filters, column picker and bulk actions are in Data table. Inspired by IBM Carbon (Data table) and Gravity UI (TableColumnSetup).

- EcoSystem only: the block always uses the EcoSystem tokens (in the DS it is wrapped in class="eco-lock-ecosystem"); do not make per-brand variants.
- Status: Beta (since 06.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Live example](https://design.pdp.uz/ds/sayt/#table-settings-jonli-namuna); [Three densities](https://design.pdp.uz/ds/sayt/#table-settings-uch-zichlik); [Keyboard, screen readers and rules](https://design.pdp.uz/ds/sayt/#table-settings-klaviatura-ekran-oqigich)
- PDP classes: .eco-avatar (--3d, --sm), .eco-badge (--info, --sm, --success, --warning), .eco-btn (--primary, --secondary, --sm, --tertiary), .eco-label, .eco-only, .eco-segment (--sm), .eco-table (__person, __sort), .eco-table-card (__head, __heading, __title)
- Nextcloud DOM classes reproduced in the example: .snip-fold (__chev, __sum)

### Structure components (More components) — https://design.pdp.uz/ds/sayt/#structure

**Showing lots of content in order: accordion, tree, stepper, carousel and panels.** A course syllabus, a folder structure, sign-up steps, an announcement feed and a two- or three-column workspace — five components. Inspired by shadcn/ui (Accordion, Carousel, Resizable) and Magic UI (File Tree); all are keyboard-operable and switch instantly under “Reduce motion”.

- Blocks: [Accordion and Tree view](https://design.pdp.uz/ds/sayt/#structure-accordion-va-tree); [Stepper — step-by-step form](https://design.pdp.uz/ds/sayt/#structure-stepper-bosqichli-forma); [Carousel — announcement and course feed](https://design.pdp.uz/ds/sayt/#structure-carousel-elonlar-va); [Resizable — panels you can resize](https://design.pdp.uz/ds/sayt/#structure-resizable-olchami)
- PDP classes: .eco-accordion (__body), .eco-btn (--icon, --primary, --sm, --tertiary), .eco-carousel (__dots, __head, __slide, __track), .eco-resizable (__handle, __pane), .eco-stepper (__dot, __t), .eco-tree (__meta, __row)

### Field patterns (More components) — https://design.pdp.uz/ds/sayt/#field-patterns

**In-field actions, counter, groups and errors.** Field anatomy and states are covered in Forms (label, hint, error text, prefix and suffix). This section covers the patterns built from them: a button and state inside the field, a character counter, field groups and their orientation, inline and summary errors, and validation timing. Inspired by shadcn/ui (Input Group, Field) and Apple HIG “Entering data”.

- Blocks: [Inside the field: button, shortcut, state](https://design.pdp.uz/ds/sayt/#field-patterns-maydon-ichida-tugma); [Groups and orientation](https://design.pdp.uz/ds/sayt/#field-patterns-guruh-va-yonalish); [Errors: inline and summary list](https://design.pdp.uz/ds/sayt/#field-patterns-xatolar-joyida-va); [Validation timing](https://design.pdp.uz/ds/sayt/#field-patterns-tekshiruv-vaqti)
- PDP classes: .eco-btn (--block, --ghost, --icon, --primary, --sm), .eco-field, .eco-hint, .eco-icon, .eco-input (--sm), .eco-input-group (__addon, __addon--icon, __btn, __input), .eco-label, .eco-loader (--sm, __core, __o, __ray, __spin), .eco-switch

### Tag field (More components) — https://design.pdp.uz/ds/sayt/#tag-input

**Tag field: several values in one field.** Course tags, filter directions, client labels in a CRM — several values, each a tag inside the field. Typing narrows the list, a missing value can be created, Backspace removes the last tag. A single value takes a combobox. Inspired by IBM Carbon (Multiselect), Gravity UI (Select multiple) and Atlassian (Select).

- EcoSystem only: the block always uses the EcoSystem tokens (in the DS it is wrapped in class="eco-lock-ecosystem"); do not make per-brand variants.
- Status: Beta (since 06.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Live example: Light and Dark](https://design.pdp.uz/ds/sayt/#tag-input-jonli-namuna-light); [Anatomy and sizes](https://design.pdp.uz/ds/sayt/#tag-input-anatomiya-va-olchamlar); [States](https://design.pdp.uz/ds/sayt/#tag-input-holatlar); [Keyboard and screen readers](https://design.pdp.uz/ds/sayt/#tag-input-klaviatura-va-ekran); [When and how](https://design.pdp.uz/ds/sayt/#tag-input-qachon-va-qanday)
- PDP classes: .eco-btn (--primary, --secondary, --sm), .eco-field, .eco-hint, .eco-input (--sm), .eco-label, .eco-menu (__body, __check, __item, __title), .eco-only, .eco-tag (__new, __x), .eco-tags (--sm, __count, __empty, __input, __list)
- Nextcloud DOM classes reproduced in the example: .demo (--surface, __label), .snip-fold (__chev, __sum), .stage (--lbl2)

### Toolbar (More components) — https://design.pdp.uz/ds/sayt/#toolbar

**Toggle group, split button, toolbar and menu bar.** In a text editor, a table or a file view, actions of the same kind are gathered into one row. Toggle group — several independent on/off toggles; split button — a main action and its variants; toolbar — up to 3 groups; menu bar — document editors only. For a single choice (view, period) use a segment; for joined buttons, a Joined button group. Inspired by shadcn/ui (Toggle Group, Menubar), M3 (Split button, Toolbars), Apple HIG (Toolbars).

- Blocks: [Toggle group and split button](https://design.pdp.uz/ds/sayt/#toolbar-toggle-guruh-va); [Toolbar](https://design.pdp.uz/ds/sayt/#toolbar-asboblar-paneli); [Menu bar](https://design.pdp.uz/ds/sayt/#toolbar-menyu-paneli)
- PDP classes: .eco-btn (--ghost, --icon, --primary, --sm, --tertiary), .eco-menu (__body, __check, __item, __kbd, __title), .eco-segment (--sm)

### Inline edit (More components) — https://design.pdp.uz/ds/sayt/#edit-save

**Inline editing and save bar.** Much of the work in a CRM is fixing a single value: a group name, a phone number, a note, a status. No separate form opens for this: the value is edited in place and saved with Enter. On a settings page with several fields, a save bar appears at the top as soon as a change begins — “Save” and “Cancel” are always in the same place. The decision rule is in Settings (“immediately or Save”); the leave prompt is in Modality. Inspired by Atlassian Design System (Inline edit) and Shopify Polaris (Contextual save bar).

- Blocks: [Inline edit: click a value](https://design.pdp.uz/ds/sayt/#edit-save-joyida-tahrirlash); [Contextual save bar](https://design.pdp.uz/ds/sayt/#edit-save-kontekst-saqlash-paneli); [Which to use](https://design.pdp.uz/ds/sayt/#edit-save-qaysi-biri)
- PDP classes: .eco-badge (--dot, --success), .eco-btn (--icon, --link-gray, --primary, --sm, --tertiary), .eco-choice, .eco-field, .eco-hint, .eco-input, .eco-input-group (--sm, __addon, __input), .eco-label, .eco-segment (--sm), .eco-switch, .eco-toast

### Status indicators (More components) — https://design.pdp.uz/ds/sayt/#status-set

**Status indicators: shape, colour and text together.** If a status is conveyed by colour alone, people with colour blindness (one in 12 men) and anyone reading a black-and-white printout won’t see it. So a status combines three cues: shape (an icon or a geometric mark), colour and a word. The badge and status vocabulary is in Badges and statuses, notifications in Notification centre. Inspired by IBM Carbon (Status indicators) and Atlassian (Lozenge).

- Blocks: [Icon indicators](https://design.pdp.uz/ds/sayt/#status-set-ikonka-korsatkichlari); [Shape indicators: for dense tables](https://design.pdp.uz/ds/sayt/#status-set-shakl-korsatkichlari); [Change indicator](https://design.pdp.uz/ds/sayt/#status-set-ozgarish-korsatkichi); [Severity levels and lozenges](https://design.pdp.uz/ds/sayt/#status-set-muhimlik-darajasi-va)

### Saved views (More components) — https://design.pdp.uz/ds/sayt/#saved-views

**Saved views and active filters.** CRM lists are opened with the same filter every day: “Debtors”, “Today’s applications”, “My groups”. A saved view is a tab above the list: filter, sort and search under one name. When the filter changes, “Save view” appears. For table tools and bulk actions, see Data table, for search, see Search. Inspired by Shopify Polaris (Index filters).

- Blocks: [Live example: student list](https://design.pdp.uz/ds/sayt/#saved-views-jonli-namuna-oquvchilar)
- PDP classes: .eco-avatar (--3d, --sm), .eco-badge (--brand, --dot, --error, --success), .eco-btn (--icon, --primary, --secondary, --sm, --tertiary), .eco-input (--sm), .eco-tab, .eco-tabs (--pill, --sm)

### Number input (More components) — https://design.pdp.uz/ds/sayt/#number-input

**Number input: change a small number in one click.** Ticket count, seats in a group, lesson hours, discount percentage — a small number with known limits. People can type the number or change it one at a time with −/+. A large or exact number (price, phone, card) takes a regular field. Inspired by IBM Carbon (Number input) and Gravity UI (NumberInput).

- EcoSystem only: the block always uses the EcoSystem tokens (in the DS it is wrapped in class="eco-lock-ecosystem"); do not make per-brand variants.
- Status: Beta (since 06.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Live example: Light and Dark](https://design.pdp.uz/ds/sayt/#number-input-jonli-namuna-light); [Anatomy and sizes](https://design.pdp.uz/ds/sayt/#number-input-anatomiya-va-olchamlar); [States](https://design.pdp.uz/ds/sayt/#number-input-holatlar); [Keyboard and screen readers](https://design.pdp.uz/ds/sayt/#number-input-klaviatura-va-ekran); [When and how](https://design.pdp.uz/ds/sayt/#number-input-qachon-va-qanday)
- PDP classes: .eco-btn (--primary, --secondary, --sm), .eco-field, .eco-hint, .eco-label, .eco-num (--block, --end, --sm, __btn, __input, __unit), .eco-only
- Nextcloud DOM classes reproduced in the example: .demo (--surface, __label), .snip-fold (__chev, __sum), .stage (--lbl2)

### Rating and feedback (More components) — https://design.pdp.uz/ds/sayt/#rating

**Rating and feedback: stars, scale and “Was this helpful?”.** Course and lesson pages, post-event surveys, the teacher’s dashboard — everywhere the same question: “how was it?”. A star rating for input and display, a rating distribution, a recommendation scale (NPS, 0–10) and a one-click “Was this helpful?”. For a full survey, see App Forms. Inspired by Ant Design and MUI (Rating), shadcn/ui (Questionnaire) and Vercel Geist (Feedback).

- EcoSystem only: the block always uses the EcoSystem tokens (in the DS it is wrapped in class="eco-lock-ecosystem"); do not make per-brand variants.
- Status: Beta (since 06.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Star rating: Light and Dark](https://design.pdp.uz/ds/sayt/#rating-yulduz-bahosi-light); [Anatomy and sizes](https://design.pdp.uz/ds/sayt/#rating-anatomiya-va-olchamlar); [Overall rating and reviews](https://design.pdp.uz/ds/sayt/#rating-umumiy-baho-va); [Recommendation scale (NPS) and “Was this helpful?”](https://design.pdp.uz/ds/sayt/#rating-tavsiya-shkalasi-nps); [Keyboard, screen readers and rules](https://design.pdp.uz/ds/sayt/#rating-klaviatura-ekran-oqigich)
- PDP classes: .eco-avatar (--3d, --sm), .eco-btn (--primary, --secondary, --sm, --tertiary), .eco-helpful (__acts, __done, __more), .eco-input, .eco-label, .eco-only, .eco-rating (--input, --lg, --read, --sm, __fill, __star), .eco-rating-sum (__bar, __bars, __big), .eco-scale (__ends, __row)
- Nextcloud DOM classes reproduced in the example: .demo (--surface, __label), .snip-fold (__chev, __sum)

### Countdown and deadline (More components) — https://design.pdp.uz/ds/sayt/#countdown

**Countdown and deadline: how long is left and until when.** Admissions closing, an open day, an assignment deadline — people need to know two things: how much time is left and the exact day and time. The large countdown is for landing and admissions pages, the small deadline tag for lists, cards and dashboards. Date format is in Writing guidelines, the event page in Event page.

- EcoSystem only: the block always uses the EcoSystem tokens (in the DS it is wrapped in class="eco-lock-ecosystem"); do not make per-brand variants.
- Status: Beta (since 06.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Large countdown: admissions page](https://design.pdp.uz/ds/sayt/#countdown-katta-sanoq-qabul); [On a card: Light and Dark](https://design.pdp.uz/ds/sayt/#countdown-kartada-light-va); [Deadline tag: lists and dashboard](https://design.pdp.uz/ds/sayt/#countdown-muddat-yorligi-royxat); [Anatomy, screen readers and rules](https://design.pdp.uz/ds/sayt/#countdown-anatomiya-ekran-oqigich)
- PDP classes: .eco-btn (--lg, --primary, --secondary, --sm, --tertiary), .eco-countdown (--lg, --on-dark, --sm, __unit), .eco-deadline (--live, --off, --soon, --today), .eco-only
- Nextcloud DOM classes reproduced in the example: .demo (--surface, __label), .snip-fold (__chev, __sum), .stage (--lbl2)

### Video lesson player (More components) — https://design.pdp.uz/ds/sayt/#video-player

**Video lesson player: chapters, speed and the next lesson.** A lesson video on a course page: our own controls over the native <video> element — a timeline with chapters, speed, captions, quality, fullscreen, a chapter list and the lesson transcript, and a «Next lesson» card at the end. Keys work as on YouTube. Inspired by course platforms and Apple HIG (Playing video).

- EcoSystem only: the block always uses the EcoSystem tokens (in the DS it is wrapped in class="eco-lock-ecosystem"); do not make per-brand variants.
- Status: Beta (since 06.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Live example](https://design.pdp.uz/ds/sayt/#video-player-jonli-namuna); [Anatomy and sizes](https://design.pdp.uz/ds/sayt/#video-player-anatomiya-va-olchamlar); [States](https://design.pdp.uz/ds/sayt/#video-player-holatlar); [Keyboard and screen readers](https://design.pdp.uz/ds/sayt/#video-player-klaviatura-va-ekran); [When and how](https://design.pdp.uz/ds/sayt/#video-player-qachon-va-qanday)
- PDP classes: .eco-btn (--glass, --primary, --secondary, --sm), .eco-chapter, .eco-chapters, .eco-loader (--md, __core, __o, __ray, __spin), .eco-menu (__body, __check, __desc, __item, __label), .eco-only, .eco-player (__big, __btn, __btn--mid, __btn--opt, __btn--txt, __cc, __center, __chap, __end, __next, __pop, __poster, __resume, __row, __scrim, __scrub, __seg, __thumb, __time, __tip, __ui, __video), .eco-segment (--sm), .eco-tab, .eco-tabs (--pill), .eco-transcript
- Nextcloud DOM classes reproduced in the example: .snip-fold (__chev, __sum)

### Gallery and viewer (More components) — https://design.pdp.uz/ds/sayt/#lightbox

**Gallery and image viewer: from the grid to full screen.** Event photos, student work, a portfolio: images in a grid open in a full-screen viewer — previous and next, a counter, a caption, zoom. The page behind is inert while the viewer is open; on close, focus returns to the image that opened it. Inspired by Gravity UI (FilePreview), Polaris (MediaCard) and Apple Photos.

- EcoSystem only: the block always uses the EcoSystem tokens (in the DS it is wrapped in class="eco-lock-ecosystem"); do not make per-brand variants.
- Status: Beta (since 06.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Live example](https://design.pdp.uz/ds/sayt/#lightbox-jonli-namuna); [Viewer: Light and Dark](https://design.pdp.uz/ds/sayt/#lightbox-koruvchi-light-va); [Keyboard, focus and screen readers](https://design.pdp.uz/ds/sayt/#lightbox-klaviatura-fokus-va); [When and how](https://design.pdp.uz/ds/sayt/#lightbox-qachon-va-qanday)
- PDP classes: .eco-btn (--icon, --secondary, --sm), .eco-gallery (--feature, __item, __more), .eco-lightbox (--inline, __bottom, __cap, __count, __frame, __hint, __nav, __stage, __thumbs, __top), .eco-loader (--md, __core, __o, __ray, __spin), .eco-only
- Nextcloud DOM classes reproduced in the example: .snip-fold (__chev, __sum)

### Sign-in pages (Page templates) — https://design.pdp.uz/ds/sayt/#auth

**Sign in, sign up and password reset.** The sign-in page is the product’s first screen: one task, one main button, nothing extra. The main method is phone and SMS code; email and password is the second route. Two layouts: a centred card on a grey background (app, CRM) and two columns (with a brand panel — website, account). Inspired by shadcn/ui Blocks (login, signup); fields — Forms, copy — Writing guidelines.

- Blocks: [Sign in: phone and SMS code](https://design.pdp.uz/ds/sayt/#auth-kirish-telefon-va); [Sign up](https://design.pdp.uz/ds/sayt/#auth-royxatdan-otish); [Password reset: three screens](https://design.pdp.uz/ds/sayt/#auth-parolni-tiklash-uch); [Technical rules](https://design.pdp.uz/ds/sayt/#auth-texnik-qoidalar)
- PDP classes: .eco-btn (--block, --link-color, --link-gray, --primary, --tertiary), .eco-check, .eco-choice, .eco-field, .eco-hint, .eco-icon, .eco-input, .eco-input-group (__addon, __input), .eco-input-reveal, .eco-input-wrap, .eco-label, .eco-otp (__cell, __foot, __row, __sep), .eco-segment (--sm)

### Application: question pages (Page templates) — https://design.pdp.uz/ds/sayt/#apply-flow

**Multi-step application: question, check and confirmation.** A course enrolment, admission or grant application is not one long form but short question pages: one question per page (or 2–3 related fields), then “Check your answers” and a confirmation page. People focus on one thing, make fewer errors, and it’s easy to read on mobile. Inspired by the GOV.UK Design System (Question pages, Check answers, Confirmation pages, Dates); fields — Forms, errors — Field patterns, multi-day applications — Task list.

- Blocks: [Live example: course application](https://design.pdp.uz/ds/sayt/#apply-flow-jonli-namuna-kursga); [Dates: day, month, year — separate fields](https://design.pdp.uz/ds/sayt/#apply-flow-sana-kun-oy); [Answer list and summary cards](https://design.pdp.uz/ds/sayt/#apply-flow-javoblar-royxati-va); [Rules](https://design.pdp.uz/ds/sayt/#apply-flow-qoidalar)
- PDP classes: .eco-btn (--link-color, --link-gray, --primary, --sm, --tertiary), .eco-check, .eco-choice, .eco-field, .eco-hint, .eco-input, .eco-input-group (__addon, __input), .eco-label, .eco-radio, .eco-segment (--sm)

### Course page (Page templates) — https://design.pdp.uz/ds/sayt/#tpl-course

**Course page: hero, programme, teachers, pricing and application.** A full-page template built only from existing components: required blocks (header, hero, numbers, CTA band, footer), akkordeon, 3D avatars, cards, buttons and background patterns. Tartib — Page anatomy: the “Landing” layout. The sample is drawn at 1280 px wide and scaled down; “Open full screen” is a live page at content width, “Phone” is 390 px.

- Blocks: [Live example: Frontend development course](https://design.pdp.uz/ds/sayt/#tpl-course-jonli-namuna-frontend); [Which components it uses](https://design.pdp.uz/ds/sayt/#tpl-course-qaysi-komponentlardan); [Page skeleton](https://design.pdp.uz/ds/sayt/#tpl-course-sahifa-skeleti)
- PDP classes: .eco-accordion (--faq, __body), .eco-avatar (--2xl, --3d), .eco-badge (--brand, --dot, --solid, --success), .eco-btn (--block, --icon, --lg, --primary, --sm, --tertiary), .eco-card (--raised, __meta, __title), .eco-progress, .eco-segment (--sm)

### Admissions page (Page templates) — https://design.pdp.uz/ds/sayt/#tpl-admission

**Admissions page: steps, documents and deadlines.** An admissions or grant announcement must tell people at a glance what to do, which documents to bring and by when. The page answers three questions: steps (Step-by-step navigation), documents (Task list) and deadlines (a timeline). The primary button leads to the application flow.

- Blocks: [Live example: Admissions 2026](https://design.pdp.uz/ds/sayt/#tpl-admission-jonli-namuna-qabul); [Which components it uses](https://design.pdp.uz/ds/sayt/#tpl-admission-qaysi-komponentlardan); [Page skeleton](https://design.pdp.uz/ds/sayt/#tpl-admission-sahifa-skeleti)
- PDP classes: .eco-accordion (--faq, __body), .eco-badge (--dot, --solid, --warning), .eco-btn (--block, --icon, --lg, --primary, --sm, --tertiary), .eco-card (--raised, __meta, __title), .eco-progress, .eco-segment (--sm)

### Event page (Page templates) — https://design.pdp.uz/ds/sayt/#tpl-event

**Event page: date, programme, speakers and registration.** Open day, masterclass or hackathon — one page: when, where, what happens and how to sign up. The programme is a timeline (Activity rule: dashed, light, from the node centre), registration — Forms, and in place of a map — a token tile (no external map or image).

- Blocks: [Live example: Open day](https://design.pdp.uz/ds/sayt/#tpl-event-jonli-namuna-ochiq); [Which components it uses](https://design.pdp.uz/ds/sayt/#tpl-event-qaysi-komponentlardan); [Page skeleton](https://design.pdp.uz/ds/sayt/#tpl-event-sahifa-skeleti)
- PDP classes: .eco-avatar (--2xl, --3d, --sm), .eco-badge (--brand), .eco-btn (--block, --icon, --lg, --primary, --sm, --tertiary), .eco-card (--raised, __meta, __title), .eco-check, .eco-choice, .eco-field, .eco-hint, .eco-input, .eco-input-group (__addon, __input), .eco-label, .eco-progress, .eco-segment (--sm)

### News and article (Page templates) — https://design.pdp.uz/ds/sayt/#tpl-news

**News list and article page.** Two linked templates: the list (featured story, filter chips, cards, circular pagination) and the article (720 px reading column, quote, author, sharing, related stories). Covers use token fields and background patterns, no external images; chips — Chip types, pagination — App components.

- Blocks: [Live example: news and article](https://design.pdp.uz/ds/sayt/#tpl-news-jonli-namuna-yangiliklar); [Which components it uses](https://design.pdp.uz/ds/sayt/#tpl-news-qaysi-komponentlardan); [Page skeleton](https://design.pdp.uz/ds/sayt/#tpl-news-sahifa-skeleti)
- PDP classes: .eco-avatar (--3d, --lg, --sm), .eco-badge (--brand), .eco-btn (--block, --icon, --lg, --primary, --secondary, --sm, --tertiary), .eco-chip, .eco-icon, .eco-input-group (--sm, __addon, __addon--icon, __input), .eco-pagination (__gap, __info, __next, __page, __pages, __prev), .eco-segment (--sm)

### Contacts and branches (Page templates) — https://design.pdp.uz/ds/sayt/#tpl-contact

**Contact page: channels, branches, opening hours and enquiries.** People come to this page with one question: “Where do I write or go?” First the quick channels (phone, Telegram, email), then the branches — city filter, “open now” status, address and landmark — and finally the enquiry form. Status — Status indicators, filter — Chip types, form — Forms.

- Blocks: [Live example: contacts and branches](https://design.pdp.uz/ds/sayt/#tpl-contact-jonli-namuna-aloqa); [Which components it uses](https://design.pdp.uz/ds/sayt/#tpl-contact-qaysi-komponentlardan); [Page skeleton](https://design.pdp.uz/ds/sayt/#tpl-contact-sahifa-skeleti)
- PDP classes: .eco-badge (--dot, --success, --warning), .eco-btn (--block, --icon, --lg, --primary, --sm, --tertiary), .eco-card, .eco-chip, .eco-choice, .eco-field, .eco-hint, .eco-input, .eco-input-group (__addon, __input), .eco-label, .eco-radio, .eco-segment (--sm)

### Error pages (Page templates) — https://design.pdp.uz/ds/sayt/#tpl-error

**Error pages: what happened and where to go next.** An outdated link, a server failure, planned maintenance or missing access — each gets its own page. All share one structure: the header and footer stay in place, the heading says what happened, one sentence gives the reason and the next step, and below are ways to carry on. No decoration, jokes or “Oops”. Errors and empty states inside content are in States. Inspired by GOV.UK (Page not found, Service unavailable) and Vercel Geist (Error).

- EcoSystem only: the block always uses the EcoSystem tokens (in the DS it is wrapped in class="eco-lock-ecosystem"); do not make per-brand variants.
- Status: Beta (since 06.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Live example: four pages](https://design.pdp.uz/ds/sayt/#tpl-error-jonli-namuna-tort); [Structure and copy](https://design.pdp.uz/ds/sayt/#tpl-error-tuzilma-va-matn); [Rules](https://design.pdp.uz/ds/sayt/#tpl-error-qoidalar)
- PDP classes: .eco-btn (--primary, --secondary, --sm, --tertiary), .eco-icon, .eco-input, .eco-input-wrap, .eco-only, .eco-segment (--sm)
- Nextcloud DOM classes reproduced in the example: .snip-fold (__chev, __sum)

### Email basics (Email) — https://design.pdp.uz/ds/sayt/#email

**Email: one layout for every email client.** A single foundation for transactional emails and newsletters: a 600 px column, table layout, inline styles and a system-font fallback stack. Colours come from EcoSystem tokens and are converted to HEX at build time; dark mode uses its own palette in Apple Mail, iOS and Outlook, and Gmail’s inversion doesn’t break the logo. Ready-made templates — Email templates, signature — Email signature, testing — Email: testing. Inspired by Good Email Code (Parcel), Litmus, Can I Email, and MJML and Maizzle output.

- EcoSystem only: the block always uses the EcoSystem tokens (in the DS it is wrapped in class="eco-lock-ecosystem"); do not make per-brand variants.
- Status: Beta (since 06.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Foundation: every block in one email](https://design.pdp.uz/ds/sayt/#email-asos-barcha-bloklar); [Blocks](https://design.pdp.uz/ds/sayt/#email-bloklar); [Grid and spacing](https://design.pdp.uz/ds/sayt/#email-tor-va-oraliqlar); [Typography and font fallbacks](https://design.pdp.uz/ds/sayt/#email-tipografika-va-shrift); [Colours: token → HEX](https://design.pdp.uz/ds/sayt/#email-ranglar-token-hex); [Dark mode: three behaviours](https://design.pdp.uz/ds/sayt/#email-qorongi-rejim-uch); [Code: shell and button](https://design.pdp.uz/ds/sayt/#email-kod-qobiq-va); [Rules](https://design.pdp.uz/ds/sayt/#email-qoidalar)
- PDP classes: .eco-btn (--secondary, --sm), .eco-only, .eco-segment (--sm)
- Nextcloud DOM classes reproduced in the example: .snip-fold (__chev, __sum)

### Email templates (Email) — https://design.pdp.uz/ds/sayt/#email-templates

**Email shablonlari: {{EMAIL_COUNT}} ta tayyor xat, uch tilda.** Sign-up, password, application, payment, lesson, certificate, event and weekly digest — the emails students, parents and partners receive most. Each one is ready-to-send HTML plus a hand-written plain-text version, in Uzbek, Russian and English. The copy is sample text: the product substitutes its own names, numbers and links (&#123;&#123;name&#125;&#125; and other variables are listed in the table). Foundations and rules — Email basics.

- EcoSystem only: the block always uses the EcoSystem tokens (in the DS it is wrapped in class="eco-lock-ecosystem"); do not make per-brand variants.
- Status: Beta (since 06.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Viewer](https://design.pdp.uz/ds/sayt/#email-templates-koruvchi); [Templates and variables](https://design.pdp.uz/ds/sayt/#email-templates-shablonlar-va); [Copy rules](https://design.pdp.uz/ds/sayt/#email-templates-matn-qoidalari)
- PDP classes: .eco-btn (--secondary, --sm), .eco-only, .eco-segment (--sm)

### Email signature (Email) — https://design.pdp.uz/ds/sayt/#email-signature

**Email signature: one look for every employee.** Name, job title, contacts and logo — nothing else: no banners, quotes, social icons or emoji (brandbook 7.10). Fill in the fields, click “Copy signature” and paste it into your email client’s signature settings. Every signature also has a plain-text version — for plain-text emails and mobile.

- EcoSystem only: the block always uses the EcoSystem tokens (in the DS it is wrapped in class="eco-lock-ecosystem"); do not make per-brand variants.
- Status: Beta (since 06.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Create a signature](https://design.pdp.uz/ds/sayt/#email-signature-imzo-yaratish); [How to install](https://design.pdp.uz/ds/sayt/#email-signature-qanday-ornatiladi); [Rules](https://design.pdp.uz/ds/sayt/#email-signature-qoidalar)
- PDP classes: .eco-btn (--primary, --secondary, --sm, --tertiary), .eco-field, .eco-input, .eco-label, .eco-only, .eco-segment (--sm)
- Nextcloud DOM classes reproduced in the example: .snip-fold (__chev, __sum)

### Email: testing (Email) — https://design.pdp.uz/ds/sayt/#email-qa

**Email: what to check before sending.** An email opens not in a browser but in dozens of email clients, each with its own limits. Run through the checklist below before every new template or major change; the matrix shows what to look for in which client. The DS has {{EMAIL_FILES}} files that are checked automatically at build: size, role="presentation", language, subject length.

- EcoSystem only: the block always uses the EcoSystem tokens (in the DS it is wrapped in class="eco-lock-ecosystem"); do not make per-brand variants.
- Status: Beta (since 06.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Before sending: checklist](https://design.pdp.uz/ds/sayt/#email-qa-yuborishdan-oldin-royxat); [Email clients: what to look for](https://design.pdp.uz/ds/sayt/#email-qa-pochta-dasturlari-nimaga); [Files and size](https://design.pdp.uz/ds/sayt/#email-qa-fayllar-va-hajm); [Plain-text version and headers](https://design.pdp.uz/ds/sayt/#email-qa-matn-varianti-va); [Tools](https://design.pdp.uz/ds/sayt/#email-qa-vositalar)
- PDP classes: .eco-btn (--secondary, --sm, --tertiary), .eco-check, .eco-choice, .eco-only
- Nextcloud DOM classes reproduced in the example: .snip-fold (__chev, __sum)

### Card types (Brand) — https://design.pdp.uz/ds/sayt/#card-kinds

**One geometry, twelve roles.** A role changes a card’s content and background, not its shape. The 24 px radius and 24 px padding are the same in every role; a regular card is --eco-bg-secondary, an accent card is black or in the brand accent color, and there’s never more than one per screen.

- Blocks: [Twelve roles](https://design.pdp.uz/ds/sayt/#card-kinds-on-ikki-rol); [What each role shows](https://design.pdp.uz/ds/sayt/#card-kinds-qaysi-rol-nimani); [Accent cards: black field and brand accent](https://design.pdp.uz/ds/sayt/#card-kinds-aksent-kartalar-qora); [Usage](https://design.pdp.uz/ds/sayt/#card-kinds-qollanish); [Digital certificate](https://design.pdp.uz/ds/sayt/#card-kinds-raqamli-sertifikat)
- PDP classes: .eco-avatar (--2xl, --3d, --xl), .eco-badge (--brand, --dot, --success, --warning), .eco-btn (--block, --primary, --secondary), .eco-card (--accent, --brand, --interactive, --sun, __meta, __title), .eco-icon (--lg, --sm), .eco-progress

### Brand devices (Brand) — https://design.pdp.uz/ds/sayt/#signatures

**Decoration comes only from the mark.** Dot grid, connection rays, gradient, watermark and “bloom” — five devices that make an EcoSystem page recognizable at first glance. Each comes from a part of the mark and has its own limits: past them, decoration starts getting in the way of the text.

- Blocks: [Dot grid — the X module in the background](https://design.pdp.uz/ds/sayt/#signatures-nuqtali-tor-x); [Connection rays — from the core to the projects](https://design.pdp.uz/ds/sayt/#signatures-ulanish-nurlari-yadrodan); [Gradient — only on large areas](https://design.pdp.uz/ds/sayt/#signatures-gradient-faqat-katta); [Watermark — a cropped mark in the corner](https://design.pdp.uz/ds/sayt/#signatures-suv-belgisi-kesilgan); [Bloom — the signature motion](https://design.pdp.uz/ds/sayt/#signatures-bloom-imzo-harakati)
- PDP classes: .eco-badge (--dot, --success), .eco-btn (--lg, --primary, --secondary), .eco-card (__meta, __title), .eco-choice, .eco-icon, .eco-segment, .eco-switch

### Illustrations (Brand) — https://design.pdp.uz/ds/sayt/#illustrations

**Spot illustrations: empty state, feedback and first step.** One object, one idea: a book, a laptop, a calendar, a lock, an empty inbox. Shapes come from the brand geometry (circle, pill, ring segment, the dots and rays of the mark), no strokes, and colours are tokens only, so they switch on their own in Light and Dark. They support the text in empty states, feedback and onboarding screens — they never replace it. No characters or 3D heroes (brandbook, “Photo and illustration”). For large covers and banners, see 3D objects. Inspired by Atlassian, GitLab Pajamas, SAP Fiori, Wikimedia Codex, Carbon, Dropbox and Slack.

- EcoSystem only: the block always uses the EcoSystem tokens (in the DS it is wrapped in class="eco-lock-ecosystem"); do not make per-brand variants.
- Status: Beta (since 06.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Set: 21 illustrations](https://design.pdp.uz/ds/sayt/#illustrations-toplam-21-ta); [Light and Dark, white and grey surface](https://design.pdp.uz/ds/sayt/#illustrations-light-va-dark); [Construction grid and keyshapes](https://design.pdp.uz/ds/sayt/#illustrations-qurilish-tori-va); [Colour: nine roles, all tokens](https://design.pdp.uz/ds/sayt/#illustrations-rang-toqqizta-rol); [Shape language](https://design.pdp.uz/ds/sayt/#illustrations-shakl-tili); [Sizes: 64 · 128 · 240](https://design.pdp.uz/ds/sayt/#illustrations-olchamlar-64-128); [Empty state: first time, no results, all done](https://design.pdp.uz/ds/sayt/#illustrations-bosh-holat-birinchi); [Feedback: done, error, locked content](https://design.pdp.uz/ds/sayt/#illustrations-xabar-bajarildi-xato); [With 3D glass objects](https://design.pdp.uz/ds/sayt/#illustrations-3d-shisha-obyektlar); [Code, screen readers and rules](https://design.pdp.uz/ds/sayt/#illustrations-kod-ekran-oqigich); [AI prompt: new illustration](https://design.pdp.uz/ds/sayt/#illustrations-ai-uchun-prompt)
- PDP classes: .eco-btn (--primary, --secondary, --sm, --tertiary), .eco-cover (--dark, --still), .eco-empty (--inline, __actions, __art, __art--illo, __text, __title), .eco-illo (--64, --on-grey), .eco-only
- Nextcloud DOM classes reproduced in the example: .demo (--stack, __label), .snip-fold (__chev, __sum), .stage (--lbl2)

### 3D objects (Brand) — https://design.pdp.uz/ds/sayt/#objects-3d

**3D glass objects: library, background and composition.** Eleven glass shapes — torus, spring, sphere, cube, crystal, star. They bring volume and mood to banners, heroes, video covers, presentations, social posts and certificates; for in-product states, use flat illustrations. Shapes are abstract: no characters, mascots or real-world items (phone, rocket). Source: Figma Community «3D Elements Pack — 3D Shapes»; the brand owner checks the licence — confirm before any external release.

- EcoSystem only: the block always uses the EcoSystem tokens (in the DS it is wrapped in class="eco-lock-ecosystem"); do not make per-brand variants.
- Status: Beta (since 06.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Library: 11 objects](https://design.pdp.uz/ds/sayt/#objects-3d-kutubxona-11-ta); [Background: where objects look best](https://design.pdp.uz/ds/sayt/#objects-3d-fon-qayerda-eng); [Size, cropping and count](https://design.pdp.uz/ds/sayt/#objects-3d-olcham-kesish-va); [Composition: banner and poster](https://design.pdp.uz/ds/sayt/#objects-3d-kompozitsiya-banner-va); [Code and rules](https://design.pdp.uz/ds/sayt/#objects-3d-kod-va-qoidalar); [AI prompt: new 3D object](https://design.pdp.uz/ds/sayt/#objects-3d-ai-uchun-prompt)
- PDP classes: .eco-btn (--glass, --secondary, --sm), .eco-cover (--dark, --light, --still), .eco-only
- Nextcloud DOM classes reproduced in the example: .banner (__obj), .o3-ban (__row), .o3-bg (--black, --cover-d, --cover-l, --green, --grey, --white), .o3-card (__art, __meta), .o3-obj (--a, --b), .o3-prompt (__h), .snip-fold (__chev, __sum)

### States (Product) — https://design.pdp.uz/ds/sayt/#states

**What happened and what to do next.** Empty list, loading, error, success, offline and locked content — the places where users get lost most often. Each state has one component and one text pattern: say what happened and give the next step. Three of them are mandatory on every data screen: a skeleton, an empty state with an action and an error with a retry.

- Blocks: [Empty state: first time and no results](https://design.pdp.uz/ds/sayt/#states-bosh-holat-birinchi); [Loading: skeleton for lists, the loader for pages and buttons](https://design.pdp.uz/ds/sayt/#states-yuklanish-royxatga); [Error: in a field, on the page, full screen](https://design.pdp.uz/ds/sayt/#states-xato-maydonda-sahifada); [Success: toast or in-place confirmation](https://design.pdp.uz/ds/sayt/#states-muvaffaqiyat-toast-yoki); [Offline and locked content](https://design.pdp.uz/ds/sayt/#states-oflayn-va-yopiq); [State → component → text](https://design.pdp.uz/ds/sayt/#states-holat-komponent-matn); [Three mandatory states: on every data screen](https://design.pdp.uz/ds/sayt/#states-uchta-majburiy-holat); [Page messages: five tones](https://design.pdp.uz/ds/sayt/#states-sahifa-xabarlari-beshta); [Irreversible action: confirmation](https://design.pdp.uz/ds/sayt/#states-qaytarib-bolmaydigan)
- PDP classes: .eco-alert (--brand, --error, --success, --warning, __body, __cta, __desc, __icon, __title), .eco-btn (--icon, --lg, --primary, --primary-destructive, --secondary, --sm, --tertiary), .eco-empty (__actions, __art, __text, __title), .eco-featured-icon (--error, --md, --modern, --sm), .eco-field, .eco-hint, .eco-icon (--lg, --sm), .eco-input, .eco-input-wrap, .eco-label, .eco-loader (--mono, --sm, __core, __o, __ray, __spin), .eco-modal (__actions, __close, __text, __title), .eco-skeleton, .eco-table-card (__desc, __head, __heading, __title), .eco-toast

### Loader (Product) — https://design.pdp.uz/ds/sayt/#loader

**The loader: breathing dots.** A mark shown while a page opens or an action runs. In EcoSystem it is built from the logo symbol: a core, 11 large and 11 small dots and thin rays — the dots move towards the centre and back while the whole mark slowly rotates. Other brands get the same breathing, with dots in the brand colour only. For lists and cards use a skeleton.

- Blocks: [From the symbol to the loader](https://design.pdp.uz/ds/sayt/#loader-belgidan-yuklanish); [Three sizes, Light and Dark](https://design.pdp.uz/ds/sayt/#loader-uchta-olcham-light); [In a button: “Saving…”](https://design.pdp.uz/ds/sayt/#loader-tugma-ichida-saqlanmoqda); [Page loading](https://design.pdp.uz/ds/sayt/#loader-sahifa-yuklanishi); [When and how](https://design.pdp.uz/ds/sayt/#loader-qachon-va-qanday)
- PDP classes: .eco-btn (--primary, --secondary, --sm, --tertiary), .eco-loader (--lg, --md, --mono, --sm, __core, __i, __o, __ray, __rays, __spin), .eco-loader-screen (__text)

### Required blocks (Product) — https://design.pdp.uz/ds/sayt/#patterns

**Ten blocks are the same in every PDP product.** When a user moves from one PDP project to another, they should still feel at home. The header, footer, hero, numbers, CTA, breadcrumb, search and filter, process steps, Q&A and testimonial have the same structure in every project — the project only changes the content. Tabs and pagination are in the App components section. The examples are live and adapt to their own width; on a large screen the Mobile button shows them at 390px.

- Blocks: [Header](https://design.pdp.uz/ds/sayt/#patterns-shapka); [Footer](https://design.pdp.uz/ds/sayt/#patterns-footer); [Hero](https://design.pdp.uz/ds/sayt/#patterns-hero); [Key figures](https://design.pdp.uz/ds/sayt/#patterns-raqamlar); [CTA band](https://design.pdp.uz/ds/sayt/#patterns-cta-band); [Breadcrumb](https://design.pdp.uz/ds/sayt/#patterns-breadcrumb); [Search and filter](https://design.pdp.uz/ds/sayt/#patterns-qidiruv-va-filtr); [Process steps](https://design.pdp.uz/ds/sayt/#patterns-jarayon-qadamlari); [Q&A](https://design.pdp.uz/ds/sayt/#patterns-savol-javob); [Testimonial](https://design.pdp.uz/ds/sayt/#patterns-fikr)
- PDP classes: .eco-avatar (--3d, --lg), .eco-badge (--dot, --success), .eco-btn (--block, --icon, --lg, --link-gray, --primary, --secondary, --sm, --tertiary), .eco-card (--raised, __meta, __title), .eco-chip, .eco-icon (--sm), .eco-input (--sm), .eco-input-wrap, .eco-progress, .eco-segment

### Page anatomy (Product) — https://design.pdp.uz/ds/sayt/#layouts

**A page is built from zones, and the order of zones never changes.** The landing page leads from promise to action, the account area reads in the order “who I am → key numbers → what’s on today → details,” and the article is built for reading. The schemes set the order and proportions of the zones; color and content belong to the project.

- Blocks: [Project landing page](https://design.pdp.uz/ds/sayt/#layouts-loyiha-landing-sahifasi); [Account area and dashboard](https://design.pdp.uz/ds/sayt/#layouts-kabinet-va-dashboard); [Article and news](https://design.pdp.uz/ds/sayt/#layouts-maqola-va-yangilik); [Adapting to width](https://design.pdp.uz/ds/sayt/#layouts-kenglik-boyicha); [The account’s first screen](https://design.pdp.uz/ds/sayt/#layouts-kabinetning-birinchi)
- PDP classes: .eco-avatar (--2xl, --3d), .eco-badge (--brand, --dot, --sm, --success, --warning), .eco-btn (--primary, --tertiary), .eco-progress

### Interaction states (Patterns and guidelines) — https://design.pdp.uz/ds/sayt/#interaction

**Every interactive element shows its five states the same way.** Hover, focus, pressed, selected and disabled — these states follow the same rule on buttons, chips, list rows and cards. Material Design 3 uses a translucent “state layer” (8–16%) for this; in PDP a state is a ready-made tonal step: a coloured fill gets darker, a neutral fill goes one step darker, and an element without a fill gets a neutral background. No new tokens — everything comes from the existing --eco-bg-*_hover and button tokens.

- Blocks: [State matrix](https://design.pdp.uz/ds/sayt/#interaction-holat-matritsasi); [Live example: list row](https://design.pdp.uz/ds/sayt/#interaction-jonli-namuna-royxat); [Drag: lifted card and gap](https://design.pdp.uz/ds/sayt/#interaction-sudrash-kotarilgan-karta); [When states overlap](https://design.pdp.uz/ds/sayt/#interaction-holatlar-ustma-ust)

### Adaptive layout (Patterns and guidelines) — https://design.pdp.uz/ds/sayt/#adaptive

**The window width decides, not the device.** The same screen opens on a phone, tablet, laptop and wide monitor, and the browser window can be narrowed to any width. So the layout is built not around the device type but around four window classes: each class has an agreed navigation type, number of panes and columns. Classes are rules on top of the existing breakpoints (Spacing and shape), not new values. The idea comes from Material Design 3 “window size classes” and Apple HIG “size classes”.

- Blocks: [Four window classes](https://design.pdp.uz/ds/sayt/#adaptive-tort-oyna-sinfi); [Live example: one screen, four classes](https://design.pdp.uz/ds/sayt/#adaptive-jonli-namuna-bitta); [Three-pane layouts](https://design.pdp.uz/ds/sayt/#adaptive-uchta-panel-maketi); [Rules](https://design.pdp.uz/ds/sayt/#adaptive-qoidalar)
- PDP classes: .eco-avatar (--3d, --sm), .eco-segment

### Writing guidelines (Patterns and guidelines) — https://design.pdp.uz/ds/sayt/#writing

**Interface text is the voice of the product.** Button, heading, error and empty-state text is what users read most. When it’s written in one voice, in plain Uzbek and with consistent terms, people don’t learn the screen — they recognise it. The rules are for Uzbek text; Russian and English translations keep the same meaning. The idea comes from Apple HIG “Writing” and Material Design 3 “Content design”.

- Blocks: [Voice: four qualities](https://design.pdp.uz/ds/sayt/#writing-ovoz-tort-sifat); [Buttons and links: start with a verb](https://design.pdp.uz/ds/sayt/#writing-tugma-va-havola); [Spelling, numbers and dates](https://design.pdp.uz/ds/sayt/#writing-imlo-raqam-va); [Address and pronouns](https://design.pdp.uz/ds/sayt/#writing-murojaat-va-olmosh); [Glossary: one action — one word](https://design.pdp.uz/ds/sayt/#writing-lugat-bir-harakat); [Message templates](https://design.pdp.uz/ds/sayt/#writing-xabar-qoliplari)
- PDP classes: .eco-btn (--primary, --primary-destructive, --tertiary)

### Microcopy library (Patterns and guidelines) — https://design.pdp.uz/ds/sayt/#microcopy

**Microcopy: {{MC_TOTAL}} ready strings in three languages.** Text for buttons, fields, errors, empty states, push notifications, payments and classes — Uzbek (the source), Russian and English side by side, with where it is used, its maximum length and its tone. Copy a string or download the whole library as JSON and CSV. Voice and rules — Writing guidelines, dates, numbers and money — Dates, numbers and money, spelling — Spelling and punctuation. Inspired by GOV.UK, Shopify Polaris, Atlassian and the Microsoft Style Guide.

- Status: Beta (since 06.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Library](https://design.pdp.uz/ds/sayt/#microcopy-kutubxona); [Live example: copy inside a component](https://design.pdp.uz/ds/sayt/#microcopy-jonli-namuna-matn); [Anatomy of an entry](https://design.pdp.uz/ds/sayt/#microcopy-bitta-yozuv-tuzilishi); [Tone: one voice, the tone follows the situation](https://design.pdp.uz/ds/sayt/#microcopy-ohang-ovoz-bir); [Message templates](https://design.pdp.uz/ds/sayt/#microcopy-xabar-qoliplari); [Length in three languages](https://design.pdp.uz/ds/sayt/#microcopy-uch-tilda-uzunlik); [Rules and checks](https://design.pdp.uz/ds/sayt/#microcopy-qoidalar-va-tekshiruv)
- PDP classes: .eco-btn (--primary-destructive, --secondary, --sm, --tertiary), .eco-choice, .eco-featured-icon (--error), .eco-field, .eco-hint, .eco-icon, .eco-input, .eco-input-group (__addon, __addon--icon, __input), .eco-label, .eco-modal (__actions, __text, __title), .eco-segment, .eco-switch, .eco-toast

### Onboarding and permissions (Patterns and guidelines) — https://design.pdp.uz/ds/sayt/#onboarding

**Let people start in the first minute — reading can wait.** New users don’t open the app to learn it — they open it to check their timetable or hand in an assignment. So onboarding isn’t a slide deck: it’s a screen that works straight away with sensible defaults, a single tip where it’s needed and an optional “getting started” checklist. Permissions (notifications, camera, location) are requested only when that feature is being used. Based on Apple HIG “Onboarding” and “Privacy”.

- Blocks: [Four principles](https://design.pdp.uz/ds/sayt/#onboarding-tort-tamoyil); [Getting started checklist and contextual tip](https://design.pdp.uz/ds/sayt/#onboarding-boshlash-royxati-va); [Asking for permission: the reason first, then the system prompt](https://design.pdp.uz/ds/sayt/#onboarding-ruxsat-sorash-avval)
- PDP classes: .eco-btn (--block, --icon, --link-gray, --primary, --sm, --tertiary)

### Search (Patterns and guidelines) — https://design.pdp.uz/ds/sayt/#search

**Everything in one place, with less typing.** The search bar is the single entry point to all content in the product: courses, lessons, mentors, files. Tapping it opens the search view: recent queries, suggestions and scope chips, with results as you type. In-section filtering (search above a table) is a separate, smaller field; the command palette (⌘K) is a separate component for developers and admins. Based on Material Design 3 “Search” and Apple HIG “Searching”.

- Blocks: [Search bar and view](https://design.pdp.uz/ds/sayt/#search-qidiruv-paneli-va); [Behaviour](https://design.pdp.uz/ds/sayt/#search-xatti-harakat)
- PDP classes: .eco-avatar (--3d, --sm), .eco-btn (--icon, --tertiary), .eco-chip, .eco-loader (--sm, __core, __o, __ray, __spin), .eco-search (__btn, __kbd, __spin)

### Data entry (Patterns and guidelines) — https://design.pdp.uz/ds/sayt/#data-entry

**Don’t make people type — let them choose, prefill, remember.** Every field typed by hand is a chance for error and several seconds on a phone keyboard. If the data is already in the system, it’s prefilled; if there are few options, it becomes a choice; long text saves itself. Field anatomy, states and error text are covered in the Forms section; here — decisions across fields and the time picker. Based on Apple HIG “Entering data” and Material Design 3 “Time pickers”.

- Blocks: [Four decisions](https://design.pdp.uz/ds/sayt/#data-entry-tort-qaror); [Keyboard and autofill](https://design.pdp.uz/ds/sayt/#data-entry-klaviatura-va-avto); [Time picker](https://design.pdp.uz/ds/sayt/#data-entry-vaqt-tanlagich); [Drafts and autosave](https://design.pdp.uz/ds/sayt/#data-entry-qoralama-va-avtosaqlash)
- PDP classes: .eco-btn (--primary, --sm, --tertiary), .eco-chip, .eco-field, .eco-hint, .eco-input, .eco-label, .eco-time (__acts, __f, __label, __presets, __row, __sep)

### Modality (Patterns and guidelines) — https://design.pdp.uz/ds/sayt/#modality

**Interrupt only for a good reason.** A modal blocks the screen behind it and waits for a response. It’s a powerful tool: for an important decision, a short self-contained task or protection against data loss. Everything else stays in place, in a toast or in a non-modal side sheet. This section sets out which layer to choose and how to dismiss it; the components themselves are in App components (modal) and UI-kit blocks (sheet). Based on Apple HIG “Modality” and Material Design 3 “Dialogs”, “Sheets”.

- Blocks: [Six layers — six situations](https://design.pdp.uz/ds/sayt/#modality-oltita-qatlam-oltita); [Don’t lose data](https://design.pdp.uz/ds/sayt/#modality-malumot-yoqolmasin); [Rules](https://design.pdp.uz/ds/sayt/#modality-qoidalar)
- PDP classes: .eco-btn (--link-destructive, --primary, --tertiary), .eco-featured-icon (--warning), .eco-modal (__actions, __text, __title)

### Settings (Patterns and guidelines) — https://design.pdp.uz/ds/sayt/#settings

**Fewer settings, good defaults.** Every new setting is a question someone didn’t make a decision on. So defaults are chosen to suit most people, and the Settings page keeps only things that rarely change: profile, notifications, language and mode, security, permissions. Sorting a list or switching the view happens on that same screen. The idea comes from Apple HIG “Settings”.

- Blocks: [Page structure](https://design.pdp.uz/ds/sayt/#settings-sahifa-tuzilishi); [Decision: instantly or “Save”](https://design.pdp.uz/ds/sayt/#settings-qaror-darhol-yoki)
- PDP classes: .eco-segment, .eco-switch

### Data visualization (Patterns and guidelines) — https://design.pdp.uz/ds/sayt/#dataviz

**A chart answers a question — it isn’t decoration.** Choose the chart type by the question, not the data: “how many?”, “how has it changed?”, “who has more?”. The title states the takeaway, colour is for distinction only, and when exact values matter — a table. The palette, chart types and KPI tile are covered in the Charts section; here — rules for choosing and reading. Based on Apple HIG (Charts, Charting data, Gauges) and Material Design 3.

- Blocks: [From question to form](https://design.pdp.uz/ds/sayt/#dataviz-savoldan-shaklga); [Title as takeaway, table always at hand](https://design.pdp.uz/ds/sayt/#dataviz-sarlavha-xulosa-jadval); [Meter: a value within a range](https://design.pdp.uz/ds/sayt/#dataviz-olchagich-qiymat); [Readability and accessibility](https://design.pdp.uz/ds/sayt/#dataviz-oqish-va-foydalanish)
- PDP classes: .eco-segment (--sm)

### Inclusive language (Patterns and guidelines) — https://design.pdp.uz/ds/sayt/#inclusive

**Everyone sees themselves here.** PDP learners range from 7-year-olds to experienced professionals, from Tashkent to Nukus, in Uzbek and Russian, with different abilities and incomes. Text, examples and images should leave no one out: address people directly, use plain language, ask only the personal questions you need. Voice, spelling and vocabulary — Writing guidelines, technical requirements — Accessibility. Inspired by Apple HIG “Inclusion”.

- Blocks: [Five principles](https://design.pdp.uz/ds/sayt/#inclusive-besh-tamoyil); [By situation](https://design.pdp.uz/ds/sayt/#inclusive-vaziyatga-qarab); [Personal fields and sample people](https://design.pdp.uz/ds/sayt/#inclusive-shaxsiy-maydonlar-va); [In three languages: no gendered forms](https://design.pdp.uz/ds/sayt/#inclusive-uch-tilda-jinsga)
- PDP classes: .eco-avatar (--3d, --lg), .eco-badge (--sm), .eco-choice, .eco-field, .eco-hint, .eco-input, .eco-label, .eco-radio

### Task list (Patterns and guidelines) — https://design.pdp.uz/ds/sayt/#task-list

**Task list: an application completed over several days.** An admission, grant or transfer application can’t be finished in one sitting: document scans, payment, contract. The task list shows which parts are done and which remain; people complete them in any order and come back later. For a flow finished in one sitting — Application: question pages, for first-day steps — Onboarding. Inspired by GOV.UK Design System (Task list).

- Blocks: [Live example: admission application](https://design.pdp.uz/ds/sayt/#task-list-jonli-namuna-qabul); [States](https://design.pdp.uz/ds/sayt/#task-list-holatlar)
- PDP classes: .eco-badge (--error), .eco-btn (--primary), .eco-progress

### Step-by-step navigation (Patterns and guidelines) — https://design.pdp.uz/ds/sayt/#step-nav

**Step-by-step navigation: a process across several pages.** “How do I enrol?”, “How do I get a certificate?” — the answer isn’t on one page: catalogue, application, contract, payment, account. Step-by-step navigation gathers these into one ordered list — as a standalone page and in the side panel of every related page (“Part of this path”). Steps within a single form — Stepper, multi-day applications — Task list. Inspired by GOV.UK Design System (Step by step navigation).

- Blocks: [Live example: page and side panel](https://design.pdp.uz/ds/sayt/#step-nav-jonli-namuna-sahifa); [When to use what](https://design.pdp.uz/ds/sayt/#step-nav-qachon-nima-ishlatiladi)
- PDP classes: .eco-btn (--link-color, --sm, --tertiary)

### Cookies and consent (Patterns and guidelines) — https://design.pdp.uz/ds/sayt/#consent

**Cookie banner and consent settings.** Beyond essential cookies, the site turns anything else on (analytics, advertising) only after the person agrees. The banner sits at the top of the page, in the flow (not stuck to the screen), with two equal buttons; after a choice, a confirmation appears in the same place. Settings can be changed at any time on the “Cookie settings” page linked in the footer. Principles for asking for personal data — Onboarding and permissions, Inclusive language. Inspired by GOV.UK Design System (Cookie banner, Cookies page).

- Blocks: [Banner: question and confirmation](https://design.pdp.uz/ds/sayt/#consent-banner-savol-va); [Cookie settings page](https://design.pdp.uz/ds/sayt/#consent-cookie-sozlamalari)
- PDP classes: .eco-alert (--success), .eco-btn (--link-color, --primary, --sm, --tertiary), .eco-switch

## 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-error-secondary, --eco-bg-error-solid, --eco-bg-error-solid_hover, --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, --eco-bg-warning-solid
- Text: --eco-text-brand-primary, --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-tertiary_hover, --eco-text-warning-primary, --eco-text-white
- Borders: --eco-border-brand, --eco-border-disabled, --eco-border-error, --eco-border-error_subtle, --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-quaternary_hover, --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-aurora-1, --eco-aurora-2, --eco-aurora-2-deep, --eco-aurora-3, --eco-aurora-4, --eco-aurora-line, --eco-aurora-ring, --eco-avatar-accent-bg, --eco-avatar-accent-ink, --eco-avatar-inverse-bg, --eco-avatar-inverse-ink, --eco-avatar-tint-bg, --eco-avatar-tint-ink, --eco-badge-solid-bg, --eco-badge-solid-fg, --eco-brand-accent, --eco-brand-button, --eco-brand-button-ink, --eco-brand-on-accent, --eco-brand-on-button, --eco-brand-on-primary, --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-project-online, --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-accent-bg, --eco-tab-accent-fg, --eco-tab-brand-bg, --eco-tab-brand-fg, --eco-tab-inverse-bg, --eco-tab-inverse-fg, --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-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-2xl, --eco-spacing-3xl, --eco-spacing-4xl, --eco-spacing-5xl, --eco-spacing-6xl, --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-sm, --eco-radius-xl, --eco-radius-xs
- Shadow and focus: --eco-focus-gap, --eco-focus-ring, --eco-focus-ring-error, --eco-focus-w, --eco-shadow-lg, --eco-shadow-sm, --eco-shadow-xl, --eco-shadow-xs
- 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-green-700, --eco-color-academy-yellow, --eco-color-academy-yellow-50, --eco-color-black, --eco-color-error-400, --eco-color-error-500, --eco-color-green-600, --eco-color-junior-cyan, --eco-color-junior-cyan-50, --eco-color-junior-cyan-950, --eco-color-junior-cyan-deep, --eco-color-junior-ink, --eco-color-lime, --eco-color-lime-50, --eco-color-malachite, --eco-color-malachite-button, --eco-color-neutral-100, --eco-color-neutral-200, --eco-color-neutral-400, --eco-color-neutral-50, --eco-color-neutral-700, --eco-color-neutral-800, --eco-color-school-blue, --eco-color-school-blue-100, --eco-color-school-blue-700, --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-hover, --eco-color-university-navy, --eco-color-university-teal, --eco-color-university-teal-100, --eco-color-university-teal-50, --eco-color-university-teal-dark, --eco-color-university-yellow, --eco-color-warning-400, --eco-color-warning-500, --eco-color-white, --eco-gradient
- Other: --eco-chip-accent-bg, --eco-chip-accent-fg, --eco-field-focus-w, --eco-field-radius-affix, --eco-field-radius-multiline, --eco-icon-lg, --eco-icon-md, --eco-icon-sm, --eco-illo-accent, --eco-illo-alert, --eco-illo-base, --eco-illo-base-on-grey, --eco-illo-ground, --eco-illo-ground-on-grey, --eco-illo-ink, --eco-illo-on-accent, --eco-illo-on-ink, --eco-illo-shade, --eco-illo-shade-on-grey, --eco-illo-spark, --eco-slider-fill, --eco-slider-mark

## 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

## 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/
- [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/
- [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.