# PDP Design System — Task kit (Task), v0.14.34

> Read for any task-management screen (to-do, issue tracker, team work list, future PDP task products) before its product kit: the parent components products take their tokens from. Shell «Task shell» (Dashboard .eco-shell sidebar + .eco-task workspace: list card and right side panel; Light grey canvas + white cards), «My work» (.eco-tabs--pill Today / Upcoming / Overdue / Assigned / Created, rows grouped by due date, empty state), «List view» (.eco-task-group by status Backlog / Todo / In progress / In review / Done; .eco-task-row: priority .eco-task-prio, ID, status .eco-task-status, title, labels .eco-badge--cat-*, due, assignee; filter chips .eco-chip--app, bulk bar .eco-bulkbar), «Task detail» (.eco-task-panel: breadcrumb, title, description, properties .eco-task-props, subtasks with .eco-progress, activity .eco-task-feed, comment composer .eco-input-group--well + .eco-send), «Quick add» (.eco-task-quick: natural-language line, recognised parts as chips .eco-chip--app.is-set, one brand button) and «Command palette» (.eco-cmd + .eco-kbd with task commands). Decisions: detail is a right side panel, never a modal; status and priority are coded by SHAPE not colour; overdue uses the warning tone plus a clock icon (red is only the Delete button); brand green only as accent; one brand button per screen; no strokes or shadows on app cards; keyboard first (C, S, A, P, L, D, ⌘K). Parts live in common/components/task-*.css and ship in the CSS package. Product screens are children: they set only open knobs (--task-aside-w, --task-row-h).

Page: https://design.pdp.uz/ds/task/ (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 Task 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.14.34/pdp-components.css (@pdp/design-system@0.14.34, immutable; latest: https://design.pdp.uz/ds/css/; manifest: https://design.pdp.uz/ds/css/v0.14.34/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/chat.md · https://design.pdp.uz/ds/ai/task/task.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

## Sections

### Task karkasi [Task shell] — https://design.pdp.uz/ds/task/#task-shell

**Task karkasi: yon menyu, ro‘yxat va o‘ng panel.** Dashboard karkasi o‘zgarishsiz: yon menyu, sarlavha qatori va kanvas. Ish maydoni — ro‘yxat kartasi va vazifa paneli.

