پالت رنگی اختصاصی
رنگ‌ها در فضای OKLCH ساخته شده‌اند، یعنی پله‌های هم‌شماره در همه خانواده‌ها روشنایی ادراکی یکسان دارند. هر خانواده ۱۱ پله دارد. کنتراست ۹۴۰ ترکیب (۱۰ پالت × روشن/تیره × جفت‌های متن، لینک، حاشیه، وضعیت‌ها) هنگام Build سنجیده می‌شود؛ کمترین نسبت 3.01:1 و موارد ناموفق: ۰.
پالت‌های تم (رنگ برند)
50100200300400500600700800900950
Lajvard
Firuzeh
Zomorrod
Pesteh
Zaferan
Narenji
Anar
Sadaf
Banafsh
Morakkab
خنثی و وضعیت‌ها
50100200300400500600700800900950
Ink
Verdant
Amber
Ember
Azure
سه لایه Token
- Primitive:
--bana-lajvard-600— خود رنگ‌ها. مستقیم در کامپوننت استفاده نمی‌شوند. - Semantic:
--bana-accent،--bana-surface-raised— معنا دارند و با تم عوض می‌شوند. این‌ها را استفاده کنید. - Component: متغیرهای داخلی هر کامپوننت (مثل
--_bgدر Button).
| Token | روشن | تیره | کاربرد |
|---|---|---|---|
| سطوح | |||
| --bana-surface-sunken | #ebf0f7 | #050912 | |
| --bana-surface-base | #f5f9ff | #0b121d | |
| --bana-surface-raised | #ffffff | #151c28 | |
| --bana-surface-overlay | #ffffff | #1e2533 | |
| متن | |||
| --bana-text-primary | #0c1014 | #f5f9ff | |
| --bana-text-secondary | #4c5056 | #bec3ca | |
| --bana-text-muted | #65696f | #9fa3aa | |
| --bana-text-link | #1f4a9e | #a2c3ff | |
| حاشیه | |||
| --bana-border-subtle | #d8dde4 | #2a323f | |
| --bana-border-default | #bec3ca | #3d4451 | |
| --bana-border-strong | #80858b | #686f7b | |
| تأکید (Accent) | |||
| --bana-accent | #3063c6 | #72a2fa | |
| --bana-accent-hover | #1f4a9e | #a2c3ff | |
| --bana-accent-active | #0e3073 | #caddff | |
| --bana-accent-subtle | #e7f0ff | #041b4b | |
| --bana-on-accent | #ffffff | #0c1014 | |
| --bana-focus-ring | #3063c6 | #a2c3ff | |
| موفقیت | |||
| --bana-success | #007e46 | #55bb7e | |
| --bana-success-subtle | #e0f6e6 | #002712 | |
| --bana-success-text | #004122 | #bde9cb | |
| هشدار | |||
| --bana-warning | #cc9a30 | #cc9a30 | |
| --bana-warning-subtle | #faeed8 | #2b1c00 | |
| --bana-warning-text | #473100 | #f1d9af | |
| خطر | |||
| --bana-danger | #bf1f21 | #f97569 | |
| --bana-danger-subtle | #ffeae7 | #430002 | |
| --bana-danger-text | #6a0006 | #ffcfc9 | |
| اطلاعات | |||
| --bana-info | #00729b | #4bafde | |
| --bana-info-subtle | #def3ff | #002332 | |
| --bana-info-text | #003b52 | #bae3fa | |
چرا رنگ مستقیم در CSS خودتان ننویسید؟
با تغییر تم یا پالت، این جعبه خودکار هماهنگ می‌شود.
<div style="padding:1rem;border-radius:var(--bana-radius-md);background:var(--bana-accent-subtle);color:var(--bana-accent-text);border:1px solid var(--bana-accent)">
با تغییر تم یا پالت، این جعبه خودکار هماهنگ می‌شود.
</div>