North Star
01 · Overview
Не коллекция экранов, а рабочий стандарт.
Система объединяет бренд, продуктовые сценарии, доступность и правила разработки — от токена до страницы.
Clarity
Одна визуальная и одна смысловая иерархия.
Trust
Сдержанный интерфейс без декоративного шума.
Access
Контраст, клавиатура и touch 44px по умолчанию.
Scale
Повторное использование вместо ручной вёрстки.
02 · Brand system
Технологичная надёжность с человеческим лицом.
Фирменный язык сохраняет инфраструктурную серьёзность ТТЛ, но делает услуги простыми и близкими клиенту.
ТТЛDigital services
ТТЛDigital services
Конкретно
«Интернет до 100 Мбит/с» вместо абстрактных обещаний.
Спокойно
Без давления, капслока и маркетингового шума.
Заботливо
Каждая ошибка объясняет, что произошло и что делать.
03 · Design tokens & themes
Одна система — две полноценные темы.
Light и Dark используют одинаковую семантику компонентов, но разные значения surface, canvas, text и border. Переключатель в шапке меняет всю документацию, а сравнение ниже всегда показывает обе темы одновременно.
950
#06182B900
#0B2542800
#103B67700
#12599A600
#1468B3500
#2583D5400
#57A4E5300
#91C5EF200
#C4E0F7100
#E1F0FCSemantic color
| Token | Light | Dark | Use |
|---|---|---|---|
canvas | #F4F7FB | #071728 | Фон страницы |
surface | #FFFFFF | #102A46 | Карточки и панели |
text-primary | #10233D | #F3F8FD | Основной текст |
text-secondary | #5D7086 | #A9BFD2 | Вторичный текст |
border | #DCE4ED | #23415D | Границы |
action-primary | #1468B3 | #2583D5 | Главная CTA |
Spacing · radius · elevation
04
08
16
24
32
48
XS 6SM 9MD 13LG 18
Light theme
Домашний интернет
Тариф «Оптимум»
100 Мбит/с для работы, видео и всей семьи.
149 сомонӣ / моҳ
Dark theme
Домашний интернет
Тариф «Оптимум»
100 Мбит/с для работы, видео и всей семьи.
149 сомонӣ / моҳ
Правило темы
Компонент не хранит собственные цвета темы. Он использует семантические токены; переключение выполняется классом
Компонент не хранит собственные цвета темы. Он использует семантические токены; переключение выполняется классом
dark на корневом элементе, а выбор пользователя сохраняется в localStorage.04 · Typography & icons
Три шрифта — три чёткие роли.
Montserrat создаёт узнаваемую иерархию, Roboto обеспечивает удобное чтение интерфейса, IBM Plex Sans делает тарифные данные и технические параметры точными.
Montserrat
Связь без границ
H1–H4, hero, названия продуктов и маркетинговые акценты.
Roboto
Понятный интерфейс
Основной текст, кнопки, формы, навигация, подсказки и длинные материалы.
IBM Plex Sans
100 Мбит/с · 149 сомонӣ
Цены, скорости, номера, метрики, служебные подписи и технические данные.
display.lgСвязь без границMontserrat · 48/52heading.xlИнтернети хонагӣMontserrat · 32/38body.mdПодключение и поддержка в одном понятном интерфейсе.Roboto · 16/24data.lg300 Мбит/с · 219 сомонӣIBM Plex Sans · 28/34label.smСКОРОСТЬ ДО 100 МБИТ/СIBM Plex Sans · 12/16Font Awesome icon contract
Используем готовые иконки Font Awesome Free. Основной стиль интерфейса — fa-solid; fa-brands применяется только для официальных социальных брендов.
Интернет
fa-solid fa-wifiТТЛ-ТВ
fa-solid fa-tvТелефония
fa-solid fa-phone-volumeЯзык / сеть
fa-solid fa-globeРазмеры: 16px внутри компактных контролов, 20px в кнопках, 24px в карточках. Иконка не заменяет текстовую метку; декоративные иконки получают aria-hidden="true".
05 · Interactive components
Компоненты показывают все состояния.
Каждый элемент включает default, hover, focus, pressed, loading, disabled, error и success.
Action hierarchy
На одном экране — одна primary CTA. Высота 48px, touch target не меньше 44×44px.
Как к вам обращаться
Введите номер в формате +992 XX XXX XX XX
Информация
Подключение доступно по указанному адресу.
Подключение доступно по указанному адресу.
Заявка отправлена
Специалист свяжется с вами в течение рабочего дня.
Специалист свяжется с вами в течение рабочего дня.
Не удалось отправить
Проверьте соединение или позвоните в контактный центр.
Проверьте соединение или позвоните в контактный центр.
Segmented control
До четырёх коротких вариантов; на mobile допускается горизонтальная прокрутка.
Radio · switch · range
Поиск адреса и документ
Подсказки появляются после трёх символов.
Pagination · tooltip · icon actions
07 · Cards
Карточка отвечает на один вопрос.
Услуги помогают выбрать направление, тарифы — сравнить предложение, новости — понять содержание.
Service cards
Интернети хонагӣ
Стабильная связь для работы, учёбы и развлечений.
Выбрать тарифТелевизиони ТТЛ-ТВ
Телеканалы и медиатека на всех ваших экранах.
Смотреть пакетыТелефонияи NGN/SIP
Надёжная телефония для дома и бизнеса.
Узнать большеTariff cards
99 сомонӣ / моҳ
- До 30 Мбит/с
- Wi‑Fi роутер
- Поддержка 24/7
149 сомонӣ / моҳ
- До 100 Мбит/с
- ТТЛ-ТВ включено
- Современный роутер
219 сомонӣ / моҳ
- До 300 Мбит/с
- ТТЛ-ТВ + медиатека
- Приоритетная поддержка
Демонстрационные тарифы показывают структуру, а не утверждённые коммерческие условия.
08 · Telecom product patterns
Компоненты говорят на языке услуг связи.
Скорость, трафик, абонентская плата, оборудование и состав пакета имеют единый формат — клиент сравнивает предложения без расшифровки интерфейса.
Tariff catalog
Фильтр предложений
Состав тарифа и отдельные услуги
Домашний интернетдо 100 Мбит/сВключено
ТТЛ-ТВ120+ каналовВключено
Настройка Wi‑Fi роутера25 сомонӣРазово
Статический IP-адреспо запросуОпция
Проверка доступности
Результаты: доступно, заявка на уточнение, адрес не найден.
ТТЛ-ТВ: категории и контент
Оборудование, приложения и быстрые ресурсы
Wi‑Fi роутер
Характеристики, цена, наличие и условия установки.
ПодробнееПриложение iOS
Официальная ссылка, версия и QR-код.
App StoreПриложение Android
Официальная ссылка, версия и QR-код.
Google PlayНармафзор
Полезные программы и инструкции ТТЛ.
ОткрытьПартнёры и платформы
Partner 01
Partner 02
Partner 03
Partner 04
Partner 05
Источник коммерческих данных
Названия тарифов, цены, скорости, пакеты, количество телеканалов и наличие оборудования должны приходить из CMS/API. Значения здесь демонстрируют структуру компонента.
Названия тарифов, цены, скорости, пакеты, количество телеканалов и наличие оборудования должны приходить из CMS/API. Значения здесь демонстрируют структуру компонента.
09 · Content & corporate
Один ритм для новостей, акций и документов.
Контентные карточки разделяют изображение, метаданные, заголовок и действие; корпоративные сущности получают свои чёткие варианты.
Новость
ТТЛ расширяет географию подключения
Короткий анонс максимум в три строки без обрыва смысла.
ЧитатьАкция
Промо-предложение с ясным сроком
Условия, ограничения и дата окончания доступны до CTA.
Условия акцииВакансия
Инженер технической поддержки
Требования, обязанности и способ отклика.
ПодробнееЛицензия на оказание услуг связи
PDF · 2,4 МБ · обновлено 12.08.2026
Правила оказания услуг
PDF · 860 КБ · версия 3.1
Руководство
Имя Фамилия
Должность и зона ответственности
Правила листинга
News
Изображение 16:9, дата, рубрика, заголовок, анонс.
Promotion
Срок действия и ограничения видны до перехода.
Vacancy
Город, формат, статус и дедлайн отклика.
License
Тип, размер, версия, дата и доступное имя файла.
10 · Overlays & states
Система объясняет, что происходит.
Модальные окна, mobile drawer и уведомления используют единые слои, фокус и клавишу Escape; пустые и ошибочные состояния всегда предлагают следующий шаг.
System states
Пока пусто
У вас ещё нет активных заявок.
Не загрузилось
Сохраните данные и попробуйте снова.
Нет соединения
Показываем последнюю доступную информацию.
Страница не найдена
Ссылка устарела или адрес введён неверно.
11 · Page patterns
Готовые композиции для ключевых сценариев.
Паттерны фиксируют правильный порядок блоков, адаптивное поведение и доступность.
Как проверить возможность подключения?
Укажите адрес в форме — система покажет доступность или передаст запрос специалисту.
Когда со мной свяжутся?
В течение рабочего дня. Статус заявки можно проверить в личном кабинете.
Как изменить тариф?
Выберите тариф в личном кабинете или обратитесь в контактный центр.
Pattern anatomy
- Заголовок и краткое объяснение.
- Основная задача без лишних отвлечений.
- Видимые labels и понятные ошибки.
- Одна primary CTA.
- Альтернативный канал связи.
Офисы и точки обслуживания
Центральный офис Открыто
Душанбе · адрес из CMS Пн–Сб · 09:00–18:00
Офис продаж Открыто
Худжанд · адрес из CMS Пн–Сб · 09:00–18:00
Сервисный офисЗакрыто
Бохтар · адрес из CMS Пн–Пт · 08:00–17:00
Coverage map
Легенда покрытия
Подключение доступноТребуется проверкаПока недоступно
Карта всегда имеет текстовый поиск адреса и список результатов — цвет не является единственным носителем статуса.
Page template inventory
Главная
- Global header
- Hero / promotions
- Услуги и тарифы
- Новости и партнёры
- Преимущества и консультация
- Footer
Услуга / тарифы
- Breadcrumb + hero
- Фильтр категорий
- Tariff cards
- Характеристики и прайс
- Оборудование / FAQ
- Consultation CTA
Новости / акции
- Breadcrumb + title
- Featured item
- Фильтры / listing
- Pagination
- Detail article
- Related content
Компания
- О компании
- Руководство
- Лицензии
- Вакансии
- Документы
- Контакты
Контакты / покрытие
- Contact center
- Office cards
- Map + address search
- FAQ
- Complaint form
- Alternative channels
Вход / кабинет
- Login form
- Password recovery
- Account status
- Balance and payment
- Services and tickets
- Security notices
12 · Interactive preview
Проверка системы на реальных страницах.
Переключайте шаблон и ширину. Preview показывает структуру, а не финальный дизайн страницы.
ТТЛ
ИнтернетТТЛ-ТВТелефонияКабинет
Интернет + ТТЛ-ТВ
Связь для всего, что важно.
Хизматрасониҳо
ИнтернетСтабильная скорость для дома
ТТЛ-ТВКаналы и медиатека
ТелефонияNGN/SIP для дома и бизнеса
ТТЛ
ТарифыПокрытиеКабинет
Интернети хонагӣ
Выберите свою скорость
Три понятных предложения без лишних технических деталей.
30 Мбит/с · 99Старт
100 Мбит/с · 149Оптимум · рекомендуем
300 Мбит/с · 219Максимум
ТТЛ
КонтактыПоддержкаКабинет
Душанбе
Мы всегда на связи
4884Маркази тамос
info@ttl.tjЭлектронная почта
Пн–Сб09:00–18:00
Карта + форма заявкиДве колонки на desktop, один поток на mobile
13 · Responsive system
Mobile-first без скрытого overflow.
Базовый интерфейс проектируется для малого экрана и расширяется по мере появления пространства.
Small320–374
Mobile375–767
Tablet768–1023
Desktop1024–1440+
NavigationDesktop nav скрывается полностью; вместо него — semantic drawer.
TabsДо трёх — segmented control; больше — select или контролируемая лента.
MediaHero получает отдельный mobile crop через picture / sizes.
Fixed UITelegram, reCAPTCHA и sticky CTA не перекрывают контент.
14 · Accessibility & QA
Доступность встроена в Definition of Done.
Чек-лист сохраняется в браузере. Компонент не считается готовым, пока обязательные проверки не закрыты.
Готовность0 / 8
Quality gates
WCAG AA · 320px · 200% zoom · Keyboard
Минимальный набор: контраст 4.5:1, touch 44px, видимый focus, labels, правильные роли, reduced motion и отсутствие горизонтального скролла.
15 · Implementation stack
Tailwind отвечает за стили, Font Awesome — за иконки.
Одна технологическая договорённость убирает локальные CSS-островки, самодельные SVG и расхождения между макетом и Next.js.
Tailwind CSS
Utility-first слой интерфейса
Цвета ttl-*, радиусы rounded-ttl* и тени shadow-ttl-* объявляются централизованно. В JSX запрещены неутверждённые arbitrary values.
Font Awesome Free
Единая библиотека пиктограмм
Solid — основной стиль. Brands — только для официальных платформ. Иконки выбираются по смыслу, имеют стабильный размер и не смешиваются с emoji.
Token → Tailwind utility
| Назначение | Токен | Utility | Правило |
|---|---|---|---|
| Primary action | ttl.600 | bg-ttl-600 hover:bg-ttl-700 | Одна главная CTA в контексте |
| Primary text | ink.900 | text-ink-900 | Основной текст на светлом фоне |
| Focus | signal.500 | focus-visible:ring-signal-500 | Не отключать outline без замены |
| Card radius | ttl-lg | rounded-ttl-lg | 18px для карточек |
| Elevation | ttl-sm | shadow-ttl-sm | Не более двух уровней на экране |
// tailwind.config.ts export default { darkMode: 'class', content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'], theme: { extend: { fontFamily: { display: ['Montserrat', 'sans-serif'], sans: ['Roboto', 'sans-serif'], data: ['IBM Plex Sans', 'sans-serif'] }, colors: { ttl: { 50:'#F2F8FE', 600:'#1468B3', 700:'#12599A', 950:'#06182B' }, signal: { 500:'#F59E0B' } }, borderRadius: { ttl:'13px', 'ttl-lg':'18px' } }} };
// Primary CTA + Font Awesome <button className="inline-flex min-h-12 items-center gap-2 rounded-ttl bg-ttl-600 px-5 font-semibold text-white transition hover:bg-ttl-700 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-signal-500/40 disabled:opacity-45"> Подключить <i className="fa-solid fa-arrow-right" aria-hidden="true" /> </button>
Правила установки
Production / Next.js
npm install -D tailwindcss postcss autoprefixernpm install @fortawesome/fontawesome-freeПодключить Font Awesome один раз в корневом layout или global CSS. Не импортировать полный CSS повторно в компонентах.
HTML-презентация
Этот файл использует Tailwind Play CDN и Font Awesome CDN, чтобы открываться напрямую. CDN-подключение предназначено для демонстрации; production-сайт должен использовать npm-зависимости и сборку Tailwind.
Делать
Использовать утверждённые utilities, fa-fw в списках и текст рядом с неоднозначной иконкой.
Не делать
Не смешивать Font Awesome, emoji, самодельные outline SVG и разные толщины в одном интерфейсе.
Accessibility
Icon-only кнопка обязана иметь aria-label; декоративная иконка — aria-hidden.
16 · Handoff & governance
От решения в дизайне до компонента в Next.js.
Система разделена на Tailwind-токены, primitives, patterns и templates. Изменения проходят review и версионирование.
src/common/design-system/ ├── config / tokens.ts · icon-map.ts ├── primitives / Button · Input · Select · Switch · Icon ├── patterns / Header · Tariff · Coverage · Dialog · Content ├── templates / Home · Service · Contacts · News · Corporate └── docs / usage · accessibility · migration src/app/ ├── globals.css // @tailwind base/components/utilities └── [lang]/layout.tsx // Font Awesome global import Rule: JSX → Tailwind utilities → shared primitive. Новый CSS допускается только для сложного поведения, которое нельзя выразить утверждёнными utilities.
Primitives
- Button / IconButton / Link
- Input / Select / Radio / Checkbox
- Switch / Range / FileDrop
- Badge / Alert / Tooltip / Skeleton
- Typography / Icon / Divider
Patterns
- SiteHeader / Drawer / Footer
- Service / Tariff / Equipment
- Coverage / Office / ContactForm
- Dialog / Toast / EmptyState
- News / Vacancy / Document
Templates
- Home / Service / Tariffs
- Contacts / Coverage / Appeals
- News / Promotions / Detail
- Company / Licenses / Vacancies
- Login / Personal account
Propose
Задача и пользовательская проблема.
Design
Токены, состояния, responsive и a11y.
Review
Design + frontend + content owner.
Release
Версия, changelog и миграция.
Ничего не найдено
Попробуйте «кнопка», «тариф», «форма» или «адаптив».