راهنمای سبک
راهنمای تصویری اجزای سایت : اینجا میتوانید همهی عناصر پایه و توکنهای طراحی را یکجا ببینید. برای تغییر تم روشن یا تاریک، روی دکمهی بالای صفحه کلیک کنید
رنگها
سطوح
--color-bg--color-surface--color-surface-alt--color-border (fill)--color-border (border)متن
تامینکننده ابزار دقیق و گرمایش صنعتی
--color-textتامینکننده ابزار دقیق و گرمایش صنعتی
--color-text-mutedبرند
--color-primary / --color-on-primary--color-primary-hover--color-accentوضعیت
--color-danger--color-warning--color-successحلقه تمرکز
--color-focus-ring (fill)--color-focus-ring (ring)معکوس
--color-bg-inverse / --color-on-inverseتایپوگرافی
مقیاس
--text-xs تامینکننده ابزار دقیق و گرمایش صنعتی
--text-sm تامینکننده ابزار دقیق و گرمایش صنعتی
--text-base تامینکننده ابزار دقیق و گرمایش صنعتی
--text-lg تامینکننده ابزار دقیق و گرمایش صنعتی
--text-xl تامینکننده ابزار دقیق و گرمایش صنعتی
--text-2xl تامینکننده ابزار دقیق و گرمایش صنعتی
--text-3xl تامینکننده ابزار دقیق و گرمایش صنعتی
--text-4xl تامینکننده ابزار دقیق و گرمایش صنعتی
--text-5xl تامینکننده ابزار دقیق و گرمایش صنعتی
ارتفاع خط
--leading-display — تیترهای بزرگ ما تولیدکننده سنسورهای دما، ترموکوپل، المنتهای حرارتی سرامیکی و تجهیزات اندازهگیری صنعتی هستیم که در صنایع نفت، گاز و پتروشیمی کاربرد دارند.
--leading-heading — سرتیترها (h1–h4) ما تولیدکننده سنسورهای دما، ترموکوپل، المنتهای حرارتی سرامیکی و تجهیزات اندازهگیری صنعتی هستیم که در صنایع نفت، گاز و پتروشیمی کاربرد دارند.
--leading-body — متن جاری — پیشفرض body ما تولیدکننده سنسورهای دما، ترموکوپل، المنتهای حرارتی سرامیکی و تجهیزات اندازهگیری صنعتی هستیم که در صنایع نفت، گاز و پتروشیمی کاربرد دارند.
--leading-prose — متنهای طولانی ما تولیدکننده سنسورهای دما، ترموکوپل، المنتهای حرارتی سرامیکی و تجهیزات اندازهگیری صنعتی هستیم که در صنایع نفت، گاز و پتروشیمی کاربرد دارند.
خط فارسی به ارتفاع خط بیشتری از لاتین نیاز دارد: وزیرمتن ۰٫۵۴ em زیر خط کرسی برای دنبالهها
کنار میگذارد (در برابر ۰٫۲۴ em در فونت لاتین پیشین) و حروف بزرگ ندارد تا خط را لنگر بیندازد.
هرگز ارتفاع خطی کمتر از --leading-display روی متن فارسی نگذارید.
وزنها
--font-weight-ultralight (200) تامینکننده ابزار دقیق و گرمایش صنعتی
--font-weight-light (300) تامینکننده ابزار دقیق و گرمایش صنعتی
--font-weight-medium (500) تامینکننده ابزار دقیق و گرمایش صنعتی
--font-weight-semibold (600) تامینکننده ابزار دقیق و گرمایش صنعتی
وزیرمتن یک فونت متغیر با بازهی وزن ۱۰۰ تا ۹۰۰ است، بنابراین همهی وزنها واقعیاند و هیچ بولد
مصنوعی رندر نمیشود. قاعدهی مشترک h1–h4 از --font-weight-semibold (۶۰۰) استفاده میکند. برای تیترهای فارسی از وزن ۲۰۰
استفاده نکنید — نقطههای ب/پ/ت/ث در آن وزن محو میشوند؛ حداقلِ
توصیهشده --font-weight-light (۳۰۰) است.
نمونه تیتر
تامینکننده ابزار دقیق و گرمایش صنعتی
--text-5xl / --font-weight-light / --leading-display / --font-displayفاصلهگذاری
--space-1 (0.25rem) --space-2 (0.5rem) --space-3 (0.75rem) --space-4 (1rem) --space-5 (1.25rem) --space-6 (1.5rem) --space-8 (2rem) --space-12 (3rem) --space-16 (4rem) شعاع
--radius-sm--radius-md--radius-lg--radius-fullفیلدها
kind="input"این فیلد الزامی است.
errorhintlabelExtradisabledkind="textarea"kind="select"kind="custom"کارتها
padding
padding="sm"
padding="md"
padding="lg"
gap
gap="sm"
gap="md"
gap="none"
align
align="stretch"
align="start"
align="center"
href و maxWidth
maxWidth="320px"
نشانها
variant="neutral"variant="success"variant="warning"variant="accent"variant="solid-primary"variant="solid-accent"capitalizehref setجدول
| نام | وضعیت | تاریخ |
|---|---|---|
| RTD PT100 Sensor | منتشرشده | 2026-06-02 |
| K-Type Thermocouple | منتشرشده | 2026-05-14 |
| Ceramic Heating Element | پیشنویس | 2026-07-01 |
| Pressure Switch PS-200 | منتشرشده | 2026-04-22 |
جداکنندهها
قرارداد جداکنندهی نازک روی کارتها هیچ کامپوننت مشترکی ندارد — یک الگوی CSS مختص همان صفحه
است (border-bottom: 1px solid var(--color-border)).