# PDP Design System — Mobile kit (Mobile), v0.7 > Read for any phone design (LMS app, PDP Desk, PDP Talk, future apps) together with the Core kit: mobile tokens (iOS pt / Android dp), mobile components and the .mb-* phone kit, app screens, app icon and splash, push and widgets, iOS vs Android differences, Telegram Mini App shell, bot messages, Telegram theme bridge and «bot, Mini App or site». Product screens (PDP Desk, PDP Talk) are in the Desk kit. Page: https://design.pdp.uz/ds/mobile/ (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 Mobile 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.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/.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: ``. Web pages and every other kit use Phosphor (`#i-`). 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 ### Mobile tokens (Mobile) — https://design.pdp.uz/ds/mobile/#mb-tokens **Mobile app: tokens in iOS and Android terms.** The student app carries one brand on iPhone and Android, yet feels native on each platform. Here DS tokens are translated into the language of both platforms: type scale (pt and sp), spacing and corner radii, a background ladder instead of shadows, colour roles, safe area, touch target size, Dynamic Type, haptics and motion. Roughly 79 % of smartphones in Uzbekistan run Android, so both platforms are designed as equals. Based on Apple HIG (iOS 26–27) and Material 3 Expressive. - 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: [Type scale](https://design.pdp.uz/ds/mobile/#mb-tokens-shrift-shkalasi); [Spacing, corner radii and heights](https://design.pdp.uz/ds/mobile/#mb-tokens-oraliq-burchak-va); [Layers: background instead of shadow](https://design.pdp.uz/ds/mobile/#mb-tokens-qatlamlar-soya-orniga); [Colour roles: iOS and Material 3](https://design.pdp.uz/ds/mobile/#mb-tokens-rang-rollari-ios); [Safe area and touch target size](https://design.pdp.uz/ds/mobile/#mb-tokens-xavfsiz-hudud-va); [Dynamic Type and font scaling](https://design.pdp.uz/ds/mobile/#mb-tokens-dynamic-type-va); [Haptics and motion](https://design.pdp.uz/ds/mobile/#mb-tokens-haptika-va-harakat); [For developers: files](https://design.pdp.uz/ds/mobile/#mb-tokens-dasturchiga-fayllar) - PDP classes: .eco-btn (--secondary, --sm), .eco-glass (--pill), .eco-only, .eco-segment (--sm) - Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/mb-tokens-surface.md https://design.pdp.uz/ds/ai/r/mb-tokens-safe.md https://design.pdp.uz/ds/ai/r/mb-tokens-dyn.md ### Mobile components (Mobile) — https://design.pdp.uz/ds/mobile/#mb-components **Mobile components: one brand, two platforms.** Core building blocks of the student app in a phone frame: tab bar and navigation bar, large title, search, sheet, list rows, cards, segment, FAB, message (snackbar / toast) and empty state. Left — iOS 26–27 (floating glass tab bar, glass buttons), right — Android, Material 3 Expressive (64 dp bar, FAB). Colours, type and corner radii are shared: Mobile tokens. For the web app — 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. - Status: Beta (since 06.10.2026) — new, under art-director review; class names may still change. - Blocks: [Every component on one sheet](https://design.pdp.uz/ds/mobile/#mb-components-bitta-varaqda-hamma); [App icons](https://design.pdp.uz/ds/mobile/#mb-components-ilova-ikonkalari); [Tab bar, large title and search](https://design.pdp.uz/ds/mobile/#mb-components-tab-bar-katta); [Sheet, segment, list rows and switch](https://design.pdp.uz/ds/mobile/#mb-components-varaq-sheet-segment); [Primary action, message and empty state](https://design.pdp.uz/ds/mobile/#mb-components-asosiy-amal-xabar) - PDP classes: .eco-btn (--secondary, --sm), .eco-glass (--pill), .eco-only, .eco-segment (--sm) - Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/mb-components-all.md https://design.pdp.uz/ds/ai/r/mb-components-nav.md https://design.pdp.uz/ds/ai/r/mb-components-sheet.md https://design.pdp.uz/ds/ai/r/mb-components-fab.md ### App screens (Mobile) — https://design.pdp.uz/ds/mobile/#mb-screens **Student app: 12 core screens.** From first launch to daily use: onboarding, sign-in with phone and SMS code, PIN and Face ID, home, courses, lesson player, schedule, assignment, results, profile and notifications. Every screen on iOS and Android, in Light and Dark — via the switcher at the top. Local patterns come from the Click, Payme and Uzum apps (language choice, +998, SMS code, PIN); learning patterns from Duolingo, Coursera and Khan Academy. Components — Mobile components. - 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: [Flow and rules](https://design.pdp.uz/ds/mobile/#mb-screens-oqim-va-qoidalar) - PDP classes: .eco-glass (--pill), .eco-only, .eco-segment (--sm) - Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/mb-screens-all.md ### App icon and splash (Mobile) — https://design.pdp.uz/ds/mobile/#mb-icon **App icon and launch screen.** The icon carries only the mark, no wordmark (brandbook: “S · Minimal” — favicon and app icon). The primary icon is a green field, white mark and lime rays: PDP’s colour on the home screen. From iOS 26 the icon is layered (Default, Dark, Tinted, Clear); on Android it is an adaptive icon (background, foreground, monochrome). The mark is taken from the file, never redrawn; colours are the approved pairs. Logo rules — Brand → Logo. - 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: [iOS: four appearances](https://design.pdp.uz/ds/mobile/#mb-icon-ios-tort-korinish); [Android: adaptive and themed icon](https://design.pdp.uz/ds/mobile/#mb-icon-android-adaptive-va); [Launch screen (splash)](https://design.pdp.uz/ds/mobile/#mb-icon-ochilish-ekrani-splash); [Files](https://design.pdp.uz/ds/mobile/#mb-icon-fayllar) - PDP classes: .eco-cover (--dark, --still), .eco-only - Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/mb-icon-ios.md https://design.pdp.uz/ds/ai/r/mb-icon-android.md https://design.pdp.uz/ds/ai/r/mb-icon-splash.md ### Push and widgets (Mobile) — https://design.pdp.uz/ds/mobile/#mb-push **Push notifications, Live Activity and widgets.** Staying in touch with the student while the app is closed: class reminder, mentor message, grade, deadline and upload progress. On the lock screen and in the notification shade the system’s own layout is used; we supply short copy, the right channel and the right timing. Time-bound processes (class start, file upload) use iOS Live Activity and Android 16 Live Update; quick glances use home and lock screen widgets. In-app list — App screens, for web — Notification centre. - 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: [Lock screen and notification shade](https://design.pdp.uz/ds/mobile/#mb-push-qulf-ekrani-va); [Anatomy and channels](https://design.pdp.uz/ds/mobile/#mb-push-anatomiya-va-kanallar); [Widgets](https://design.pdp.uz/ds/mobile/#mb-push-vidjetlar) - PDP classes: .eco-cover (--dark, --light, --still), .eco-glass, .eco-only, .eco-segment (--sm) - Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/mb-push-lock.md https://design.pdp.uz/ds/ai/r/mb-push-widgets.md ### iOS and Android differences (Mobile) — https://design.pdp.uz/ds/mobile/#mb-platforms **iOS and Android: what stays the same and what differs.** The brand stays the same: colour, type, icons, corner radii and tone. What changes by platform is navigation, “back”, the primary action, sheets, messages, system surfaces and gestures — users expect the habits of their own phone. Each row shows iOS (HIG, iOS 26–27), Android (Material 3 Expressive, Android 15–16) and the PDP decision. - 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: [One screen — two platforms](https://design.pdp.uz/ds/mobile/#mb-platforms-bir-ekran-ikki) - PDP classes: .eco-glass (--pill), .eco-only, .eco-segment (--sm) - Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/mb-platforms-pairs.md ### Mini App shell (Telegram) — https://design.pdp.uz/ds/mobile/#tg-miniapp **Telegram Mini App: shell and core screens.** In Uzbekistan Telegram is the main channel: choosing a course, applying, checking the schedule and paying often start here. A Mini App is a web app that opens inside a bot. Telegram draws the header, the bottom button and the “Back” button — PDP only supplies their colour and text; everything else is PDP tokens and components. Colour bridge — Telegram theme and tokens, bot messages — Bot messages. - 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/mobile/#tg-miniapp-jonli-namuna); [All screens](https://design.pdp.uz/ds/mobile/#tg-miniapp-barcha-ekranlar); [Anatomy: who draws what](https://design.pdp.uz/ds/mobile/#tg-miniapp-anatomiya-kim-nimani); [Bottom button states](https://design.pdp.uz/ds/mobile/#tg-miniapp-pastki-tugmalar); [Popups, haptics and storage](https://design.pdp.uz/ds/mobile/#tg-miniapp-popup-haptika-va); [Rules](https://design.pdp.uz/ds/mobile/#tg-miniapp-qoidalar) - PDP classes: .eco-avatar (--3d, --xl), .eco-btn (--secondary, --sm, --tertiary, --xs), .eco-check, .eco-choice, .eco-field, .eco-input, .eco-input-group (__addon, __input), .eco-label, .eco-loader (--mono, --sm, __core, __o, __ray, __spin), .eco-only, .eco-radio, .eco-segment (--sm), .eco-skeleton, .eco-switch - Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/tg-miniapp-live.md https://design.pdp.uz/ds/ai/r/tg-miniapp-wall.md https://design.pdp.uz/ds/ai/r/tg-miniapp-buttons.md ### Bot messages (Telegram) — https://design.pdp.uz/ds/mobile/#tg-bot **Bot messages: templates and writing rules.** A bot is the shortest path: nothing to install, the message arrives in the chat. One message — one topic and one main button; longer tasks (catalog, forms, payment) belong in the Mini App. Below are seven ready-made templates: how they look in Telegram’s Light and Dark themes, and alongside — parse_mode: HTML text and buttons. - 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: [Conversation: first visit](https://design.pdp.uz/ds/mobile/#tg-bot-suhbat-birinchi-kirish); [Templates](https://design.pdp.uz/ds/mobile/#tg-bot-shablonlar); [Formatting and emoji](https://design.pdp.uz/ds/mobile/#tg-bot-formatlash-va-emoji); [Buttons and limits](https://design.pdp.uz/ds/mobile/#tg-bot-tugmalar-va-cheklovlar) - PDP classes: .eco-btn (--secondary, --xs), .eco-only, .eco-segment (--sm) - Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/tg-bot-chat.md https://design.pdp.uz/ds/ai/r/tg-bot-templates.md ### Telegram theme and tokens (Telegram) — https://design.pdp.uz/ds/mobile/#tg-theme **Telegram theme and PDP tokens.** Telegram gives a Mini App 15 colours (themeParams), the mode (colorScheme) and layout dimensions. A PDP app takes the mode from Telegram but colours from its own tokens — and paints Telegram’s header, background and bottom button in those colours. The bridge is one CSS and one JS file with no HEX: when tokens update, the app updates too. - 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: [One app — four Telegram themes](https://design.pdp.uz/ds/mobile/#tg-theme-bitta-ilova-tort); [Download](https://design.pdp.uz/ds/mobile/#tg-theme-yuklab-olish) - PDP classes: .eco-btn (--secondary, --sm), .eco-only, .eco-segment (--sm) - Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/tg-theme-live.md ### Bot, Mini App yoki sayt (Telegram) — https://design.pdp.uz/ds/mobile/#tg-channels **Bot, Mini App or website: when to use which.** In Uzbekistan Telegram is the main messenger for about 70 % of people. So first contact usually happens in the bot and the actual work in the Mini App; the website is for visitors from search, long documents and payment for digital courses. The rule is simple: messages in the bot, screens in the Mini App, pages on the website. - 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: [One journey: bot → Mini App → site](https://design.pdp.uz/ds/mobile/#tg-channels-bitta-yol-bot) - PDP classes: .eco-badge (--brand), .eco-glass, .eco-only - Recipes (clean HTML): https://design.pdp.uz/ds/ai/r/tg-channels-journey.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-secondary, --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-success-primary, --eco-bg-tertiary, --eco-bg-warning-primary - Text: --eco-text-brand-primary, --eco-text-brand-secondary, --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-warning-primary, --eco-text-white - Borders: --eco-border-error, --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-quaternary, --eco-fg-secondary, --eco-fg-success-primary, --eco-fg-tertiary, --eco-fg-white - Brand and buttons: --eco-brand-accent, --eco-brand-button, --eco-brand-on-button, --eco-brand-primary, --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-display--weight-strong, --eco-font-mono, --eco-text-display-xs, --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-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 - Shadow and focus: --eco-focus-gap, --eco-focus-ring, --eco-focus-ring-error, --eco-focus-w, --eco-shadow-lg, --eco-shadow-md, --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-exit, --eco-ease-standard - Primitives: --eco-color-black, --eco-color-brand-tint, --eco-color-lime, --eco-color-malachite, --eco-color-malachite-button, --eco-color-neutral-900, --eco-color-surface, --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-control, --eco-app-control-hover, --eco-app-track, --eco-app-well, --eco-field-focus-w, --eco-field-radius-affix, --eco-field-radius-multiline, --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.