Design System

UI Kit

Обзор дизайн-системы сайта Tallinna Teede AS — цвета, типографика, кнопки и компоненты.

Цвета

Основные цвета бренда и их использование.

Основные цвета

Header / Footer

#0E7A45

Accent

#0E7A45

Navy 950

#14281B

Белый

#FFFFFF

Серый фон

#F5F5F5

Шкала Navy

50

100

200

300

400

500

600

700

800

900

950

Варианты Accent

Accent Dark

#0B6538

Accent

#0E7A45

Accent Light

#10954F

Типографика

Шрифты и размеры текста.

font-sans / font-lato

Plus Jakarta Sans

Основной шрифт для навигации и текста контента. Современный и геометрический.

font-display

Oswald

Display-шрифт для крупных заголовков и hero-секций.

font-sans (fallback)

System UI

Резервный шрифт, когда веб-шрифты недоступны.

Заголовки

text-6xl (60px)

Heading 1

text-5xl (48px)

Heading 2

text-4xl (36px)

Heading 3

text-3xl (30px)

Heading 4

text-2xl (24px)
Heading 5
text-xl (20px)
Heading 6

Стандарт прозрачности текста

text-navy-950 Заголовки, имена, важная информация
text-navy-950/80 Основной текст, описания, ссылки
text-navy-950/70 Вспомогательный текст, должность, подсказки
text-navy-950/60 Метки, стиль placeholder, мета

Основной текст

text-lg (18px)

Более крупный основной текст, используется в hero-подзаголовках.

text-base (16px)

Обычный основной текст, главное содержимое.

text-sm (14px)

Более мелкий текст, описания карточек, footer.

text-xs (12px)

Самый мелкий текст, метки и примечания.

Кнопки

Варианты и состояния кнопок.

Primary

Secondary / Outline

Размеры

На тёмном фоне

Карточки

Стили карточек на разных фонах.

Белая карточка

Карточка с рамкой и фоном иконки на белом фоне.

Карточка с тенью

Карточка с тенью shadow-lg без рамки.

Зелёная карточка

Карточка, залитая цветом бренда.

Метки

Метки статуса и значки.

В наличии Зарезервировано В ремонте Обычный Subheading Label

Элементы формы

Поля ввода и выбора.

Иконки

Heroicons (outline), используются по всему сайту.

Shield
Clock
Location
Phone
Mail
Users
Building
Lightning

Компоновка

Основные контейнеры и отступы.

max-w-7xl (1280px) Основной контейнер контента
px-6 (24px) Боковой отступ
py-20–24 Вертикальный отступ секции
gap-8 (32px) Отступ между карточками
rounded-2xl (16px) Border-radius карточек
rounded-lg (8px) Border-radius кнопок