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

> 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/ (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 Dashboard 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

### Dashboard (Nextcloud) — https://design.pdp.uz/ds/dashboard/#dashboard

**Home screen: Nextcloud Dashboard and app tiles.** The Dashboard is the workspace home screen. The first block is Nextcloud’s Dashboard page in PDP style (a DS example only; there is no downloadable CSS); next come the app tiles: apps are grouped by topic, and each group has a heading, an app count and a one-line caption. A tile is a link: icon, name and a short description; all tiles are the same size. The component is built from existing tokens — grey surface, white icon tile and Phosphor icons; no new colours. Works across six brands and two modes.

- 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: [Nextcloud Dashboard](https://design.pdp.uz/ds/dashboard/#dashboard-nextcloud-dashboard); [Home screen](https://design.pdp.uz/ds/dashboard/#dashboard-bosh-ekran); [Tile: states](https://design.pdp.uz/ds/dashboard/#dashboard-plitka-holatlar)
- PDP classes: .eco-dash (__app, __cap, __grid, __group, __head, __ic, __n, __name, __rule, __sub, __title), .eco-ncdash
- Nextcloud DOM classes reproduced in the example: .action-item (__menutoggle), .avatardiv (--icon), .button-vue (--icon-and-text, --icon-only, --size-normal, --vue-secondary, --vue-tertiary, __icon, __text, __wrapper), .calendar-dot, .calendar-icon, .credits (--end), .dashboard-widget, .demo (--dh, --nc, __label), .empty-content (__description, __icon), .item-list (__entry), .item (__details), .message, .modal-container (__close, __content), .modal-wrapper (--large, --no-header), .modal (__content), .panel (--content, --header), .panel-activity, .panel-announcementcenter, .panel-calendar, .panel-deck, .panel-mail, .panel-polls, .panel-recommendations, .panel-spreed, .panel-status, .panel-tasks, .panel-weather, .panels, .snip-fold (__chev, __sum), .stage-pair (--stack), .weather-status-menu-item (__subheader)

### Files (Nextcloud) — https://design.pdp.uz/ds/dashboard/#files

**Files: Nextcloud Files reskin.** Files is the store for team and learning materials: sections on the left (all files, recent, favorites, shares, tags, deleted) and storage, the current folder in the middle, file details and sharing on the right. It is a reskin of the Nextcloud Files app in the PDP cloud: markup uses Nextcloud classes, styling uses PDP tokens. The block always uses the EcoSystem 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: [Files app](https://design.pdp.uz/ds/dashboard/#files-fayllar-ilovasi); [Internal shares](https://design.pdp.uz/ds/dashboard/#files-ichki-ulashishlar); [External shares](https://design.pdp.uz/ds/dashboard/#files-tashqi-ulashishlar); [States: selection, empty folder, drag and drop, upload, new folder](https://design.pdp.uz/ds/dashboard/#files-holatlar-tanlov-bosh)
- PDP classes: .eco-avatar (--3d, --xs), .eco-btn (--ghost, --icon, --primary, --sm, --tertiary, --tertiary-destructive, --xs), .eco-check (--md), .eco-field, .eco-input (--sm), .eco-label, .eco-menu (__body, __check, __item, __sep, __title), .eco-modal (--xs, __actions, __body, __close, __title), .eco-progress, .eco-segment (--sm), .eco-tab, .eco-table, .eco-tabs (--pill, --sm)
- Nextcloud DOM classes reproduced in the example: .breadcrumb (__crumbs), .button-vue, .demo (--fl, __label), .dialog (__actions, __content, __name), .empty-content (__action, __description, __icon, __name), .files-list (__breadcrumbs, __column, __column--sortable, __column-sort-button, __column-sort-button--active, __column-sort-button-icon, __column-sort-button-text, __drag-drop-notice, __drag-drop-notice-wrapper, __empty, __filters, __header, __header-actions, __header-grid-button, __header-upload-button, __row, __row-action, __row-action-sharing-status, __row-actions, __row-actions-batch, __row-checkbox, __row-head, __row-head--selected, __row-icon, __row-icon-favorite, __row-icon-overlay, __row-mtime, __row-name, __row-name-ext, __row-name-link, __row-name-text, __row-size, __selected, __table, __tbody, __tfoot, __thead), .files-list-drag-drop-notice (__title), .files-navigation (__item), .progress-bar (--linear), .sharing-entry (__action, __avatar, __internal, __link, __reshare, __summary, __summary__desc), .sharing-search (__input), .sharing-status (__avatar), .sharingTab (__content), .snip-fold (__chev, __sum), .stage-pair (--stack), .upload-picker (__progress)

### Photos (Nextcloud) — https://design.pdp.uz/ds/dashboard/#photos

**Photos: timeline and albums.** Photos — the photo archive of school life: a timeline by month, albums (event, club, summer camp), favourites and videos, a selection mode (add to album, favourite, delete) and a viewer. This is a reskin of the Nextcloud Photos app in the PDP cloud: markup uses the Photos and @nextcloud/vue classes, styling uses PDP tokens. The example uses DS 3D renders instead of photos. The block always uses the EcoSystem 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: [Photos app](https://design.pdp.uz/ds/dashboard/#photos-photos-ilovasi); [Photos rules](https://design.pdp.uz/ds/dashboard/#photos-photos-qoidalari)
- PDP classes: .eco-btn (--icon, --primary, --sm, --tertiary), .eco-check (--media, --round), .eco-menu (__body, __item, __sep, __title), .eco-modal, .eco-segment (--sm)
- Nextcloud DOM classes reproduced in the example: .collection-cover (__details, __details__subtitle, __details__title, __image), .counter-bubble (__counter), .date-scrubber (__thumb, __thumb__date, __thumb__pill, __tick, __track, __year-label), .demo (--ph, __label), .file (__duration, __duration__label, __images, __layer, __layer--large), .photos-navigation (__back, __content__right, __title, __title__main, __title__sub), .snip-fold (__chev, __sum), .stack-back (--first, --second), .stack-count, .timeline (__file-list)

### Activity (Nextcloud) — https://design.pdp.uz/ds/dashboard/#activity

**Activity feed: a Nextcloud Activity reskin.** Activity is a feed of who changed what and when: file, sharing, calendar, Deck board, comment, task and security events grouped by day. It is a reskin of the Nextcloud Activity app in the PDP cloud: the HTML stays the same, the style is CSS written against Nextcloud classes. EcoSystem brand only, Light and Dark.

- 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: [Activity app](https://design.pdp.uz/ds/dashboard/#activity-faollik-ilovasi); [Parts and Nextcloud classes](https://design.pdp.uz/ds/dashboard/#activity-qismlar-va-nextcloud); [Nextcloud DOM](https://design.pdp.uz/ds/dashboard/#activity-nextcloud-dom)
- PDP classes: .eco-avatar (--3d), .eco-input (--sm), .eco-switch
- Nextcloud DOM classes reproduced in the example: .action-button (__pressed-icon, __text), .action-item (__menutoggle), .activity-app (__container, __content, __empty-content, __end-of-feed, __filter, __heading), .activity-entry (__content, __content__message, __content__subject, __date, __icon, __preview, __preview-image, __preview-mimetype, __preview-wrapper), .activity-filter (__actor, __controls, __custom-range, __date, __range, __search), .activity-group (__heading), .activity-heatmap (__cell, __cell--level-0, __cell--level-1, __cell--level-2, __cell--level-3, __cell--level-4, __cell--void, __cell-wrapper, __corner, __grid, __legend, __legend-caption, __month, __month-label, __scroller, __summary, __tooltip, __tooltip-date, __tooltip-value, __weekday), .activity-heatmap-view (__actions, __heading, __inner, __intro), .activity-icon, .avatardiv (--unknown), .button-vue (--primary, --tertiary, __icon, __text, __wrapper), .comments-activity (__content, __date, __icon, __subline, __title), .demo (--fa, __label), .empty-content (__action, __description, __icon, __name), .input-field (--leading-icon, __helper-text-message, __icon, __icon--leading, __input, __label, __main-wrapper, __trailing-button), .native-datetime-picker (__input), .rich-text (--component, --wrapper), .rich-text-file, .snip-fold (__chev, __sum), .user-bubble (__avatar, __content, __name, __wrapper), .v-popper (__inner, __popper), .vs (__actions, __clear, __dropdown-menu, __dropdown-option, __dropdown-toggle, __no-options, __open-indicator-button, __search, __selected, __selected-options)

### Talk (chat) (Nextcloud) — https://design.pdp.uz/ds/dashboard/#talk

**Talk: conversations, messages and calls.** Talk is a reskin of the Nextcloud Talk app in the PDP cloud: the conversation list on the left, the chat in the middle, participants and shared files on the right. The sample repeats the Talk DOM classes; the look comes from PDP tokens. The features are Talk’s own: search and filters, favourites, reactions, replies, pinned messages, files and calls.

- 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: [Talk app](https://design.pdp.uz/ds/dashboard/#talk-talk-ilovasi); [Call view](https://design.pdp.uz/ds/dashboard/#talk-qongiroq-korinishi); [Talk DOM and styling](https://design.pdp.uz/ds/dashboard/#talk-talk-dom-va)
- PDP classes: .eco-avatar (--36, --3d, --sm, --tint, --xs, __status, __status--busy, __status--off), .eco-btn (--icon, --primary, --sm, --tertiary, --xs), .eco-field, .eco-icon, .eco-input (--sm), .eco-input-wrap, .eco-link, .eco-menu (__body, __check, __item, __label, __title), .eco-on, .eco-segment (--sm), .eco-tab, .eco-tabs
- Nextcloud DOM classes reproduced in the example: .action-item (__menutoggle), .audio-recorder (__trigger), .button-vue (--primary), .content (__header, __info-row, __name), .conversation (--active, __subname-actor), .conversation-header (__text), .conversation-icon, .conversations-search, .conversations (__filters), .counter-bubble (__counter, __counter--highlighted), .demo (--tl, __label), .file-previews-wrapper (__image-row, __other-column), .indicator (__avatars, __main), .input-field (__input), .left-sidebar-button (__text), .list-item-content (__actions, __details, __main, __name, __subname, __subname--bold), .list-item-details (__details, __extra), .list-item (__anchor, __wrapper, __wrapper--active), .lobby (__countdown, __description, __header, __timer), .media-settings (__preview, __toggles), .message (--deleted, --pinned, --sided, __pinned), .message-actions (__thread), .message-body (__scroll), .message-buttons-bar, .message-main (__info, __text), .message-status, .message-unread-marker (__text), .messages (__author, __avatar, __avatar-wrapper, __content), .messages-bubble, .messages-date (__text), .messages-list-dragover-wrapper, .messages-list (__scroller), .name-container (__basename, __extension, __meta, __name), .overlap-icon (--call), .participant (--offline, __call-state, __main, __status, __user, __user-badge, __user-name), .pin_wrapper (__text), .preview (__novideo), .quote (__button, __main-author, __main-text), .raise-hand (__button), .reaction-button (--trigger), .reaction (__button, __group), .rich-contenteditable (__input), .rich-text (--component, --wrapper), .scroll-to-bottom (__button), .scroller (__content), .shared-items-tab (__section), .shared-items (__media), .snip-fold (__chev, __sum), .toast (__name, __reaction), .video (__promoted), .videos-wrapper (--stripe), .wrapper (--system)

### Mail (Nextcloud) — https://design.pdp.uz/ds/dashboard/#mail

**Mail: mailboxes and messages.** Mail — the Nextcloud mail client: several accounts and mailboxes, a priority inbox with «Important» and «Other» sections, unread, flagged and attachment messages, a thread view and a new-message dialog (recipient chips, Cc, attachments). This is a reskin of the Nextcloud Mail app in the PDP cloud: markup uses the Mail and @nextcloud/vue classes, styling uses PDP tokens. The block always uses the EcoSystem 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: [Mail app](https://design.pdp.uz/ds/dashboard/#mail-mail-ilovasi); [Mail rules](https://design.pdp.uz/ds/dashboard/#mail-mail-qoidalari)
- PDP classes: .eco-avatar (--3d, --sm, --tint, --xs), .eco-btn (--icon, --primary, --sm, --tertiary, --xs), .eco-icon, .eco-input (--sm), .eco-input-wrap, .eco-menu (__body, __desc, __item, __title), .eco-modal (--lg, __close, __title)
- Nextcloud DOM classes reproduced in the example: .composer-fields (__from), .counter-bubble (__counter), .demo (--ml, __label), .envelope (__header, __header__avatar, __preview-text, __recipients, __subtitle__subject), .list-item-content (__inner__details__details, __inner__details__extra__counter, __inner__details__extra__indicator, __main, __name), .list-item (__actions, __anchor, __wrapper, __wrapper--active), .message-composer, .message-editor, .snip-fold (__chev, __sum), .vs (__search, __selected)

### Kanban (Deck) (Nextcloud) — https://design.pdp.uz/ds/dashboard/#kanban

**Deck: boards, lists and cards.** Deck is a reskin of the Nextcloud Deck app in the PDP cloud: boards on the left, lists (stacks) and cards on the right. A card is one task with tags, a due date, assignees, a checklist, files and comments; clicking it opens the details window. The sample repeats the Deck DOM classes; the look comes from PDP tokens.

- 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: [Deck app](https://design.pdp.uz/ds/dashboard/#kanban-deck-ilovasi); [By tag](https://design.pdp.uz/ds/dashboard/#kanban-teg-boyicha); [By assignee](https://design.pdp.uz/ds/dashboard/#kanban-biriktirilgan-boyicha); [By due date](https://design.pdp.uz/ds/dashboard/#kanban-muddat-boyicha); [Deck DOM and styling](https://design.pdp.uz/ds/dashboard/#kanban-deck-dom-va)
- PDP classes: .eco-avatar (--3d, --sm, --tint, --xs), .eco-badge (--sm), .eco-btn (--ghost, --icon, --sm, --tertiary, --xs), .eco-check, .eco-field, .eco-icon, .eco-input (--sm), .eco-input-wrap, .eco-menu (__body, __check, __item, __item--danger, __label, __sep, __title), .eco-radio, .eco-segment (--sm), .eco-tab, .eco-tabs
- Nextcloud DOM classes reproduced in the example: .action-item (__menutoggle), .board, .board-action-buttons (__filter), .board-actions, .board-bullet, .board-owner-label, .board-search, .board-title, .board-wrapper, .card (__archived), .card-controls, .card-cover, .card-labels, .card-menu, .card-upper, .comment (--content, --header), .demo (--dk, __label), .description (__text), .filter (--item), .modal (__card, __content), .selector-wrapper (--content, --icon), .snip-fold (__chev, __sum), .stack (--add-card-at-bottom, --done-column, __card-add, __card-add-button, __card-count, __done-icon, __header, __header--done-column, __title), .stack-draggable-wrapper

### Tasks (Nextcloud) — https://design.pdp.uz/ds/dashboard/#tasks

**Tasks: lists, tasks and subtasks.** Tasks is a reskin of the Nextcloud Tasks app in the PDP cloud: smart collections and lists (CalDAV calendars) on the left, tasks in the middle, the selected task’s details on the right. A task has a priority, due date, percent complete, tags, notes and nested subtasks. The sample repeats the Tasks DOM classes; the look comes from PDP tokens.

- 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: [Tasks app](https://design.pdp.uz/ds/dashboard/#tasks-tasks-ilovasi); [Tasks DOM and styling](https://design.pdp.uz/ds/dashboard/#tasks-tasks-dom-va)
- PDP classes: .eco-btn (--ghost, --icon, --sm, --tertiary, --xs), .eco-check (--md), .eco-field, .eco-icon, .eco-input (--sm), .eco-input-wrap, .eco-menu (__body, __check, __item, __item--danger, __label, __sep, __title), .eco-progress-circle, .eco-range (--thin), .eco-tab, .eco-tabs
- Nextcloud DOM classes reproduced in the example: .action-item, .calendar (__indicator, __name), .content (__icon, __input, __name, __note, __value), .counter-bubble (__counter), .date (--overdue, __short, __short--completed), .demo (--tk, __label), .header (__input), .heading (__icon-bullet, __name), .item (__content), .note (__viewer), .priority (--high, --low, --medium), .property (__item, __item--overdue), .snip-fold (__chev, __sum), .task-body (__icons, __info), .task-checkbox, .task-item (--closed, --non-started, --subtasks-visible, __body, __body--active, __subtasks), .task-list

### Gantt (Nextcloud) — https://design.pdp.uz/ds/dashboard/#gantt

**Gantt: Deck cards on a timeline.** Gantt is a project plan by day, week or month: each card is a bar between its start and due date, the done part is solid colour inside the bar, dependent cards are linked by arrows, and today is a brand line. This is a reskin of the Nextcloud Deck «Gantt view» (Hub 26, built on frappe-gantt): markup uses Deck and frappe-gantt classes, styling uses PDP tokens. The block is always in the EcoSystem 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: [Gantt view](https://design.pdp.uz/ds/dashboard/#gantt-gantt-korinishi); [Admissions campaign 2026](https://design.pdp.uz/ds/dashboard/#gantt-qabul-kampaniyasi-2026); [Gantt rules](https://design.pdp.uz/ds/dashboard/#gantt-gantt-qoidalari)
- PDP classes: .eco-avatar (--3d, --xs), .eco-btn (--ghost, --icon, --primary, --sm, --tertiary, --xs), .eco-progress, .eco-segment (--sm)
- Nextcloud DOM classes reproduced in the example: .board-header, .board-title, .demo (--gn, __label), .gantt-bar (--color-1), .gantt-legend (__dot, __item, __line, __today), .gantt-undated (__card, __list, __stack-dot, __stack-name, __title), .snip-fold (__chev, __sum)

### Calendar (Nextcloud) — https://design.pdp.uz/ds/dashboard/#calendar

**Calendar: Nextcloud Calendar reskin.** Calendar is the schedule of classes, meetings, exams and events: a date picker, «New event» and the calendar list (each in its own colour) on the left, a month, week, day or list view on the right. It is a reskin of the Nextcloud Calendar app in the PDP cloud: markup uses Nextcloud and FullCalendar classes, styling uses PDP tokens. The block always uses the EcoSystem 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: [Calendar app](https://design.pdp.uz/ds/dashboard/#calendar-kalendar-ilovasi); [Appointments (booking)](https://design.pdp.uz/ds/dashboard/#calendar-uchrashuvlar-bron-qilish); [Calendar colours](https://design.pdp.uz/ds/dashboard/#calendar-kalendar-ranglari)
- PDP classes: .eco-avatar (--3d), .eco-btn (--ghost, --icon, --primary, --sm, --tertiary, --xs), .eco-check (--md), .eco-choice, .eco-field, .eco-hint, .eco-input (--sm), .eco-label, .eco-menu (__body, __check, __item, __title), .eco-modal (--xs, __actions, __body, __close, __text, __title), .eco-segment (--sm), .eco-switch
- Nextcloud DOM classes reproduced in the example: .appointment-config-list (__caption), .appointment-config-modal (__form, __form__row--wrapped, __form__title, __submit-button), .booking (__config-user-info, __container, __date, __date-header, __date-selection, __description, __display-name, __name, __slot-selection, __slots, __time, __time-zone), .calendar-list-wrapper, .calendar-picker-header (__icon, __icon__dot, __picker), .calendar-select, .calendar-wrapper, .datepicker-button-section (__datepicker, __datepicker-label, __left, __right), .demo (--cal, __label), .dp (__calendar, __calendar_header, __calendar_header_item, __calendar_row, __inner_nav, __menu, __month_year_row, __month_year_select), .event-popover (__cancelled, __content, __date-options, __footer, __header, __inner, __location-row, __top-actions), .invitees-list (__header, __header__title__text, __more), .property-text (__icon, __input), .property-title-time-picker (__icon, __time-pickers), .property-title (__input), .snip-fold (__chev, __sum)

### Tables (Nextcloud) — https://design.pdp.uz/ds/dashboard/#tables

**Tables: tables and views.** Tables — data tables in Nextcloud: student lists, open lessons, inventory. Columns of different types (text, number, selection, date, progress, stars, user), sorting, filtering and search, saved views, an add-row dialog and in-place cell editing. This is a reskin of the Nextcloud Tables app in the PDP cloud: markup uses the Tables and @nextcloud/vue classes, styling uses PDP tokens. The block always uses the EcoSystem 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: [Tables app](https://design.pdp.uz/ds/dashboard/#tables-tables-ilovasi); [Tables rules](https://design.pdp.uz/ds/dashboard/#tables-tables-qoidalari)
- PDP classes: .eco-avatar (--3d, --sm, --tint, --xs), .eco-btn (--icon, --primary, --secondary, --sm, --tertiary, --xs), .eco-check, .eco-chip, .eco-icon, .eco-input (--sm), .eco-input-wrap, .eco-label, .eco-menu (__body, __check, __item, __label, __sep, __title), .eco-modal (--md, __actions, __close, __title), .eco-pagination (__info, __next, __page, __pages, __prev), .eco-progress, .eco-tab, .eco-tabs
- Nextcloud DOM classes reproduced in the example: .counter-bubble (__counter), .demo (--tb, __label), .frozen-column (--last), .modal (__content), .progress-display (__bar), .snip-fold (__chev, __sum), .tables-list (__table, __thead), .user-bubble (__wrapper)

### Forms (Nextcloud) — https://design.pdp.uz/ds/dashboard/#nc-forms

**Forms: surveys, applications and responses.** Forms covers applications, surveys and sign-up forms: forms on the left, the editor in the middle (question types, required questions, options), «View» — the form as a respondent sees it, «Results» — a summary and every response. This is a reskin of the Nextcloud Forms app in the PDP cloud: markup uses Forms and @nextcloud/vue classes, styling uses PDP tokens. The block is always in the EcoSystem 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: [Forms app](https://design.pdp.uz/ds/dashboard/#nc-forms-forms-ilovasi); [Forms rules](https://design.pdp.uz/ds/dashboard/#nc-forms-forms-qoidalari)
- PDP classes: .eco-avatar (--3d, --sm, --xs), .eco-btn (--ghost, --icon, --primary, --sm, --tertiary, --xs), .eco-check (--md), .eco-featured-icon (--md), .eco-icon, .eco-input, .eco-input-wrap, .eco-menu (__body, __check, __item, __item--danger, __title), .eco-pagination (__page, __pages), .eco-progress, .eco-radio (--md), .eco-segment (--sm), .eco-toast
- Nextcloud DOM classes reproduced in the example: .answer (__question-text, __text), .counter-bubble (__counter), .demo (--fm, __label), .forms-navigation (__list-heading), .forms (__archived-forms-toggle), .list-item-content (__main, __name, __subname), .list-item-details (__extra), .list-item (__anchor, __wrapper, __wrapper--active), .option (__actions), .question (--editable, __content, __drag-handle, __drag-handle-button, __error, __header, __header__description, __header__description__input, __header__description__output, __header__title, __header__title__menu, __header__title__text, __header__title__text__input, __input, __input--shifted, __item, __item__pseudoInput, __text), .question-linear-scale (__label, __label-highest, __label-input, __label-lowest, __option, __options), .question-menu (__question), .question-summary (__detail, __statistic, __statistic-percentage, __statistic-text--best, __text), .response-actions (__toggle), .snip-fold (__chev, __sum)

### Polls (Nextcloud) — https://design.pdp.uz/ds/dashboard/#polls

**Polls: voting on dates and options.** Polls is voting to agree on a meeting date or pick an option: columns are dates or options, rows are participants, a cell is «yes», «maybe» or «no». The option with the most «yes» stands out and the owner confirms it. This is a reskin of the Nextcloud Polls app in the PDP cloud: markup uses Polls classes, styling uses PDP tokens. The block is always in the EcoSystem 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: [Polls app](https://design.pdp.uz/ds/dashboard/#polls-polls-ilovasi); [Comments](https://design.pdp.uz/ds/dashboard/#pl-com-h); [Polls rules](https://design.pdp.uz/ds/dashboard/#polls-polls-qoidalari)
- PDP classes: .eco-avatar (--3d, --sm), .eco-btn (--icon, --primary, --sm, --tertiary, --xs), .eco-input (--sm), .eco-segment (--sm), .eco-toast
- Nextcloud DOM classes reproduced in the example: .area (__top, __vote), .comment-add (__input), .comment-item (__content, __date, __sub-comment, __user), .counter-bubble (__counter), .demo (--pl, __label), .option-item (__option--date, __option--text), .snip-fold (__chev, __sum), .user-item (__name)

### Contacts (Nextcloud) — https://design.pdp.uz/ds/dashboard/#contacts

**Contacts: teachers, parents and partners.** Contacts is the address book of the school and academy: groups (teachers, parents, partners) and teams on the left, a searchable list in the middle, and the contact card on the right — phone, email, address, birthday, groups and quick actions (Talk, email, call). This is a reskin of the Nextcloud Contacts app in the PDP cloud: markup uses Contacts and @nextcloud/vue classes, styling uses PDP tokens. The block is always in the EcoSystem 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: [Contacts app](https://design.pdp.uz/ds/dashboard/#contacts-contacts-ilovasi); [Contacts rules](https://design.pdp.uz/ds/dashboard/#contacts-contacts-qoidalari)
- PDP classes: .eco-avatar (--3d, --tint, --xs), .eco-btn (--ghost, --icon, --primary, --sm, --tertiary, --xs), .eco-icon, .eco-input (--sm), .eco-input-wrap, .eco-menu (__body, __item, __title), .eco-toast
- Nextcloud DOM classes reproduced in the example: .contact-header (__actions, __avatar, __infos, __infos-subtitle, __infos-title, __no-wrap, __quick-actions), .contacts-list (__header, __item-icon), .counter-bubble (__counter), .demo (--ct, __label), .envelope (__subtitle), .group (__list), .list-item-content (__name), .list-item (__anchor, __wrapper, __wrapper--active), .property (--groups, --last, --title, __actions, __ext, __label, __row, __value), .snip-fold (__chev, __sum)

### Notes (Nextcloud) — https://design.pdp.uz/ds/dashboard/#notes

**Notes: notes and categories.** Notes is for quick notes: meeting minutes, lesson plans, checklists. Categories on the left, notes in the middle (favourites on top), and on the right a Markdown editor with a preview mode (headings, lists, tickable items). This is a reskin of the Nextcloud Notes app in the PDP cloud: markup uses Notes and @nextcloud/vue classes, styling uses PDP tokens. The block is always in the EcoSystem 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: [Notes app](https://design.pdp.uz/ds/dashboard/#notes-notes-ilovasi); [Notes rules](https://design.pdp.uz/ds/dashboard/#notes-notes-qoidalari)
- PDP classes: .eco-btn (--ghost, --icon, --primary, --sm, --tertiary), .eco-check, .eco-icon, .eco-input, .eco-input-wrap, .eco-segment (--sm)
- Nextcloud DOM classes reproduced in the example: .action-buttons, .content-list (__search), .counter-bubble (__counter), .demo (--nt, __label), .list-item-content (__name, __subname), .list-item-details (__details), .list-item (__anchor, __wrapper, __wrapper--active), .snip-fold (__chev, __sum)

### Collectives (Nextcloud) — https://design.pdp.uz/ds/dashboard/#collectives

**Collectives: team knowledge base.** Collectives — the team’s shared wiki: teachers’ council decisions, teaching guides, internal rules. On the left are collectives and the page tree (nested pages, filter, new page), on the right the page: title, last change, the Text editor and its toolbar. This is a reskin of the Nextcloud Collectives app in the PDP cloud: markup uses the Collectives, Text and @nextcloud/vue classes, styling uses PDP tokens. The block always uses the EcoSystem 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: [Collectives app](https://design.pdp.uz/ds/dashboard/#collectives-collectives-ilovasi); [Agenda](https://design.pdp.uz/ds/dashboard/#collectives-kun-tartibi); [Attended](https://design.pdp.uz/ds/dashboard/#collectives-qatnashdi); [Collectives rules](https://design.pdp.uz/ds/dashboard/#collectives-collectives-qoidalari)
- PDP classes: .eco-avatar (--3d, --xs), .eco-btn (--icon, --primary, --sm, --tertiary), .eco-icon, .eco-input, .eco-input-wrap
- Nextcloud DOM classes reproduced in the example: .action-button-add, .demo (--cl, __label), .editor (__content, __content-wrapper), .snip-fold (__chev, __sum), .text-editor (__content), .text-menubar (__entries)

### Announcements (Nextcloud) — https://design.pdp.uz/ds/dashboard/#announcements

**Announcements: school notices.** Announcement Center — a notice for the whole school or selected groups: open day, test schedule, holidays. The administration writes a notice and picks who can see it (teachers, parents, classes), schedules it if needed; everyone reads it and leaves comments. This is a reskin of the Nextcloud Announcement Center app in the PDP cloud: markup uses the Announcement Center, Comments and @nextcloud/vue classes, styling uses PDP tokens. The block always uses the EcoSystem 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: [Announcement Center app](https://design.pdp.uz/ds/dashboard/#announcements-announcement-center); [Announcements rules](https://design.pdp.uz/ds/dashboard/#announcements-announcements-qoidalari)
- PDP classes: .eco-avatar (--3d), .eco-btn (--icon, --primary, --sm, --tertiary, --xs), .eco-chip, .eco-choice, .eco-input (--sm), .eco-segment (--sm), .eco-switch
- Nextcloud DOM classes reproduced in the example: .announcement (__comments, __form, __form__buttons, __form__message, __form__subject, __header, __header__details, __header__details__info, __header__subject, __message, __message--folded, __message__overlay), .comment (__author, __avatar, __body, __header, __message, __side, __timestamp), .comments (__empty, __list, __writer), .demo (--an, __label), .snip-fold (__chev, __sum), .user-bubble (__wrapper)

### Bookmarks (Nextcloud) — https://design.pdp.uz/ds/dashboard/#bookmarks

**Bookmarks: useful links.** Bookmarks — a teacher’s collection of links: lesson platforms, teaching sites, online quizzes. Sections and tags on the left; folders and links on the right (list or grid), search, sorting and a new link; click a link to see its details, tags and note in the sidebar. This is a reskin of the Nextcloud Bookmarks app in the PDP cloud: markup uses the Bookmarks and @nextcloud/vue classes, styling uses PDP tokens. The block always uses the EcoSystem 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: [Bookmarks app](https://design.pdp.uz/ds/dashboard/#bookmarks-bookmarks-ilovasi); [Bookmarks rules](https://design.pdp.uz/ds/dashboard/#bookmarks-bookmarks-qoidalari)
- PDP classes: .eco-btn (--icon, --primary, --sm, --tertiary, --xs), .eco-field, .eco-icon, .eco-input, .eco-input-wrap, .eco-label, .eco-segment (--sm)
- Nextcloud DOM classes reproduced in the example: .bookmark (__description, __icon, __title), .controls (__left, __right), .counter-bubble (__counter), .demo (--bm, __label), .details (__line, __url), .folder (__icon, __title), .item (__NcActions, __clickLink, __icon, __labels, __rating), .tagline (__tag)

### Learning components (Learning) — https://design.pdp.uz/ds/dashboard/#edtech

**Blocks a standard UI kit doesn’t have.** Course path, class schedule, assignment, grade journal, attendance and leaderboard — the pieces that make the screens of PDP learning products feel alike. They aren’t new components: they’re assembled from card, badge, progress and table tokens. The structure is the same in every brand; the sample text changes with the brand.

- Blocks: [Course path](https://design.pdp.uz/ds/dashboard/#edtech-kurs-yoli); [Class schedule](https://design.pdp.uz/ds/dashboard/#edtech-dars-jadvali); [Task](https://design.pdp.uz/ds/dashboard/#edtech-topshiriq); [Assignment: teacher view](https://design.pdp.uz/ds/dashboard/#edtech-topshiriq-oqituvchi); [Grade journal](https://design.pdp.uz/ds/dashboard/#edtech-baholar-jurnali); [Attendance](https://design.pdp.uz/ds/dashboard/#edtech-davomat); [Leaderboard](https://design.pdp.uz/ds/dashboard/#edtech-reyting)
- PDP classes: .eco-avatar (--3d, --lg, --sm), .eco-badge (--brand, --dot, --error, --sm, --success, --warning), .eco-btn (--primary, --secondary, --sm, --tertiary), .eco-card (__title), .eco-icon (--sm), .eco-link, .eco-pagination (--minimal, __btns, __info, __next, __prev), .eco-progress, .eco-progress-circle (--xxs, __v), .eco-segment, .eco-table (__person), .eco-table-card (__actions, __body, __desc, __foot, __head, __heading, __title)

### App navigation (App shell) — https://design.pdp.uz/ds/dashboard/#navigation

**Bottom bar, rail, app bar and FAB.** Four components for phone and tablet app screens. The bottom bar and the rail carry the same items — only their position changes with the window class (Adaptive layout); the app bar holds the screen title, “Back” and 1–3 actions; the FAB is the screen’s main create action. Site header — Required blocks, personal account sidebar — Page anatomy. Based on Material Design 3 and Apple HIG “Tab bars”; per the brand rule, no shadows or strokes.

- EcoSystem only: shown only in the EcoSystem brand (other brands show a note); internal projects do not build CRM/ERP screens.
- Blocks: [Together on screen](https://design.pdp.uz/ds/dashboard/#navigation-ekranda-birga); [Sizes and rules](https://design.pdp.uz/ds/dashboard/#navigation-olchamlar-va-qoidalar)
- PDP classes: .eco-appbar (--lg, __sub, __title), .eco-avatar (--3d, --sm), .eco-btn (--ghost, --icon), .eco-fab (--ext, --sm, --tonal), .eco-navbar (__badge, __ico, __item), .eco-only, .eco-rail

### App shells (App shell) — https://design.pdp.uz/ds/dashboard/#app-shells

**Sidebar, header and workspace: four variants.** The app shell is the part that stays the same on every screen: the sidebar (navigation), the header row (path, search, actions) and the workspace. There is one variant: it is chosen once per product and looks the same on every screen. Based on shadcn/ui Blocks (Sidebar, Dashboard); window classes — Adaptive layout, mobile navigation — App navigation.

- 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: [Live example: dashboard shell](https://design.pdp.uz/ds/dashboard/#app-shells-jonli-namuna-dashboard); [Dashboard page: four zones](https://design.pdp.uz/ds/dashboard/#app-shells-dashboard-sahifasi-tort); [Sizes and rules](https://design.pdp.uz/ds/dashboard/#app-shells-olchamlar-va-qoidalar)
- PDP classes: .eco-avatar (--3d, --sm, --tint), .eco-btn (--ghost, --icon, --primary, --sm), .eco-only, .eco-segment (--sm)

### Notification centre (App shell) — https://design.pdp.uz/ds/dashboard/#notifications

**Notification centre and message types.** A CRM has lots of messages: a new application, a payment, homework, a schedule change. If everything pops up as a toast, it breaks people’s focus; if nothing stays anywhere, messages get lost. The notification centre is a panel under the bell in the header: messages are grouped by day, unread ones are marked, and each has one action. Which message appears in which form is in the table below. Toasts and alerts — States, Panels and layers; the Nextcloud home screen — Dashboard. Based on IBM Carbon (Notifications) and Atlassian (Flags).

- 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: [Live example: bell and panel](https://design.pdp.uz/ds/dashboard/#notifications-jonli-namuna-qongiroqcha); [Which message — which type](https://design.pdp.uz/ds/dashboard/#notifications-qaysi-xabar-qaysi)
- PDP classes: .eco-avatar (--3d, --sm), .eco-btn (--icon, --link-color, --link-gray, --sm, --tertiary), .eco-only, .eco-segment (--fill, --sm)

### New feature tour (App shell) — https://design.pdp.uz/ds/dashboard/#tour

**New feature tour: what changed, in 3 steps.** A new capability has landed in the CRM — staff need to find it without stopping their work. The tour dims the screen, highlights one spot and says in two lines why it matters; 3–4 steps, with a way out at every step. A single tip and a getting-started checklist are in Website Onboarding and permissions. Inspired by Atlassian (Spotlight).

- 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/dashboard/#tour-jonli-namuna); [Anatomy](https://design.pdp.uz/ds/dashboard/#tour-anatomiya); [Keyboard, screen readers and rules](https://design.pdp.uz/ds/dashboard/#tour-klaviatura-ekran-oqigich)
- PDP classes: .eco-avatar (--3d, --sm), .eco-btn (--icon, --primary, --secondary, --sm, --tertiary), .eco-only, .eco-segment (--sm), .eco-tour (__close, __dots, __foot, __step, __text, __title), .eco-tour-spot
- Nextcloud DOM classes reproduced in the example: .snip-fold (__chev, __sum)

## 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-active, --eco-bg-brand-primary, --eco-bg-brand-solid, --eco-bg-disabled, --eco-bg-error-primary, --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-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-primary, --eco-border-secondary, --eco-border-tertiary
- Icons (fg): --eco-fg-brand-primary, --eco-fg-brand-primary_alt, --eco-fg-brand-secondary, --eco-fg-disabled, --eco-fg-error-primary, --eco-fg-error-secondary, --eco-fg-info-primary, --eco-fg-primary, --eco-fg-quaternary, --eco-fg-secondary, --eco-fg-success-primary, --eco-fg-success-secondary, --eco-fg-tertiary, --eco-fg-warning-primary, --eco-fg-white
- Brand and buttons: --eco-avatar-tint-bg, --eco-avatar-tint-ink, --eco-board-, --eco-board-1, --eco-board-2, --eco-board-3, --eco-board-4, --eco-board-5, --eco-board-6, --eco-board-ink-1, --eco-board-ink-2, --eco-board-ink-3, --eco-board-ink-4, --eco-board-ink-5, --eco-board-ink-6, --eco-brand-accent, --eco-brand-button, --eco-brand-button-ink, --eco-brand-on-button, --eco-brand-primary, --eco-chart-1, --eco-chart-2, --eco-chart-3, --eco-chart-4, --eco-rainbow-1, --eco-rainbow-2, --eco-rainbow-3, --eco-rainbow-4, --eco-rainbow-5, --eco-rainbow-c2, --eco-rainbow-c3, --eco-rainbow-c4, --eco-tab-pill-bg, --eco-tab-pill-fg, --eco-tab-pill-shadow
- Type: --eco-font-body, --eco-font-display, --eco-font-display--letter-spacing, --eco-font-mono, --eco-text-display-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-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
- 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-yellow, --eco-color-black, --eco-color-green-done, --eco-color-neutral-400, --eco-color-neutral-900, --eco-color-warning-400, --eco-color-white
- Other: --eco-field-focus-w, --eco-field-radius-affix, --eco-field-radius-multiline, --eco-icon-md, --eco-icon-sm, --eco-illo-base-on-grey, --eco-illo-ground-on-grey, --eco-illo-shade-on-grey, --eco-slider-fill

## 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/
- [Website (Sayt)](https://design.pdp.uz/ds/sayt/ai.md): Use when building a website, landing page or web interface: buttons, forms, slider, menus, badges, avatars (3D), cards, callouts, app components (tabs, progress, table, pagination, modal, empty state, upload), charts, chip types, rich tooltip and submenu; extra components — command palette, date picker, overlays (sheet, hover card, context menu, toast stack), data table (toolbar, bulk actions), structure (accordion, tree, stepper, carousel, resizable), field patterns (input group, error summary, validation timing), toolbar (toggle group, split button, menubar), inline edit and contextual save bar, status indicators (icon, shape, KPI delta), saved views with filter pills; EcoSystem-only (r92): number input (−/+ stepper, spinbutton), rating and feedback (star input and display, rating summary, NPS 0–10 scale, «Was this helpful?»), countdown and deadline chips, table settings (density 40/52/64, expandable rows, pinned first column), tag / multi-select field (chips inside the field, typeahead listbox, create new, limit), video lesson player (chapters on the timeline, speed, captions, transcript, next-lesson end card), gallery and lightbox viewer (dialog, prev/next, zoom, swipe); page templates — sign-in, sign-up and password reset, multi-step application (question pages, check answers, confirmation), error pages (404, 500, 503 maintenance, 403 — EcoSystem only); email (EcoSystem only, r94): base layout (600 px table layout, tokens compiled to inline hex, dark mode via prefers-color-scheme and [data-ogsc], locked logo header, bulletproof pill button, preheader), 8 ready templates in Uzbek, Russian and English with plain-text parts (email verification, password reset, application received, payment receipt, lesson reminder, certificate ready, event invitation with add-to-calendar and .ics, weekly digest with one-click unsubscribe) at https://design.pdp.uz/ds/email/, staff email signature generator (HTML + plain text) and a pre-send checklist (Gmail clipping < 100 KB, client matrix); backgrounds, live backgrounds, text motion and effects; brand card kinds and signatures; states, required blocks (header, footer, hero, CTA), page anatomy; patterns and guides — interaction states, adaptive layout, writing, microcopy library (310+ ready UI strings in Uzbek, Russian and English with context, max length, tone and an avoid variant; 14 categories incl. validation, destructive confirmations, push/SMS, payments and classes/attendance/certificates; ICU plurals; download https://design.pdp.uz/ds/sayt/microcopy.json and microcopy.csv — reuse these strings by id instead of writing new ones), onboarding and permissions, search, data entry, modality, settings, data visualisation, inclusive language, task list, step-by-step navigation, cookie consent. Every section works in all six brands (tokens, logo slot and fonts follow the active brand). Page: https://design.pdp.uz/ds/sayt/
- [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.