درختواره صفحه‌ها

tds.tokapps.com/foundations

بنیان‌ها

بنیان‌ها پایین‌ترین لایه‌های سیستم‌اند: مقادیر خام و نقش‌های معنایی. این صفحه‌ها مستقیم از خود فایل‌های CSS توکن ساخته می‌شوند — منبع حقیقت یکی است.

فایل‌های توکن

ترتیب معنادار است: هر لایه روی لایه قبلی می‌نشیند.

raw/colors.css

لایه ۰ — توکن خام

۵۱

توکن · ۵۱ تعریف

raw/spacing.css

لایه ۰ — توکن خام

۱۳

توکن · ۱۳ تعریف

raw/layout.css

لایه ۰ — توکن خام

۱۶

توکن · ۱۶ تعریف

raw/radii.css

لایه ۰ — توکن خام

توکن · ۶ تعریف

raw/typography.css

لایه ۰ — توکن خام

۲۲

توکن · ۲۲ تعریف

raw/motion.css

لایه ۰ — توکن خام

۱۱

توکن · ۱۱ تعریف

raw/shadows.css

لایه ۰ — توکن خام

۱۳

توکن · ۱۳ تعریف

semantic/surfaces.css

لایه ۱ — توکن معنایی

۲۳

توکن · ۴۶ تعریف

semantic/content.css

لایه ۱ — توکن معنایی

توکن · ۱۸ تعریف

semantic/borders.css

لایه ۱ — توکن معنایی

توکن · ۸ تعریف

semantic/actions.css

لایه ۱ — توکن معنایی

۱۳

توکن · ۲۵ تعریف

semantic/feedback.css

لایه ۱ — توکن معنایی

توکن · ۱۶ تعریف

semantic/interaction.css

لایه ۱ — توکن معنایی

توکن · ۱۲ تعریف

semantic/canvas.css

لایه ۱ — توکن معنایی

۱۶

توکن · ۲۴ تعریف

component/control.css

لایه ۱٫۵ — توکن کامپوننت

۲۶

توکن · ۳۰ تعریف

component/code-cells.css

لایه ۱٫۵ — توکن کامپوننت

توکن · ۵ تعریف

component/code-block.css

لایه ۱٫۵ — توکن کامپوننت

۵۷

توکن · ۹۴ تعریف

component/inline-code.css

لایه ۱٫۵ — توکن کامپوننت

۱۷

توکن · ۲۸ تعریف

component/button.css

لایه ۱٫۵ — توکن کامپوننت

۱۰

توکن · ۱۰ تعریف

component/dock.css

لایه ۱٫۵ — توکن کامپوننت

۷۷

توکن · ۹۰ تعریف

component/dock-profile.css

لایه ۱٫۵ — توکن کامپوننت

۱۶

توکن · ۱۶ تعریف

component/dock-clock.css

لایه ۱٫۵ — توکن کامپوننت

۱۷

توکن · ۱۷ تعریف

component/dock-player.css

لایه ۱٫۵ — توکن کامپوننت

۵۶

توکن · ۵۶ تعریف

component/calendar.css

لایه ۱٫۵ — توکن کامپوننت

۱۴

توکن · ۱۴ تعریف

component/chrome.css

لایه ۱٫۵ — توکن کامپوننت

۴۰

توکن · ۴۰ تعریف

component/sound.css

لایه ۱٫۵ — توکن کامپوننت

توکن · ۴ تعریف

component/gradient.css

لایه ۱٫۵ — توکن کامپوننت

۱۴

توکن · ۱۵ تعریف

component/accordion.css

لایه ۱٫۵ — توکن کامپوننت

توکن · ۸ تعریف

component/liquid.css

لایه ۱٫۵ — توکن کامپوننت

توکن · ۷ تعریف

component/avatar.css

لایه ۱٫۵ — توکن کامپوننت

توکن · ۸ تعریف

component/badge.css

لایه ۱٫۵ — توکن کامپوننت

توکن · ۹ تعریف

component/card.css

لایه ۱٫۵ — توکن کامپوننت

۳۷

توکن · ۳۹ تعریف

component/checkbox.css

لایه ۱٫۵ — توکن کامپوننت

۱۴

توکن · ۱۴ تعریف

component/data-table.css

لایه ۱٫۵ — توکن کامپوننت

توکن · ۶ تعریف

component/date-picker.css

لایه ۱٫۵ — توکن کامپوننت

۲۷

توکن · ۲۷ تعریف

component/empty-state.css

لایه ۱٫۵ — توکن کامپوننت

توکن · ۷ تعریف

component/file-upload.css

لایه ۱٫۵ — توکن کامپوننت

۲۹

توکن · ۲۹ تعریف

component/input.css

لایه ۱٫۵ — توکن کامپوننت

۱۶

توکن · ۱۶ تعریف

component/repeater.css

لایه ۱٫۵ — توکن کامپوننت

۱۰

توکن · ۱۰ تعریف

component/slug.css

لایه ۱٫۵ — توکن کامپوننت

توکن · ۶ تعریف

component/modal.css

لایه ۱٫۵ — توکن کامپوننت

۶۱

توکن · ۶۱ تعریف

component/navigation.css

لایه ۱٫۵ — توکن کامپوننت

۳۹

توکن · ۳۹ تعریف

component/overlay.css

لایه ۱٫۵ — توکن کامپوننت

۷۰

توکن · ۷۰ تعریف

component/progress.css

لایه ۱٫۵ — توکن کامپوننت

۱۳

توکن · ۱۳ تعریف

component/radio.css

لایه ۱٫۵ — توکن کامپوننت

۲۳

توکن · ۲۳ تعریف

component/selection.css

لایه ۱٫۵ — توکن کامپوننت

۲۶

توکن · ۲۶ تعریف

component/select.css

لایه ۱٫۵ — توکن کامپوننت

۲۱

توکن · ۲۱ تعریف

component/skeleton.css

لایه ۱٫۵ — توکن کامپوننت

۱۰

توکن · ۱۰ تعریف

component/slider.css

لایه ۱٫۵ — توکن کامپوننت

۱۴

توکن · ۱۴ تعریف

component/switch.css

لایه ۱٫۵ — توکن کامپوننت

۲۱

توکن · ۲۱ تعریف

component/table.css

لایه ۱٫۵ — توکن کامپوننت

توکن · ۹ تعریف

component/toast.css

لایه ۱٫۵ — توکن کامپوننت

۱۳

توکن · ۱۳ تعریف

component/inline-notice.css

لایه ۱٫۵ — توکن کامپوننت

توکن · ۷ تعریف

component/icon-button.css

لایه ۱٫۵ — توکن کامپوننت

توکن · ۷ تعریف

component/split-button.css

