Живой гайдлайн портала. Переключите тему, чтобы увидеть целевой стиль обеих тем.

Сложное ПО — надёжно, честно, красиво

Примеры заголовков в обеих темах: тёмная — натуральный неон (почти белое ядро, цветной ореол), светлая — градиент.

Типографика

Display / H1 — Space Grotesk

H2 — заголовок раздела

Основной текст — Inter, 16px, межстрочный 1.6. Читаемый, спокойный, корпоративный.

mono / JetBrains Mono · 0x22D3EE · 54 принципа

Палитра — Тёмная тема (Deep Space + Neon)

#060A14 bg-base

#0B1220 elevated-1

#111A2E elevated-2

#16213A elevated-3

#3B82F6 accent

#22D3EE cyan

#8B5CF6 violet

#E879F9 magenta

#34D399 green

#FBBF24 amber

#F87171 red

#2DD4BF teal

Палитра — Светлая тема (Градиентная)

#F7FAFF bg-base

#FFFFFF elevated-1

#F1F6FF elevated-2

#EAF2FF elevated-3

#2563EB accent

#0891B2 cyan

#7C3AED violet

#C026D3 magenta

#059669 green

#D97706 amber

#DC2626 red

#0D9488 teal

Градиент фона секций (--grad-sky)

135° от #EAF2FF к #F7FAFF к #EEF4FF — чистый, светлый, «воздушный» фон.

Кнопки

Primary (неон / градиент)

Secondary / Ghost

дыхание неона

градиентный текст

Акцент (анимация / градиент)

Неоновая карточка (только тёмная)

Мир программирования

Онтологический линтер в CI

Карточка со свечением: почти белое ядро заголовка, синий ореол границ, внутреннее свечение. Используется точечно — не более 2–3 на экран.

0.05 CLS

Карточка со светлым градиентом (только светлая)

Новости корпорации

Мягкие тени и градиентный фон

В светлой теме вместо неона — аккуратные мягкие тени и светлые градиенты. Карточки «приподнимаются» при наведении.

0.05 CLS

Бейджи рубрик

Новости корпорации Мир программирования Искусственный интеллект Наука и математика

Цитата директора

«Код — это лишь тень модели. Пока модель размыта, любая строка кода — это долг, который придётся вернуть с процентами.» Колмыков Юрий Николаевич, директор SmartDev Corp

Метрики (счётчики)

принципа

эшелонов верификации

языков

100%

трассируемость

Это живой гайдлайн. Точные значения токенов, рецепты свечения и полная дизайн-система — в Техническом задании (раздел 12). Все цвета приведены в HEX и реализуются через CSS-переменные.