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-big

Text

The quick brown fox

Body Paragraf

Font Family: Circular Std Style: Regular Font Size: 16px Text Color: rgb(64, 64, 64)

The quick brown fox

Länk i text

Font Family: Circular Std Style: Medium Font Size: 16px Text Color: rgb(64, 64, 64) Line Height: 24px

The quick brown fox

Extern länk

Font Family: Circular Std Style: Medium Font Size: 16px Text Color: rgb(64, 64, 64) Line Height: 24px

The quick brown fox

Lä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: 24px

The quick brown fox

Länk till dokument

Font Family: Circular Std Style: Medium Font Size: 16px Text Color: rgb(64, 64, 64) Line Height: 24px

The 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: muted

The quick brown fox

Text small

<small>Text</small> Font Family: Circular Std Font Size: 80% (motsvarar 13px)

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

Primär knapp

Class: tya_btn

Primär, disabled

Primär knapp - disabled

Class: tya_btn
Value: disabled

Primär knapp

Primär knapp - korall

Class: tya_btn tya_coral_btn

Primär, disabled

Primär knapp - disabled

Class: tya_btn tya_coral_btn
Value: disabled

Sekundär knapp

Class: tya_btn tya_secondary_btn

Sekundär, disabled

Sekundär knapp - disabled

Class: tya_btn tya_secondary_btn
Value: disabled

Vit knapp

Vit knapp
Används endast på färgad bakgrund.

Class: tya_btn tya_btn_white

Vit, disabled

Vit knapp - disabled

Class: tya_btn tya_btn_white
Value: disabled

Primär knapp

Knapp med ikon

Class: tya_btn

Primär knapp

Primär knapp - korall med ikon

Class: tya_btn tya_coral_btn

Sekundär knapp

Sekundär knapp med ikon

Class: tya_btn tya_secondary_btn

Vit knapp

Vit knapp med ikon

Class: tya_btn_white

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

Förnamn

<div class="floatlabel-input"><label for="your-name" class="input-label">Förnamn</label><input type="text" name="your-name" class="input-text" placeholder="Ange ditt förnamn"></div>

Förnamn

<div class="floatlabel-input floatlabel-negative"><label for="your-name" class="input-label">Förnamn</label><input type="text" name="your-name" class="input-text" placeholder="Ange ditt förnamn"></div>

Meddelande

<div class="floatlabel-input"><label for="input" class="input-label">Meddelande</label><textarea id="input" class="input-text" placeholder="Skriv ett meddelande" rows="3"></textarea></div>

Input Range

Styling sätts på: input[type="range"]

Checkbox & Radio Button

Label1

Label2

Styling sätts på: input[type="checkbox"]

Label1

Label2

Styling sätts på: input[type="radio"]

Datepicker Range

Feedback

Tooltip top

<i class="far fa-info-circle tooltip"><span class="tooltiptext tooltiptop">Efter att perioden är inskickad kan du inte längre göra några ändringar.</span></i>

Tooltip bottom

<i class="far fa-info-circle tooltip"><span class="tooltiptext tooltipbottom">Efter att perioden är inskickad kan du inte längre göra några ändringar.</span></i>

Popover

<div class="popover"> <a title="Öppna popover" class="tya_btn_link open-popover" role="button">Öppna popover</a> <div class="popover-box popovertop"> <a title="Avbryt" class="tya_btn_link close-popover" role="button"><i class="far fa-times"></i></a> <h3>Rubrik</h3> <p>Här går det lägga in valfri HTML</p> <div class="popover-btn-container"> <button class="tya_btn tya_btn_small">Knapptext</button> <button class="tya_btn tya_btn_small">Knapptext</button> </div> </div> </div>

Spinner

Kommer snart

Ett varnande meddelande. Används när någonting gått snett.

Error message

<div class="information-message-info warning-message d-flex show"> <i class="fas fa-exclamation-circle"></i> <p>Ett varnande meddelande. Används när någonting gått snett.</p> </div>

Ett meddelande som ger feedback på att allt gått som det ska.

Success message

<div class="information-message-info successful-action d-flex show"> <i class="fas fa-check-circle"></i> <p>Ett meddelande som ger feedback på att allt gått som det ska.</p> </div>

Ett informativt meddelande. Används när man vill upplysa om någonting.

Information message

<div class="information-message-info d-flex show"> <i class="fas fa-info-circle"></i> <p>Ett informativt meddelande. Används när man vill upplysa om någonting.</p> </div>

Ett meddelande om fara.

Danger message

<div class="information-message-info danger-message d-flex show"> <i class="fas fa-exclamation-triangle"></i> <p>Ett meddelande om fara.</p> </div>

Varför cookies?

Färger

Gröna

Accéntfärger

Komplementfärger

Text

Rubriker

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

Text

Ikoner

Komponenter

Knappar

Citat

Formulär

Input Range

Checkbox & Radio Button

Datepicker Range

Feedback

Rubrik