لایه ۱٫۵ — توکن کامپوننت

۱۲

توکن · ۱۲ تعریف

component/currency-input.css

لایه ۱٫۵ — توکن کامپوننت

۱۳

توکن · ۱۳ تعریف

component/number-input.css

لایه ۱٫۵ — توکن کامپوننت

۱۳

توکن · ۱۳ تعریف

component/kbd.css

لایه ۱٫۵ — توکن کامپوننت

۱۱

توکن · ۱۱ تعریف

component/toolbar.css

لایه ۱٫۵ — توکن کامپوننت

۱۶

توکن · ۱۶ تعریف

component/panel-dock.css

لایه ۱٫۵ — توکن کامپوننت

۱۰

توکن · ۱۰ تعریف

component/tree-view.css

لایه ۱٫۵ — توکن کامپوننت

۱۸

توکن · ۱۸ تعریف

component/zoom-control.css

لایه ۱٫۵ — توکن کامپوننت

توکن · ۳ تعریف

component/save-status.css

لایه ۱٫۵ — توکن کامپوننت

توکن · ۹ تعریف

component/catalog-tile.css

لایه ۱٫۵ — توکن کامپوننت

۱۵

توکن · ۱۵ تعریف

component/tags-input.css

لایه ۱٫۵ — توکن کامپوننت

۱۸

توکن · ۱۸ تعریف

component/textarea.css

لایه ۱٫۵ — توکن کامپوننت

۱۴

توکن · ۱۴ تعریف

component/param.css

لایه ۱٫۵ — توکن کامپوننت

۱۲

توکن · ۱۲ تعریف

component/editor.css

لایه ۱٫۵ — توکن کامپوننت

۲۶

توکن · ۲۶ تعریف

component/scroll-area.css

لایه ۱٫۵ — توکن کامپوننت

۱۲

توکن · ۱۲ تعریف

component/segmented-navigation.css

لایه ۱٫۵ — توکن کامپوننت

۱۴

توکن · ۱۴ تعریف

component/timeline.css

لایه ۱٫۵ — توکن کامپوننت

۱۵

توکن · ۱۵ تعریف

component/chaptered-audio-player.css

لایه ۱٫۵ — توکن کامپوننت

۱۵

توکن · ۱۵ تعریف

component/video-player.css

لایه ۱٫۵ — توکن کامپوننت

۱۷

توکن · ۱۷ تعریف

component/interaction.css

لایه ۱٫۵ — توکن کامپوننت

توکن · ۰ تعریف

themes/light.css

تم‌های پایه

توکن · ۰ تعریف

themes/dark.css

تم‌های پایه

توکن · ۰ تعریف

themes/high-contrast.css

تم‌های پایه

۱۴

توکن · ۱۴ تعریف

themes/reduced-motion.css

تم‌های پایه

توکن · ۱۰ تعریف

صفحه‌های بنیان

رنگ

خنثی، اکسنت پارامتری، وضعیت و نقش‌های معنایی

تایپوگرافی

خانواده قلم، مقیاس اندازه، ارتفاع خط و وزن

فاصله‌گذاری

طیف فاصله بر پایه rem

شعاع

شعاع گوشه و ضریب تم

ارتفاع

پله‌های برجستگی و ماده شیشه

گرادیان‌ها

هفت‌رنگ، حاشیه‌های گرادیانی مجاز و قواعد استثنا

حرکت

مدت‌ها و منحنی‌های حرکت

سیال (Liquid)

سیال: توکن‌های مشترک، پیکربندی سه‌لایه و کاهش حرکت

صدا

صدای Opt-in، رویدادهای معنایی و پل صدای کامپوننت‌ها

پرسونا و لحنبه‌زودی

در فازهای بعدی تکمیل می‌شود.

آیکون‌ها

مرجع کامل آیکون‌ها، SVG اختصاصی و آیکون متحرک

راست‌به‌چپ

ویژگی‌های منطقی، آیکون‌های جهت‌دار و متن دوجهته

واکنش‌گرایی

نقطه‌های شکست توکنی، قاب عرض زنده و الگوهای گذار

چاپ

قرارداد PrintBehavior، پیش‌نمایش چاپ و قواعد کاغذ

دسترس‌پذیری

کنتراست AA، اعلان صفحه‌خوان، کاهش حرکت و فهرست WCAG 2.2

انتخاب متن و کشیدن

انتخاب متن، کشیدن و ویرایش در سطح صفحه

تغییر صفحه (Transaction)به‌زودی

در فازهای بعدی تکمیل می‌شود.

جفت رنگ متن و پس‌زمینه

جفت رنگ متن و پس‌زمینه با نسبت کنتراست

پارامترهای داینامیکبه‌زودی

در فازهای بعدی تکمیل می‌شود.

همه توکن‌ها

فهرست کامل، خوانده‌شده از متن CSS. روی نام هر توکن بزنید تا var() آن کپی شود.

۱۳۴۳ توکن از ۱۳۴۳

