Hamkorbank — Официальный сайт банка в Узбекистане, кредиты, карты и микрозаймы

Design Specification — Hamkorbank — Официальный сайт банка в Узбекистане, кредиты, карты и микрозаймы

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#003EFF). Display headings use a distinct face (Icons,serif!important) over the body stack (Golos Text,sans-serif). Detected font weights: 400, 500, 600, 700. Detected style signatures: technical / mono accents.

Logo asset(s): https://hamkorbank.uz/assets/images/static/logo.svg

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(262.46deg, #B2DED2 49.62%, #8DCEBC 105.8%), linear-gradient(94.43deg, rgba(178, 222, 210, .2) -4.63%, rgba(105, 191, 167, .2) 102.04%)
• linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent)

Typography

Primary typeface: Golos Text — stack: Golos Text,sans-serif

Display / heading typeface: Icons,serif!important (used for large headings; body uses the primary stack)

Font stacks (most used first)

• Golos Text,sans-serif
• Montserrat,sans-serif
• Arial,Helvetica,sans-serif
• Verdana,Arial,sans-serif
• Golos Text
• Montserrat
• Icons
• Icons,serif!important
• sans-serif
• monospace,monospace

Derived type scale

Font sizes (by frequency)

Weights in use: 400, 500, 600, 700

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Shadows

Derived elevation

All detected shadows

• 0 0 5px #666
• -8px -8px 8px #aaa
• inset 1px 1px 1px #ccc
• 0 0 #0000,0 0 #0000,0 0px 20px 0px rgba(0, 0, 0, .16)
• 0 .3rem 1rem #5c5c6a1c,-.2rem 1.4rem 3.7rem #5c5c6a12,-.4rem 3.6rem 11.5rem #5c5c6a0a

Layout

Container max-width: 768px

Grid columns (largest detected grid): 6

Breakpoints

• 479px
• 640px
• 767px
• 768px
• 991px
• 1100px
• 1280px
• 1440px

Animation & Motion

Transitions

• .3s opacity
• opacity .2s .5s linear
• background-color .3s ease,opacity .3s ease
• height .4s
• transform .4s,opacity .4s
• transform .4s
• none
• opacity .3s
• all .25s
• .4s ease
• all .3s ease
• opacity .3s ease,visibility .3s ease,transform .3s ease

Easing curves

• var(--swiper-wrapper-transition-timing-function, initial)
• ease-out,ease-out
• cubic-bezier(0,0,.2,1)

Keyframes

@keyframes swiper-preloader-spin { 0%{transform:rotate(0)}to{transform:rotate(360deg)} }
@keyframes spin { 0%{transform:rotate(0)}to{transform:rotate(360deg)} }
@keyframes remodal-opening-keyframes { 0%{-webkit-transform:translateY(2rem);transform:translateY(2rem);opacity:0}to{-webkit-transform:translateY(0rem);transform:translateY(0);opacity:1} }
@keyframes remodal-closing-keyframes { 0%{-webkit-transform:translateY(0rem);transform:translateY(0);opacity:1}to{-webkit-transform:translateY(2rem);transform:translateY(2rem);opacity:0} }
@keyframes remodal-overlay-opening-keyframes { 0%{opacity:0}to{opacity:1} }
@keyframes remodal-overlay-closing-keyframes { 0%{opacity:1}to{opacity:0} }
@keyframes loadingAnimation { 0%,to{transform:scale(1)}50%{transform:scale(1.5)} }
@keyframes donutAppear { to{opacity:1;transform:scale(1) rotate(0)} }
@keyframes barGrow { to{transform:scaleY(1)} }
@keyframes shake { 0%,to{transform:translate(0)}12.5%{transform:translate(-.1rem)}25%{transform:translate(.1rem)}37.5%{transform:translate(-.1rem)}50%{transform:translate(.1rem)}62.5%{transform:translate(-.1rem)}75%{transform:translate(.1rem)}87.5%{transform:translate(-.05rem)} }
@keyframes mmfadeIn { 0%{opacity:0}to{opacity:1} }
@keyframes mmfadeOut { 0%{opacity:1}to{opacity:0} }
@keyframes mmslideIn { 0%{transform:translateY(3rem);opacity:0}to{transform:translateY(0);opacity:1} }
@keyframes mmslideOut { 0%{transform:translateY(0);opacity:1}to{transform:translateY(3rem);opacity:0} }
@keyframes loading { 0%{transform:translate(-100%)}50%{transform:translate(100%)}to{transform:translate(100%)} }

Animations

• shake .5s ease-in-out
• mmfadeIn .3s cubic-bezier(0,0,.2,1)
• mmslideIn .3s cubic-bezier(0,0,.2,1)
• mmfadeOut .3s cubic-bezier(0,0,.2,1)
• mmslideOut .3s cubic-bezier(0,0,.2,1)
• loading 1.5s infinite

