Färger
TYAs primärfärg är och har alltid varit grön. Den gröna finns i olika komplementutföranden och samsas med tre accéntfärger i orange, blå och korall samt en skala grå färger.
Gröna
Primär
RGB: 0, 166, 92 HEX: #00a65c HSL: 153, 100%, 33% HSV: 153, 100%, 65%Ljusgrön 1
RGB: 219, 232, 210 HEX: #dbe8d2 HSL: 95, 32%, 87% HSV: 95, 9%, 91%Ljusgrön 2
RGB: 144, 189, 127 HEX: #90bd7f HSL: 104, 32%, 62% HSV: 104, 33%, 74%Mörkgrön
RGB: 49, 79, 56 HEX: #314f38 HSL: 134, 23%, 25% HSV: 134, 38%, 31%Accéntfärger
Orange
RGB: 221, 146, 69 HEX: #dd9245 HSL: 30, 69%, 57% HSV: 30, 69%, 87%Blå
RGB: 104, 161, 210 HEX: #68a1d2 HSL: 208, 54%, 62% HSV: 208, 50%, 82%Korall
RGB: 203, 80, 106 HEX: #cb506a HSL: 347, 54%, 55% HSV: 347, 61%, 80%Komplementfärger
Silver 1
RGB: 240, 242, 243 HEX: #f0f2f3 HSL: 200, 11%, 95% HSV: 200, 1%, 95%Silver 2
RGB: 218, 223, 226 HEX: #dadfe2 HSL: 202, 12%, 87% HSV: 202, 4%, 89%Silver 3
RGB: 174, 180, 186 HEX: #aeb4ba HSL: 210, 8%, 71% HSV: 210, 6%, 73%Silver 4
RGB: 69, 71, 73 HEX: #454749 HSL: 210, 3%, 28% HSV: 210, 5%, 29%Body
RGB: 64, 64, 64 HEX: #404040 HSL: 0, 0%, 25% HSV: 0, 0%, 25%Text
Olika textstilar. Som en del av tillgänglighetskrav sätter vi aldrig brödtext under 16px samt håller oss till kontrastvärden enligt WCAG 2.1 AA.
Rubriker
The quick brown fox jumps over the lazy dog.
Rubrik h1
Font Family: Circular Std Style: Bold Font Size: 42px Text Color: rgb(0, 166, 92)The quick brown fox jumps over the lazy dog.
Rubrik h2
Font Family: Circular Std Style: Bold Font Size: 30px Text Color: rgb(64, 64, 64)The quick brown fox jumps over the lazy dog.
Rubrik h3
Font Family: Circular Std Style: Bold Font Size: 26px Text Color: rgb(64, 64, 64)The quick brown fox jumps over the lazy dog.
Rubrik h4
Font Family: Circular Std Style: Bold Font Size: 20px Text Color: rgb(64, 64, 64)The quick brown fox jumps over the lazy dog.
Rubrik h5
Font Family: Circular Std Style: Bold Font Size: 18px Text Color: rgb(64, 64, 64)The quick brown fox jumps over the lazy dog.
Rubrik h6
Font Family: Circular Std Style: Bold Font Size: 16px Text Color: rgb(64, 64, 64)The quick brown fox jumps over the lazy dog.
Rubrik Display
Font Family: Lineto Circular Bold Font Size: 64px Text Color: #00A65C Line Height: 64px Class: heading-bigText
The quick brown fox
Body Paragraf
Font Family: Circular Std Style: Regular Font Size: 16px Text Color: rgb(64, 64, 64)Länk i text
Font Family: Circular Std Style: Medium Font Size: 16px Text Color: rgb(64, 64, 64) Line Height: 24pxExtern länk
Font Family: Circular Std Style: Medium Font Size: 16px Text Color: rgb(64, 64, 64) Line Height: 24pxLänk i lista eller fristående länk
Font Family: Circular Std Style: Medium Font Size: 16px Text Color: rgb(64, 64, 64) Line Height: 24pxLänk till dokument
Font Family: Circular Std Style: Medium Font Size: 16px Text Color: rgb(64, 64, 64) Line Height: 24pxThe quick brown fox
Text muted t.ex. för datum i nyheter
Font Family: Circular Std Font Size: 16px Text Color: #737373 Line Height: 24px Class: mutedThe quick brown fox
Text small
Ikoner
Dessa är TYAs egna ikoner. Tillsammans med dessa används Font Awesome Pro 5: https://fontawesome.com/icons
Användare
Cykel
Kurs
Katalog
Däck
Flyg
Grävmaskin
Hamn och stuveri
ID
Shop
Säkerhet
Terminal
Länk
Dokument
Sophantering
Petroleum
Taxi
Transport
Truck
Truck och maskin
Komponenter
Knappar
Citat
Möjligheterna som lastbilsförare känns gränslösa
blockquote
Möjligheterna är stora
blockquote
Class: big_blockquote
Formulär
Class: style-select
Input Range
Styling sätts på: input[type="range"]
Checkbox & Radio Button
Styling sätts på: input[type="checkbox"]
Styling sätts på: input[type="radio"]
Datepicker Range
Datepicker Range
Feedback
Tooltip top
Tooltip bottom
Kommer snart
Error message
Success message
Information message
Danger message