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

> Use when making an Instagram post, carousel or story for EcoSystem: (r94) also YouTube and video — section «Video va YouTube» (#video): four thumbnail families (big word, face + question, tech, series) in Light/Dark with safe-area overlay, phone-size check and A/B test rules, channel banner 2560×1440 with device crops (safe 1546×423), profile picture and watermark, end screen (615×345 video slot, 294 px subscribe circle, last 20 s) and chapter card, lower thirds / lesson title / subtitles / screen-recording keys on 1920×1080 with EBU R95 safe areas, podcast series and episode covers 3000×3000 plus a 16:9 video-podcast thumbnail, Zoom/Teams backgrounds and stage screens (countdown, speaker, break, Q&A, LED 3840×1080), AI background prompts (PDP-VIDEO-v1) and layered SVG construction guides (smm/video/*.svg); fourteen template families — six core (announcement, admission countdown with a Reels cover, event incl. 1:1 for Telegram, 5-slide educational carousel, student testimonial, stat), five additional (story series: Q&A, poll, quiz and answer; Reels cover, intro hook, lower-third, subtitles and outro with the 672 px bottom and 144 px right safe areas; mentor introduction; weekly plan; highlight covers) and three free (holiday greetings, engagement free-zone posts, LinkedIn 1200×627) — with AI background prompt cards (style key PDP-SMM-v1), the profile grid rhythm, 4:5 post templates (button stack, big headline, question card, big number), 1:1 grid posts, the 9:16 story with 270 / 384 px safe zones, and the SMM rules (filled pills, one accent per post, two type sizes plus a mono label).

Page: https://design.pdp.uz/ds/smm/ (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 SMM kit adds: its sections, their blocks, the PDP class names they use and the tokens those classes need.
Set data-brand="<id>" and data-theme="light" (product default) or "dark" on <html>; load one token file and the fonts (https://design.pdp.uz/ds/fonts/fonts.css). Use tokens, never raw hex.
Component CSS: do not re-implement the PDP classes (.eco-*) — link the published package https://design.pdp.uz/ds/css/v0.7.1/pdp-components.css (@pdp/design-system@0.7.1, immutable; latest: https://design.pdp.uz/ds/css/; manifest: https://design.pdp.uz/ds/css/v0.7.1/manifest.json). Order: fonts → tokens/<brand>.css → pdp-base.css (optional reset) → pdp-components.css → product layer (products/lms.css, products/nextcloud-*.css) → your own CSS. Never copy the package CSS into a project. Guide: https://design.pdp.uz/ds/yadro/#dev-install.

## Canvas sizes

- Post 4:5: 1080×1350 px — construction diagram (grid, zones, safe areas; layered SVG) https://design.pdp.uz/ds/smm/templates/instagram-post-4x5.svg
- Post 3:4: 1080×1440 px — construction diagram (grid, zones, safe areas; layered SVG) https://design.pdp.uz/ds/smm/templates/instagram-post-3x4.svg
- Post 1:1: 1080×1080 px — construction diagram (grid, zones, safe areas; layered SVG) https://design.pdp.uz/ds/smm/templates/instagram-post-1x1.svg
- Story 9:16: 1080×1920 px; keep text and logo out of the top 270 px, the bottom 384 px and 65 px at each side (Instagram UI) — construction diagram (grid, zones, safe areas; layered SVG) https://design.pdp.uz/ds/smm/templates/instagram-story-9x16.svg
- Reels 9:16: 1080×1920 px; keep text and logo out of the top 270 px, the bottom 672 px and 65 px at each side (Instagram UI) — construction diagram (grid, zones, safe areas; layered SVG) https://design.pdp.uz/ds/smm/templates/instagram-reels-9x16.svg
- Highlight: 1080×1920 px — construction diagram (grid, zones, safe areas; layered SVG) https://design.pdp.uz/ds/smm/templates/instagram-highlight-cover.svg
- Avatar: 1080×1080 px — construction diagram (grid, zones, safe areas; layered SVG) https://design.pdp.uz/ds/smm/templates/instagram-avatar.svg
- Carousel 4:5 × 3: 1080×1350 px, 3 slides — construction diagram (grid, zones, safe areas; layered SVG) https://design.pdp.uz/ds/smm/templates/instagram-carousel-4x5.svg
- Reels cover: 1080×1920 px — construction diagram (grid, zones, safe areas; layered SVG) https://design.pdp.uz/ds/smm/templates/instagram-reels-cover.svg
- LinkedIn 1200×627: 1200×627 px — construction diagram (grid, zones, safe areas; layered SVG) https://design.pdp.uz/ds/smm/templates/linkedin-post.svg

## SMM rules

- Pills are always filled (grey, white, black, brand green or lime); no outlined pills, frames or strokes around fills. Exception: frosted-glass pills (1 px inner highlight) only over a 3D shape or photo.
- One accent per post: brand green on light posts, lime on dark posts; everything else black, white and grey. No blue anywhere: the second accent is a green tile.
- Two type sizes plus a label: headline PDP Display 500 with display letter-spacing (uppercase allowed), body --eco-font-body (Inter; Academy and Online — Google Sans Flex), labels --eco-font-mono (IBM Plex Mono; Academy and Online — Google Sans Code) uppercase in [ brackets ].
- Grid (1080 px canvas): module u = 18 px (1080 / 60); margins 4u = 72 px; 6 columns of 7u (126 px) with 2u (36 px) gutters. Headline line height = 6u on posts, 7u on stories; 4u between the logo and the headline; CTA pill 7u high, 3 columns wide.
- Logo once per post, 12u (216 px) wide (minimum 11u, 198 px), in one of the four corners 4u from the edges — top-left by default; clear space 4u. On green: white logo with lime rays; on a lime field place the logo on the white card. Avatar and highlight covers use the mark only (60 % of the circle).
- Story safe zone: top 270 px, bottom 384 px, sides 65 px; Reels: bottom 672 px plus a 144 px action rail on the right. Profile grid crops to 3:4 — a 4:5 post loses 34 px per side, a 1:1 post 135 px, a Reels cover 240 px top and bottom.
- Minimum sizes on a 1080 px canvas — post: headline 64–120 px, body 28–34 px, mono label 22–24 px; story: headline 80–140 px, body 36 px, label 28 px. Headline contrast: 3 lines at 5u, 2 lines at 6u, 1–2 lines at 7u. At most ~20 words on a post image, 40–50 per carousel slide.
- Contrast: lime text only on black, never on white; small text on a green field is black (SMM exception), white on green only for headlines of 72 px and larger; always black on lime.
- The hand-drawn ring is a graphic, not a UI stroke: one word per post, in the accent colour.
- Glyphs [ ], >>, // and the asterisk are decoration: aria-hidden, never replacing words.
- Templates: 4:5 — button stack, big uppercase headline with a ringed word, question card on green or lime, big number; 1:1 — case band, question + three tiles, dark photo list, guide with bracketed photo, three-step strip, lime duotone photo; 9:16 story — button stack with headline. Copy is sample text (no real names or figures).
- Template families (r39): announcement (eyebrow, 2–3 line headline, date + CTA pill; white mesh / black dots / green band), admission countdown (the date or day count is the biggest element; one frame for the 30 → 7 → 3 → last-day series; story keeps a countdown-sticker slot), event (title → date/time in mono → place → speaker → register CTA, glass pills over a 3D glass shape), educational carousel (5 slides on one 5400×1350 canvas: hook with swipe arrow, three «01 —» tips, CTA; counter 03/05; one graphic crossing the seams), testimonial (portrait, big quote, name + role in mono, before → after pills; real consented photos only), stat (one number 200–320 px, one-line caption, mono source; lime on black with the rising outline mark).
- Carousel: draw all slides on one canvas (1080·N × 1350) and slice; margins, headline top and the page counter (01 / 0N, mono) sit in the same place on every slide; the logo appears on the cover and the last slide only; inner slides carry a section number («01 —»).
- Image / text ratio: text-only, image half, or full-bleed image with the text in the bottom third on a flat tonal field.
- Profile grid rhythm: alternate white → black → green so that no three neighbouring tiles share a tone.
- AI images: generate only the background, photo or 3D layer with the family prompt card (style key PDP-SMM-v1); headline, numbers, dates, CTA and logo are always overlaid from the template.

## Video, YouTube and podcast — sizes

- YouTube thumbnail 1280×720 (min width 640), JPG/PNG ≤ 2 MB; keep the bottom-right 256×144 px (duration badge), the top-right 140×60 px (hover buttons) and the bottom 10 px (progress bar) empty.
- YouTube channel banner 2560×1440 (min 2048×1152), ≤ 6 MB; TV shows all, desktop the middle 2560×423 band, phones the centre 1546×423 — logo, slogan and schedule only inside 1546×423.
- Profile picture 800×800 → shown as a 98 px circle: mark only on black, 60 % of the diameter. Video watermark 150×150 PNG (transparent), bottom-right, set in YouTube — never burn the logo into the video.
- End screen: last 5–20 s of a video ≥ 25 s, ≤ 4 elements (one must be a video or playlist); background reserves a 615×345 video slot (left) and a 294 px subscribe circle (right); bottom 72 px = player controls.
- Chapters: in the description, first timestamp 00:00, ≥ 3 chapters, each ≥ 10 s, ascending; chapter names 2–4 words, same as the in-video chapter card.
- 16:9 video 1920×1080: action safe 3.5 %, graphics safe 5 % (96 / 54 px, EBU R95); Shorts 1080×1920 follow the SMM Reels rules (bottom 672 px, right 144 px).
- Podcast cover 3000×3000 RGB JPG/PNG, no alpha (Apple ≥ 1400, Spotify ≥ 640); must read at 56 px; video podcast episodes get a separate 1280×720 thumbnail.
- Meeting backgrounds (Zoom, Teams, Meet) 1920×1080 JPG/PNG ≤ 5 MB; stage screens 1920×1080, LED strips 3840×1080.
- Construction guide YouTube thumbnail 1280×720: https://design.pdp.uz/ds/smm/video/youtube-thumbnail-1280x720.svg
- Construction guide YouTube channel banner 2560×1440: https://design.pdp.uz/ds/smm/video/youtube-banner-2560x1440.svg
- Construction guide YouTube end screen 1280×720: https://design.pdp.uz/ds/smm/video/youtube-end-screen-1280x720.svg
- Construction guide 16:9 video — titles 1920×1080: https://design.pdp.uz/ds/smm/video/video-titles-1920x1080.svg
- Construction guide Podcast cover 3000×3000: https://design.pdp.uz/ds/smm/video/podcast-cover-3000.svg
- Construction guide Zoom / Teams background 1920×1080: https://design.pdp.uz/ds/smm/video/meeting-background-1920x1080.svg
- Construction guide Stage screen 1920×1080: https://design.pdp.uz/ds/smm/video/stage-screen-1920x1080.svg

## Video, YouTube and podcast — rules

- Thumbnail families (fixed compositions, only topic, word and image change): 01 big word (2–3 word headline 180 px + one 3D object), 02 face + question (3D avatar tile 500 px right, question 116 px with one word on an accent plate), 03 tech (code card in IBM Plex Mono on a grey fill + technology name 134 px), 04 series (400 px accent band with the lesson number 300 px, course eyebrow and lesson title 100 px, full logo). Light: accent green; Dark: accent lime.
- Thumbnails: ≤ 5 words, one focal point, one accent, headline ≥ 70 px on the 1280 canvas (≥ 9 px at 168 px wide); channel mark top-left 56–64 px. No red circles, arrows, shocked faces or clickbait emoji. Check at 336 px (feed) and 168×94 (up next) before publishing.
- A/B (YouTube Test & compare): up to 3 thumbnails, each differs from the main one in one variable (headline OR tone OR image); the winner is chosen by watch time share; file names pdp-ecosystem-yt-<series>-<nn>-<a|b|c>.jpg.
- Lower third (brand book rule): white filled pill card (or black 88 % on bright footage), accent icon circle, name PDP Display 500 52 px, role in the body font 28 px; bottom-left 150 px from the bottom inside graphics safe; 4–6 s; in with --eco-duration-slow + --eco-ease-emphasized, out with --eco-ease-exit; moves ≤ 40 px, never bounces. Mark top-right (76 px) inside the safe area.
- Subtitles: Inter 500 44–48 px at 1080p, ≤ 42 characters per line, ≤ 2 lines, ≤ 17 characters per second, centred 96 px above the bottom; black plate 80 % (one emphasis word in lime) or white plate on bright footage. Closed captions (.srt/.vtt) on every YouTube video; burned-in only on Shorts/Reels.
- Lesson title card 2–3 s after the logo shot (bloom ≤ 1.2 s): mono eyebrow, PDP Display 128 px title, one 3D object; chapter card 2–3 s at each chapter: number 250 px, title, chapter list with the current one on the accent plate.
- Screen recordings: keystrokes as white mono pills centred at the bottom; highlighted code line = accent at 22 %; presenter picture-in-picture as a circle bottom-right inside the safe area.
- Podcast: one fixed series cover (green, black or white; title ≤ 2 words, 560 px; small text on green is black; logo white with lime rays on green) and an episode template in the series tone (episode number 900 px in the accent, guest 3D avatar or consented photo tile, topic ≤ 2 lines).
- Meeting backgrounds: logo top-left, centre column (800 px wide from y = 240) plain for the person, 3D only at the edges; self-view is mirrored only for the user — do not flip the file. Stage screens: holding countdown always shows the exact start time and date next to the number (no fake or restarting countdowns), speaker card, break screen (green: headline white, small text black), Q&A with a QR on a white tile ≥ 480 px, LED 32:9 with text ≥ 200 px.
- AI images (style key PDP-VIDEO-v1): generate only the background, 3D or photo layer; headline, numbers, names, times and logo are overlaid from the template. Avoid fine stripes and moiré on meeting backgrounds (video compression).

## Sections

### SMM — https://design.pdp.uz/ds/smm/#smm

**SMM — Instagram post and story templates.** Social media templates for EcoSystem: 4: 5 posts, 1: 1 square posts and a story. Structure and style come from the art director’s references, the colours are EcoSystem’s own: black, white, grey, green and lime. The copy is sample text.

- 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: [Post templates — 4: 5](https://design.pdp.uz/ds/smm/#smm-post-shablonlari-4); [Square posts — 1: 1](https://design.pdp.uz/ds/smm/#smm-kvadrat-postlar-1); [Story — 9: 16](https://design.pdp.uz/ds/smm/#smm-story-9-16); [Template families](https://design.pdp.uz/ds/smm/#smm-shablon-oilalari); [Announcement and news](https://design.pdp.uz/ds/smm/#smm-elon-va-yangilik); [Admission and deadline](https://design.pdp.uz/ds/smm/#smm-qabul-va-dedlayn); [Event](https://design.pdp.uz/ds/smm/#smm-tadbir); [Educational carousel](https://design.pdp.uz/ds/smm/#smm-talimiy-karusel); [Student success](https://design.pdp.uz/ds/smm/#smm-talaba-muvaffaqiyati); [Statistics](https://design.pdp.uz/ds/smm/#smm-statistika); [Story series — Q&A, poll, quiz](https://design.pdp.uz/ds/smm/#smm-story-seriyalari-q); [Reels — cover, intro, lower third, subtitles, outro](https://design.pdp.uz/ds/smm/#smm-reels-muqova-intro); [Mentor introduction](https://design.pdp.uz/ds/smm/#smm-mentor-tanishtiruvi); [Weekly plan](https://design.pdp.uz/ds/smm/#smm-haftalik-reja); [Highlight covers](https://design.pdp.uz/ds/smm/#smm-highlight-muqovalari); [Holiday greetings](https://design.pdp.uz/ds/smm/#smm-bayram-tabriklari); [Engagement — free zone](https://design.pdp.uz/ds/smm/#smm-engagement-erkin-zona); [LinkedIn and B2B](https://design.pdp.uz/ds/smm/#smm-linkedin-va-b2b); [Profile grid rhythm](https://design.pdp.uz/ds/smm/#smm-profil-tori-ritmi); [SMM rules](https://design.pdp.uz/ds/smm/#smm-smm-qoidalari); [Instagram sizes: construction diagrams](https://design.pdp.uz/ds/smm/#smm-instagram-olchamlari); [Carousel: shared grid](https://design.pdp.uz/ds/smm/#smm-karusel-umumiy-tor); [Logo: position and size](https://design.pdp.uz/ds/smm/#smm-logotip-joy-va); [Type scale](https://design.pdp.uz/ds/smm/#smm-tipografika-shkalasi); [Image and text](https://design.pdp.uz/ds/smm/#smm-tasvir-va-matn); [Profile grid: 3: 4 crop](https://design.pdp.uz/ds/smm/#smm-profil-tori-3)
- PDP classes: .eco-btn (--secondary, --sm), .eco-glass (--dark, --light), .eco-switch

### Video and YouTube — https://design.pdp.uz/ds/smm/#video

**Video, YouTube and podcast: thumbnail, channel, titles and on-air screens.** A ready-made system for EcoSystem video channels: four YouTube thumbnail families, a channel banner, an end screen and a chapter card, titles and subtitles, podcast covers, a meeting background and stage screens. Shorts and Reels overlays — SMM · Reels, logo shot and video style — Brandbook · Video and logo shot, the player on the website — Video lesson player. The copy is sample text.

- 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: [Sizes and files](https://design.pdp.uz/ds/smm/#video-olchamlar-va-fayllar); [YouTube thumbnail — four families](https://design.pdp.uz/ds/smm/#video-youtube-muqovasi-tort); [On a phone: check at actual size](https://design.pdp.uz/ds/smm/#video-telefonda-haqiqiy); [A/B testing — “Test & compare”](https://design.pdp.uz/ds/smm/#video-a-b-sinov); [Channel banner — device crops](https://design.pdp.uz/ds/smm/#video-kanal-banneri-qurilma); [End screen and chapter card](https://design.pdp.uz/ds/smm/#video-end-screen-va); [Titles: lower third, lesson title, subtitles](https://design.pdp.uz/ds/smm/#video-titrlar-ism-plashkasi); [Podcast: series and episode covers](https://design.pdp.uz/ds/smm/#video-podkast-seriya-va); [Meeting background and stage screens](https://design.pdp.uz/ds/smm/#video-vebinar-foni-va); [AI prompt cards — for backgrounds](https://design.pdp.uz/ds/smm/#video-ai-prompt-kartalari); [Video rules and code](https://design.pdp.uz/ds/smm/#video-video-qoidalari-va)
- PDP classes: .eco-aurora (--light, --still, __bg), .eco-btn (--secondary, --sm, --tertiary), .eco-segment (--sm), .eco-switch
- Nextcloud DOM classes reproduced in the example: .snip-fold (__chev, __sum)

## Tokens these sections use

Semantic tokens referenced by the classes above (common/base.css) and by the sections' own CSS. Values per brand and theme: https://design.pdp.uz/ds/tokens/<brand>.css.

- Backgrounds: --eco-bg-brand-primary, --eco-bg-brand-solid, --eco-bg-disabled, --eco-bg-primary, --eco-bg-quaternary, --eco-bg-secondary, --eco-bg-tertiary
- Text: --eco-text-brand-secondary, --eco-text-primary, --eco-text-primary_on-brand, --eco-text-tertiary
- Borders: --eco-border-brand
- Icons (fg): --eco-fg-disabled, --eco-fg-white
- Brand and buttons: --eco-aurora-1, --eco-aurora-2, --eco-aurora-2-deep, --eco-aurora-3, --eco-aurora-4, --eco-aurora-line, --eco-aurora-ring, --eco-board-1, --eco-board-5, --eco-board-6, --eco-rainbow-1, --eco-rainbow-2, --eco-rainbow-3, --eco-rainbow-4, --eco-rainbow-5, --eco-rainbow-c2, --eco-rainbow-c3, --eco-rainbow-c4, --eco-tab-pill-bg, --eco-tab-pill-fg, --eco-tab-pill-shadow
- Type: --eco-font-body, --eco-font-display, --eco-font-display--letter-spacing, --eco-font-mono, --eco-text-md, --eco-text-md--line-height, --eco-text-sm, --eco-text-sm--line-height, --eco-text-xs
- Spacing: --eco-spacing-lg, --eco-spacing-md, --eco-spacing-sm, --eco-spacing-xl, --eco-spacing-xs, --eco-spacing-xxs
- Radius: --eco-radius-4xl, --eco-radius-full
- Shadow and focus: --eco-focus-gap, --eco-focus-ring, --eco-focus-ring-error, --eco-focus-w, --eco-shadow-sm
- 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-lime-light, --eco-color-neutral-200, --eco-color-neutral-300, --eco-color-neutral-500, --eco-color-neutral-600, --eco-color-neutral-700, --eco-color-neutral-800, --eco-color-neutral-900, --eco-color-surface, --eco-color-surface-tertiary, --eco-color-white
- Other: --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

- [Brandbook (Brendbuk)](https://design.pdp.uz/ds/brend/ai.md): Read when the task needs the brand itself, not a component: who the brand is, mission, tagline, vision, values, audience and character (tone of voice traits), presented as calm documentation sections (title, short lead, rule blocks with diagrams) from the official brand book content (brand-sources/<brand>/content/brandbook.<lang>.json). Never invent or rephrase mission, tagline, vision or values — quote them. 16 chapters in four groups — Foundation (brand platform, architecture, tone of voice), Elements (logo, colour, typography, graphics and icons, photo and illustration), Expression (style idea, layout, motion, video), Application (co-branding, partner communication, applications, files). Chapter by chapter: brand platform, architecture, logo, co-branding (lockups with PDP projects and external partners: spacing in X, 1 px divider, monochrome parent mark), colour, typography (incl. quotes, dashes, number, date and phone formats), style idea (mark, orbit, coil, circles), photo and illustration, graphics and icons, layout, motion, video and logo shots (bloom/outro, safe zones, captions), tone of voice (traits, name spelling, writing rules, words to avoid, sample copy), applications, partner communication (endorsement line «PDP EcoSystem loyihasi» — where it is mandatory, size and colour) and files. Slides marked «EcoSystem rule — inherited» quote the parent brand book because the project brand book has no own rule — do not invent project-specific rules there. Visual chapters show the real logo files, token colours and renders and link to the Core, Website, Print, Slides and SMM kits instead of repeating their rules. All six brands have all chapters. The old standalone brand book pages (/ecosystem/, /academy/, /school/brand/, /university/, /online/, /junior/) now redirect here. Since r62 every chapter also has: a «How to read» legend (platform), «The brand in 60 seconds» summary, brand model and «What we are / aren’t» slides; slide codes like «03.04» with copy-link buttons (?brand=<id>#bk-<chapter>-<n> works without the brand suffix), «In this chapter» chips and a chapter recap; callouts (important, tip, reference, exception, why) quoted from the brand book; download chips next to slide titles (real repo files only); decision trees («Which logo when», «Which file do I take»), element × brand and usage matrices, background × version and contrast matrices, production colour cards (HEX, RGB, CMYK, Pantone, token), a font tester, motion token curves, layout build sequences and zone diagrams, interactive writing and pre-publication checklists, a glossary (UZ/RU/EN), a changelog and colophon, exports (.ase swatches, Figma variables JSON, draw.io logo library, partner ZIP) and per-chapter «For AI» prompts. Numbers and brand claims on these slides are quoted from brand-sources/<brand>/content/brandbook.<lang>.json (the build rejects a number not found in the cited text); where a brand book has no data the slide is absent for that brand. A print stylesheet makes «Save as PDF» produce one A4 landscape page per slide in Light. Page: https://design.pdp.uz/ds/brend/
- [Core (Yadro)](https://design.pdp.uz/ds/yadro/ai.md): Always read first: foundations shared by every kit — principles, colour, brand elements, typography, spacing and shape, icons, motion and motion patterns (M3 transitions mapped to --eco-ease-*/--eco-duration-*), motiolanguage library (EcoSystem: ten brand anitext formations — logo bloom, loa(der, success check, subtle error shake, progress, page transition with View Transitions API, toast in/out, confetti-free certificates celeb06.10.2026, 24-houra tionme, number count-up, skeleton — each with tnon-breakeing spaces, money «1 200 000 so‘m / сум / soum», phone +998 78 000 00 00, ICU plurals, a pdpFormat helper because Intl «uz» output differs) and CSS;Uzbek Lottie JSON and dotLottie exporthography (o‘ g‘ = U+2018, tutuq belgisi = U+2019, ASCII apostrophe only in SMS, quotes at« /», ds/ashese, capitalis/moation in UZ/RU/EN, ga liven text checkerated from the logo geometry), sound (EcoSystem: sonic logo that followuses the builoomd rhythm, elight UI earcons from one A-major pentatonic scale, opt-in rules, the 2026 aloudness levels, phapbetics mapping reform iOS/Android/web, file-free Web Astatudio engine /ds/assets/sound/pdp-sound.js and WAVa dpreview cownloadsverter), accessibility, governance, component status table (Ready / Beta / Deprecated / Planned per section, with the last change) and per-component changelog, design tokens and the brand AI files. Page: https://design.pdp.uz/ds/yadro/
- [Website (Sayt)](https://design.pdp.uz/ds/sayt/ai.md): Use when building a website, landing page or web interface: buttons, forms, slider, menus, badges, avatars (3D), cards, callouts, app components (tabs, progress, table, pagination, modal, empty state, upload), charts, chip types, rich tooltip and submenu; extra components — command palette, date picker, overlays (sheet, hover card, context menu, toast stack), data table (toolbar, bulk actions), structure (accordion, tree, stepper, carousel, resizable), field patterns (input group, error summary, validation timing), toolbar (toggle group, split button, menubar), inline edit and contextual save bar, status indicators (icon, shape, KPI delta), saved views with filter pills; EcoSystem-only (r92): number input (−/+ stepper, spinbutton), rating and feedback (star input and display, rating summary, NPS 0–10 scale, «Was this helpful?»), countdown and deadline chips, table settings (density 40/52/64, expandable rows, pinned first column), tag / multi-select field (chips inside the field, typeahead listbox, create new, limit), video lesson player (chapters on the timeline, speed, captions, transcript, next-lesson end card), gallery and lightbox viewer (dialog, prev/next, zoom, swipe); page templates — sign-in, sign-up and password reset, multi-step application (question pages, check answers, confirmation), error pages (404, 500, 503 maintenance, 403 — EcoSystem only); email (EcoSystem only, r94): base layout (600 px table layout, tokens compiled to inline hex, dark mode via prefers-color-scheme and [data-ogsc], locked logo header, bulletproof pill button, preheader), 8 ready templates in Uzbek, Russian and English with plain-text parts (email verification, password reset, application received, payment receipt, lesson reminder, certificate ready, event invitation with add-to-calendar and .ics, weekly digest with one-click unsubscribe) at https://design.pdp.uz/ds/email/, staff email signature generator (HTML + plain text) and a pre-send checklist (Gmail clipping < 100 KB, client matrix); backgrounds, live backgrounds, text motion and effects; brand card kinds and signatures; states, required blocks (header, footer, hero, CTA), page anatomy; patterns and guides — interaction states, adaptive layout, writing, microcopy library (310+ ready UI strings in Uzbek, Russian and English with context, max length, tone and an avoid variant; 14 categories incl. validation, destructive confirmations, push/SMS, payments and classes/attendance/certificates; ICU plurals; download https://design.pdp.uz/ds/sayt/microcopy.json and microcopy.csv — reuse these strings by id instead of writing new ones), onboarding and permissions, search, data entry, modality, settings, data visualisation, inclusive language, task list, step-by-step navigation, cookie consent. Every section works in all six brands (tokens, logo slot and fonts follow the active brand). Page: https://design.pdp.uz/ds/sayt/
- [Dashboard (Dashboard)](https://design.pdp.uz/ds/dashboard/ai.md): Use when building a CRM (Nextcloud), dashboard or desktop app screen: Dashboard, Files, Photos, Activity, Talk (incl. call view), Mail, Deck, Tasks, Gantt (Deck timeline), Calendar (incl. appointments), Tables, Forms, Polls, Contacts, Notes, Collectives (wiki), Announcements, Bookmarks, learning blocks (course path, schedule, assignment, grade book, attendance, rating) and app shell (bottom bar, navigation rail, top app bar, FAB; sidebar variants and dashboard layout; notification centre and message-type rules; feature tour — spotlight with blanket, 3–4 steps, EcoSystem only). All 18 Nextcloud apps are EcoSystem-only reskins with real Nextcloud DOM classes. Phone apps (native iOS/Android student app) and Telegram Mini App / bot are in the App kit; shared web components (buttons, forms, tabs, table, modal) are in the Website kit. Page: https://design.pdp.uz/ds/dashboard/
- [Mobile app (Ilova)](https://design.pdp.uz/ds/ilova/ai.md): Use when building for the phone: a Telegram Mini App or bot (Mini App shell with Telegram header, MainButton/SecondaryButton, BackButton, safe areas and 10 screens — catalogue, course, 3-step apply, payment, schedule, profile and certificate, notifications; 7 bot message templates with formatting, emoji and inline-keyboard rules; themeParams → --eco-* bridge downloadable as /ds/telegram/pdp-telegram.css and .js; when to use bot vs Mini App vs website) or the native iOS and Android student app (mobile tokens in pt/sp with Swift, Compose and Android XML files, background ladder instead of shadows, safe areas, 44 pt / 48 dp tap targets, Dynamic Type, haptics; mobile components for iOS 26–27 and Material 3 Expressive; 12 core screens; app icon layers and splash; push, Live Activity and widgets; iOS vs Android differences). EcoSystem only. Desktop CRM, dashboard and Nextcloud screens are in the Dashboard kit; shared web components are in the Website kit. Page: https://design.pdp.uz/ds/ilova/
- [School LMS (LMS)](https://design.pdp.uz/ds/lms/ai.md): Use when building a screen of the PDP School learning management system (LMS): app shell with per-role sidebar (admin, teacher, student, parent), role dashboards, grade journal (attendance + 0–100 grade cell, 5-point mapping ≥90/70/55), attendance roll-call and student calendar, timetable (week, day, admin busy/free matrix), curriculum, lesson player and quiz runner, homework with AI check and teacher review. School brand only (eco-lock-school); component CSS lives in tools/ecosystem-ds/ds/lms/*.css and uses --eco-* tokens only. Page: https://design.pdp.uz/ds/lms/
- [Slides (Taqdimot)](https://design.pdp.uz/ds/taqdimot/ai.md): Use when making a presentation: 60 kinds of 16:9 slides in Dark and Light, deck outlines and presentation rules in the active brand (PowerPoint templates: coming soon). Page: https://design.pdp.uz/ds/taqdimot/
- [Print (Bosma)](https://design.pdp.uz/ds/bosma/ai.md): Use when making a printed A4 document: SOP, job card, form, log book, agreement; margins, running header and footer, pt type scale and the --eco-print-* tokens. Also the A4 templates (office and offset letterhead, SOP with document code and change log, bilingual UZ/RU forms with 0.4 pt writing lines, contract with initials per page), A3 poster with a viewing-distance type scale, 600×1600 mm X-banner, DL and C4 envelopes, A4 presentation folder (front and inside with pocket), DL leaflet cover, A5 notebook cover, A5 door sign and a die-cut sticker sheet, (corner holes, empty bottom 100 mm, small text on a black band in the green version), A6 event badge, CR80 ID card, landscape timetable, A4 landscape attendance register (blank and filled; K5 tile cells, letter marks, totals, signature row), A5 saddle-stitched admission brochure (8 pages: cover, programmes, why PDP, admission steps, prices, FAQ, contacts with QR; 3 mm bleed, 5 mm safe area from trim and fold), the six certificate variants (print: A standard, F official; digital: C standard, E honours, D/B extra), the print colour table (screen HEX/RGB vs CMYK FOGRA39/29) and file naming, document codes and the preflight checklist. Also environmental design: building grilles (University, School), window film (EcoSystem, University, School), A4 wayfinding signs and wall posters (University). Page: https://design.pdp.uz/ds/bosma/

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