Цвета
Семантические токены. Все компоненты используют эти переменные.
Основные поверхности
background
--bg
bg2 / muted
--bg2
bg3 / accent
--bg3
border
--border
input
--input
Текст
foreground
--fg
muted-fg
--fg2
placeholder
--fg3
Действия / акценты
primary
--primary
primary-fg
--primary-fg
secondary
--secondary
brand
--brand
live-badge-blue
--live-blue
award-gold
--gold
Статусы
success
--success
warning
--warning
error
--error
destructive
--destructive
overlay
--overlay
Charts (7 цветов)
chart-1
red
chart-2
blue
chart-3
green
chart-4
yellow
chart-5
purple
chart-6
teal
chart-7
pink
Типографика
Geologica — заголовки. Inter — всё остальное.
Шрифты
Geologica Variable
--font-heading · заголовки ≥ text-xl
Inter Variable
--font-body · всё остальное
Шкала стилей
Display
32px / lh 40 / Semi Bold / -0.5% · onboarding, welcome
Title / Page
24px / lh 32 / Semi Bold / -0.5% · заголовок страницы
Title / Section
20px / lh 28 / Semi Bold / 0% · заголовок секции
Title / Group
18px / lh 24 / Semi Bold / 0% · карточки, bottom sheet
Title / Subsection
16px / lh 22 / Semi Bold / 0% · подзаголовки форм
Body / Large
16px / lh 24 / Regular / 0% · основные параграфы
Body / Default
14px / lh 20 / Regular / 0% · основной контент
Body / Small
13px / lh 18 / Regular / 0% · вспомогательный текст
Caption
12px / lh 16 / Regular / 0% · временны́е метки, мета
Label
14px / lh 20 / Medium / +0.5% · кнопки, табы, лейблы форм
Overline
11px / lh 14 / Semi Bold / +1% / uppercase · теги категорий
Legal — минимальный размер для мобильных
10px / lh 14 / Regular / 0% · мелкий шрифт
Отступы
Базовая единица 4px. Tailwind-шкала gap-1…gap-16.
Шкала
Типичные применения
4px (gap-1) Иконки, плотные элементы
8px (gap-2) Иконка + текст, compact controls
12px (gap-3) Внутренний паддинг компонентов
16px (gap-4) Стандартный контентный отступ
24px (gap-6) Отступ между секциями
32px+ (gap-8+) Структурные отступы
Радиусы
8 значений + full. Из дизайн-системы BI Group.
Шкала
none
0px
sm
6px
md
8px
lg
10px
xl
16px
2xl
20px
3xl
24px
4xl
28px
full
9999px
Применение
lg (10px)Input, Button — стандартные контролы
xl (16px)Card — стандартная карточка
2xl (20px)Sheet primary button, pill-пары
40px (custom)Bottom Sheet — все 4 угла
30/48px (custom)Modal/Dialog — верх/низ
fullПилюли, значки, аватары, quick-reply
Градиенты
Промо-баннеры и каталожные тайлы. Всегда с белым текстом поверх.
6 вариантов
blue
green
orange
purple
amber
rose
Button
src/components/ui/button.tsx
Варианты (variant)
default
secondary
outline
ghost
destructive
link
— brand
Размеры (size)
xs · h24
sm · h28
default · h32
lg · h36
xl · h48
Иконочные кнопки
icon-xs · 24
icon-sm · 28
icon · 32
icon-lg · 36
Специальные
sheet-primary · h48 r20
two-button footer · 2:3
disabled
Input / Textarea
src/components/ui/input.tsx · src/components/ui/textarea.tsx
Input
default
filled
error
disabled
Textarea
Card
src/components/ui/card.tsx
Варианты радиуса
Card sm
r-lg · 10px
card-sm
Card default
r-xl · 16px
default (r-xl)
Card 2xl
r-2xl · 20px
card-2xl
С контентом
МА
Мarat Аldiyarov
Жильец · кв. 201
✓ Оплачено 14 окт
Badge / StatusChip
src/components/ui/status-chip.tsx
Badge — варианты
Defaultdefault
Успешноsuccess
Ожиданиеwarning
Ошибкаerror
Новоеbrand
🏆 Золотоgold
LIVElive
Контурoutline
StatusChip — с точкой
Активен
active
В ожидании
pending
Отклонено
rejected
Неактивен
inactive
Avatar
src/components/ui/avatar.tsx
Размеры
МА
sm · 32px
МА
md · 40px
МА
lg · 48px
МА
xl · 64px
Tabs
src/components/ui/tabs.tsx
Стандартные табы (pill)
Бюджет
Доходы
Расходы
Пример применения (Reports)
9:41●●● WiFi 100%
Финансы
Бюджет
Движение
Смета
Работы
Switch
src/components/ui/switch.tsx
Состояния
off
on
disabled off
disabled on
В строке списка
Уведомления
Push-уведомления
Тёмная тема
Progress
src/components/ui/progress.tsx
Варианты
default · 65%
brand · 40%
success · 88%
thin (h4)
Skeleton
src/components/ui/skeleton.tsx · animate-pulse bg-muted
Примитивы
Карточка-скелетон
Bottom Sheet
src/components/ui/sheet.tsx · 360px · r-40px · p-18px
Анатомия (2026-09-14)
✕
Подтверждение подписи
Подписывая документ, вы подтверждаете согласие с условиями договора. Это действие нельзя отменить.
document preview area
Правила
  • Ширина: 360px, центрируется горизонтально
  • Отступ снизу: 8px
  • Радиус: 40px на всех 4 углах
  • Паддинг: 18px со всех сторон
  • Gap между детьми: 12px
  • Заголовок: 18px Semi Bold (Title / Group)
  • Описание: 14px Regular (Body / Default)
  • Кнопка закрытия: top-[18px] right-[18px], size-8, bg-foreground
