Дизайн-система «Bank-grade»

v1.0

Единые семантические токены, строгий контраст WCAG AA, моноширинные числа и мгновенное переключение тем и скинов.

Доступные скины палитры

WCAG 2.1 AA Compliant

AIQ Cyber-Teal

Технологичный бирюзовый градиент (Default)

skin="aiq-teal"

Монохром (Ч/Б)

Строгий газетный минимализм, чистый контраст

skin="mono-editorial"

Claude Terracotta

Тёплый сливочный крем и благородная терракота

skin="claude-terracotta"

Emerald Green

Спокойный изумрудный банк-грейд

skin="medispa-green"

Graphite Violet

Глубокий кибер-фиолетовый индиго

skin="graphite-violet"

1. Анатомия KPI-плиток и числовых метрик

Индекс спроса на ИИ (РК)+14.8% WoW

84.2 / 100

Обновлено 15 мин назад (Google Trends)

Обработано источниковOnline

117 каналов

100% валидировано Hermes Ingest

Суммарный объем статейKZ + Global

2 841 ед.

Форматирование JetBrains Mono (DS)

Доля суверенного контентаBETA

46.5% фокус РК

Языки: казахский, русский, английский

2. Кнопки, бейджи и акцентные элементы

Accent PillSuccessInfoWarningDanger

Правило одного акцента: градиентная кнопка bg-accent-gradient со свечением shadow-glow используется только для одного ключевого целевого действия на экран. Все остальные контролы — нейтральные.

11 правил дизайн-системы для разработчиков и агентов

1. Только токены: никаких hex-значений в разметке (`bg-[#...]`). Все цвета через переменные `--ds-*`.

2. Один акцент: акцент только для главного действия, активного пункта и марки бренда.

3. Две темы автоматически: класс `.dark` на html, цвета переключаются через color-mix без дублирования классов.

4. Фиксированные скругления: карточки `rounded-2xl` (16px), кнопки `rounded-xl` (12px), пилюли `rounded-full`.

5. Типографика чисел: все числа, проценты и валюты — моноширинным `JetBrains Mono` с разделителем пробелом.

6. Честность данных: нет данных — «нет данных» или `—`, никаких выдуманных заглушек.