Grid

Palette

primary.dark
#7B1754
primary.main
#952E6D
primary.light
#EAC0DA
secondary.dark
#08679F
secondary.main
#247DB3
secondary.light
#E4EFF6
error
#ED0B17
warning
#E69B06
info
#5383B4
success
#16C68E
text.primary
#13151A
text.secondary
#727272
text.disabled
#b5b5b5
action.disabled
#E7E7E7
divider
#F0F0F0
gray900
#191919
gray800
#363636
gray500
#7B7B7B
gray200
#E7E7E7
gray100
#F0F0F0
gray50
#F6F6F6
blueGray900
#1A1C1D
blueGray800
#333536
blueGray500
#7A7D7E
blueGray200
#E5E9EA
blueGray100
#EEF1F2
blueGray50
#F9FCFE

Typography

H1 Header

Lorem ipsum dolor sit amet,
consectetur adipiscing elit

component:
variant:
font-size:
line-height:
margin-bottom:
h1
h1
2.5rem / 40px
1.20 / 48px
24px

H2 Header

Lorem ipsum dolor sit amet,
consectetur adipiscing elit

component:
variant:
font-size:
line-height:
margin-bottom:
h2
h2
2rem / 32px
1.25 / 40px
16px

H3 Header

Lorem ipsum dolor sit amet,
consectetur adipiscing elit

component:
variant:
font-size:
line-height:
margin-bottom:
h3
h3
1.5rem / 24px
1.33 / 32px
16px

H4/H5/H6 Header

Lorem ipsum dolor sit amet,
consectetur adipiscing elit

component:
variant:
font-size:
line-height:
margin-bottom:
h4/h5/h6
h4
1.25rem / 20px
1.40 / 28px
16px
Lead

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

component:
variant:
font-size:
line-height:
margin-bottom:
subtitle1
subtitle1
1.25rem / 20px
1.60 / 32px
12px
Lead small

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

component:
variant:
font-size:
line-height:
margin-bottom:
subtitle2
subtitle2
1.125rem / 18px
1.56 / 28px
12px

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

component:
variant:
font-size:
line-height:
margin-bottom:
body1
body1
1rem / 16px
1.63 / 26px
12px

Paragraph small

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

component:
variant:
font-size:
line-height:
margin-bottom:
body2
body2
0.875rem / 14px
1.71 / 24px
12px
Button
Button
component:
variant:
font-size:
line-height:
margin-bottom:
span
button
1rem / 16px
1.13 / 18px
0px
Caption
Lorem ipsum
component:
variant:
font-size:
line-height:
margin-bottom:
caption
caption
0.75rem / 12px
2.00 / 24px
0px
Bullet list
  • Lorem ipsum
  • Lorem ipsum
  • Lorem ipsum
component:
variant:
font-size:
line-height:
margin-bottom:
ul
–
1rem / 16px
1.63 / 26px
22px

Buttons

Primary action

Secondary action

Buttons with icons

Icon Buttons

Text buttons

Sizes

Checkbox

Icons

Склад
Доставка
Техническое сопровождение
Оплата
Надежность
Конкурсные процедура
Дистрибьюторство
Заказ
Документ pdf

Navigation

Billboard

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Запросить консультацию

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
Текст

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

Features

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Tabs

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet
  • Lorem ipsum dolor sit amet

Steppers

1

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

2

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Cards

Promoheader

Header

Subheader

  • List item
  • List item
  • List item

Caption

Promoheader

Header

Subheader

  • List item
  • List item
  • List item

Caption

Promoheader

Header

Subheader

  • List item
  • List item
  • List item

Caption

Promoheader

Header

Subheader

  • List item
  • List item
  • List item

Caption

Promoheader

Subheader
lorem ipsum dolor

Subheader
lorem ipsum dolor

Subheader
lorem ipsum dolor

Subheader
lorem ipsum dolor

News

27 апреля • Hamamatsu

Новый КМОП матричный датчик S15683–12 от Hamamatsu

11 марта • ЮЕ Фотоника

АО «ЮЕ Фотоника» примет участие в выставке «Фотоника. Мир лазеров и оптики – 2021»

Table

Lorem ipsumLorem ipsumLorem ipsum
Lorem ipsumLorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsumLorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsumLorem ipsum dolor sit ametLorem ipsum dolor sit amet

Collapse

Table header

Forms