Biskvit Dvor Redesign UI

Typography

Desktop (1280)

Headline 1h1, .h164 px / 100%/ -5%
Headline 2h2, .h248 px / 80% / -5%
Headline 3h3, .h332 px / 80% / -5%
Headline 4h4, .h432 px / 40 px / -1%
Headline 5h5, .h526 px / 24 px / -5%
Headline 6h6, .h624 px / 120% / -0.5%
Headline 7.h720 px / 100% / -0.5%
Headline 7B.h7, b.h7, .h7.text-bold20 px / 100% / -0.5%
Headline 8.h818 px / 100% / -0.5%

Mobile (720)

Headline 1h1, .h136 px / 100%/ -5%
Headline 2h2, .h230 px / 80% / -5%
Headline 3h3, .h330 px / 120% / -0.5%
Headline 4h4, .h420 px / 120% / -5%
Headline 5h5, .h518 px / 80% / -5%
Headline 6h6, .h618 px / 120% / -5%
Body-S.S16 px / 130% / 0%
Body-XXS.XXS12 px / 140% / 0%
Descriptor-M.M16 px / 16 px / 0%
Descriptor-XS.XS14 px / 14 px / 0%
Button-Medium.button.M, .button, .button-medium16 px / 14 px / 0%
Button-Small.button.S, .button-small, .button[data-size=”small”]14 px / 14 px /0%
Button-Link-M.button.link.M, .button.button-medium.link, .button.link[data-size=”large”]16 px / 16 px / 0%
Button-Link-S.button.link.S, .button.button-small.link, .button.link[data-size=”medium”], .link.S15 px / 14 px / 0%
Button-Link-XS.button.link.XS, , .button.link[data-size=”small”]14 px / 14 px /0%
Input-Text.input-control14 px / 14 px / 0%
Input-Top.input-top12 px / 14 px /0%

Icons

