Национальный архив Великобритании открыл доступ к своей дизайн-системе TNA Frontend

По данным The National Archives, спустя три года итераций — это вам не шутка, целых 160 версий и порядка 60 000 строк кода — британский государственный архив выкатил первый публичный релиз своей фронтенд-библиотеки TNA Frontend. И это не просто ещё один CSS-фреймворк в общую копилку: внутри стили, компоненты, типографика, сетка — всё, что нужно, чтобы собрать современный государственный сервис с нуля. Для нас с вами, веб-разработчиков и дизайнеров, это редкий шанс заглянуть в святая святых gov-стека и утащить оттуда паттерны, которые прошли проверку реальным масштабом и юзабилити.

Что внутри этой космической штуки

TNA Frontend — это, по сути, дизайн-система, заточенная под публичные сервисы. Никаких вау-эффектов ради вау-эффектов — только выверенные компоненты, строгая типографика и продуманная сетка. Архив честно признаётся: библиотека стилизует в том числе и ту страницу, которую вы читаете прямо сейчас на их сайте. То есть это не теория, а продакшн-код, обкатанный на реальных пользователях и реальных сценариях.

Важный момент — весь исходный код лежит на GitHub. Никаких запароленных репозиториев, никаких NDA. Открытый подход — это не просто красивый лозунг, а сознательное следование гайдлайнам GOV.UK Service Manual, где прямо сказано: публичные сервисы построены на народные деньги, значит и код должен быть открытым и переиспользуемым. Меньше велосипедов — меньше бюджетов, меньше vendor lock-in — быстрее доставка фич до живого человека.

Почему это магия для нашего комьюнити

Смотрите, в чём фокус: вместо того чтобы каждое ведомство лепило свою кривую дизайн-систему (а мы это видим сплошь и рядом — от сайтов школ до региональных порталов, где один и тот же батон «об исполнении» нарисован в семи стилях), одна организация выкладывает готовое, протестированное решение. Разработчики в госсекторе могут форкнуть, подкрутить под себя и не тратить месяцы на базовые компоненты. А мы с вами получаем редкую штуку — продакшн-референс дизайн-системы, которую можно препарировать: как организованы токены, как устроена адаптивная сетка, как компоненты сделаны по-настоящему доступными, а не «доступными только на словах».

Что делать прямо сейчас

1. Идём в GitHub-репозиторий The National Archives и изучаем структуру проекта — какие компоненты выделены, как организованы стили, как устроена система токенов.

2. Открываем демо-страницы — это готовый референс для дизайн-системы любого масштаба, хоть для корпоративного сайта, хоть для контентного портала с вирусными видео.

3. Берём типографику и сетку как стартовый каркас — и адаптируем под свой домен.

И финальный промпт для тех, кто дочитал до этого места: «Возьми структуру токенов и сетку из TNA Frontend, адаптируй под мой проект на CSS-переменных, выдай готовый файл theme.css с тремя уровнями отступов и типографической шкалой». Запускайте в Claude или GPT — и через пять минут у вас собственный фундамент дизайн-системы, проверенный тремя годами реального продакшна.