Good Brand UI

Typography

Common (100%)

body
body, input, textarea, button, .body16px / 20px / -4% / Inter
fs-40
.fs-4040px / 48px / -4%
fs-36
.fs-3636px / 44px / -4%
fs-30
.fs-3030px / 34px / -4%
fs-24
.fs-2423px / 32px / -4%
fs-20
.fs-2020px / 28px / -4%
fs-18
.fs-1818px / 26px / -4%
fs-16
.fs-1616px / 20px / -4%
fs-14
.fs-1414px / 20px / -4%
fs-12
.fs-1212px / 18px / -4%
fs-10
.fs-1010px / 12px / -4%

Icons

NameFontSpriteSymbol
Icons.icon-Icons.svg-Icons.svg-Icons-dims.d-inline-block<svg class="svg-Icons-dims"><use xlink:href="/_path_to_/sprite.css.svg#Icons"></use></svg>
basket.icon-basket.svg-basket.svg-basket-dims.d-inline-block<svg class="svg-basket-dims"><use xlink:href="/_path_to_/sprite.css.svg#basket"></use></svg>
burger.icon-burger.svg-burger.svg-burger-dims.d-inline-block<svg class="svg-burger-dims"><use xlink:href="/_path_to_/sprite.css.svg#burger"></use></svg>
check.icon-check.svg-check.svg-check-dims.d-inline-block<svg class="svg-check-dims"><use xlink:href="/_path_to_/sprite.css.svg#check"></use></svg>
chevrone_down.icon-chevrone_down.svg-chevrone_down.svg-chevrone_down-dims.d-inline-block<svg class="svg-chevrone_down-dims"><use xlink:href="/_path_to_/sprite.css.svg#chevrone_down"></use></svg>
chevrone_left.icon-chevrone_left.svg-chevrone_left.svg-chevrone_left-dims.d-inline-block<svg class="svg-chevrone_left-dims"><use xlink:href="/_path_to_/sprite.css.svg#chevrone_left"></use></svg>
chevrone_right.icon-chevrone_right.svg-chevrone_right.svg-chevrone_right-dims.d-inline-block<svg class="svg-chevrone_right-dims"><use xlink:href="/_path_to_/sprite.css.svg#chevrone_right"></use></svg>
chevrone_up.icon-chevrone_up.svg-chevrone_up.svg-chevrone_up-dims.d-inline-block<svg class="svg-chevrone_up-dims"><use xlink:href="/_path_to_/sprite.css.svg#chevrone_up"></use></svg>
close.icon-close.svg-close.svg-close-dims.d-inline-block<svg class="svg-close-dims"><use xlink:href="/_path_to_/sprite.css.svg#close"></use></svg>
compare.icon-compare.svg-compare.svg-compare-dims.d-inline-block<svg class="svg-compare-dims"><use xlink:href="/_path_to_/sprite.css.svg#compare"></use></svg>
cubes.icon-cubes.svg-cubes.svg-cubes-dims.d-inline-block<svg class="svg-cubes-dims"><use xlink:href="/_path_to_/sprite.css.svg#cubes"></use></svg>
error.icon-error.svg-error.svg-error-dims.d-inline-block<svg class="svg-error-dims"><use xlink:href="/_path_to_/sprite.css.svg#error"></use></svg>
flag_russia.icon-flag_russia.svg-flag_russia.svg-flag_russia-dims.d-inline-block<svg class="svg-flag_russia-dims"><use xlink:href="/_path_to_/sprite.css.svg#flag_russia"></use></svg>
handset.icon-handset.svg-handset.svg-handset-dims.d-inline-block<svg class="svg-handset-dims"><use xlink:href="/_path_to_/sprite.css.svg#handset"></use></svg>
heart.icon-heart.svg-heart.svg-heart-dims.d-inline-block<svg class="svg-heart-dims"><use xlink:href="/_path_to_/sprite.css.svg#heart"></use></svg>
info.icon-info.svg-info.svg-info-dims.d-inline-block<svg class="svg-info-dims"><use xlink:href="/_path_to_/sprite.css.svg#info"></use></svg>
log_in.icon-log_in.svg-log_in.svg-log_in-dims.d-inline-block<svg class="svg-log_in-dims"><use xlink:href="/_path_to_/sprite.css.svg#log_in"></use></svg>
log_out.icon-log_out.svg-log_out.svg-log_out-dims.d-inline-block<svg class="svg-log_out-dims"><use xlink:href="/_path_to_/sprite.css.svg#log_out"></use></svg>
loop.icon-loop.svg-loop.svg-loop-dims.d-inline-block<svg class="svg-loop-dims"><use xlink:href="/_path_to_/sprite.css.svg#loop"></use></svg>
loop_thin.icon-loop_thin.svg-loop_thin.svg-loop_thin-dims.d-inline-block<svg class="svg-loop_thin-dims"><use xlink:href="/_path_to_/sprite.css.svg#loop_thin"></use></svg>
max.icon-max.svg-max.svg-max-dims.d-inline-block<svg class="svg-max-dims"><use xlink:href="/_path_to_/sprite.css.svg#max"></use></svg>
plus.icon-plus.svg-plus.svg-plus-dims.d-inline-block<svg class="svg-plus-dims"><use xlink:href="/_path_to_/sprite.css.svg#plus"></use></svg>
search.icon-search.svg-search.svg-search-dims.d-inline-block<svg class="svg-search-dims"><use xlink:href="/_path_to_/sprite.css.svg#search"></use></svg>
user.icon-user.svg-user.svg-user-dims.d-inline-block<svg class="svg-user-dims"><use xlink:href="/_path_to_/sprite.css.svg#user"></use></svg>
vite.icon-vite.svg-vite.svg-vite-dims.d-inline-block<svg class="svg-vite-dims"><use xlink:href="/_path_to_/sprite.css.svg#vite"></use></svg>
vk.icon-vk.svg-vk.svg-vk-dims.d-inline-block<svg class="svg-vk-dims"><use xlink:href="/_path_to_/sprite.css.svg#vk"></use></svg>

