Styleguide - AutoGlass

Colors

Main Color

Sub Colors

Func Colors

Success Colors

Error Colors

Font Colors

.u-font-color-1

.u-font-color-2

.u-font-color-3

.u-font-color-4

.u-font-color-5

.u-font-color-6

.u-font-color-7

Bg Colors

.u-bg-color-1

.u-bg-color-2

.u-bg-color-3

.u-bg-color-4

.u-bg-color-5

.u-bg-color-6

.u-bg-color-7

Border Colors

.u-border-color-1

.u-border-color-2

.u-border-color-3
Typography

Heading Font: Roboto

H0

H1

H2

H3

H0

H1

H2

H3

H0

H1

H2

H3

H0

H1

H2

H3

H0

H1

H2

H3

H0

H1

H2

H3

H0

H1

H2

H3

Body Font: Arial

Body bigger

Bold bigger

Body

Bold

Cta

Body small

Bold small

Body smallest

Bold smallest

Body bigger

Bold bigger

Body

Bold

Cta

Body small

Bold small

Body smallest

Bold smallest

Body bigger

Bold bigger

Body

Bold

Cta

Body small

Bold small

Body smallest

Bold smallest

Body bigger

Bold bigger

Body

Bold

Cta

Body small

Bold small

Body smallest

Bold smallest

Body bigger

Bold bigger

Body

Bold

Cta

Body small

Bold small

Body smallest

Bold smallest

Body bigger

Bold bigger

Body

Bold

Cta

Body small

Bold small

Body smallest

Bold smallest

Body bigger

Bold bigger

Body

Bold

Cta

Body small

Bold small

Body smallest

Bold smallest
Buttons

Button primary

Button primary

Button primary

Button secondary

Button secondary

Button secondary

Button tertiary

Button tertiary

Button tertiary

Button error

Button error

Button error

Button success

Button success

Button success

Button primary

Button primary

Button primary

Button secondary

Button secondary

Button secondary

Button tertiary

Button tertiary

Button tertiary

Button error

Button error

Button error

Button success

Button success

Button success

Button primary

Button primary

Button primary

Button secondary

Button secondary

Button secondary

Button tertiary

Button tertiary

Button tertiary

Button error

Button error

Button error

Button success

Button success

Button success

Button primary

Button primary

Button primary

Button secondary

Button secondary

Button secondary

Button tertiary

Button tertiary

Button tertiary

Button error

Button error

Button error

Button success

Button success

Button success

Button primary

Button primary

Button primary

Button secondary

Button secondary

Button secondary

Button tertiary

Button tertiary

Button tertiary

Button error

Button error

Button error

Button success

Button success

Button success

Button primary

Button primary

Button primary

Button secondary

Button secondary

Button secondary

Button tertiary

Button tertiary

Button tertiary

Button error

Button error

Button error

Button success

Button success

Button success

Button primary

Button primary

Button primary

Button secondary

Button secondary

Button secondary

Button tertiary

Button tertiary

Button tertiary

Button error

Button error

Button error

Button success

Button success

Button success
Form Inputs
Pole tekstowe

Pole tekstowe

+48

Pole tekstowe

m2

Pole tekstowe

+48

m2

Pole tekstowe *

Pole tekstowe *

Pole tekstowe * Tutaj krótki opis

Pole tekstowe * Tutaj krótki opis

Wystąpił błąd

Email

Email

+48

Email

m2

Email

+48

m2

Email *

Email *

Email * Tutaj krótki opis

Email * Tutaj krótki opis

Wystąpił błąd

Hasło

Hasło

+48

Hasło

m2

Hasło

+48

m2

Hasło *

Hasło *

Hasło * Tutaj krótki opis

Hasło * Tutaj krótki opis

Wystąpił błąd

Wyszukiwanie

Wyszukiwanie

+48

Wyszukiwanie

m2

Wyszukiwanie

+48

m2

Wyszukiwanie *

Wyszukiwanie *