- Status: Beta (since 15.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Ro‘yxat va vazifa paneli](https://design.pdp.uz/ds/task/#task-shell-royxat-va-vazifa); [Panel yopiq](https://design.pdp.uz/ds/task/#task-shell-panel-yopiq)
- PDP classes: .eco-avatar (--3d, --xs), .eco-badge (--cat-black, --cat-green, --cat-teal, --num, --sm), .eco-btn (--ghost, --icon, --link-color, --primary, --sm, --tertiary, --xs), .eco-check, .eco-chip (--app), .eco-input-group (--well, __btn, __btn--icon, __input), .eco-kbd (--on-dark), .eco-nav-item (--sub, __chev, __count, __label), .eco-progress (--sm), .eco-search (--menu), .eco-segment (--sm), .eco-send (--sm), .eco-shell (--deep, --floating, __brand, __chev, __crumb, __group, __head, __label, __logo, __main, __nav, __search, __section, __side, __sub, __toggle, __user), .eco-task (--aside, __aside, __bar, __list, __sp, __title, __tools), .eco-task-app, .eco-task-feed (__body, __item, __item--event, __who), .eco-task-group (__add, __head, __n, __toggle), .eco-task-groups, .eco-task-panel (__bar, __body, __cnt, __crumb, __desc, __foot, __h, __sec, __title), .eco-task-prio, .eco-task-prop (__add), .eco-task-props, .eco-task-row (--sub, __due, __id, __labels, __lead, __none, __prio, __sel, __sub, __title, __who), .eco-task-rows, .eco-task-status
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/task-shell-aside.md https://design.pdp.uz/ds/ai/r/task-shell-list.md

### Mening ishlarim [My work] — https://design.pdp.uz/ds/task/#task-mywork

**Mening ishlarim: bugun, kelasi, muddati o‘tgan.** Faqat menga tegishli ishlar — barcha loyihalardan, muddat bo‘yicha guruhlangan.

- Status: Beta (since 15.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Bugun tabi](https://design.pdp.uz/ds/task/#task-mywork-bugun-tabi); [Empty state](https://design.pdp.uz/ds/task/#task-mywork-bosh-holat)
- PDP classes: .eco-app (--canvas), .eco-avatar (--3d, --xs), .eco-badge (--cat-black, --cat-green, --cat-teal, --num, --sm), .eco-btn (--icon, --primary, --sm, --tertiary, --xs), .eco-check, .eco-empty (__actions, __art, __text, __title), .eco-featured-icon (--gray), .eco-kbd (--on-dark), .eco-tab, .eco-tabs (--pill), .eco-task (--fill, __bar, __empty, __list, __sp, __title, __tools), .eco-task-group (__add, __head, __n, __toggle), .eco-task-groups, .eco-task-prio, .eco-task-row (__due, __id, __labels, __lead, __prio, __proj, __sel, __sub, __title, __who), .eco-task-rows, .eco-task-status
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/task-mywork-today.md https://design.pdp.uz/ds/ai/r/task-mywork-empty.md

### Ro‘yxat [List view] — https://design.pdp.uz/ds/task/#task-listview

**Ro‘yxat: holat bo‘yicha guruhlar, filtr va ommaviy tanlash.** Bir qatorda ustuvorlik, ID, holat, sarlavha, yorliq, muddat va bajaruvchi — 36 px zichlikda.

- Status: Beta (since 15.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Guruhlangan ro‘yxat](https://design.pdp.uz/ds/task/#task-listview-guruhlangan-royxat); [Ommaviy tanlash](https://design.pdp.uz/ds/task/#task-listview-ommaviy-tanlash); [Qator holatlari](https://design.pdp.uz/ds/task/#task-listview-qator-holatlari); [Holat va ustuvorlik belgilari](https://design.pdp.uz/ds/task/#task-listview-holat-va-ustuvorlik)
- PDP classes: .eco-app (--canvas), .eco-avatar (--3d, --xs), .eco-badge (--cat-black, --cat-green, --cat-teal, --num, --sm), .eco-btn (--icon, --link-color, --on-inverse, --sm, --tertiary, --xs), .eco-bulkbar (__count), .eco-check, .eco-chip (--app), .eco-kbd, .eco-task (--fill, __bar, __list, __sp, __title, __tools), .eco-task-group (__add, __head, __n, __toggle), .eco-task-groups, .eco-task-prio, .eco-task-row (__due, __id, __labels, __lead, __none, __prio, __sel, __sub, __title, __who), .eco-task-rows (--spec), .eco-task-status (--lg)
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/task-listview-groups.md https://design.pdp.uz/ds/ai/r/task-listview-bulk.md https://design.pdp.uz/ds/ai/r/task-listview-states.md https://design.pdp.uz/ds/ai/r/task-listview-marks.md

### Vazifa paneli [Task detail] — https://design.pdp.uz/ds/task/#task-detail

**Vazifa paneli: xossalar, kichik vazifalar va faoliyat.** Ro‘yxatni yopmaydigan o‘ng panel: yuqorida nima va kim, pastda nima bo‘lgani.

- Status: Beta (since 15.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Sidebar](https://design.pdp.uz/ds/task/#task-detail-yon-panel)
- PDP classes: .eco-app (--canvas), .eco-avatar (--3d, --xs), .eco-badge (--cat-green, --sm), .eco-btn (--icon, --sm, --tertiary, --xs), .eco-input-group (--well, __btn, __btn--icon, __input), .eco-kbd, .eco-progress (--sm), .eco-send (--sm), .eco-task (--fill, __aside), .eco-task-feed (__body, __item, __item--event, __who), .eco-task-panel (__bar, __body, __cnt, __crumb, __desc, __foot, __h, __sec, __title), .eco-task-prio, .eco-task-prop (__add), .eco-task-props, .eco-task-row (--sub, __none, __title, __who), .eco-task-rows, .eco-task-status
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/task-detail-panel.md

### Tez qo‘shish [Quick add] — https://design.pdp.uz/ds/task/#task-quickadd

**Tez qo‘shish: bitta qator, tanilgan bo‘laklar — chip.** C — oyna ochiladi; «ertaga 10:00 da Aliga dizayn tekshiruvi #DS!yuqori» deb yozing, qolganini o‘zi tushunadi.

- Status: Beta (since 15.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Tushunilgan holat](https://design.pdp.uz/ds/task/#task-quickadd-tushunilgan-holat); [Bo‘sh va yozish holati](https://design.pdp.uz/ds/task/#task-quickadd-bosh-va-yozish)
- PDP classes: .eco-avatar (--3d, --xs), .eco-badge (--cat-black, --cat-green, --cat-teal, --ink, --num, --sm), .eco-btn (--ghost, --icon, --link-color, --primary, --sm, --tertiary, --xs), .eco-check, .eco-chip (--app), .eco-kbd (--on-dark), .eco-nav-item (--sub, __chev, __count, __label), .eco-search (--menu), .eco-segment (--sm), .eco-shell (--deep, --floating, __brand, __chev, __crumb, __group, __head, __label, __logo, __main, __nav, __search, __section, __side, __sub, __toggle, __user), .eco-task (__bar, __list, __sp, __title, __tools), .eco-task-app, .eco-task-group (__add, __head, __n, __toggle), .eco-task-groups, .eco-task-prio, .eco-task-quick (__caret, __chips, __field, __foot, __head, __hint, __k, __keys, __parsed, __ph, __t, __team), .eco-task-row (__due, __id, __labels, __lead, __none, __prio, __sel, __sub, __title, __who), .eco-task-rows, .eco-task-scrim, .eco-task-stage, .eco-task-status
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/task-quickadd-parsed.md https://design.pdp.uz/ds/ai/r/task-quickadd-states.md

### Buyruqlar oynasi [Command palette] — https://design.pdp.uz/ds/task/#task-command

**Buyruqlar oynasi: hamma amal sichqonsiz.** ⌘ K — tanlangan vazifa ustida amallar, yaratish, o‘tish va qidiruv bitta oynada.

- Status: Beta (since 15.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Vazifa ustida](https://design.pdp.uz/ds/task/#task-command-vazifa-ustida); [No results](https://design.pdp.uz/ds/task/#task-command-natija-yoq)
- PDP classes: .eco-avatar (--3d, --xs), .eco-badge (--cat-black, --cat-green, --cat-teal, --num, --sm), .eco-btn (--ghost, --icon, --link-color, --primary, --sm, --tertiary, --xs), .eco-check, .eco-chip (--app), .eco-cmd (__empty, __foot, __group, __input, __item, __label, __list, __search), .eco-input-group (--well, __btn, __btn--icon, __input), .eco-kbd (--on-dark), .eco-kbd-combo, .eco-nav-item (--sub, __chev, __count, __label), .eco-progress (--sm), .eco-search (--menu), .eco-segment (--sm), .eco-send (--sm), .eco-shell (--deep, --floating, __brand, __chev, __crumb, __group, __head, __label, __logo, __main, __nav, __search, __section, __side, __sub, __toggle, __user), .eco-task (--aside, __aside, __bar, __list, __sp, __title, __tools), .eco-task-app, .eco-task-feed (__body, __item, __item--event, __who), .eco-task-group (__add, __head, __n, __toggle), .eco-task-groups, .eco-task-panel (__bar, __body, __cnt, __crumb, __desc, __foot, __h, __sec, __title), .eco-task-prio, .eco-task-prop (__add), .eco-task-props, .eco-task-row (--sub, __due, __id, __labels, __lead, __none, __prio, __sel, __sub, __title, __who), .eco-task-rows, .eco-task-scrim, .eco-task-stage, .eco-task-status
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/task-command-palette.md https://design.pdp.uz/ds/ai/r/task-command-empty.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-brand-primary, --eco-bg-brand-solid, --eco-bg-disabled, --eco-bg-error-primary, --eco-bg-error-solid, --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-tertiary
- Text: --eco-text-brand-primary, --eco-text-brand-secondary, --eco-text-brand-secondary_hover, --eco-text-placeholder, --eco-text-primary, --eco-text-primary_on-brand, --eco-text-secondary, --eco-text-success-primary, --eco-text-tertiary, --eco-text-warning-primary, --eco-text-white
- Borders: --eco-border-error, --eco-border-secondary, --eco-border-tertiary
- Icons (fg): --eco-fg-brand-primary, --eco-fg-disabled, --eco-fg-error-primary, --eco-fg-primary, --eco-fg-quaternary, --eco-fg-secondary, --eco-fg-tertiary, --eco-fg-warning-primary
- Brand and buttons: --eco-badge-fs, --eco-badge-lh, --eco-badge-ls, --eco-badge-pad, --eco-brand-button, --eco-brand-on-button, --eco-brand-primary, --eco-cat-black, --eco-cat-green, --eco-cat-teal, --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-mono, --eco-text-display-xs, --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-xs, --eco-text-xs--line-height
- Spacing: --eco-spacing-2xl, --eco-spacing-3xl, --eco-spacing-4xl, --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-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-black, --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-canvas-b, --eco-app-canvas-pad, --eco-app-canvas-r, --eco-app-card, --eco-app-card-b, --eco-app-card-hover, --eco-app-card-hover-b, --eco-app-card-shadow, --eco-app-control, --eco-app-control-b, --eco-app-control-hover, --eco-app-control-rest, --eco-app-fs, --eco-app-gap, --eco-app-k, --eco-app-lh, --eco-app-track, --eco-app-track-b, --eco-app-well, --eco-app-well-b, --eco-app-well-hover, --eco-app-well-hover-b, --eco-btn-gap, --eco-btn-ghost-fg, --eco-fi-off-bg, --eco-fi-off-fg, --eco-field-focus-w, --eco-field-radius-affix, --eco-icon-sm, --eco-inverse-ink, --eco-nav-chev, --eco-nav-chev-ink, --eco-nav-chev-vis, --eco-nav-count-bg, --eco-nav-count-font, --eco-nav-count-ink, --eco-nav-count-lh, --eco-nav-count-pad, --eco-nav-count-r, --eco-nav-count-w, --eco-nav-count-weight, --eco-nav-cur-bg, --eco-nav-cur-ink, --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-bg, --eco-nav-item-chev, --eco-nav-item-count, --eco-nav-item-h, --eco-nav-item-ic, --eco-nav-item-justify, --eco-nav-item-label, --eco-nav-item-pad, --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-icon, --eco-nav-sub-pad, --eco-nav-weight, --eco-nav-width, --eco-nav-width-col, --eco-org-menu-w, --eco-rail-bg, --eco-rail-ink, --eco-search-bg, --eco-search-gap, --eco-search-ic, --eco-search-ink, --eco-search-ph, --eco-search-pl, --eco-search-pr, --eco-search-r, --eco-shell-h, --eco-shell-radius, --eco-shell-rail-bg

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