توکن	مقدار	توضیح
		خنثی
		خنثی
		خنثی
		خنثی
		خنثی
		خنثی
		خنثی
		خنثی
		خنثی
		خنثی
		خنثی
		خنثی
		خنثی
		خنثی
		خنثی
		اکسنت: فام و اشباع از تم می‌آید (4-themes.css)
		اکسنت: فام و اشباع از تم می‌آید (4-themes.css)
		وضعیت‌ها
		وضعیت‌ها
		وضعیت‌ها
		وضعیت‌ها
		وضعیت‌ها
		وضعیت‌ها
		وضعیت‌ها
		وضعیت‌ها
		وضعیت‌ها
		وضعیت‌ها
		وضعیت‌ها
		وضعیت‌ها
		وضعیت‌ها
		وضعیت‌ها
		وضعیت‌ها
		وضعیت‌ها
		هفت‌رنگ
		هفت‌رنگ
		هفت‌رنگ
		هفت‌رنگ
		هفت‌رنگ
		هفت‌رنگ
		هفت‌رنگ
		طیف اکسنت
		طیف اکسنت
		طیف اکسنت
		طیف اکسنت
		طیف اکسنت
		طیف اکسنت
		طیف اکسنت
		طیف اکسنت
		طیف اکسنت
		طیف اکسنت
		مرکب تیرهٔ آبی‌سبز برای متن روی تأکید روشن — به‌جای سیاه خالص، کنتراست ≥ ۴٫۵ با همان هویت رنگی
		فاصله (rem)
		فاصله (rem)
		فاصله (rem)
		فاصله (rem)
		فاصله (rem)
		فاصله (rem)
		فاصله (rem)
		فاصله (rem)
		فاصله (rem)
		فاصله (rem)
		فاصله (rem)
		فاصله (rem)
		فاصله (rem)
		نقطه‌شکست (mobile-first: min-width)
		نقطه‌شکست (mobile-first: min-width)
		نقطه‌شکست (mobile-first: min-width)
		نقطه‌شکست (mobile-first: min-width)
		نقطه‌شکست (mobile-first: min-width)
		عرض کانتینر (Tailwind container scale)
		عرض کانتینر (Tailwind container scale)
		عرض کانتینر (Tailwind container scale)
		عرض کانتینر (Tailwind container scale)
		عرض کانتینر (Tailwind container scale)
		عرض کانتینر (Tailwind container scale)
		عرض کانتینر (Tailwind container scale)
		عرض کانتینر (Tailwind container scale)
		عرض کانتینر (Tailwind container scale)
		عرض کانتینر (Tailwind container scale)
		عرض کانتینر (Tailwind container scale)
		شعاع (px)
		شعاع (px)
		شعاع
		شعاع
		شعاع
		شعاع
		تایپوگرافی
		تایپوگرافی
		تایپوگرافی
		تایپوگرافی
		تایپوگرافی
		تایپوگرافی
		تایپوگرافی
		تایپوگرافی
		تایپوگرافی
		تایپوگرافی
		تایپوگرافی
		تایپوگرافی
		کف اندازه متن فارسی: ۱۳px
		کف ارتفاع خط فارسی از متریک‌های فونت: ascent + descent = 1.5625
		تایپوگرافی
		تایپوگرافی
		تایپوگرافی
		تایپوگرافی
		تایپوگرافی
		تایپوگرافی
		تایپوگرافی
		وزن عنوان‌ها
		حرکت
		حرکت
		حرکت
		حرکت
		حرکت
		حرکت
		حرکت
		حرکت
		حرکت
		نوع حرکت تأکیدی
		نوع حرکت تأکیدی
		ماده (Material)
		ماده (Material)
		ماده (Material)
		ماده (Material)
		ماده (Material)
		لایه
		لایه
		لایه
		لایه
		لایه
		لایه
		لایه
		نوار شناور انتخاب ویرایشگر: بالاتر از همهٔ لایه‌ها، از جمله toast
		سطح
		سطح
		سطح
		سطح
		سطح
		سطح
		سطح
		سطح
		برجستگی
		برجستگی
		برجستگی
		برجستگی
		برجستگی
		پله ۵ — شناور: بالاتر از همه سطح‌های صفحه، پایین‌تر از دیالوگ
		برجستگی
		ماده: شیشه (Acrylic)
		ماده: شیشه (Acrylic)
		ماده: شیشه (Acrylic)
		ماده: شیشه (Acrylic)
		ماده: شیشه (Acrylic)
		ماده: شیشه (Acrylic)
		ماده: شیشه (Acrylic)
		ماده: شیشه (Acrylic)
		محتوا
		محتوا
		محتوا
		محتوا
		مرکب تیرهٔ هم‌هویت به‌جای سیاه خالص: روی accent-600 ≈ ۷٫۶، روی accent-700 (hover) ≈ ۵٫۲ — AA با رنگ آبی‌سبز، نه خاکستری
		محتوا
		محتوا
		محتوا
		محتوا
		مرز
		مرز
		مرز
		مرز فیلد ورودی: کم‌رنگ‌تر از strong و همچنان ≥ ۳:۱ روی سطح (WCAG 1.4.11)
		اکسنت
		اکسنت
		اکسنت
		اکسنت
		اکسنت
		حالت‌های کنش: ته‌رنگ پررنگ‌تر؛ متن --tds-fg-accent (accent-900) روی هر سه حالت AA
		اکسنت
		اکسنت
		کنش مخرب — ته‌رنگ خطر؛ متن --tds-action-danger-fg همان خانوادهٔ رنگ
		اکسنت
		اکسنت
		اکسنت

		وضعیت
		وضعیت
		وضعیت
		وضعیت
		وضعیت
		وضعیت
		وضعیت
		وضعیت
		انتخاب متن
		کشیدن عنصر (تصویر، پیوند، عنصر draggable) — none \| auto
		منوی لمسی iOS (نگه‌داشتن روی تصویر/پیوند) — none \| default
		منوی راست‌کلیک بومی — none \| auto (ContextMenu از کامپوننت‌ها همچنان کار می‌کند)
















		تراکم اطلاعات
		کنترل‌ها
		کنترل‌ها
		کنترل‌ها
		کنترل‌ها
		خط و فوکوس
		خط و فوکوس
		خط و فوکوس
		خط و فوکوس
		فوکوس نرم: لبهٔ ۱px با کنتراست ≥ ۳:۱ + هالهٔ هم‌خانوادهٔ سایه‌ها (هم‌سبک باکس‌ها)
		خط و فوکوس
		آیکون
		آیکون
		آیکون
		آیکون
		یک دور کامل آیکون چرخان
		pulse / bounce / wiggle
		کشیده شدن خط‌ها
		جابه‌جایی دو آیکون (IconSwap)
		لمس و ژست
		لمس و ژست
		لمس و ژست
		لمس و ژست
		حرکت تعاملی
		حرکت تعاملی
		حرکت تعاملی














		قاب: سایهٔ خنثی، لبهٔ درخشان بالا، تراشهٔ زبان، پاورقی و نوار اسکرول
		قاب: سایهٔ خنثی، لبهٔ درخشان بالا، تراشهٔ زبان، پاورقی و نوار اسکرول
		قاب: سایهٔ خنثی، لبهٔ درخشان بالا، تراشهٔ زبان، پاورقی و نوار اسکرول
		قاب: سایهٔ خنثی، لبهٔ درخشان بالا، تراشهٔ زبان، پاورقی و نوار اسکرول
		قاب: سایهٔ خنثی، لبهٔ درخشان بالا، تراشهٔ زبان، پاورقی و نوار اسکرول
		قاب: سایهٔ خنثی، لبهٔ درخشان بالا، تراشهٔ زبان، پاورقی و نوار اسکرول
		قاب: سایهٔ خنثی، لبهٔ درخشان بالا، تراشهٔ زبان، پاورقی و نوار اسکرول
		قاب: سایهٔ خنثی، لبهٔ درخشان بالا، تراشهٔ زبان، پاورقی و نوار اسکرول
		قاب: سایهٔ خنثی، لبهٔ درخشان بالا، تراشهٔ زبان، پاورقی و نوار اسکرول
		نقش‌ها
		نقش‌ها
		نقش‌ها
		نقش‌ها
		نقش‌ها
		نقش‌ها
		نقش‌ها
		نقش‌ها
		نقش‌ها
		نقش‌ها
		نقش‌ها
		نقش‌ها
		نقش‌ها
		نقش‌ها
		نقش‌ها
		نقش‌ها
		نقش‌ها
		نقش‌ها
		نقش‌ها
		نقش‌ها







		بنیان ساختاری مشترک
		بنیان ساختاری مشترک
		بنیان ساختاری مشترک
		بنیان ساختاری مشترک
		بنیان ساختاری مشترک
		بنیان ساختاری مشترک
		بنیان ساختاری مشترک
		بنیان ساختاری مشترک
		بنیان ساختاری مشترک
		بنیان ساختاری مشترک
		بنیان ساختاری مشترک
		بنیان ساختاری مشترک

















		شکل
		شکل
		شکل
		شکل
		شکل
		شکل
		شکل
		رفتار
		رفتار
		رفتار
		فاصله از لبه پایین نمایشگر
		حاشیه کناری در صفحه‌های باریک
		۱) هندسه
		۱) هندسه
		۱) هندسه
		۱) هندسه
		md: 48px — بالاتر از حداقل لمس ۴۴
		۱) هندسه
		۱) هندسه
		۱) هندسه
		۱) هندسه
		۱) هندسه
		۲) ماده (شیشه) هویت هر تم مقدارهای --tds-dock-glass-* را در پکیج `theme-<id>` می‌دهد؛ بدون تم، به توکن‌های شیشهٔ معنایی برمی‌گردد. این فایل مقدار رنگ یا شیشه‌ای خام تعیین نمی‌کند.
		۲) ماده (شیشه) هویت هر تم مقدارهای --tds-dock-glass-* را در پکیج `theme-<id>` می‌دهد؛ بدون تم، به توکن‌های شیشهٔ معنایی برمی‌گردد. این فایل مقدار رنگ یا شیشه‌ای خام تعیین نمی‌کند.
		۲) ماده (شیشه) هویت هر تم مقدارهای --tds-dock-glass-* را در پکیج `theme-<id>` می‌دهد؛ بدون تم، به توکن‌های شیشهٔ معنایی برمی‌گردد. این فایل مقدار رنگ یا شیشه‌ای خام تعیین نمی‌کند.
		۲) ماده (شیشه) هویت هر تم مقدارهای --tds-dock-glass-* را در پکیج `theme-<id>` می‌دهد؛ بدون تم، به توکن‌های شیشهٔ معنایی برمی‌گردد. این فایل مقدار رنگ یا شیشه‌ای خام تعیین نمی‌کند.
		۲) ماده (شیشه) هویت هر تم مقدارهای --tds-dock-glass-* را در پکیج `theme-<id>` می‌دهد؛ بدون تم، به توکن‌های شیشهٔ معنایی برمی‌گردد. این فایل مقدار رنگ یا شیشه‌ای خام تعیین نمی‌کند.
		۲) ماده (شیشه) هویت هر تم مقدارهای --tds-dock-glass-* را در پکیج `theme-<id>` می‌دهد؛ بدون تم، به توکن‌های شیشهٔ معنایی برمی‌گردد. این فایل مقدار رنگ یا شیشه‌ای خام تعیین نمی‌کند.
		۲) ماده (شیشه) هویت هر تم مقدارهای --tds-dock-glass-* را در پکیج `theme-<id>` می‌دهد؛ بدون تم، به توکن‌های شیشهٔ معنایی برمی‌گردد. این فایل مقدار رنگ یا شیشه‌ای خام تعیین نمی‌کند.
		۲) ماده (شیشه) هویت هر تم مقدارهای --tds-dock-glass-* را در پکیج `theme-<id>` می‌دهد؛ بدون تم، به توکن‌های شیشهٔ معنایی برمی‌گردد. این فایل مقدار رنگ یا شیشه‌ای خام تعیین نمی‌کند.
		۲) ماده (شیشه) هویت هر تم مقدارهای --tds-dock-glass-* را در پکیج `theme-<id>` می‌دهد؛ بدون تم، به توکن‌های شیشهٔ معنایی برمی‌گردد. این فایل مقدار رنگ یا شیشه‌ای خام تعیین نمی‌کند.
		۳) رفتار و وضعیت آیتم
		۳) رفتار و وضعیت آیتم
		۳) رفتار و وضعیت آیتم
		۳) رفتار و وضعیت آیتم
		۳) رفتار و وضعیت آیتم
		۳) رفتار و وضعیت آیتم
		۳) رفتار و وضعیت آیتم
		۳) رفتار و وضعیت آیتم
		۳) رفتار و وضعیت آیتم
		«باز است» — نقطه
		«همین صفحه» — نوار پهن
		۳) رفتار و وضعیت آیتم
		۳) رفتار و وضعیت آیتم
		۳) رفتار و وضعیت آیتم
		۳) رفتار و وضعیت آیتم
		۳) رفتار و وضعیت آیتم
		۳) رفتار و وضعیت آیتم
		۳) رفتار و وضعیت آیتم
		۳) رفتار و وضعیت آیتم
		۳) رفتار و وضعیت آیتم
		۳) رفتار و وضعیت آیتم
		۳) رفتار و وضعیت آیتم
		۳) رفتار و وضعیت آیتم
		درخواست توجه، مثل چشمک ویندوز
		۳) رفتار و وضعیت آیتم
		۳٫۵) هشدار روی داک
		فاصلهٔ هشدار شناور از لبه‌های صفحه
		هشدار شناور پایین، بالای داک می‌ماند
		گوشه‌های بالا زیر TopBar
		۳٫۵) هشدار روی داک
		فاصلهٔ هشدارهای پشته‌شده
		بیشینه آیکون در ردیف موبایل؛ بقیه در ورق
		۴) ورق بازشونده با ژست (موبایل)
		۴) ورق بازشونده با ژست (موبایل)
		۴) ورق بازشونده با ژست (موبایل)
		ارتفاع ناحیه لمسی دستگیره
		۴) ورق بازشونده با ژست (موبایل)
		۴) ورق بازشونده با ژست (موبایل)
		۴) ورق بازشونده با ژست (موبایل)
		px — کمتر از این «ضربه» است نه «کشیدن»
		کسری از ارتفاع ورق برای باز/بسته شدن
		px/ms — سوایپ سریع بدون توجه به فاصله
		مسیر حرکت انگشت به بالا
		ورق هم‌زمان کمی باز و بسته می‌شود
		۵) آموزش ژست (انیمیشن انگشت)
		۵) آموزش ژست (انیمیشن انگشت)
		۵) آموزش ژست (انیمیشن انگشت)
		۵) آموزش ژست (انیمیشن انگشت)
		۵) آموزش ژست (انیمیشن انگشت)
		۵) آموزش ژست (انیمیشن انگشت)
		کنار داک: هم‌قد خود داک
		بالای داک (موبایل)
		۶) دکمه اسکرول همراه داک (بالا/پایین صفحه)
		۶) دکمه اسکرول همراه داک (بالا/پایین صفحه)
		۶) دکمه اسکرول همراه داک (بالا/پایین صفحه)
		مشتق
















		قطر صفحهٔ عقربه‌ای در دسکتاپ
		موبایل







		شکل و وزن (واحد viewBox ۴۰) — تم‌ها با توکن عوض می‌کنند، ساختار ثابت است





		حرکت عقربه‌ها: زمان و منحنی از توکن‌های حرکت می‌آیند

		فاصلهٔ حالت floating از لبهٔ داک
		۱) هندسه
		۱) هندسه
		۱) هندسه
		بیشینهٔ عرض کپسول؛ در موبایل عرض داک
		۱) هندسه
		۴۴px — حداقل لمس
		۱) هندسه
		۱) هندسه
		۱) هندسه
		۱) هندسه
		۱) هندسه
		۱) هندسه
		هر دکمه ≥ ۴۴px
		۱) هندسه
		۱) هندسه
		کاور نمای بزرگ (برگهٔ داک)
		۱) هندسه
		۱) هندسه
		۲) ماده پیش‌فرض همان شیشهٔ داک؛ تم می‌تواند مقدار دیگری بدهد
		۲) ماده پیش‌فرض همان شیشهٔ داک؛ تم می‌تواند مقدار دیگری بدهد
		۲) ماده پیش‌فرض همان شیشهٔ داک؛ تم می‌تواند مقدار دیگری بدهد
		۲) ماده پیش‌فرض همان شیشهٔ داک؛ تم می‌تواند مقدار دیگری بدهد
		۲) ماده پیش‌فرض همان شیشهٔ داک؛ تم می‌تواند مقدار دیگری بدهد
		۲) ماده پیش‌فرض همان شیشهٔ داک؛ تم می‌تواند مقدار دیگری بدهد
		۲) ماده پیش‌فرض همان شیشهٔ داک؛ تم می‌تواند مقدار دیگری بدهد
		۲) ماده پیش‌فرض همان شیشهٔ داک؛ تم می‌تواند مقدار دیگری بدهد
		۲) ماده پیش‌فرض همان شیشهٔ داک؛ تم می‌تواند مقدار دیگری بدهد
		۲) ماده پیش‌فرض همان شیشهٔ داک؛ تم می‌تواند مقدار دیگری بدهد
		۲) ماده پیش‌فرض همان شیشهٔ داک؛ تم می‌تواند مقدار دیگری بدهد
		۲) ماده پیش‌فرض همان شیشهٔ داک؛ تم می‌تواند مقدار دیگری بدهد
		۲) ماده پیش‌فرض همان شیشهٔ داک؛ تم می‌تواند مقدار دیگری بدهد
		۲) ماده پیش‌فرض همان شیشهٔ داک؛ تم می‌تواند مقدار دیگری بدهد
		۲) ماده پیش‌فرض همان شیشهٔ داک؛ تم می‌تواند مقدار دیگری بدهد
		۲) ماده پیش‌فرض همان شیشهٔ داک؛ تم می‌تواند مقدار دیگری بدهد
		۳) حرکت زمان و منحنی از توکن‌های حرکت تا کاهش حرکت خودکار اعمال شود
		۳) حرکت زمان و منحنی از توکن‌های حرکت تا کاهش حرکت خودکار اعمال شود
		۳) حرکت زمان و منحنی از توکن‌های حرکت تا کاهش حرکت خودکار اعمال شود
		۳) حرکت زمان و منحنی از توکن‌های حرکت تا کاهش حرکت خودکار اعمال شود
		۳) حرکت زمان و منحنی از توکن‌های حرکت تا کاهش حرکت خودکار اعمال شود
		۳) حرکت زمان و منحنی از توکن‌های حرکت تا کاهش حرکت خودکار اعمال شود
		هم‌اندازهٔ فاصلهٔ به‌روزرسانی موقعیت (~۲۵۰ms) تا حرکت پیوسته باشد
		جمع‌شدن نرم نمای کوچک به دیسک/زبانه (دستی یا خودکار پس از بی‌تعاملی)
		۳) حرکت زمان و منحنی از توکن‌های حرکت تا کاهش حرکت خودکار اعمال شود
		داخل داک (placement="inside"): آیتم‌ها به دو لبه می‌لغزند و از کادر بیرون می‌روند، پخش‌کننده جایشان می‌نشیند
		۳) حرکت زمان و منحنی از توکن‌های حرکت تا کاهش حرکت خودکار اعمال شود
		۳) حرکت زمان و منحنی از توکن‌های حرکت تا کاهش حرکت خودکار اعمال شود
		۳) حرکت زمان و منحنی از توکن‌های حرکت تا کاهش حرکت خودکار اعمال شود
		فاصلهٔ حرکت ورود (ثابت در همهٔ تم‌ها)
		دیسک کوچک‌شده: چرخش کاور و سایهٔ رنگی چرخان (لکه‌های تار از پالت هفت‌رنگ؛ گرادیان نیست)
		۳) حرکت زمان و منحنی از توکن‌های حرکت تا کاهش حرکت خودکار اعمال شود
		۳) حرکت زمان و منحنی از توکن‌های حرکت تا کاهش حرکت خودکار اعمال شود
		۳) حرکت زمان و منحنی از توکن‌های حرکت تا کاهش حرکت خودکار اعمال شود
		۳) حرکت زمان و منحنی از توکن‌های حرکت تا کاهش حرکت خودکار اعمال شود
		۳) حرکت زمان و منحنی از توکن‌های حرکت تا کاهش حرکت خودکار اعمال شود
		۳) حرکت زمان و منحنی از توکن‌های حرکت تا کاهش حرکت خودکار اعمال شود














		۱) نوار بالا
		۱) نوار بالا
		۱) نوار بالا
		۱) نوار بالا
		۱) نوار بالا
		۱) نوار بالا
		۱) نوار بالا
		۱) نوار بالا
		۱) نوار بالا
		۱) نوار بالا
		۱) نوار بالا
		۱) نوار بالا
		۱) نوار بالا
		۱) نوار بالا
		۱) نوار بالا
		۱) نوار بالا
		px اسکرول از بالای صفحه تا برجستگی کامل
		جابه‌جایی کارت هنگام جدا شدن از سطح
		خط درختواره باید روی شیشهٔ تیره هم دیده شود (غیرمتن: کنتراست ≥ 3:1)
		شاخه مسیر (breadcrumb) کنار لوگو
		رشد شاخه هنگام ورود به یک صفحه
		شاخه مسیر (breadcrumb) کنار لوگو
		شاخه مسیر (breadcrumb) کنار لوگو
		شاخه مسیر (breadcrumb) کنار لوگو
		شاخه مسیر (breadcrumb) کنار لوگو
		شاخه مسیر (breadcrumb) کنار لوگو
		عرض کارت هنگام باز شدن
		ارتفاع نقشه صفحه‌ها
		یال‌های درختواره: روی شیشهٔ تیره هم دیده شوند (مرز پیش‌فرض تیره تقریباً سیاه است)
		حلقه‌های هم‌مرکز نقشه: نقطه‌چین کم‌رنگ ولی قابل‌دیدن
		تأخیر ورود هر حلقه
		یک رفت‌وبرگشت نوار متن برگ جاری در موبایل
		گرادیان انتخاب‌شده تا آرام شدن
		۲) حلقه پردازش
		یک دور کامل
		روشن و خاموش شدن
		کمینه نمایش — کار سریع هم «دیده» شود، بدون چشمک
		عرض هالهٔ رنگین‌کمانی بیرون حاشیه (سایه‌ی پردازش)
		نرمی هاله
		شدت هاله؛ زیر حاشیه تا تزئین بر محتوا غلبه نکند
		سقف بلندی همه صداها
		ms — شروع نرم، بدون تَق
		گوی صدا (تم تعیین می‌کند): شکل موج و سهم هارمونیک دوم
		۰…۱: سهم هارمونیک دوم (گرمی/درخشش)
		پارامترها
		پارامترها
		پارامترها
		پارامترها
		پارامترها
		پارامترها
		گذرگاه‌ها
		گذرگاه‌ها
		گذرگاه‌ها
		گذرگاه‌ها
		گذرگاه‌ها
		گذرگاه‌ها
		گذرگاه‌ها
		امن برای کنتراست بالا: تک‌رنگ، بدون رنگین‌کمان








		زمان و منحنی (تم فقط این‌ها و انیمیشن اسلات‌ها را تعیین می‌کند)
		زمان و منحنی (تم فقط این‌ها و انیمیشن اسلات‌ها را تعیین می‌کند)
		روشن: کمی تیره‌تر از سطح؛ تاریک: کمی روشن‌تر — با مخلوط کردن رنگ متن، جهت خودکار درست است
		شفافیت بدنه: صفحهٔ زیر هشدار دیده می‌شود ولی متن خوانا می‌ماند
		عدسی: همان فیلتر پترن آشنایی؛ اشباع و روشنی بدون تاری (blur ممنوع)
		ماده: شیشهٔ روغنی
		ماده: شیشهٔ روغنی






















		سربرگ کارت مینیمال: عنوان هم‌اندازهٔ متن بدنه با وزن نیمه‌پررنگ




























		مشتق در کامپوننت (RTL و پدینگ)؛ این‌جا فقط مقدار پیش‌فرض









		سبک کنش تونال: ته‌رنگ + حاشیه و تیک هم‌خانوادهٔ متن کنش (--tds-fg-accent)



















		هالهٔ نرم فوکوس — هم‌خانوادهٔ سایه‌های باکس‌ها؛ حاشیهٔ ۱px همان نشانهٔ قابل‌دیدن (≥ ۳:۱) می‌ماند











































		تصویر: شبکهٔ پیش‌نمایش


		آواتار: دایرهٔ انتخاب و نشان دوربین



		دکمهٔ حذف روی کاشی و آواتار: کوچک‌تر از فهرست؛ کمینهٔ هدف ۲۴px (WCAG 2.2 ۲.۵.۸)
		ویرایشگر تصویر



































		سطح پنل: مودال معمولی و مات
		سطح پنل: مودال معمولی و مات
		سطح پنل: مودال معمولی و مات
		سطح پنل: مودال معمولی و مات
		سطح پنل: مودال معمولی و مات
		سطح پنل: مودال معمولی و مات
		رنگ مایع = رنگ پنل تا قطره بی‌درز به مودال بدل شود
		رنگ مایع هنگامی که هنوز «تنِ داک» است؛ هم‌رنگ شیشهٔ داک تا جداشدن بی‌درز باشد
		سایهٔ مایع پس از فیلتر چسبنده (drop-shadow) تا قطرهٔ سفید روی پردهٔ سفید دیده شود
		پرده: سفیدِ مه‌آلود (در حالت تیره، تیرهٔ مه‌آلود)
		سطح پنل: مودال معمولی و مات
		رنگ ماسک (فقط آلفا مهم است)
		سطح پنل: مودال معمولی و مات
		اسکلت: هدر / بدنه / فوتر (قابل بازنویسی توسط هر لایه)
		اسکلت: هدر / بدنه / فوتر (قابل بازنویسی توسط هر لایه)
		اسکلت: هدر / بدنه / فوتر (قابل بازنویسی توسط هر لایه)
		اسکلت: هدر / بدنه / فوتر (قابل بازنویسی توسط هر لایه)
		اسکلت: هدر / بدنه / فوتر (قابل بازنویسی توسط هر لایه)
		اسکلت: هدر / بدنه / فوتر (قابل بازنویسی توسط هر لایه)
		اسکلت: هدر / بدنه / فوتر (قابل بازنویسی توسط هر لایه)
		اسکلت: هدر / بدنه / فوتر (قابل بازنویسی توسط هر لایه)
		اسکلت: هدر / بدنه / فوتر (قابل بازنویسی توسط هر لایه)
		اسکلت: هدر / بدنه / فوتر (قابل بازنویسی توسط هر لایه)
		اسکلت: هدر / بدنه / فوتر (قابل بازنویسی توسط هر لایه)
		اسکلت: هدر / بدنه / فوتر (قابل بازنویسی توسط هر لایه)
		اسکلت: هدر / بدنه / فوتر (قابل بازنویسی توسط هر لایه)
		اسکلت: هدر / بدنه / فوتر (قابل بازنویسی توسط هر لایه)
		اسکلت: هدر / بدنه / فوتر (قابل بازنویسی توسط هر لایه)
		اسکلت: هدر / بدنه / فوتر (قابل بازنویسی توسط هر لایه)
		اسکلت: هدر / بدنه / فوتر (قابل بازنویسی توسط هر لایه)
		بازتاب نرم تم (glow=ambient): لکه‌های تاریِ رنگ‌های تم؛ بسیار کم‌رنگ تا تمرکز را نگیرد
		بازتاب نرم تم (glow=ambient): لکه‌های تاریِ رنگ‌های تم؛ بسیار کم‌رنگ تا تمرکز را نگیرد
		بازتاب نرم تم (glow=ambient): لکه‌های تاریِ رنگ‌های تم؛ بسیار کم‌رنگ تا تمرکز را نگیرد
		بازتاب نرم تم (glow=ambient): لکه‌های تاریِ رنگ‌های تم؛ بسیار کم‌رنگ تا تمرکز را نگیرد
		بازتاب نرم تم (glow=ambient): لکه‌های تاریِ رنگ‌های تم؛ بسیار کم‌رنگ تا تمرکز را نگیرد
		بازتاب نرم تم (glow=ambient): لکه‌های تاریِ رنگ‌های تم؛ بسیار کم‌رنگ تا تمرکز را نگیرد
		بازتاب نرم تم (glow=ambient): لکه‌های تاریِ رنگ‌های تم؛ بسیار کم‌رنگ تا تمرکز را نگیرد
		گرفتن مودال با ژست
		گرفتن مودال با ژست
		گرفتن مودال با ژست
		جابه‌جایی لحظه‌ای هدر هنگام کشیدن
		گرفتن مودال با ژست
		گرفتن مودال با ژست
		حرکت ثابت «سیال»: جداشدن (pour) و تزریق (inject)
		حرکت ثابت «سیال»: جداشدن (pour) و تزریق (inject)
		حرکت ثابت «سیال»: جداشدن (pour) و تزریق (inject)
		حرکت ثابت «سیال»: جداشدن (pour) و تزریق (inject)
		url(#فیلتر) را Modal.tsx روی ریشه می‌نویسد
		h* = جعبهٔ واقعی داک (برای سوراخِ پرده در dock=visible)
		هندسهٔ لحظه‌ای: Modal.dock.ts هنگام باز/بسته‌شدن روی ریشه می‌نویسد f* = داک (مبدأ/مقصد: مرکز و اندازه و شعاع) · t* = پنل در حالت استراحت
		هندسهٔ لحظه‌ای: Modal.dock.ts هنگام باز/بسته‌شدن روی ریشه می‌نویسد f* = داک (مبدأ/مقصد: مرکز و اندازه و شعاع) · t* = پنل در حالت استراحت
		هندسهٔ لحظه‌ای: Modal.dock.ts هنگام باز/بسته‌شدن روی ریشه می‌نویسد f* = داک (مبدأ/مقصد: مرکز و اندازه و شعاع) · t* = پنل در حالت استراحت
		هندسهٔ لحظه‌ای: Modal.dock.ts هنگام باز/بسته‌شدن روی ریشه می‌نویسد f* = داک (مبدأ/مقصد: مرکز و اندازه و شعاع) · t* = پنل در حالت استراحت
		هندسهٔ لحظه‌ای: Modal.dock.ts هنگام باز/بسته‌شدن روی ریشه می‌نویسد f* = داک (مبدأ/مقصد: مرکز و اندازه و شعاع) · t* = پنل در حالت استراحت
		هندسهٔ لحظه‌ای: Modal.dock.ts هنگام باز/بسته‌شدن روی ریشه می‌نویسد f* = داک (مبدأ/مقصد: مرکز و اندازه و شعاع) · t* = پنل در حالت استراحت
		هندسهٔ لحظه‌ای: Modal.dock.ts هنگام باز/بسته‌شدن روی ریشه می‌نویسد f* = داک (مبدأ/مقصد: مرکز و اندازه و شعاع) · t* = پنل در حالت استراحت
		هندسهٔ لحظه‌ای: Modal.dock.ts هنگام باز/بسته‌شدن روی ریشه می‌نویسد f* = داک (مبدأ/مقصد: مرکز و اندازه و شعاع) · t* = پنل در حالت استراحت
		هندسهٔ لحظه‌ای: Modal.dock.ts هنگام باز/بسته‌شدن روی ریشه می‌نویسد f* = داک (مبدأ/مقصد: مرکز و اندازه و شعاع) · t* = پنل در حالت استراحت
		هندسهٔ لحظه‌ای: Modal.dock.ts هنگام باز/بسته‌شدن روی ریشه می‌نویسد f* = داک (مبدأ/مقصد: مرکز و اندازه و شعاع) · t* = پنل در حالت استراحت
		هندسهٔ لحظه‌ای: Modal.dock.ts هنگام باز/بسته‌شدن روی ریشه می‌نویسد f* = داک (مبدأ/مقصد: مرکز و اندازه و شعاع) · t* = پنل در حالت استراحت
		هندسهٔ لحظه‌ای: Modal.dock.ts هنگام باز/بسته‌شدن روی ریشه می‌نویسد f* = داک (مبدأ/مقصد: مرکز و اندازه و شعاع) · t* = پنل در حالت استراحت
		آیتم ناوبری مشترک
		آیتم ناوبری مشترک
		آیتم ناوبری مشترک
		آیتم ناوبری مشترک
		آیتم ناوبری مشترک
		آیتم ناوبری مشترک
		آیتم ناوبری مشترک
		آیتم ناوبری مشترک
		آیتم ناوبری مشترک
		آیتم ناوبری مشترک
		آیتم ناوبری مشترک
		آیتم ناوبری مشترک
		آیتم ناوبری مشترک
		ماده شیشه‌ای (TopNavigation / MobileBottomNavigation)
		ماده شیشه‌ای (TopNavigation / MobileBottomNavigation)
		ماده شیشه‌ای (TopNavigation / MobileBottomNavigation)
		ماده شیشه‌ای (TopNavigation / MobileBottomNavigation)
		ماده شیشه‌ای (TopNavigation / MobileBottomNavigation)
		ماده شیشه‌ای (TopNavigation / MobileBottomNavigation)
		ماده شیشه‌ای (TopNavigation / MobileBottomNavigation)
		ماده شیشه‌ای (TopNavigation / MobileBottomNavigation)
		TopNavigation
		TopNavigation
		TopNavigation
		SideNavigation
		SideNavigation
		SideNavigation
		SideNavigation
		MobileBottomNavigation
		MobileBottomNavigation
		MobileBottomNavigation
		MobileBottomNavigation
		MobileBottomNavigation
		MobileBottomNavigation
		Pagination
		Stepper
		Stepper
		Stepper
		Stepper
		لایه‌بندی (z)
		لایه‌بندی (z)
		لایه‌بندی (z)
		پرده و سطح مودال
		پرده و سطح مودال
		پرده و سطح مودال
		پرده و سطح مودال
		پرده و سطح مودال
		پرده و سطح مودال
		پرده و سطح مودال
		پرده و سطح مودال
		پرده و سطح مودال
		پرده و سطح مودال
		پرده و سطح مودال
		پرده و سطح مودال
		پرده و سطح مودال
		پرده و سطح مودال
		پرده و سطح مودال
		پرده و سطح مودال
		پرده و سطح مودال
		پرده و سطح مودال
		شناور (Popover / Menu / Tooltip): ماده شیشه‌ای هم‌خانوادهٔ Dock
		شناور (Popover / Menu / Tooltip): ماده شیشه‌ای هم‌خانوادهٔ Dock
		شناور (Popover / Menu / Tooltip): ماده شیشه‌ای هم‌خانوادهٔ Dock
		شناور (Popover / Menu / Tooltip): ماده شیشه‌ای هم‌خانوادهٔ Dock
		شناور (Popover / Menu / Tooltip): ماده شیشه‌ای هم‌خانوادهٔ Dock
		شناور (Popover / Menu / Tooltip): ماده شیشه‌ای هم‌خانوادهٔ Dock
		شناور (Popover / Menu / Tooltip): ماده شیشه‌ای هم‌خانوادهٔ Dock
		شناور (Popover / Menu / Tooltip): ماده شیشه‌ای هم‌خانوادهٔ Dock
		شناور (Popover / Menu / Tooltip): ماده شیشه‌ای هم‌خانوادهٔ Dock
		شناور (Popover / Menu / Tooltip): ماده شیشه‌ای هم‌خانوادهٔ Dock
		شناور (Popover / Menu / Tooltip): ماده شیشه‌ای هم‌خانوادهٔ Dock
		منو و آیتم
		منو و آیتم
		منو و آیتم
		منو و آیتم
		منو و آیتم
		منو و آیتم
		منو و آیتم
		Tooltip
		Tooltip
		Tooltip
		Tooltip
		Drawer
		Drawer
		Drawer
		Drawer
		BottomSheet (detent = توقفگاه ارتفاع)
		BottomSheet (detent = توقفگاه ارتفاع)
		BottomSheet (detent = توقفگاه ارتفاع)
		BottomSheet (detent = توقفگاه ارتفاع)
		BottomSheet (detent = توقفگاه ارتفاع)
		BottomSheet (detent = توقفگاه ارتفاع)
		CommandMenu
		CommandMenu
		CommandMenu
		CommandMenu
		CommandMenu
		CommandMenu
		CommandMenu
		CommandMenu
		CommandMenu
		CommandMenu
		CommandMenu
		CommandMenu
		CommandMenu
		CommandMenu
		CommandMenu
		فاصلهٔ زمانی ورود پلکانی ردیف‌ها؛ با کاهش حرکت عملاً صفر می‌شود
		CommandMenu
		نوار خطی
		نوار خطی
		نوار خطی
		نوار خطی
		نوار خطی
		نوار خطی
		حلقه
		حلقه
		حلقه
		واحد viewBox (۳۶)
		طول کمان نامعین از ۱۰۰
		حرکت
		حرکت















		ضخامت حلقهٔ inset که قطر نقطه را وسط نگه می‌دارد: (اندازه − دو حاشیه − نقطه) ÷ ۲

		واریانت pill: بخش‌بندی فشرده




		واریانت ring: شعاع هالهٔ انتخاب
		سطح و حاشیه
		سطح و حاشیه
		سطح و حاشیه
		سطح و حاشیه
		سطح و حاشیه
		سطح و حاشیه
		سطح و حاشیه
		سطح و حاشیه
		سطح و حاشیه
		سایه و هاله (سایه‌ها از مقیاس ارتفاع می‌آیند)
		سایه و هاله (سایه‌ها از مقیاس ارتفاع می‌آیند)
		سایه و هاله (سایه‌ها از مقیاس ارتفاع می‌آیند)
		سایه و هاله (سایه‌ها از مقیاس ارتفاع می‌آیند)
		سایه و هاله (سایه‌ها از مقیاس ارتفاع می‌آیند)
		سایه و هاله (سایه‌ها از مقیاس ارتفاع می‌آیند)
		تصویر یا بصری گزینه
		تصویر یا بصری گزینه
		تصویر یا بصری گزینه
		نشانگر انتخاب: تیک (check)، دایرهٔ رادیو، مربع تیک‌دار (checkbox)
		نشانگر انتخاب: تیک (check)، دایرهٔ رادیو، مربع تیک‌دار (checkbox)
		نشانگر انتخاب: تیک (check)، دایرهٔ رادیو، مربع تیک‌دار (checkbox)
		نشانگر انتخاب: تیک (check)، دایرهٔ رادیو، مربع تیک‌دار (checkbox)
		نشانگر انتخاب: تیک (check)، دایرهٔ رادیو، مربع تیک‌دار (checkbox)
		نشانگر انتخاب: تیک (check)، دایرهٔ رادیو، مربع تیک‌دار (checkbox)
		حرکت: زمان و منحنی فقط از توکن‌های حرکت؛ در کاهش حرکت صفر می‌شوند
		حرکت: زمان و منحنی فقط از توکن‌های حرکت؛ در کاهش حرکت صفر می‌شوند




























		پالس
		پالس
		پالس


























		سبک کنش تونال: ته‌رنگ روشن + حاشیه و دستگیره هم‌خانوادهٔ متن کنش (--tds-fg-accent)

















		چیدمان ناحیه
		چیدمان ناحیه
		چیدمان ناحیه
		چیدمان ناحیه
		شکل
		شکل
		شکل
		شکل
		شکل
		شکل
		سیال: سهم رنگ وضعیت (تینت) روی بدنهٔ کاملاً مات --tds-liquid-base؛ بدنه هرگز شفاف نمی‌شود تا متن خوانا بماند
		حرکت
		حرکت






































































































































































		چیپ پارامتر با رنگ primary (همان جفت دکمهٔ primary: accent-subtle + fg-accent)
		چیپ پارامتر با رنگ primary (همان جفت دکمهٔ primary: accent-subtle + fg-accent)
		چیپ پارامتر با رنگ primary (همان جفت دکمهٔ primary: accent-subtle + fg-accent)
		چیپ پارامتر با رنگ primary (همان جفت دکمهٔ primary: accent-subtle + fg-accent)
		چیپ پارامتر با رنگ primary (همان جفت دکمهٔ primary: accent-subtle + fg-accent)
		چیپ پارامتر با رنگ primary (همان جفت دکمهٔ primary: accent-subtle + fg-accent)
		چیپ پارامتر با رنگ primary (همان جفت دکمهٔ primary: accent-subtle + fg-accent)
		چیپ پارامتر با رنگ primary (همان جفت دکمهٔ primary: accent-subtle + fg-accent)
		چیپ پارامتر با رنگ primary (همان جفت دکمهٔ primary: accent-subtle + fg-accent)
		چیپ پارامتر با رنگ primary (همان جفت دکمهٔ primary: accent-subtle + fg-accent)
		چیپ پارامتر با رنگ primary (همان جفت دکمهٔ primary: accent-subtle + fg-accent)
		چیپ پارامتر با رنگ primary (همان جفت دکمهٔ primary: accent-subtle + fg-accent)