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

> Use when designing or reviewing a screen of PDP ERP (finance and operations: money and bank, contracts and receivables, general ledger, staff and payroll, expenses and assets, budget and reports incl. IFRS, system, settings, guide). Today the kit holds the CURRENT STATE of the prototype (proto-erp.pdp.uz, captured 09–10.10.2026, role Director): every menu screen, detail card and tab view as desktop (1440) and phone (390) screenshots grouped like the ERP sidebar, plus the UI pattern map (data table, list page with the «Filtrlar» facet panel, saved views, totals row, status badges, segmented controls, tabs, financial statements …: pattern → count → screens) that is the redesign backlog, and the bugs found (the /assets route clashes with the static /assets/ folder: direct load gives 403/404). The redesign starts with «Masdar» (#erp-masdar, r159, PROPOSAL awaiting art-director approval): ONE master list-page template (.eco-listpage + .eco-bulkbar) for every ERP list screen — header with count and one primary action, saved views with counts, filter bar (search, 2–3 facet chips, «Filtrlar» sheet, «Ko‘rinish» menu for density/grouping/columns), money summary for the current filter, table with sticky header, pinned first column, group rows with sums and a sticky totals row, minimal pagination, floating bulk bar with the selected sum, row → detail side sheet; one markup becomes two-line cards on phones. Each redesigned screen also sits next to its current-state gallery (#erp-<group>-new). Do not copy the prototype styling as the PDP standard. EcoSystem only.

Page: https://design.pdp.uz/ds/erp/ (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 ERP 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.30/pdp-components.css (@pdp/design-system@0.7.30, immutable; latest: https://design.pdp.uz/ds/css/; manifest: https://design.pdp.uz/ds/css/v0.7.30/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/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

## Sections

### About ERP — https://design.pdp.uz/ds/erp/#erp

**PDP ERP: finance and operations system.** Every prototype screen — its current state before the redesign.

- 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: [App shell](https://design.pdp.uz/ds/erp/#erp-ilova-karkasi); [Menu groups](https://design.pdp.uz/ds/erp/#erp-menyu-guruhlari)
- PDP classes: .eco-btn (--icon, --secondary, --sm), .eco-lightbox (__bottom, __cap, __count, __frame, __nav, __stage, __top)
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/erp.md

### Masdar — list page — https://design.pdp.uz/ds/erp/#erp-masdar

**Masdar: one source for 44 list screens.** One list page — once it is flawless, the other screens are born from it.

- 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 10.10.2026) — new, under art-director review; class names may still change.
- Blocks: [Live template](https://design.pdp.uz/ds/erp/#erp-masdar-jonli-shablon); [On phones](https://design.pdp.uz/ds/erp/#erp-masdar-telefonda); [One masdar — four screens](https://design.pdp.uz/ds/erp/#erp-masdar-bitta-masdar-tort)
- PDP classes: .eco-avatar (--3d), .eco-badge (--brand, --dot, --error, --info, --sm, --success, --warning), .eco-btn (--icon, --primary, --secondary, --sm, --tertiary, --xs), .eco-bulkbar (__btn, __close, __count, __label, __sum), .eco-check, .eco-chip (--menu), .eco-empty (__actions, __art, __text, __title), .eco-featured-icon (--gray), .eco-icon, .eco-input (--sm), .eco-input-wrap, .eco-listpage (--facets, __acts, __amt, __bar, __cell, __chips, __code, __count, __crumbs, __detail, __dl, __fgroup, __filters, __foot, __gn, __group, __head, __heading, __lbl, __main, __mk, __mmain, __monly, __mst, __msub, __n, __opt, __optrow, __p2, __p3, __pin, __pop, __pop--end, __range, __scrim, __scroll, __search, __sk, __spacer, __stat, __stat--error, __stat--success, __stat--warning, __state, __sum, __title, __views, __who), .eco-menu (__item, __label), .eco-pagination (--minimal, __btns, __info), .eco-segment (--fill, --sm), .eco-sheet (--end, __body, __foot, __grip, __head, __sub, __title), .eco-skeleton, .eco-tab, .eco-table (__check, __sort), .eco-tabs (--pill, --sm)
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/erp-masdar-live.md https://design.pdp.uz/ds/ai/r/erp-masdar-phone.md https://design.pdp.uz/ds/ai/r/erp-masdar-derive.md

### Main items (Current state) — https://design.pdp.uz/ds/erp/#erp-bosh

**Main items.** Director dashboard, weekly report, approvals queue and bank alerts.

- 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: [Current state](https://design.pdp.uz/ds/erp/#erp-bosh-hozirgi-holat)
- PDP classes: .eco-segment (--sm)

### Money (Current state) — https://design.pdp.uz/ds/erp/#erp-pul

**Money.** Bank, cash desk, payments, cash plan and exchange rates.

- 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: [Current state](https://design.pdp.uz/ds/erp/#erp-pul-hozirgi-holat); [Redesign: Masdar](https://design.pdp.uz/ds/erp/#erp-pul-redesign-masdar)
- PDP classes: .eco-badge (--dot, --sm, --success, --warning), .eco-btn (--icon, --primary, --sm, --tertiary, --xs), .eco-check, .eco-chip (--menu), .eco-icon, .eco-input (--sm), .eco-input-wrap, .eco-listpage (__acts, __bar, __cell, __chips, __code, __count, __crumbs, __gn, __group, __head, __heading, __lbl, __main, __mk, __mmain, __monly, __mst, __msub, __p2, __p3, __pin, __pop, __pop--end, __scroll, __search, __spacer, __stat, __stat--success, __stat--warning, __sum, __title, __views), .eco-segment (--sm), .eco-tab, .eco-table (__check, __sort), .eco-tabs (--pill, --sm)
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/erp-pul-new.md

### Contracts and receivables (Current state) — https://design.pdp.uz/ds/erp/#erp-shartnoma

**Contracts and receivables.** Contracts, grants, receivables, collections and refunds.

- 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: [Current state](https://design.pdp.uz/ds/erp/#erp-shartnoma-hozirgi-holat); [Redesign: Masdar](https://design.pdp.uz/ds/erp/#erp-shartnoma-redesign-masdar)
- PDP classes: .eco-badge (--dot, --info, --sm, --warning), .eco-btn (--icon, --primary, --sm, --tertiary, --xs), .eco-check, .eco-chip (--menu), .eco-icon, .eco-input (--sm), .eco-input-wrap, .eco-listpage (__acts, __bar, __cell, __chips, __code, __count, __crumbs, __gn, __group, __head, __heading, __lbl, __main, __mk, __mmain, __monly, __mst, __msub, __p2, __p3, __pin, __pop, __pop--end, __scroll, __search, __spacer, __stat, __stat--error, __stat--warning, __sum, __title, __views), .eco-segment (--sm), .eco-tab, .eco-table (__check, __sort), .eco-tabs (--pill, --sm)
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/erp-shartnoma-new.md

### General ledger (Current state) — https://design.pdp.uz/ds/erp/#erp-daftar

**General ledger.** Journal, trial balance, chart of accounts and month-end close.

- 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: [Current state](https://design.pdp.uz/ds/erp/#erp-daftar-hozirgi-holat); [Redesign: Masdar](https://design.pdp.uz/ds/erp/#erp-daftar-redesign-masdar)
- PDP classes: .eco-badge (--dot, --info, --sm, --success, --warning), .eco-btn (--icon, --primary, --sm, --tertiary, --xs), .eco-check, .eco-chip (--menu), .eco-icon, .eco-input (--sm), .eco-input-wrap, .eco-listpage (--facets, __acts, __bar, __cell, __chips, __code, __count, __crumbs, __fgroup, __filters, __head, __heading, __lbl, __main, __mk, __mmain, __monly, __mst, __msub, __n, __opt, __p2, __p3, __pin, __pop, __pop--end, __scroll, __search, __spacer, __stat, __stat--warning, __sum, __title, __views), .eco-segment (--sm), .eco-sheet (--end, __body, __grip, __head, __sub, __title), .eco-tab, .eco-table (__check, __sort), .eco-tabs (--pill, --sm)
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/erp-daftar-new.md

### Staff and payroll (Current state) — https://design.pdp.uz/ds/erp/#erp-xodim

**Staff and payroll.** Employees, timesheets, payroll, HR orders and candidates.

- 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: [Current state](https://design.pdp.uz/ds/erp/#erp-xodim-hozirgi-holat); [Redesign: Masdar](https://design.pdp.uz/ds/erp/#erp-xodim-redesign-masdar)
- PDP classes: .eco-avatar (--3d), .eco-badge (--dot, --sm, --success, --warning), .eco-btn (--icon, --primary, --sm, --tertiary, --xs), .eco-check, .eco-chip (--menu), .eco-icon, .eco-input (--sm), .eco-input-wrap, .eco-listpage (__acts, __bar, __cell, __chips, __code, __count, __crumbs, __head, __heading, __lbl, __main, __mk, __mmain, __monly, __mst, __msub, __p2, __p3, __pin, __pop, __pop--end, __scroll, __search, __spacer, __stat, __sum, __title, __views, __who), .eco-segment (--sm), .eco-tab, .eco-table (__check, __sort), .eco-tabs (--pill, --sm)
- Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/erp-xodim-new.md

### Expenses and assets (Current state) — https://design.pdp.uz/ds/erp/#erp-xarajat

**Expenses and assets.** Purchasing, payables, assets, inventory and Diner POS.

- 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: [Current state](https://design.pdp.uz/ds/erp/#erp-xarajat-hozirgi-holat)
- PDP classes: .eco-badge (--dot, --error), .eco-segment (--sm)

### Plans and reports (Current state) — https://design.pdp.uz/ds/erp/#erp-reja

**Plans and reports.** Budget, cash forecast, KPI, IFRS statements and taxes.

- 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: [Current state](https://design.pdp.uz/ds/erp/#erp-reja-hozirgi-holat)
- PDP classes: .eco-segment (--sm)

### System (Current state) — https://design.pdp.uz/ds/erp/#erp-tizim

**System.** Import and export, integrations and notifications.

- 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: [Current state](https://design.pdp.uz/ds/erp/#erp-tizim-hozirgi-holat)
- PDP classes: .eco-segment (--sm)

### Settings (Current state) — https://design.pdp.uz/ds/erp/#erp-sozlama

**Settings.** Settings centre, structure, users and approval routes.

- 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: [Current state](https://design.pdp.uz/ds/erp/#erp-sozlama-hozirgi-holat)
- PDP classes: .eco-segment (--sm)

### Guide (Current state) — https://design.pdp.uz/ds/erp/#erp-qollanma

**Guide.** Guide by role, processes, rules and glossary.

- 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: [Current state](https://design.pdp.uz/ds/erp/#erp-qollanma-hozirgi-holat)
- PDP classes: .eco-segment (--sm)

### Detail pages (Current state) — https://design.pdp.uz/ds/erp/#erp-tafsilot

**Detail pages.** Document cards, the new payment form and tab views.

- 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: [Document cards and form](https://design.pdp.uz/ds/erp/#erp-tafsilot-hujjat-kartalari-va); [Tab views](https://design.pdp.uz/ds/erp/#erp-tafsilot-tab-korinishlari)
- PDP classes: .eco-segment (--sm)

### UI pattern map (For the redesign) — https://design.pdp.uz/ds/erp/#erp-naqsh

**UI pattern map.** Which pattern is on which screens — the redesign backlog.

- 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: [Pattern → screens](https://design.pdp.uz/ds/erp/#erp-naqsh-naqsh-ekranlar); [Bugs found](https://design.pdp.uz/ds/erp/#erp-naqsh-topilgan-xatolar)
- PDP classes: .eco-badge (--dot, --error, --success)

## 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-error-primary, --eco-bg-overlay, --eco-bg-primary, --eco-bg-primary-solid, --eco-bg-primary_alt, --eco-bg-primary_hover, --eco-bg-quaternary, --eco-bg-secondary, --eco-bg-secondary_hover, --eco-bg-success-primary, --eco-bg-tertiary, --eco-bg-warning-primary
- Text: --eco-text-brand-secondary, --eco-text-error-primary, --eco-text-placeholder, --eco-text-primary, --eco-text-primary_on-brand, --eco-text-quaternary, --eco-text-secondary, --eco-text-success-primary, --eco-text-tertiary, --eco-text-warning-primary, --eco-text-white
- Borders: --eco-border-error, --eco-border-secondary, --eco-border-tertiary
- Icons (fg): --eco-fg-brand-primary, --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-success-primary, --eco-fg-success-secondary, --eco-fg-tertiary, --eco-fg-warning-primary
- Brand and buttons: --eco-brand-button, --eco-brand-on-button, --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-lg, --eco-text-lg--line-height, --eco-text-md, --eco-text-md--line-height, --eco-text-sm, --eco-text-sm--line-height, --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-field-focus-w, --eco-field-radius-affix, --eco-field-radius-multiline, --eco-icon-md, --eco-icon-sm

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