NameFontSpriteSymbol
all.icon-all.svg-all.svg-all-dims<svg class="svg-all-dims"><use xlink:href="/_path_to_/sprite.css.svg#all"></use></svg>
arrow-left.icon-arrow-left.svg-arrow-left.svg-arrow-left-dims<svg class="svg-arrow-left-dims"><use xlink:href="/_path_to_/sprite.css.svg#arrow-left"></use></svg>
arrow-right.icon-arrow-right.svg-arrow-right.svg-arrow-right-dims<svg class="svg-arrow-right-dims"><use xlink:href="/_path_to_/sprite.css.svg#arrow-right"></use></svg>
attach.icon-attach.svg-attach.svg-attach-dims<svg class="svg-attach-dims"><use xlink:href="/_path_to_/sprite.css.svg#attach"></use></svg>
bread.icon-bread.svg-bread.svg-bread-dims<svg class="svg-bread-dims"><use xlink:href="/_path_to_/sprite.css.svg#bread"></use></svg>
cake-order.icon-cake-order.svg-cake-order.svg-cake-order-dims<svg class="svg-cake-order-dims"><use xlink:href="/_path_to_/sprite.css.svg#cake-order"></use></svg>
cake-premium.icon-cake-premium.svg-cake-premium.svg-cake-premium-dims<svg class="svg-cake-premium-dims"><use xlink:href="/_path_to_/sprite.css.svg#cake-premium"></use></svg>
cake-simple.icon-cake-simple.svg-cake-simple.svg-cake-simple-dims<svg class="svg-cake-simple-dims"><use xlink:href="/_path_to_/sprite.css.svg#cake-simple"></use></svg>
calendar.icon-calendar.svg-calendar.svg-calendar-dims<svg class="svg-calendar-dims"><use xlink:href="/_path_to_/sprite.css.svg#calendar"></use></svg>
cancel-search.icon-cancel-search.svg-cancel-search.svg-cancel-search-dims<svg class="svg-cancel-search-dims"><use xlink:href="/_path_to_/sprite.css.svg#cancel-search"></use></svg>
cart.icon-cart.svg-cart.svg-cart-dims<svg class="svg-cart-dims"><use xlink:href="/_path_to_/sprite.css.svg#cart"></use></svg>
checked.icon-checked.svg-checked.svg-checked-dims<svg class="svg-checked-dims"><use xlink:href="/_path_to_/sprite.css.svg#checked"></use></svg>
chevron-down.icon-chevron-down.svg-chevron-down.svg-chevron-down-dims<svg class="svg-chevron-down-dims"><use xlink:href="/_path_to_/sprite.css.svg#chevron-down"></use></svg>
chevron-left.icon-chevron-left.svg-chevron-left.svg-chevron-left-dims<svg class="svg-chevron-left-dims"><use xlink:href="/_path_to_/sprite.css.svg#chevron-left"></use></svg>
chevron-right.icon-chevron-right.svg-chevron-right.svg-chevron-right-dims<svg class="svg-chevron-right-dims"><use xlink:href="/_path_to_/sprite.css.svg#chevron-right"></use></svg>
chevron-up.icon-chevron-up.svg-chevron-up.svg-chevron-up-dims<svg class="svg-chevron-up-dims"><use xlink:href="/_path_to_/sprite.css.svg#chevron-up"></use></svg>
close.icon-close.svg-close.svg-close-dims<svg class="svg-close-dims"><use xlink:href="/_path_to_/sprite.css.svg#close"></use></svg>
cooked.icon-cooked.svg-cooked.svg-cooked-dims<svg class="svg-cooked-dims"><use xlink:href="/_path_to_/sprite.css.svg#cooked"></use></svg>
cookies.icon-cookies.svg-cookies.svg-cookies-dims<svg class="svg-cookies-dims"><use xlink:href="/_path_to_/sprite.css.svg#cookies"></use></svg>
curved.icon-curved.svg-curved.svg-curved-dims<svg class="svg-curved-dims"><use xlink:href="/_path_to_/sprite.css.svg#curved"></use></svg>
delete.icon-delete.svg-delete.svg-delete-dims<svg class="svg-delete-dims"><use xlink:href="/_path_to_/sprite.css.svg#delete"></use></svg>
desert.icon-desert.svg-desert.svg-desert-dims<svg class="svg-desert-dims"><use xlink:href="/_path_to_/sprite.css.svg#desert"></use></svg>
drink.icon-drink.svg-drink.svg-drink-dims<svg class="svg-drink-dims"><use xlink:href="/_path_to_/sprite.css.svg#drink"></use></svg>
heart.icon-heart.svg-heart.svg-heart-dims<svg class="svg-heart-dims"><use xlink:href="/_path_to_/sprite.css.svg#heart"></use></svg>
location.icon-location.svg-location.svg-location-dims<svg class="svg-location-dims"><use xlink:href="/_path_to_/sprite.css.svg#location"></use></svg>
math-minus.icon-math-minus.svg-math-minus.svg-math-minus-dims<svg class="svg-math-minus-dims"><use xlink:href="/_path_to_/sprite.css.svg#math-minus"></use></svg>
math-plus.icon-math-plus.svg-math-plus.svg-math-plus-dims<svg class="svg-math-plus-dims"><use xlink:href="/_path_to_/sprite.css.svg#math-plus"></use></svg>
menu.icon-menu.svg-menu.svg-menu-dims<svg class="svg-menu-dims"><use xlink:href="/_path_to_/sprite.css.svg#menu"></use></svg>
pie.icon-pie.svg-pie.svg-pie-dims<svg class="svg-pie-dims"><use xlink:href="/_path_to_/sprite.css.svg#pie"></use></svg>
pizza.icon-pizza.svg-pizza.svg-pizza-dims<svg class="svg-pizza-dims"><use xlink:href="/_path_to_/sprite.css.svg#pizza"></use></svg>
radiobutton.icon-radiobutton.svg-radiobutton.svg-radiobutton-dims<svg class="svg-radiobutton-dims"><use xlink:href="/_path_to_/sprite.css.svg#radiobutton"></use></svg>
ranges.icon-ranges.svg-ranges.svg-ranges-dims<svg class="svg-ranges-dims"><use xlink:href="/_path_to_/sprite.css.svg#ranges"></use></svg>
search.icon-search.svg-search.svg-search-dims<svg class="svg-search-dims"><use xlink:href="/_path_to_/sprite.css.svg#search"></use></svg>
semiproduct.icon-semiproduct.svg-semiproduct.svg-semiproduct-dims<svg class="svg-semiproduct-dims"><use xlink:href="/_path_to_/sprite.css.svg#semiproduct"></use></svg>
special.icon-special.svg-special.svg-special-dims<svg class="svg-special-dims"><use xlink:href="/_path_to_/sprite.css.svg#special"></use></svg>
telephone.icon-telephone.svg-telephone.svg-telephone-dims<svg class="svg-telephone-dims"><use xlink:href="/_path_to_/sprite.css.svg#telephone"></use></svg>
tg.icon-tg.svg-tg.svg-tg-dims<svg class="svg-tg-dims"><use xlink:href="/_path_to_/sprite.css.svg#tg"></use></svg>
vk.icon-vk.svg-vk.svg-vk-dims<svg class="svg-vk-dims"><use xlink:href="/_path_to_/sprite.css.svg#vk"></use></svg>