Colors

Accent-Primaryvar(--Accent-Primary)#1B7C41
.color-Accent-Primary
.bg-Accent-Primary
Dark-Greenvar(--Dark-Green)#16502D
.color-Dark-Green
.bg-Dark-Green
Bright-Greenvar(--Bright-Green)#29AC32
.color-Bright-Green
.bg-Bright-Green
Bright-Yellowvar(--Bright-Yellow)#EFA910
.color-Bright-Yellow
.bg-Bright-Yellow
Bright-Bluevar(--Bright-Blue)#0D93AA
.color-Bright-Blue
.bg-Bright-Blue
Bright-Redvar(--Bright-Red)#D53A3A
.color-Bright-Red
.bg-Bright-Red
Soft-Greenvar(--Soft-Green)#B6FFB7
.color-Soft-Green
.bg-Soft-Green
Soft-Yellowvar(--Soft-Yellow)#FFF490
.color-Soft-Yellow
.bg-Soft-Yellow
Soft-Bluevar(--Soft-Blue)#AEF3FF
.color-Soft-Blue
.bg-Soft-Blue
Text-Secondaryvar(--Text-Secondary)#707070
.color-Text-Secondary
.bg-Text-Secondary
Bordervar(--Border)#F0F0F0
.color-Border
.bg-Border
Glass-Whitevar(--Glass-White)rgba(255,255,255,0.01)
.color-Glass-White
.bg-Glass-White
Whitevar(--White)#FFFFFF
.color-White
.bg-White
Blackvar(--Black)#0C0C0C
.color-Black
.bg-Black
Grayvar(--Gray)#F5F5F7
.color-Gray
.bg-Gray
darkvar(--dark)#000000
.color-dark
.bg-dark
lightvar(--light)#FFFFFF
.color-light
.bg-light

Buttons

style / statedefaulthoverdisableddefaulthoverdisabled
defaultbig
medium
small
borderbig
medium
small
squarebig
medium
small
circlebig
medium
small

Form fields

Checkbox

defaulthoverchecked

Switch

defaulthoverchecked

Dropdown

(simple select)

With (selected, disabled)

With (disabled)(selected)
[data-theme=frame] (simple select)

[data-theme=frame] With (selected, disabled)

[data-theme=frame] With (disabled)(selected)

[data-theme=frame](multiple) With (selected, disabled)

[data-theme=frame](multiple) With (disabled)(selected)(selected)

Input


Password


Phone


Email


typography
icons
colors
buttons
form-fields
header
preview