Components

Extracted from the page's own interactive elements (classes → resolved CSS values).

button-primary — sample text: “Онлайн-кредит Получите деньги за 1 минуту”

CTA labels found on page

• Онлайн-заявки
• Версия для слабовидящих
• Отделения и банкоматы
• Oʻzb
• Для бизнеса
• Акционерам и инвесторам

Source Design Tokens (CSS custom properties)

:root {
  --remSize: 10;
  --tabbar-height: 0px;
  --cookie-height: 0px;
  --lc-right-bottom-offset: 0px;
  --lc-center-bottom-offset: 0px;
  --sizeFactor: 1;
  --fontSizeH1: calc(var(--sizeFactor) * 4rem);
  --fontSizeH2: calc(var(--sizeFactor) * 3.2rem);
  --fontSizeH3: calc(var(--sizeFactor) * 2.4rem);
  --fontSizeH4: calc(var(--sizeFactor) * 2rem);
  --fontSizeL: calc(var(--sizeFactor) * 1.8rem);
  --fontSizeM: calc(var(--sizeFactor) * 1.6rem);
  --fontSizeS: calc(var(--sizeFactor) * 1.4rem);
  --fontSizeXS: calc(var(--sizeFactor) * 1.4rem);
  --fontSizeXXS: calc(var(--sizeFactor) * 1.2rem);
  --fontSize3XS: calc(var(--sizeFactor) * 1rem);
  --bg--gray-light: #f0f2f5;
  --bg--green-dark: #D4E9EA;
  --text--main: #202020;
  --text--secondary: #7c858d;
  --bg--white: #fff;
  --main--green-common: #1cca59;
  --main--gray-common: #5e666e;
  --bg--blue-medium: #dce2eb;
  --main--dark-green: #12873c;
  --main--green-light: #A6D9CB;
  --main--green-secondary: #568c96;
  --main--green-medium: #54a38f;
  --main--green-dark: #2f6c5c;
  --main--blue-secondary: #ebeff4;
  --main--dark-gray: #464c53;
  --bg--blue-light: #e5eaf0;
  --bg--green-light: #ecf9f5;
  --bg--green-medium: #b2ded2;
  --text--disabled: #a8aeb3;
  --main--red: #ed4949;
  --label--green: #dcf9f9;
  --label--blue: #dceff9;
  --other--gray-light: #ebebeb;
  --other--gray: #c3cdd2;
  --main--red-light: #FEE2E2;
  --text--red: #dc2626;
  --bg--red: #dc2626;
  --bg--gradient--summer--green: linear-gradient(262.46deg, #B2DED2 49.62%, #8DCEBC 105.8%), linear-gradient(94.43deg, rgba(178, 222, 210, .2) -4.63%, rgba(105, 191, 167, .2) 102.04%);
  --button: hover,.is--touch .button:hover;
  --primary: hover;
  --button-sec: hover,.is--touch .button.is--secondary:hover;
  --flat: hover;
  --text-black: hover;
  --small: hover,.is--touch .button.is--flat-gray:hover,.is--touch .navbar__inner-link:hover,.is--touch .button.is--flat.is--flat-primary:hover,.is--touch .text-black.hover--text-green:hover;
  --bg-green: hover;
  --text-white: hover;
  --secondary: active;
  --lineHeight: 1.25;
  --wf-translate-x: 0;
  --wf-translate-y: 0;
  --wf-rotate: 0;
  --wf-skew-x: 0;
  --wf-skew-y: 0;
  --wf-scale-x: 1;
}

Do's and Don'ts

Do

• Do reserve the accent #003EFF for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do set large headings in Icons,serif!important with tight tracking (-.03em), and body copy in the primary stack.
• Do stick to the detected font weight(s): 400, 500, 600, 700.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-primary: #333333;
  --color-accent: #003EFF;
  --color-background: #FFFFFF;
  --color-surface: #FFFA90;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #333333;
  --color-border: #AAAAAA;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F6F6F6;
  --color-surface-container: #F5F5F5;
  --color-surface-container-high: #EFEFEF;
  --color-surface-container-highest: #EBEFF4;
  --font-sans: Golos Text,sans-serif;
  --font-size-display: 51.2px;
  --font-size-headline-lg: 38px;
  --font-size-headline-md: 25.6px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-sm: 1.92px;
  --radius-md: 7px;
  --radius-lg: 38.4px;
  --radius-pill: 50%;
  --shadow-sm: 0 0 5px #666;
  --shadow-md: 0 .3rem 1rem #5c5c6a1c,-.2rem 1.4rem 3.7rem #5c5c6a12,-.4rem 3.6rem 11.5rem #5c5c6a0a;
  --shadow-lg: -8px -8px 8px #aaa;
  --space-xs: 3.2px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --font-display: Icons,serif!important;
  --tracking-display: -.03em;
  --container-max: 768px;
}