Wyszukiwanie * Tutaj krótki opis

Wyszukiwanie * Tutaj krótki opis

Wystąpił błąd

Url

Url

+48

Url

m2

Url

+48

m2

Url *

Url *

Url * Tutaj krótki opis

Url * Tutaj krótki opis

Wystąpił błąd

Telefon

Telefon

+48

Telefon

m2

Telefon

+48

m2

Telefon *

Telefon *

Telefon * Tutaj krótki opis

Telefon * Tutaj krótki opis

Wystąpił błąd

Numer

Numer

+48

Numer

m2

Numer

+48

m2

Numer *

Numer *

Numer * Tutaj krótki opis

Numer * Tutaj krótki opis

Wystąpił błąd

Data

Data

+48

Data

m2

Data

+48

m2

Data *

Data *

Data * Tutaj krótki opis

Data * Tutaj krótki opis

Wystąpił błąd

Autocomplete

Autocomplete *

Autocomplete *

Autocomplete * Tutaj krótki opis

Autocomplete * Tutaj krótki opis

Wystąpił błąd

Select

Select *

Select *

Select * Tutaj krótki opis

Select * Tutaj krótki opis

Wystąpił błąd

Textarea

Textarea *

Textarea *

Textarea * Tutaj krótki opis
0/350
Textarea * Tutaj krótki opis
Wystąpił błąd 0/350
File

Upuść plik tutaj
lub

Wgraj plik Edytuj

File *

Upuść plik tutaj
lub

Wgraj plik Edytuj

File *

Upuść plik tutaj
lub

Wgraj plik Edytuj

File * Tutaj krótki opis

Upuść plik tutaj
lub

Wgraj plik Edytuj

File * Tutaj krótki opis

Upuść plik tutaj
lub

Wgraj plik Edytuj

Wystąpił błąd
Checkbox Opcja 1 Opcja 2 Opcja 3

Checkbox * Opcja 1 Opcja 2 Opcja 3

Checkbox * Opcja 1 Opcja 2 Opcja 3

Checkbox * Tutaj krótki opis Opcja 1 Opcja 2 Opcja 3

Checkbox * Tutaj krótki opis Opcja 1 Opcja 2 Opcja 3
Wystąpił błąd

Radio Button Opcja 1 Opcja 2 Opcja 3

Radio Button * Opcja 1 Opcja 2 Opcja 3

Radio Button * Opcja 1 Opcja 2 Opcja 3

Radio Button * Tutaj krótki opis Opcja 1 Opcja 2 Opcja 3

Radio Button * Tutaj krótki opis Opcja 1 Opcja 2 Opcja 3
Wystąpił błąd

Checkbox Inline Opcja 1 Opcja 2 Opcja 3

Checkbox Inline * Opcja 1 Opcja 2 Opcja 3

Checkbox Inline * Opcja 1 Opcja 2 Opcja 3

Checkbox Inline * Tutaj krótki opis Opcja 1 Opcja 2 Opcja 3

Checkbox Inline * Tutaj krótki opis Opcja 1 Opcja 2 Opcja 3
Wystąpił błąd

Radio Button Inline Opcja 1 Opcja 2 Opcja 3

Radio Button Inline * Opcja 1 Opcja 2 Opcja 3

Radio Button Inline * Opcja 1 Opcja 2 Opcja 3

Radio Button Inline * Tutaj krótki opis Opcja 1 Opcja 2 Opcja 3

Radio Button Inline * Tutaj krótki opis Opcja 1 Opcja 2 Opcja 3
Wystąpił błąd

Checkbox Big Text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.

Checkbox Big Text * Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.

Checkbox Big Text * Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.

Checkbox Big Text * Tutaj krótki opis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.

Checkbox Big Text * Tutaj krótki opis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.
Wystąpił błąd

Radio Button Big Text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.

Radio Button Big Text * Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.

Radio Button Big Text * Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.

Radio Button Big Text * Tutaj krótki opis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.

Radio Button Big Text * Tutaj krótki opis Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.
Wystąpił błąd

