TM2.0 REDESIGN 2026
Design System & Style Guide
Kompletna specyfikacja kolorów, typografii i komponentów UI dla TM2.0 Redesign. Wersja 1.0 — Marzec 2026.
KOLORY
Brand Primaries
TM2.0 Blue
#005497
Nav, headings, trust, CTA secondary
Hover: #004380
Active: #003269
Light bg: #E6EFF7
TM2.0 Orange
#F6A500
CTA primary, highlights, icons, badges
Hover: #E09200
Active: #C17B00
Light bg: #FEF5E6
PALETA ROZSZERZONA
Blue Ramp — 10 stopni
50
#E6EFF7
100
#BFCFE9
200
#94AECF
300
#5B87B8
400
#2C6AA0
BASE
#005497
600
#004380
700
#003269
800
#002250
900
#001438
Orange Ramp — 10 stopni
50
#FEF5E6
100
#FDDDB0
200
#FCC673
300
#F8B23A
BASE
#F6A500
500
#E09200
600
#C17B00
700
#9F6400
800
#7C4D00
900
#4E2E00
TYPOGRAFIA
Type Scale — Montserrat
H1 — HERO HEADLINE
Driving the Future of Traffic Management
Montserrat 700 · 60px · line-height 1.0 · letter-spacing −1.5px · kolor #0F1D2E / #FFFFFF (dark bg)
H2 — SECTION TITLE
TM2.0 – Enabling Vehicle Interaction with Traffic Management
Montserrat 700 · 36px · line-height 1.11 · letter-spacing −0.9px · kolor #0F1D2E / #FFFFFF (dark bg)
H3 — CARD TITLE
Collaboration and Trust
Montserrat 600 · 20px · line-height 1.4 · letter-spacing −0.5px
H4 — FEATURE LABEL / FOOTER HEADING
Global Impact · Quick Links · Innovation
Montserrat 600 · 16px · line-height 1.5 · letter-spacing −0.4px | Footer: 18px/600/−0.45px/#FFFFFF
H6 — OVERLINE / SECTION LABEL
ABOUT TM2.0 · HOW IT WORKS · FOR MEMBERS
Montserrat 700 · 11px · UPPERCASE · letter-spacing 0.12em · kolor #F6A500
P — HERO LEAD
TM2.0 unites public and private sectors through co-opetition and trust, creating a more efficient and connected mobility system.
Montserrat 400 · 20px · line-height 1.4 · rgba(255,255,255,0.80) na dark bg
P.LEAD — SECTION INTRO
TM2.0 is an ERTICO Innovation Platform that brings together public authorities, private companies, and research institutions to shape the future of traffic management.
Montserrat 400 · 18px · line-height 1.625 · kolor #5C708A
P — BODY COPY
By fostering collaboration and trust, TM2.0 facilitates the exchange of information and services to perform better interactive traffic management across Europe.
Montserrat 400 · 16px · line-height 1.625 · kolor #5C708A
NAWIGACJA
Navbar — parametry CSS
Tło (default): #002250 · solid, bez opacity
Tło (scrolled >60px): rgba(0,52,105,0.97) + backdrop-filter: blur(16px)
Border-bottom (scrolled): 1px solid rgba(246,165,0,0.25)
Height: 72px
Max-width inner: 1400px · padding-x: 40px
Position: fixed · z-index: 50
Transition: background 200ms, box-shadow 200ms
Nav Links — parametry
Font-size: 14px · font-weight: 500
Color (rest): rgba(255,255,255,0.80)
Color (hover): #ffffff
Bg (hover): rgba(255,255,255,0.08)
Border-radius: 6px
Padding: 8px 14px
Transition: all 150ms ease
Gap między linkami: 4px
Active / Current Page
Color: #ffffff (pełna biel)
Border-bottom: 2px solid #F6A500
Border-radius: 0 (podkreślnik prostokątny)
Padding-bottom: 6px
CTA Button “Become a Member”:
Bg: #F6A500 · Hover: #E09200 · Active: #C17B00
Font-weight: 600 · Padding: 10px 22px
Border-radius: 6px · Color: #FFFFFF
PRZYCISKI
Buttons — stany i warianty
Primary CTA · #F6A500 · hover: #E09200
Secondary CTA · #005497 · hover: #004380
Ghost · transparent + #005497 border · hover: Blue-50 bg
01 — PRIMARY CTA (ORANGE)
REST
bg: #F6A500
color: #FFFFFF
border: none
HOVER
bg: #E09200
transition: 150ms ease
Orange-500
ACTIVE / PRESSED
bg: #C17B00
transform: scale(0.98)
Orange-600
DISABLED
bg: #FDDDB0
color: #C17B00
cursor: not-allowed
02 — SECONDARY (BLUE)
REST
bg: #005497
color: #FFFFFF
Blue Base
HOVER
bg: #004380
transition: 150ms ease
Blue-600
ACTIVE / PRESSED
bg: #003269
transform: scale(0.98)
Blue-700
DISABLED
bg: #BFCFE9
color: #004380
Blue-100