# PDP Design System — Desk kit (Desk), 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 screens: PDP Desk (files, Nextcloud Files based) or PDP Talk (chat and calls, Nextcloud Talk based) Android apps: home, file list, file detail and sharing, uploads, media viewer, profile and settings; chat list, chat, call, chat info and settings, onboarding — each screen as «Hozirgi holat» (current app) and «Redesign». Web dashboard parent components (sidebar variants S1–S4, rail colour) are in the Dashboard kit; mobile tokens and the .mb-* phone kit are in the Mobile kit; shared web components (buttons, forms, tabs, table, modal) are in the Website kit.

Page: https://design.pdp.uz/ds/desk/ (all six brands; ?brand=<id>, ?theme=light|dark, ?lang=uz|ru|en).
Page structure (since 08.10.2026): each block shows only its title, at most one short line and the live demo. Its rules, spec and «where to use what» tables, notes, do/don't examples and code sit in the collapsed panel «Qoidalar va kod» (Rules & code; <details class="rf">) right under the demo. Since r142 the same goes for captions inside cards and figures: only the short name label stays visible (e.g. «Brend», «16»); the explanatory sentences and token/code lines are in the panel as «Name — text / code» (div.rf-cap). The text is in the page HTML, so read it there (closed <details> content is still in the DOM); this file summarises the same rules. A #anchor inside a panel opens it.
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 Desk 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.75/pdp-components.css (@pdp/design-system@0.7.75, immutable; latest: https://design.pdp.uz/ds/css/; manifest: https://design.pdp.uz/ds/css/v0.7.75/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/ishxona/#dev-install.

Task guides (read the one for your task first): https://design.pdp.uz/ds/ai/task/web-app.md · https://design.pdp.uz/ds/ai/task/dashboard-charts.md · https://design.pdp.uz/ds/ai/task/mobile-app.md · https://design.pdp.uz/ds/ai/task/website.md · https://design.pdp.uz/ds/ai/task/lms.md. Copyable HTML for every block: https://design.pdp.uz/ds/ai/index.md (one recipe per block; link under each section below). All kits: https://design.pdp.uz/llms.txt

## Icons in apps (a-*)

- In app screens (PDP Desk and PDP Talk redesign, mobile app, Telegram Mini App and bot) use the Telegram UI kit icons from the sprite on this page: `<svg><use href="#a-<name>"/></svg>`. Web pages and every other kit use Phosphor (`#i-<name>`). Do not mix a-* and i-* in one app screen, except where the app set has no icon (list below — keep the Phosphor one).
- Grid: 27 units (Telegram), sprite viewBox 25 × 25 (1 unit trimmed per side, nothing is clipped). Same CSS sizes as Phosphor: 24 px in bars and lists, 24–26 px in the tab bar, 20 px in search, 16 px in chips. Colour is currentColor (a text or fg token).
- Active/selected state: the `-fill` twin where it exists (a-folder-fill, a-house-fill, a-star-fill, a-image-fill, a-user-fill); otherwise keep the line icon and show the state with the pill. Chat send button: a-send-fill (Telegram Filled / Send).
- Icons (73): a-arrow-left (i-arrow-left); a-arrow-right (i-arrow-right); a-arrow-up-right (i-arrow-up-right, i-external-link); a-chevron-up (i-chevron-up); a-chevron-down (i-chevron-down); a-chevron-left (i-chevron-left); a-chevron-right (i-chevron-right); a-search (i-search); a-settings (i-settings); a-bell (i-bell); a-bell-off (i-bell-off); a-star (i-star); a-star-fill (i-star-fill); a-image (i-image); a-image-fill (i-image-fill); a-layers (i-layers); a-folder (i-folder); a-folder-fill (i-folder-fill); a-house (i-house); a-house-fill (i-house-fill); a-chat (i-chats, i-message-circle); a-phone (i-phone); a-phone-off (i-phone-off); a-video (i-video); a-screen-share; a-mic (i-mic); a-mic-off (i-mic-off); a-hand; a-paperclip (i-paperclip); a-smile (i-smile); a-send (i-send); a-send-fill (i-send-right-fill); a-forward; a-reply (i-reply); a-copy (i-copy); a-pencil (i-pencil); a-trash (i-trash-2); a-share (i-share-2); a-link (i-link); a-download (i-download); a-upload (i-upload); a-camera; a-pin (i-pin, i-pin-fill); a-archive; a-lock (i-lock); a-shield; a-user (i-user); a-user-fill (i-user-fill); a-users (i-users, i-users-three); a-user-plus (i-user-plus); a-plus (i-plus); a-x (i-x, i-x-bold); a-check (i-check, i-check-bold); a-check-check (i-check-check); a-more (i-ellipsis); a-menu (i-menu); a-info (i-info); a-alert (i-circle-alert); a-calendar (i-calendar, i-calendar-fill, i-calendar-days); a-clock (i-clock); a-notepad (i-notepad-text, i-notepad-text-fill); a-globe (i-globe); a-log-out (i-log-out); a-moon (i-moon); a-palette (i-palette); a-map-pin (i-map-pin); a-laptop (i-laptop); a-refresh (i-refresh-cw); a-sliders (i-sliders-horizontal); a-trending-up (i-trending-up); a-layout-grid (i-layout-grid); a-money (i-coins); a-play (i-play, i-play-fill).
- No Telegram match — keep Phosphor: i-book-open, i-book-open-fill, i-file-text, i-file-pdf, i-file-doc, i-file-xls, i-file-ppt, i-file-zip, i-file-image, i-code, i-component, i-layout-template, i-award, i-sparkles, i-cloud-off, i-wifi-off, i-smartphone, i-inbox, i-list-checks, i-circle-check, i-calendar-check, i-arrow-down-wide-narrow.
- Source: unofficial community Figma kit «Telegram Design System» (based on Telegram 7.8.1); art director decision 07.10.2026. Check the licence before shipping App Store or Google Play apps.

## Sections

### Dashboard (PDP Desk — web) — https://design.pdp.uz/ds/desk/#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/desk/#dashboard-nextcloud-dashboard); [Home screen](https://design.pdp.uz/ds/desk/#dashboard-bosh-ekran); [Tile: states](https://design.pdp.uz/ds/desk/#dashboard-plitka-holatlar)
- PDP classes: .eco-dash (__app, __cap, __grid, __group, __head, __ic, __n, __name, __rule, __sub, __title), .eco-ncdash
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/dashboard-nc.md https://design.pdp.uz/ds/ai/r/dashboard-home.md https://design.pdp.uz/ds/ai/r/dashboard-states.md

### Files (PDP Desk — web) — https://design.pdp.uz/ds/desk/#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/desk/#files-fayllar-ilovasi); [Internal shares](https://design.pdp.uz/ds/desk/#files-ichki-ulashishlar); [External shares](https://design.pdp.uz/ds/desk/#files-tashqi-ulashishlar); [States: selection, empty folder, drag and drop, upload, new folder](https://design.pdp.uz/ds/desk/#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)
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/files-app.md https://design.pdp.uz/ds/ai/r/files-states.md

### Photos (PDP Desk — web) — https://design.pdp.uz/ds/desk/#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/desk/#photos-photos-ilovasi); [Photos rules](https://design.pdp.uz/ds/desk/#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)
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/photos-app.md

### Activity (PDP Desk — web) — https://design.pdp.uz/ds/desk/#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/desk/#activity-faollik-ilovasi); [Parts and Nextcloud classes](https://design.pdp.uz/ds/desk/#activity-qismlar-va-nextcloud); [Nextcloud DOM](https://design.pdp.uz/ds/desk/#activity-nextcloud-dom)
- PDP classes: .eco-avatar (--3d), .eco-input (--sm), .eco-switch
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/activity-app.md

### Talk (chat) (PDP Desk — web) — https://design.pdp.uz/ds/desk/#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/desk/#talk-talk-ilovasi); [Yuborish tugmasi va javob paneli](https://design.pdp.uz/ds/desk/#talk-yuborish-tugmasi-va); [Call view](https://design.pdp.uz/ds/desk/#talk-qongiroq-korinishi); [Talk DOM and styling](https://design.pdp.uz/ds/desk/#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-replybar (__author, __body, __close, __icon, __text), .eco-segment (--sm), .eco-send (--lg, --sm), .eco-tab, .eco-tabs
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/talk-app.md https://design.pdp.uz/ds/ai/r/talk-composer.md https://design.pdp.uz/ds/ai/r/talk-call.md

### Mail (PDP Desk — web) — https://design.pdp.uz/ds/desk/#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/desk/#mail-mail-ilovasi); [Mail rules](https://design.pdp.uz/ds/desk/#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)
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/mail-app.md

### Kanban (Deck) (PDP Desk — web) — https://design.pdp.uz/ds/desk/#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/desk/#kanban-deck-ilovasi); [By tag](https://design.pdp.uz/ds/desk/#kanban-teg-boyicha); [By assignee](https://design.pdp.uz/ds/desk/#kanban-biriktirilgan-boyicha); [By due date](https://design.pdp.uz/ds/desk/#kanban-muddat-boyicha); [Deck DOM and styling](https://design.pdp.uz/ds/desk/#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
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/app-kanban.md

### Tasks (PDP Desk — web) — https://design.pdp.uz/ds/desk/#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/desk/#tasks-tasks-ilovasi); [Tasks DOM and styling](https://design.pdp.uz/ds/desk/#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
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/tasks-app.md

### Gantt (PDP Desk — web) — https://design.pdp.uz/ds/desk/#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/desk/#gantt-gantt-korinishi); [Admissions campaign 2026](https://design.pdp.uz/ds/desk/#gantt-qabul-kampaniyasi-2026); [Gantt rules](https://design.pdp.uz/ds/desk/#gantt-gantt-qoidalari)
- PDP classes: .eco-avatar (--3d, --xs), .eco-btn (--ghost, --icon, --primary, --sm, --tertiary, --xs), .eco-progress, .eco-segment (--sm)
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/gantt-app.md

### Calendar (PDP Desk — web) — https://design.pdp.uz/ds/desk/#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/desk/#calendar-kalendar-ilovasi); [Appointments (booking)](https://design.pdp.uz/ds/desk/#calendar-uchrashuvlar-bron-qilish); [Calendar colours](https://design.pdp.uz/ds/desk/#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
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/calendar-app.md https://design.pdp.uz/ds/ai/r/calendar-appointments.md

### Tables (PDP Desk — web) — https://design.pdp.uz/ds/desk/#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/desk/#tables-tables-ilovasi); [Tables rules](https://design.pdp.uz/ds/desk/#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
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/tables-app.md

### Forms (PDP Desk — web) — https://design.pdp.uz/ds/desk/#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/desk/#nc-forms-forms-ilovasi); [Forms rules](https://design.pdp.uz/ds/desk/#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
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/nc-forms-app.md

### Polls (PDP Desk — web) — https://design.pdp.uz/ds/desk/#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/desk/#polls-polls-ilovasi); [Comments](https://design.pdp.uz/ds/desk/#pl-com-h); [Polls rules](https://design.pdp.uz/ds/desk/#polls-polls-qoidalari)
- PDP classes: .eco-avatar (--3d, --sm), .eco-btn (--icon, --primary, --sm, --tertiary, --xs), .eco-input (--sm), .eco-segment (--sm), .eco-toast
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/polls-app.md

### Contacts (PDP Desk — web) — https://design.pdp.uz/ds/desk/#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/desk/#contacts-contacts-ilovasi); [Contacts rules](https://design.pdp.uz/ds/desk/#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
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/contacts-app.md

### Notes (PDP Desk — web) — https://design.pdp.uz/ds/desk/#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/desk/#notes-notes-ilovasi); [Notes rules](https://design.pdp.uz/ds/desk/#notes-notes-qoidalari)
- PDP classes: .eco-btn (--ghost, --icon, --primary, --sm, --tertiary), .eco-check, .eco-icon, .eco-input, .eco-input-wrap, .eco-segment (--sm)
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/notes-app.md

### Collectives (PDP Desk — web) — https://design.pdp.uz/ds/desk/#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/desk/#collectives-collectives-ilovasi); [Agenda](https://design.pdp.uz/ds/desk/#collectives-kun-tartibi); [Attended](https://design.pdp.uz/ds/desk/#collectives-qatnashdi); [Collectives rules](https://design.pdp.uz/ds/desk/#collectives-collectives-qoidalari)
- PDP classes: .eco-avatar (--3d, --xs), .eco-btn (--icon, --primary, --sm, --tertiary), .eco-icon, .eco-input, .eco-input-wrap
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/collectives-app.md

### Announcements (PDP Desk — web) — https://design.pdp.uz/ds/desk/#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/desk/#announcements-announcement-center); [Announcements rules](https://design.pdp.uz/ds/desk/#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
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/announcements-app.md

### Bookmarks (PDP Desk — web) — https://design.pdp.uz/ds/desk/#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/desk/#bookmarks-bookmarks-ilovasi); [Bookmarks rules](https://design.pdp.uz/ds/desk/#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)
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/bookmarks-app.md

### Learning components (Learning) — https://design.pdp.uz/ds/desk/#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/desk/#edtech-kurs-yoli); [Class schedule](https://design.pdp.uz/ds/desk/#edtech-dars-jadvali); [Task](https://design.pdp.uz/ds/desk/#edtech-topshiriq); [Assignment: teacher view](https://design.pdp.uz/ds/desk/#edtech-topshiriq-oqituvchi); [Grade journal](https://design.pdp.uz/ds/desk/#edtech-baholar-jurnali); [Attendance](https://design.pdp.uz/ds/desk/#edtech-davomat); [Leaderboard](https://design.pdp.uz/ds/desk/#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)
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/edtech-kurs-yoli.md https://design.pdp.uz/ds/ai/r/edtech-dars-jadvali.md https://design.pdp.uz/ds/ai/r/edtech-topshiriq.md https://design.pdp.uz/ds/ai/r/ed-teacher.md https://design.pdp.uz/ds/ai/r/ed-journal.md https://design.pdp.uz/ds/ai/r/edtech-davomat.md https://design.pdp.uz/ds/ai/r/edtech-reyting.md

### App navigation (App shell) — https://design.pdp.uz/ds/desk/#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/desk/#navigation-ekranda-birga); [Sizes and rules](https://design.pdp.uz/ds/desk/#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
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/navigation-ekranda-birga.md

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

**Yon panel, sarlavha va ish maydoni: rels va to‘rt variant.** 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/desk/#app-shells-jonli-namuna-dashboard); [Minimal shell: drawer, scrim and collapse button](https://design.pdp.uz/ds/desk/#app-shells-minimal-karkas-varaq); [Dashboard page: four zones](https://design.pdp.uz/ds/desk/#app-shells-dashboard-sahifasi-tort); [Sizes and rules](https://design.pdp.uz/ds/desk/#app-shells-olchamlar-va-qoidalar)
- PDP classes: .eco-avatar (--3d, --hue-3, --sm, --tint), .eco-btn (--ghost, --icon, --primary, --sm), .eco-kbd, .eco-only, .eco-segment (--sm), .eco-shell (--drawer, --rail, __aux, __brand, __count, __crumb, __folder, __folder-ic, __group, __head, __item, __label, __logo, __main, __nav, __page, __rail, __rail-foot, __rail-mark, __scrim, __search, __side, __spacer, __title, __user)
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/app-shells-jonli-namuna-dashboard.md https://design.pdp.uz/ds/ai/r/app-shells-minimal.md

### Notification centre (App shell) — https://design.pdp.uz/ds/desk/#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/desk/#notifications-jonli-namuna-qongiroqcha); [Which message — which type](https://design.pdp.uz/ds/desk/#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)
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/notifications-jonli-namuna-qongiroqcha.md

### New feature tour (App shell) — https://design.pdp.uz/ds/desk/#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/desk/#tour-jonli-namuna); [Anatomy](https://design.pdp.uz/ds/desk/#tour-anatomiya); [Keyboard, screen readers and rules](https://design.pdp.uz/ds/desk/#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
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/tour-live.md

### PDP Desk — overview (PDP Desk — mobile) — https://design.pdp.uz/ds/desk/#pdesk-app

**PDP Desk — the files app.** PDP Desk is the PDP team’s files app: documents, photos and folders look the same on phone, desktop and browser. It is built on Nextcloud Files with the PDP EcoSystem look. Every screen in this group comes in two views: “Current state” — from the 03.10 prototype and the 05.10 Android code, and “Redesign” — by DS rules, with what changed.

- 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: [App and platforms](https://design.pdp.uz/ds/desk/#pdesk-app-ilova-va-platformalar); [How it relates to Nextcloud](https://design.pdp.uz/ds/desk/#pdesk-app-nextcloud-bilan-aloqasi); [Navigation map](https://design.pdp.uz/ds/desk/#pdesk-app-navigatsiya-xaritasi); [Icon and launch screen](https://design.pdp.uz/ds/desk/#pdesk-app-ikonka-va-ochilish); [iOS — stock for now](https://design.pdp.uz/ds/desk/#pdesk-app-ios-hozircha-stock)
- PDP classes: .eco-only
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/pdesk-app-icon.md https://design.pdp.uz/ds/ai/r/pdesk-app-ios.md

### Home screen (PDP Desk — mobile) — https://design.pdp.uz/ds/desk/#pdesk-home

**Home screen.** The first screen when Desk opens: greeting, the “Files” title, search, the storage card, “Recent” files and the start of the list. The Light/Dark switch on top changes both phones at once.

- 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: [Home: current state and redesign](https://design.pdp.uz/ds/desk/#pdesk-home-bosh-ekran-hozirgi)
- PDP classes: .eco-only
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/pdesk-home-main.md

### File list (PDP Desk — mobile) — https://design.pdp.uz/ds/desk/#pdesk-files

**File list.** Inside a folder: filter chips, sorting, file rows, selection mode and the “Create” sheet. File names are not translated.

- 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: [List, selection and create](https://design.pdp.uz/ds/desk/#pdesk-files-royxat-tanlash-va)
- PDP classes: .eco-check (--round), .eco-only
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/pdesk-files-main.md

### File details and sharing (PDP Desk — mobile) — https://design.pdp.uz/ds/desk/#pdesk-detail

**File details and sharing.** When a file opens: a large preview, name and size, four quick actions, access, link and activity; the sharing screen shows who views and who edits.

- 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: [Details and sharing](https://design.pdp.uz/ds/desk/#pdesk-detail-tafsilot-va-ulashish)
- PDP classes: .eco-only
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/pdesk-detail-main.md

### Uploads (PDP Desk — mobile) — https://design.pdp.uz/ds/desk/#pdesk-uploads

**Uploads.** Sending phone files to the server: progress, waiting, errors, finished uploads and the choice when a file changed in two places.

- 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: [Uploads and conflict](https://design.pdp.uz/ds/desk/#pdesk-uploads-yuklashlar-va-ziddiyat)
- PDP classes: .eco-only, .eco-radio (--md)
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/pdesk-uploads-main.md

### Media and viewer (PDP Desk — mobile) — https://design.pdp.uz/ds/desk/#pdesk-media

**Media and viewer.** Phone photos and videos by month and full-screen viewing. The viewer is black even in Light — for the sake of the photo.

- 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: [Gallery and viewer](https://design.pdp.uz/ds/desk/#pdesk-media-galereya-va-koruvchi)
- PDP classes: .eco-glass (--pill), .eco-only
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/pdesk-media-main.md

### Profile and settings (PDP Desk — mobile) — https://design.pdp.uz/ds/desk/#pdesk-settings

**Profile and settings.** Account, storage, appearance, sync, security and notifications. Today they live in two places: the prototype profile and Nextcloud’s stock settings.

- 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: [Profile and settings](https://design.pdp.uz/ds/desk/#pdesk-settings-profil-va-sozlamalar)
- PDP classes: .eco-only
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/pdesk-settings-main.md

### PDP Talk — overview (PDP Talk) — https://design.pdp.uz/ds/desk/#ptalk-app

**PDP Talk — chats and calls.** PDP Talk is the team’s chats and calls: personal and group chats, files, voice messages, reactions, audio and video calls. It is built on Nextcloud Talk. Every screen comes in two views: “Current state” (prototype and Compose code) and “Redesign” (DS rules).

- 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: [List → chat → call](https://design.pdp.uz/ds/desk/#ptalk-app-royxat-chat-qongiroq)
- PDP classes: .eco-only, .eco-replybar (__author, __body, __close, __icon, __text), .eco-send
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/ptalk-app-about.md

### Chat list (PDP Talk) — https://design.pdp.uz/ds/desk/#ptalk-list

**Chat list.** Talk’s home screen: greeting and status, search, colleagues online, filter chips and chats. A row has avatar, name, last message, time and counter.

- 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: [List and actions](https://design.pdp.uz/ds/desk/#ptalk-list-royxat-va-amallar)
- PDP classes: .eco-only
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/ptalk-list-main.md

### Chat (PDP Talk) — https://design.pdp.uz/ds/desk/#ptalk-chat

**Chat: messages and composer.** A group chat: top bar, dates and system messages, text, mention, quote, link, photo, file, voice message, poll, reactions, composer and the long-press menu.

- 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: [Message types and menu](https://design.pdp.uz/ds/desk/#ptalk-chat-xabar-turlari-va)
- PDP classes: .eco-only, .eco-replybar (__author, __body, __close, __icon, __text), .eco-send
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/ptalk-chat-main.md

### Call (PDP Talk) — https://design.pdp.uz/ds/desk/#ptalk-call

**Call.** A group call and an incoming call. The call screen is always dark — the stage is fixed.

- 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: [Group and incoming call](https://design.pdp.uz/ds/desk/#ptalk-call-guruh-va-kiruvchi)
- PDP classes: .eco-only
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/ptalk-call-main.md

### Chat info and settings (PDP Talk) — https://design.pdp.uz/ds/desk/#ptalk-info

**Chat info and settings.** About the group: avatar, name, quick actions, description, notifications and members. App settings and choosing a status.

- 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: [Info, settings and status](https://design.pdp.uz/ds/desk/#ptalk-info-chat-malumoti-sozlamalar)
- PDP classes: .eco-check (--round), .eco-only
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/ptalk-info-main.md

### Onboarding and sign-in (PDP Talk) — https://design.pdp.uz/ds/desk/#ptalk-onboarding

**Onboarding and sign-in.** First launch: three short screens (on the black stage), server address and browser sign-in (Nextcloud Login Flow v2).

- 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: [Onboarding — black stage](https://design.pdp.uz/ds/desk/#ptalk-onboarding-tanishuv-qora-sahna); [Server and browser sign-in](https://design.pdp.uz/ds/desk/#ptalk-onboarding-server-va-brauzerda)
- PDP classes: .eco-glass (--pill), .eco-only
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/ptalk-onboarding-intro.md https://design.pdp.uz/ds/ai/r/ptalk-onboarding-login.md

## Tokens these sections use

Semantic tokens referenced by the classes above (component CSS package) 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-secondary, --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-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-error, --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-hue-3-bg, --eco-avatar-hue-3-ink, --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-display--weight, --eco-font-display--weight-strong, --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-100, --eco-color-green-300, --eco-color-green-800, --eco-color-green-done, --eco-color-lime, --eco-color-malachite, --eco-color-malachite-button, --eco-color-neutral-100, --eco-color-neutral-200, --eco-color-neutral-300, --eco-color-neutral-400, --eco-color-neutral-700, --eco-color-neutral-800, --eco-color-neutral-900, --eco-color-neutral-950, --eco-color-warning-200, --eco-color-warning-400, --eco-color-white, --eco-gradient-stop-1, --eco-gradient-stop-2, --eco-gradient-stop-3, --eco-gradient-stop-4, --eco-gradient-stop-5
- Other: --eco-app-canvas, --eco-app-card, --eco-app-card-hover, --eco-app-card-shadow, --eco-app-control, --eco-app-control-hover, --eco-app-k, --eco-app-track, --eco-app-well, --eco-app-well-hover, --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-nav-count-font, --eco-nav-cur-weight, --eco-nav-fill-mix, --eco-nav-group, --eco-nav-group-font, --eco-nav-group-ls, --eco-nav-group-mix, --eco-nav-group-pad, --eco-nav-guide, --eco-nav-hover-bg, --eco-nav-icon, --eco-nav-icon-mix, --eco-nav-icon-sel, --eco-nav-ink, --eco-nav-ink-group, --eco-nav-ink-hover, --eco-nav-ink-mix, --eco-nav-ink-sub, --eco-nav-item-h, --eco-nav-line-mix, --eco-nav-radius, --eco-nav-sel-bg, --eco-nav-sel-fg, --eco-nav-sel-mix, --eco-nav-sel-weight, --eco-nav-sub, --eco-nav-sub-h, --eco-nav-sub-pad, --eco-nav-weight, --eco-nav-width, --eco-nav-width-col, --eco-rail-bg, --eco-rail-ink, --eco-shell-rail-bg, --eco-shell-rail-glow, --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: https://design.pdp.uz/llms.txt

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