Colors

Neutral-0var(--Neutral-0)#FFFFFF.color-Neutral-0.bg-Neutral-0
Neutral-100var(--Neutral-100)#F7F7F7.color-Neutral-100.bg-Neutral-100
Neutral-200var(--Neutral-200)#F2F2F2.color-Neutral-200.bg-Neutral-200
Neutral-300var(--Neutral-300)#E1DFDF.color-Neutral-300.bg-Neutral-300
Neutral-400var(--Neutral-400)#C4C1C1.color-Neutral-400.bg-Neutral-400
Neutral-500var(--Neutral-500)#A8A3A3.color-Neutral-500.bg-Neutral-500
Neutral-600var(--Neutral-600)#8E8787.color-Neutral-600.bg-Neutral-600
Neutral-700var(--Neutral-700)#7B7373.color-Neutral-700.bg-Neutral-700
Neutral-800var(--Neutral-800)#5E5555.color-Neutral-800.bg-Neutral-800
Neutral-900var(--Neutral-900)#423737.color-Neutral-900.bg-Neutral-900
Accent-50var(--Accent-50)#FCF8F3.color-Accent-50.bg-Accent-50
Accent-100var(--Accent-100)#F6EFE8.color-Accent-100.bg-Accent-100
Accent-200var(--Accent-200)#F4EDE2.color-Accent-200.bg-Accent-200
Accent-300var(--Accent-300)#F6F1E2.color-Accent-300.bg-Accent-300
Accent-400var(--Accent-400)#EDE0D2.color-Accent-400.bg-Accent-400
Accent-500var(--Accent-500)#EDE0CA.color-Accent-500.bg-Accent-500
Accent-600var(--Accent-600)#75534F.color-Accent-600.bg-Accent-600
Accent-700var(--Accent-700)#5D3530.color-Accent-700.bg-Accent-700
Accent-800var(--Accent-800)#531B07.color-Accent-800.bg-Accent-800
Pinkyvar(--Pinky)#EC6E8C.color-Pinky.bg-Pinky
Rosevar(--Rose)#FFD6DB.color-Rose.bg-Rose
Green-Teavar(--Green-Tea)#DAE1BF.color-Green-Tea.bg-Green-Tea
Barbievar(--Barbie)#FF7A9A.color-Barbie.bg-Barbie
Orangevar(--Orange)#EF884E.color-Orange.bg-Orange
Pumpkinvar(--Pumpkin)#D97137.color-Pumpkin.bg-Pumpkin
Mustardvar(--Mustard)#D3BD71.color-Mustard.bg-Mustard
Peachvar(--Peach)#F3D7BD.color-Peach.bg-Peach
Mochitovar(--Mochito)#67AB86.color-Mochito.bg-Mochito
Olivevar(--Olive)#434734.color-Olive.bg-Olive
Dark-Olivevar(--Dark-Olive)#57524F.color-Dark-Olive.bg-Dark-Olive
Error-100var(--Error-100)#FEF3F2.color-Error-100.bg-Error-100
Error-600var(--Error-600)#B42318.color-Error-600.bg-Error-600

Button

-defaulthoverdefaulthoverdefaulthover
smallprimary
secondary
tertiary
mediumprimary
secondary
tertiary
largeprimary
secondary
tertiary

Eye-stopper

ХИТ
ХИТ
ХИТ
ХИТ
ХИТ
ХИТ
ХИТ
ХИТ
ХИТ
ХИТ
ХИТ
ХИТ
ХИТ
ХИТ
ХИТ
ХИТ
ХИТ
ХИТ
ХИТ
ХИТ
ХИТ
ХИТ
ХИТ
ХИТ
ХИТ
ХИТ
ХИТ
ХИТ
ХИТ
ХИТ
ХИТ
ХИТ

Form fields

Text FieldPhoneComment
SelectCheckboxRadio

Search

Default
Focus
Filled

Units

