# PDP Design System — Chat kit (Chat), v0.14.30 > Read for any messenger or chat screen (Pdgram, PDP Talk, team chat, future products) before its product kit: the parent components products take their tokens from. Shell «Chat shell» (.eco-chat: rail of folders, chat list, conversation, optional details panel; Light grey canvas + white cards), «Chat list» (.eco-chat-list items: unread, mention, pinned, muted, draft, typing, online, selected; folder tabs are .eco-tabs), «Message bubble» (.eco-chat-bubble: in/out, grouping --first/--mid/--last, reply quote .eco-replybar--quote, reactions .eco-reaction, edited, ticks sent/delivered/read, forwarded, file card .eco-row, image, voice message .eco-wave, system message and date/unread dividers .eco-chat-divider, typing .eco-chat-typing), «Composer» (.eco-chat-composer: attach, .eco-input-group--well, emoji, voice/send toggle .eco-send, reply/edit bar .eco-replybar, mention suggestions .eco-menu, voice recording, locked), «States» (empty, skeleton .eco-chat-skel, offline banner .eco-callout, no access) and «Mobile» (phone frames .mb-ph from the Mobile kit). Decisions: outgoing bubble is the light brand tint (--eco-bg-brand-primary) with ink text — white on the brand green fails contrast for long text; incoming is the neutral well surface; brand green only as accent (send button, unread badge, read tick); one brand button per screen; no strokes or shadows on app cards; no paper-plane logo shapes; reactions use PDP sprite icons, no emoji. Parts live in common/components/chat-*.css and ship in the CSS package; molecules created for it (reaction, audio wave, action bar) are in the Core kit group «Molekulalar». Product screens (Pdgram) are children: they set only open knobs (--chat-in-bg, --chat-out-bg, --chat-max-w). Page: https://design.pdp.uz/ds/chat/ (all six brands; ?brand=, ?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;
) 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
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 Chat kit adds: its sections, their blocks, the PDP class names they use and the tokens those classes need. Set data-brand="" and data-theme="light" (product default) or "dark" on ; 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.30/pdp-components.css (@pdp/design-system@0.14.30, immutable; latest: https://design.pdp.uz/ds/css/; manifest: https://design.pdp.uz/ds/css/v0.14.30/manifest.json). Order: fonts → tokens/.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/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 ### Chat karkasi [Chat shell] — https://design.pdp.uz/ds/chat/#chat-shell **Chat karkasi: rels, ro‘yxat, suhbat va o‘ng panel.** Har PDP chatining uch panelli karkasi; kerak bo‘lsa to‘rtinchi panel (ma’lumot yoki thread) ochiladi. Light — kulrang kanvas va oq kartalar. - Status: Beta (since 14.10.2026) — new, under art-director review; class names may still change. - Blocks: [Uch panelli karkas](https://design.pdp.uz/ds/chat/#chat-shell-uch-panelli-karkas); [To‘rtinchi panel: ma’lumot](https://design.pdp.uz/ds/chat/#chat-shell-tortinchi-panel-malumot) - PDP classes: .eco-avatar (--2xl, --3d, --lg, --sm, --tint, __status), .eco-badge (--brand, --num, --sm, --solid), .eco-btn (--icon, --ink, --sm, --tertiary, --xs), .eco-chat (--aside, __about, __aside, __bar, __body, __col, __foot, __list, __log, __main, __rail, __spacer, __title, __tools), .eco-chat-bubble (--first, --in, --last, --out, __av, __body, __col, __dur, __file, __meta, __name, __quote, __reactions, __text, __tick, __voice), .eco-chat-composer (__row), .eco-chat-divider (--system, --unread), .eco-chat-head (__act, __name, __pin, __pin-t, __row, __sub, __who), .eco-chat-list (__body, __draft, __ic, __item, __name, __preview, __row, __tick, __time, __typing), .eco-chat-typing (__dots), .eco-featured-icon (--md, --modern), .eco-icon (--lg), .eco-input-group (--well, __btn, __btn--icon, __input), .eco-rail-item (__ic), .eco-reaction, .eco-replybar (--quote, __author, __body, __text), .eco-row (__b, __m), .eco-rows, .eco-search, .eco-send (--sm), .eco-tab, .eco-tabs (--pill), .eco-wave (--fill) - Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/chat-shell-three.md https://design.pdp.uz/ds/ai/r/chat-shell-aside.md ### Suhbatlar ro‘yxati [Chat list] — https://design.pdp.uz/ds/chat/#chat-list **Suhbatlar ro‘yxati: qator holatlari va papkalar.** Bir qatorda avatar, nom, oxirgi xabar, vaqt va belgilar. Holat har doim rangdan tashqari ikonka yoki matn bilan ham beriladi. - Status: Beta (since 14.10.2026) — new, under art-director review; class names may still change. - Blocks: [Qator holatlari](https://design.pdp.uz/ds/chat/#chat-list-qator-holatlari); [Qidiruv va papkalar](https://design.pdp.uz/ds/chat/#chat-list-qidiruv-va-papkalar) - PDP classes: .eco-avatar (--3d, --lg, --tint, __status), .eco-badge (--num, --sm, --solid), .eco-chat-list (__body, __draft, __ic, __item, __name, __preview, __row, __tick, __time, __typing), .eco-icon (--lg), .eco-search, .eco-tab, .eco-tabs (--pill) - Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/chat-list-states.md https://design.pdp.uz/ds/ai/r/chat-list-folders.md ### Xabar pufakchasi [Message bubble] — https://design.pdp.uz/ds/chat/#chat-bubble **Xabar pufakchasi: kiruvchi, chiquvchi va tarkib turlari.** Chiquvchi — och brend tusi, kiruvchi — neytral. Ketma-ket xabarlar guruhlanadi; vaqt, belgi va reaksiya pufakchaga xalaqit bermaydi. - Status: Beta (since 14.10.2026) — new, under art-director review; class names may still change. - Blocks: [Kiruvchi, chiquvchi va guruhlash](https://design.pdp.uz/ds/chat/#chat-bubble-kiruvchi-chiquvchi-va); [Iqtibos, reaksiya, tahrir va yo‘naltirish](https://design.pdp.uz/ds/chat/#chat-bubble-iqtibos-reaksiya-tahrir); [Fayl, rasm va ovozli xabar](https://design.pdp.uz/ds/chat/#chat-bubble-fayl-rasm-va); [Yuborish holati](https://design.pdp.uz/ds/chat/#chat-bubble-yuborish-holati); [Ajratgichlar, yozmoqda va o‘chirilgan xabar](https://design.pdp.uz/ds/chat/#chat-bubble-ajratgichlar-yozmoqda-va) - PDP classes: .eco-avatar (--3d, --sm), .eco-btn (--icon, --ink, --sm, --tertiary), .eco-chat-bubble (--first, --in, --last, --media, --mid, --out, __av, __body, __col, __dur, __file, __fwd, __media, __meta, __name, __quote, __reactions, __text, __tick, __voice), .eco-chat-divider (--system, --unread), .eco-chat-typing (__dots), .eco-featured-icon (--md, --modern), .eco-reaction (--add), .eco-replybar (--quote, __author, __body, __text), .eco-row (__b, __m), .eco-wave (--fill) - Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/chat-bubble-basic.md https://design.pdp.uz/ds/ai/r/chat-bubble-rich.md https://design.pdp.uz/ds/ai/r/chat-bubble-media.md https://design.pdp.uz/ds/ai/r/chat-bubble-status.md https://design.pdp.uz/ds/ai/r/chat-bubble-system.md ### Yozish paneli [Composer] — https://design.pdp.uz/ds/chat/#chat-composer **Yozish paneli: matn, ovoz, javob va eslatma.** Biriktirish, maydon va bitta brend tugma. Matn yo‘q bo‘lsa — mikrofon, bor bo‘lsa — yuborish; javob va tahrir qatori tepada. - Status: Beta (since 14.10.2026) — new, under art-director review; class names may still change. - Blocks: [Bo‘sh va matn bor](https://design.pdp.uz/ds/chat/#chat-composer-bosh-va-matn); [Javob va tahrir](https://design.pdp.uz/ds/chat/#chat-composer-javob-va-tahrir); [Eslatma takliflari](https://design.pdp.uz/ds/chat/#chat-composer-eslatma-takliflari); [Ovoz yozish](https://design.pdp.uz/ds/chat/#chat-composer-ovoz-yozish); [Yozish bloklangan](https://design.pdp.uz/ds/chat/#chat-composer-yozish-bloklangan) - PDP classes: .eco-avatar (--3d, --xs), .eco-btn (--icon, --sm, --tertiary), .eco-chat-composer (--locked, __ctx, __pop, __rec, __rec-dot, __row, __time), .eco-input-group (--well, __btn, __btn--icon, __input), .eco-menu (__body, __desc, __item, __title), .eco-replybar (__author, __body, __close, __icon, __text), .eco-send (--sm), .eco-wave (--fill) - Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/chat-composer-base.md https://design.pdp.uz/ds/ai/r/chat-composer-ctx.md https://design.pdp.uz/ds/ai/r/chat-composer-mention.md https://design.pdp.uz/ds/ai/r/chat-composer-rec.md https://design.pdp.uz/ds/ai/r/chat-composer-locked.md ### Holatlar [States] — https://design.pdp.uz/ds/chat/#chat-states **Holatlar: bo‘sh, yuklanmoqda, oflayn, ruxsat yo‘q.** Sekin tarmoq va arzon telefon — birinchi darajali holat: skelet, oflayn banner va navbatdagi xabar doim ko‘rinadi. - Status: Beta (since 14.10.2026) — new, under art-director review; class names may still change. - Blocks: [Bo‘sh holatlar](https://design.pdp.uz/ds/chat/#chat-states-bosh-holatlar); [Yuklanmoqda: skelet](https://design.pdp.uz/ds/chat/#chat-states-yuklanmoqda-skelet); [Oflayn va yuborilmagan xabar](https://design.pdp.uz/ds/chat/#chat-states-oflayn-va-yuborilmagan); [Not allowed](https://design.pdp.uz/ds/chat/#chat-states-ruxsat-yoq) - PDP classes: .eco-btn (--link-color, --primary, --secondary, --xs), .eco-callout (--compact, --warning, __body, __content, __icon, __title), .eco-chat-bubble (--last, --out, __body, __col, __meta, __name, __text, __tick), .eco-chat-composer (--locked, __row), .eco-chat-skel (--msgs, __lines, __msg, __msg--out, __row), .eco-empty (__actions, __art, __text, __title), .eco-featured-icon (--gray), .eco-skeleton (--bubble, --circle, --line) - Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/chat-states-empty.md https://design.pdp.uz/ds/ai/r/chat-states-skeleton.md https://design.pdp.uz/ds/ai/r/chat-states-offline.md https://design.pdp.uz/ds/ai/r/chat-states-noaccess.md ### Mobil [Mobile] — https://design.pdp.uz/ds/chat/#chat-mobile **Mobil: ro‘yxat va suhbat alohida ekranlar.** Telefonda ro‘yxat va suhbat bitta ustunda almashadi; Moddalar web bilan bir xil, faqat ramka va pastki panel mobilniki. - Status: Beta (since 14.10.2026) — new, under art-director review; class names may still change. - Blocks: [Ro‘yxat va suhbat](https://design.pdp.uz/ds/chat/#chat-mobile-royxat-va-suhbat) - PDP classes: .eco-avatar (--3d, --lg, --sm, --tint, __status), .eco-badge (--num, --sm, --solid), .eco-btn (--icon, --sm, --tertiary, --xs), .eco-chat-bubble (--first, --in, --last, --out, __av, __body, __col, __file, __meta, __name, __quote, __reactions, __text, __tick), .eco-chat-composer (__row), .eco-chat-divider (--unread), .eco-chat-head (__act, __name, __pin, __pin-t, __row, __sub, __who), .eco-chat-list (__body, __draft, __ic, __item, __name, __preview, __row, __tick, __time, __typing), .eco-chat-typing (__dots), .eco-chat (__bar, __col, __foot, __log, __title, __tools), .eco-featured-icon (--md, --modern), .eco-glass (--pill), .eco-icon (--lg), .eco-input-group (--well, __btn, __btn--icon, __input), .eco-reaction, .eco-replybar (--quote, __author, __body, __text), .eco-row (__b, __m), .eco-send (--sm), .eco-tab, .eco-tabs (--pill) - Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/chat-mobile-screens.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/.css. - Backgrounds: --eco-bg-brand-primary, --eco-bg-brand-solid, --eco-bg-disabled, --eco-bg-error-primary, --eco-bg-primary, --eco-bg-primary_alt, --eco-bg-primary_hover, --eco-bg-quaternary, --eco-bg-secondary, --eco-bg-secondary_hover, --eco-bg-tertiary, --eco-bg-warning-primary - Text: --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-white - Borders: --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-primary, --eco-fg-quaternary, --eco-fg-secondary, --eco-fg-success-primary, --eco-fg-tertiary, --eco-fg-warning-primary - Brand and buttons: --eco-avatar-tint-bg, --eco-avatar-tint-ink, --eco-badge-fs, --eco-badge-lh, --eco-badge-ls, --eco-badge-pad, --eco-badge-solid-bg, --eco-badge-solid-fg, --eco-brand-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--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-xl, --eco-radius-xs - Shadow and focus: --eco-focus-gap, --eco-focus-ring, --eco-focus-ring-error, --eco-focus-w, --eco-shadow-lg - 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-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-card, --eco-app-card-hover, --eco-app-card-shadow, --eco-app-gap, --eco-app-track, --eco-app-well, --eco-app-well-hover, --eco-btn-gap, --eco-chat-radius, --eco-fi-off-bg, --eco-fi-off-fg, --eco-field-focus-w, --eco-field-radius-affix, --eco-icon-lg, --eco-icon-md, --eco-icon-sm, --eco-menu-max-h, --eco-nav-ink-group, --eco-org-menu-w, --eco-rail-bg, --eco-rail-ink, --eco-rail-sel-ink, --eco-row-bg, --eco-row-opacity, --eco-row-radius, --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-rail-bg, --eco-viz-hbar ## 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.