Checkbox Big Text Toggleable
Zaznacz wszystkie zgody
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.

Checkbox Big Text Toggleable *
Zaznacz wszystkie zgody
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.

Checkbox Big Text Toggleable *
Zaznacz wszystkie zgody
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.

Checkbox Big Text Toggleable * Tutaj krótki opis
Zaznacz wszystkie zgody
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.

Checkbox Big Text Toggleable * Tutaj krótki opis
Zaznacz wszystkie zgody
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare accumsan ultricies. Cras gravida orci sapien, ut posuere nulla elementum ac. Donec vulputate lacus massa, a ultrices risus accumsan et.
Wystąpił błąd

Switch

Switch *

Switch *

Switch * Tutaj krótki opis

Switch * Tutaj krótki opis

Wystąpił błąd
Articles

07.09.2023

Warsaw Motor Show & The Best of Autoglass® Polska: festiwal technologicznej doskonałości i inspiracji

Warsaw Motor Show to wydarzenie branżowe, którego celem jest zgromadzenie czołowych firm, ekspertów technicznych i praktyków związanych z sektorem…

07.09.2023

Warsaw Motor Show & The Best of Autoglass® Polska: festiwal technologicznej doskonałości i inspiracji

Warsaw Motor Show to wydarzenie branżowe, którego celem jest zgromadzenie czołowych firm, ekspertów technicznych i praktyków związanych z sektorem…

07.09.2023

Warsaw Motor Show & The Best of Autoglass® Polska: festiwal technologicznej doskonałości i inspiracji

Warsaw Motor Show to wydarzenie branżowe, którego celem jest zgromadzenie czołowych firm, ekspertów technicznych i praktyków związanych z sektorem…

07.09.2023

Warsaw Motor Show & The Best of Autoglass® Polska: festiwal technologicznej doskonałości i inspiracji

Warsaw Motor Show to wydarzenie branżowe, którego celem jest zgromadzenie czołowych firm, ekspertów technicznych i praktyków związanych z sektorem…

07.09.2023

Warsaw Motor Show & The Best of Autoglass® Polska: festiwal technologicznej doskonałości i inspiracji

Warsaw Motor Show to wydarzenie branżowe, którego celem jest zgromadzenie czołowych firm, ekspertów technicznych i praktyków związanych z sektorem…

07.09.2023

Warsaw Motor Show & The Best of Autoglass® Polska: festiwal technologicznej doskonałości i inspiracji

Warsaw Motor Show to wydarzenie branżowe, którego celem jest zgromadzenie czołowych firm, ekspertów technicznych i praktyków związanych z sektorem…

07.09.2023

Warsaw Motor Show & The Best of Autoglass® Polska: festiwal technologicznej doskonałości i inspiracji

Warsaw Motor Show to wydarzenie branżowe, którego celem jest zgromadzenie czołowych firm, ekspertów technicznych i praktyków związanych z sektorem…

Primary Button

07.09.2023

Warsaw Motor Show & The Best of Autoglass® Polska: festiwal technologicznej doskonałości i inspiracji

Warsaw Motor Show to wydarzenie branżowe, którego celem jest zgromadzenie czołowych firm, ekspertów technicznych i praktyków związanych z sektorem…

Warsaw Motor Show & The Best of Autoglass® Polska: festiwal technologicznej doskonałości i inspiracji

Warsaw Motor Show & The Best of Autoglass® Polska: festiwal technologicznej doskonałości i inspiracji

Secondary Button

Warsaw Motor Show & The Best of Autoglass® Polska: festiwal technologicznej doskonałości i inspiracji

Warsaw Motor Show to wydarzenie branżowe, którego celem jest zgromadzenie czołowych firm, ekspertów technicznych i praktyków związanych z sektorem…

Warsaw Motor Show & The Best of Autoglass® Polska: festiwal technologicznej doskonałości i inspiracji

Colors

Typography

Buttons

Form Inputs

Articles