indexxslgval
0
.gap-u0
.p-u0
.r-u0
.gap-lg-u0
.p-lg-u0
.r-lg-u0
0px
1
.gap-u1
.p-u1
.r-u1
.gap-lg-u1
.p-lg-u1
.r-lg-u1
2px
2
.gap-u2
.p-u2
.r-u2
.gap-lg-u2
.p-lg-u2
.r-lg-u2
4px
3
.gap-u3
.p-u3
.r-u3
.gap-lg-u3
.p-lg-u3
.r-lg-u3
6px
4
.gap-u4
.p-u4
.r-u4
.gap-lg-u4
.p-lg-u4
.r-lg-u4
8px
5
.gap-u5
.p-u5
.r-u5
.gap-lg-u5
.p-lg-u5
.r-lg-u5
12px
6
.gap-u6
.p-u6
.r-u6
.gap-lg-u6
.p-lg-u6
.r-lg-u6
14px
7
.gap-u7
.p-u7
.r-u7
.gap-lg-u7
.p-lg-u7
.r-lg-u7
16px
8
.gap-u8
.p-u8
.r-u8
.gap-lg-u8
.p-lg-u8
.r-lg-u8
18px
9
.gap-u9
.p-u9
.r-u9
.gap-lg-u9
.p-lg-u9
.r-lg-u9
20px
10
.gap-u10
.p-u10
.r-u10
.gap-lg-u10
.p-lg-u10
.r-lg-u10
24px
11
.gap-u11
.p-u11
.r-u11
.gap-lg-u11
.p-lg-u11
.r-lg-u11
28px
12
.gap-u12
.p-u12
.r-u12
.gap-lg-u12
.p-lg-u12
.r-lg-u12
32px
13
.gap-u13
.p-u13
.r-u13
.gap-lg-u13
.p-lg-u13
.r-lg-u13
36px
14
.gap-u14
.p-u14
.r-u14
.gap-lg-u14
.p-lg-u14
.r-lg-u14
40px
15
.gap-u15
.p-u15
.r-u15
.gap-lg-u15
.p-lg-u15
.r-lg-u15
44px
16
.gap-u16
.p-u16
.r-u16
.gap-lg-u16
.p-lg-u16
.r-lg-u16
48px
17
.gap-u17
.p-u17
.r-u17
.gap-lg-u17
.p-lg-u17
.r-lg-u17
52px
18
.gap-u18
.p-u18
.r-u18
.gap-lg-u18
.p-lg-u18
.r-lg-u18
56px
19
.gap-u19
.p-u19
.r-u19
.gap-lg-u19
.p-lg-u19
.r-lg-u19
60px
20
.gap-u20
.p-u20
.r-u20
.gap-lg-u20
.p-lg-u20
.r-lg-u20
64px
21
.gap-u21
.p-u21
.r-u21
.gap-lg-u21
.p-lg-u21
.r-lg-u21
68px
22
.gap-u22
.p-u22
.r-u22
.gap-lg-u22
.p-lg-u22
.r-lg-u22
72px
23
.gap-u23
.p-u23
.r-u23
.gap-lg-u23
.p-lg-u23
.r-lg-u23
76px
24
.gap-u24
.p-u24
.r-u24
.gap-lg-u24
.p-lg-u24
.r-lg-u24
80px
25
.gap-u25
.p-u25
.r-u25
.gap-lg-u25
.p-lg-u25
.r-lg-u25
84px
26
.gap-u26
.p-u26
.r-u26
.gap-lg-u26
.p-lg-u26
.r-lg-u26
88px
27
.gap-u27
.p-u27
.r-u27
.gap-lg-u27
.p-lg-u27
.r-lg-u27
92px
28
.gap-u28
.p-u28
.r-u28
.gap-lg-u28
.p-lg-u28
.r-lg-u28
96px
29
.gap-u29
.p-u29
.r-u29
.gap-lg-u29
.p-lg-u29
.r-lg-u29
100px
30
.gap-u30
.p-u30
.r-u30
.gap-lg-u30
.p-lg-u30
.r-lg-u30
104px
31
.gap-u31
.p-u31
.r-u31
.gap-lg-u31
.p-lg-u31
.r-lg-u31
108px
32
.gap-u32
.p-u32
.r-u32
.gap-lg-u32
.p-lg-u32
.r-lg-u32
112px
33
.gap-u33
.p-u33
.r-u33
.gap-lg-u33
.p-lg-u33
.r-lg-u33
116px
34
.gap-u34
.p-u34
.r-u34
.gap-lg-u34
.p-lg-u34
.r-lg-u34
120px
35
.gap-u35
.p-u35
.r-u35
.gap-lg-u35
.p-lg-u35
.r-lg-u35
124px
36
.gap-u36
.p-u36
.r-u36
.gap-lg-u36
.p-lg-u36
.r-lg-u36
128px
37
.gap-u37
.p-u37
.r-u37
.gap-lg-u37
.p-lg-u37
.r-lg-u37
132px
38
.gap-u38
.p-u38
.r-u38
.gap-lg-u38
.p-lg-u38
.r-lg-u38
160px
39
.gap-u39
.p-u39
.r-u39
.gap-lg-u39
.p-lg-u39
.r-lg-u39
164px
nav
typography
icons
colors
button
eyestopper
input
units
header