Foundations & Components

سیستم دیزاین بی‌کن‌دو

توکن‌ها و کامپوننت‌ها مستقیماً از فایل فیگمای BeeCan گرفته شده‌اند. کامپوننت‌ها روی Nuxt UI ساخته شده‌اند و تم آن‌ها در app.config.ts و توکن‌ها در main.css تعریف شده‌اند.

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

رنگ‌ها

فقط #CF9033 و #1F2626 از برندبوک رسمی‌اند؛ بقیه مشتق‌شده و نیازمند تأیید.

Brand (official)

brand/dark#1F2626 · bg-primary · bg-brand-dark

brand/orange#CF9033 · bg-secondary · bg-brand-orange

Brand (derived) — نیازمند تأیید

brand/dark-light#374141 · bg-brand-dark-light

brand/orange-dark#B4761C · bg-brand-orange-dark

brand/orange-light#E3B771 · bg-brand-orange-light

brand/orange-subtle#FCF3E4 · bg-brand-orange-subtle

Surface

surface/primary#FFFFFF · bg-default

surface/secondary#F9FAFA · bg-muted

surface/sunken#F4F6F6 · bg-elevated

surface/dark#1F2626 · bg-inverted

Text

text/primary#181E1E · text-highlighted

text/secondary#525C5C · text-toned

text/tertiary#757E7E · text-muted

text/accent#B4761C · text-accent

text/on-dark#F3F4F4 · text-inverted

Border

border/subtle#EEF0F0 · border-muted

border/default#E5E7E7 · border-default

border/strong#D1D5D5 · border-accented

Status / Trading

status/success#228B54 · success

status/error#DC3545 · error

status/warning#EAAA00 · warning

status/info#3182CE · info

قانون کنتراست

متن سفید روی نارنجی (۲٫۷:۱) و متن نارنجی روی سفید مجاز نیست. دکمه نارنجی = متن مشکی (۵٫۶:۱). برای متن تأکیدی از text/accent (#B4761C) فقط در اندازه‌های درشت استفاده کن.

تایپوگرافی

Vazirmatn (Rokh در فیگما موجود نیست؛ تا تصمیم نهایی). هر استایل یک کلاس است که اندازه، ارتفاع خط و وزن را با هم تنظیم می‌کند.

اکوسیستم رشد معامله‌گرانfa/Display/Large · SemiBold 56/76 · .text-display-lg

اکوسیستم رشد معامله‌گرانfa/Display/Small · SemiBold 36/52 · .text-display-sm

اکوسیستم رشد معامله‌گرانfa/Heading/H1 · SemiBold 32/46 · .text-h1

اکوسیستم رشد معامله‌گرانfa/Heading/H3 · Medium 24/36 · .text-h3

اکوسیستم رشد معامله‌گرانfa/Heading/H4 · Medium 20/32 · .text-h4

اکوسیستم رشد معامله‌گرانfa/Heading/H5 · Medium 18/28 · .text-h5

اکوسیستم رشد معامله‌گرانfa/Body/Large · Regular 18/32 · .text-body-lg

اکوسیستم رشد معامله‌گرانfa/Body/Medium · Regular 16/28 · .text-body-md

اکوسیستم رشد معامله‌گرانfa/Body/Small · Regular 14/24 · .text-body-sm

اکوسیستم رشد معامله‌گرانfa/Label/Large · Medium 16/24 · .text-label-lg

اکوسیستم رشد معامله‌گرانfa/Label/Medium · Medium 14/22 · .text-label-md

اکوسیستم رشد معامله‌گرانfa/Label/Small · Medium 12/18 · .text-label-sm

اکوسیستم رشد معامله‌گرانfa/Eyebrow · Medium 13/20 · .text-eyebrow

اکوسیستم رشد معامله‌گرانfa/Caption/Regular · Regular 12/20 · .text-caption

اکوسیستم رشد معامله‌گرانfa/Caption/Bold · Medium 12/20 · .text-caption-bold

هر کندو یک مرحله از مسیر توPeyda · ExtraBold 40/60 · .font-peyda

خانه · پراپ · آموزش · ترید · ۱٬۳۹۳ زنبور آنلاینYekan Bakh FaNum · SemiBold 15/23 · .font-yekan

۱۲۱٬۰۰۰ $fa/Numeric/Display · Light 48/56 · .text-numeric-display

دکمه

دکمه‌های کپسولی. Primary برای CTA اصلی؛ Accent نارنجی با متن تیره. آیکون در انتهای دکمه (سمت چپ در RTL) قرار می‌گیرد.

Primary

Accent

Secondary

Ghost

States

<UButton label="…" trailing-icon="i-bee-arrow-left" />                         <!-- Primary -->
<UButton color="secondary" label="…" />                                       <!-- Accent -->
<UButton color="neutral" variant="outline" label="…" />                       <!-- Secondary -->
<UButton color="neutral" variant="ghost" label="…" />                         <!-- Ghost -->
size: sm (S · 36) · md (M · 44, default) · lg (L · 52)

بج و ایبرو

فعالفعالفعالفعالفعال۱/۳

اکوسیستم رشد معامله‌گران

ورودی

شماره موبایل

کد تأیید به این شماره ارسال می‌شود

شماره موبایل

کد تأیید به این شماره ارسال می‌شود

شماره موبایل

شماره موبایل معتبر نیست

تب و ناوبری

خانه

Header — مهمان / کاربر

آیکون‌ها

آیکون‌های خطی ۲۴px با ضخامت ۱٫۶ — رنگ از متن والد گرفته می‌شود (currentColor). در RTL، arrow-left یعنی «جلو». <UIcon name="i-bee-wallet" />

prop

academy

idea

bootcamp

copy-trade

live

trophy

podcast

news

arrow-left

chevron-down

chevron-left

bell

wallet

dashboard

user

shield-check

message

settings

help

logout

gift

rules

link

trending-up

phone

lock

hexagon

check

map

لوگو

Wordmark برای هدرهای ۳۲px به بالا؛ Full (با تگ‌لاین) فقط از ۵۶px. نسخهٔ Dark برای سطوح #1F2626. Mark برای فاوآیکن، آواتار و هدرهای فشرده.

Brand/3D Mark

کارت و سایدبار

کندوی پراپ

۱٬۴۲۵ زنبور فعال ۲۴۱ آنلاین

کندوی آموزش

۳٬۱۸۰ زنبور فعال ۵۱۲ آنلاین

کندوی لایو ترید

۸۴۰ زنبور فعال ۹۶ آنلاین