Dialog / Modal
src/components/ui/dialog.tsx · 343px · r-30/48px · p-16/20/45
Анатомия
🔐
Биометрия
Используйте Face ID или Touch ID для подтверждения входа.
Правила
  • Поверхность: #f5f5f5 (--popover), без тени, без бордера
  • Оверлей: rgba(0,0,0,0.48)
  • Радиус: 30px сверху / 48px снизу
  • Паддинг: 16px стороны / 20px сверху / 45px снизу
  • Заголовок: Inter Bold 20px -2%
  • Описание: Inter Regular 16px -2%
  • Нет кнопки «✕» — только CTA в footer
Навигация
iOS Status Bar · Native Header · Bottom Nav · WebView Header
iOS Status Bar · src/components/ui/ios-status-bar.tsx
9:41 ●●● WiFi 100%
h-36px desktop / 0 на тач-устройствах
Native Header · src/components/ui/native-header.tsx
‹ Назад
Настройки
Готово
Bottom Pill Nav · src/components/home/BottomPillNav.tsx
Главная
Каталог
Профиль
WebView Header · src/components/ui/webview-header.tsx
bi-group.kz
Empty State
src/components/ui/empty-state.tsx
Примеры
📋
Нет уведомлений
Все уведомления будут появляться здесь
🏠
Нет объектов
Добавьте объект, чтобы начать работу
List Row
Универсальная строка списка с иконкой, контентом и правым значением.
Варианты
🔑
Заявка на пропуск
Сегодня в 10:30
Одобрено
🅿️
Парковочное место B-14
Аренда до 01.12.2026
›
💡
Замена лампочки
Подъезд 3, этаж 7
В работе
Notification
src/components/notifications/NotificationsSection.tsx
Непрочитанная / прочитанная
Ваша заявка на пропуск одобрена
14 окт · 11:22
Новый опрос: «Парковочные места»
13 окт · 16:05
Счёт за октябрь готов к оплате
12 окт · 09:00
Плановое отключение воды 15 окт с 9:00
11 окт · 14:30
Stories Ring
src/components/home/StoriesRing.tsx · StoriesTray.tsx
Кружки историй
🎉
Акции
📅
События
🏡
Клубы
МА
Просмотрено
Chat Bubble
src/components/chat/ChatBubble.tsx
Входящее / исходящее
Здравствуйте! Подскажите, пожалуйста, когда будет следующее общее собрание жильцов?
10:05
Следующее собрание запланировано на 20 октября в 19:00 в холле первого блока.
10:07 ✓✓
Спасибо! А повестка дня уже известна?
10:08
Category Nav
src/components/home/CategoryNav.tsx
Горизонтальный скролл-ряд иконок
🚗
Парковка
🔒
Доступ
🧹
Уборка
📚
Образо-вание
🏋️
Спорт
📊
Отчёты
🏠
Дом
Section Heading
src/components/ui/section-heading.tsx
С кнопкой «Все» и без
Новости
Все →
Мои объекты
Модули
Все основные разделы приложения. Каждый — отдельный набор экранов и компонентов.
🏠
Home
Главный экран с героем, категориями, историями и Live Activity.
HomeScreen · HomeHeader · ResidenceHero · GuestHero · StoriesRing · StoriesTray · StoryViewer · CategoryNav · BottomPillNav · LiveActivities · SearchScreen · AiChatScreen · AqiMapScreen · QrScanScreen · WebViewScreen · PropertySwitcherSheet · AccessMethodSheet
📋
Опросы / Chat
Сценарии голосований, чат-пузыри, подписи документов.
ScenarioFeedCard · SurveyRunScreen · SurveyArchiveScreen · ChatBubble · ChatComposer · ScenarioThread · SigningPrompt · QuickReplyGroup · VotingResult · DocumentCard · TypingIndicator · CompletionCelebration
📊
Отчёты
Финансовые отчёты: бюджет, движение средств, смета, работы.
ReportsSection · ReportsTabs · BudgetTab · CashFlowTab · EstimateTab · HouseWorksTab · ReportPrimitives · LineItemList · CategoryBreakdown · PeriodPickerSheet · MonthGridPicker · InfoSheet · WorkReportSheet · SupportingDocumentsSheet · DownloadButton · ShareButton · Skeleton
🎓
Образование
BI Education: дневник, оценки, расписание, курсы, журнал.
EducationShell · EduTabBar · FeedTab · ScheduleTab · GradesTab · JournalTab · CoursesTab · DocsTab · GradesOverviewScreen · SubjectDetailScreen · JournalFoScreen · JournalScoreScreen · ChildSwitcherSheet · HomeworkEditSheet · ScoreEntrySheet · EventCard · EventSheet · RoleDrum · RingProgress · GradeTrendBadge · QuarterMarkChip · TeacherClassSheet · FoEntrySheet
🏆
Награды (Award)
BI Birlesu: рейтинг, активности, ачивки, сезонный календарь.
RaceHome · AwardTabBar · AwardPillNav · ActivitiesTab · AchievementsTab · ActivityCatalog · HouseAchievements · NominationsGallery · SeasonCalendar · RegionLeaderboardView · AwardStackView · NominationBadge · NominationDetailSheet · MetricDetailSheet · HouseAchievementDetailSheet · AwardIntroSheet · FaqSheet · CourtHistorySheet · AboutStory · AwardSection
🏘
Каталог
Каталог объектов, сделки, избранное, фильтры, детали лотов.
CataloqueStackView · CatalogTab · DealsTab · FavoritesTab · ComplexCard · ComplexCardCompact · ComplexDetailScreen · LotDetailSheet · LotViewPanel · FiltersSheet · ChessView · DealFlow · DealTracker · CityScreen · CityRow · OtherPropertyScreen
📜
Правовые документы
Список, детали, версии и архив юридических документов.
LegalDocumentsSection · LegalDocumentsListScreen · LegalDocumentDetailScreen · VersionHistoryScreen · ArchivedVersionScreen · VersionBadge
🛂
Авторизация
Телефон, OTP, PIN, биометрия, выбор страны.
AuthFlow · PhoneScreen · OtpScreen · OtpInput · PinPad · BiometricPrompt · ReturningUserLock · PhoneField · CountrySelectSheet · OtpChannelSheet · AuthMethodScreen
🛂
Паспорт
Жилой паспорт: обложка, страницы, ачивки, share-карточка.
PassportSection · PassportBook · PassportCover · PassportPage · ResidentPage · AchievementPage · AchievementStamp · AchievementDetailSheet · PassportPhoto · PassportEmblem · PassportGlobe · PassportMapDots · ShareCardSheet
🔔
Уведомления
Лента уведомлений с прочитанными и непрочитанными.
NotificationsSection
🏡
Dream Home
Фича: квиз, 3D-план, изометрия, меблировка, финал.
DreamHomeSection · QuestionsScreen · CityScreen · IsoScreen · Iso3DScreen · RoomLayoutScreen · FurnitureScreen · finale · signature · PlanSVG · CityCarousel · Safe3D · BalloonNumber
🅿️
Аренда парковки
Фича: список, карта, слот, бронирование, оплата, подпись.
ParkingRentalSection · OnboardingScreen · ListScreen · MapScreen · SlotScreen · BookingScreen · PaymentScreen · SignScreen · MyBookingsScreen · ParkStepper
🎁
Промо
Фича: список акций и промо-предложений.
PromosSection · PromosScreen
👤
Face ID
Фича: онбординг и регистрация биометрии.
FaceIdSection · RequirementsScreen · CameraScreen · DataScreen · SuccessScreen