Copied

hey@maharram.xyz

Virtual UI (Design System)

Bank VTB Azerbaijan

I developed VTB Online, a comprehensive internet banking project for Bank VTB Azerbaijan. The main objective was to create an intuitive and user-friendly online banking service. Although I can't display the entire design here, I included some main screens to give you a glimpse of the interface and functionality.

Color Tokens

Element Tokens

Token Name

Light

Dark

gray-dark

Neutral/1200

Neutral/200

gray-default

Neutral/900

Neutral/300

gray-light

Neutral/800

Neutral/800

gray-lighter

Neutral/300

Neutral/900

gray-bg

Neutral/200

Neutral/1200

blue-darker

Blue/1100

Blue/100

blue-dark

Blue/900

Blue/300

blue-default

Blue/700

Blue/700

blue-light

Blue/300

Blue/900

blue-lighter

Blue/100

Blue/1100

red-darker

Red/1100

Red/100

red-dark

Red/900

Red/300

red-default

Red/800

Red/800

red-light

Red/300

Red/900

red-lighter

Red/100

Red/1100

green-darker

Green/1200

Green/100

green-dark

Green/900

Green/300

green-default

Green/700

Green/900

green-light

Green/300

Green/1000

green-lighter

Green/100

Green/1200

orange-darker

Yellow/1200

Yellow/100

orange-dark

Yellow/900

Yellow/300

orange-default

Yellow/800

Yellow/700

orange-light

Yellow/300

Yellow/900

orange-lighter

Yellow/100

Yellow/1200

purple-darker

Purple/1200

Purple/100

purple-dark

Purple/900

Purple/300

purple-default

Purple/700

Purple/700

purple-light

Purple/300

Purple/900

purple-lighter

Purple/100

Purple/1200

surface-dark

Neutral/1100

Neutral/300

surface-dark helper

Neutral/1000

30394C 40 %

surface-bg

Neutral/200

Neutral/1200

surface-main helper

Neutral/300

Neutral/800

surface-main

Neutral/100

Neutral/100

surface-alpha

FFFFFF 64 %

1C2026 64 %

text-main

Neutral/1100

Neutral/100

text-sub

Neutral/700

Neutral/500

text-disabled

Neutral/500

Neutral/700

text-white

Neutral/100

Neutral/1100

icon-main

Neutral/1100

Neutral/100

icon-sub

Neutral/700

Neutral/500

icon-disabled

Neutral/500

Neutral/700

icon-white

Neutral/100

Neutral/1100

bs-dark

Neutral/1100

Neutral/1100

bs-main

Neutral/400

Neutral/900

bs-sub

Neutral/300

Neutral/300

bs-white

Neutral/100

Neutral/1100

Logo-light blue

00AAFF

00AAFF

Logo-dark blue

0A2896

0A2896

White

FFFFFF

FFFFFF

Color Tokens

Element Tokens

Token Name

Light

Dark

gray-dark

Neutral/1200

Neutral/200

gray-default

Neutral/900

Neutral/300

gray-light

Neutral/800

Neutral/800

gray-lighter

Neutral/300

Neutral/900

gray-bg

Neutral/200

Neutral/1200

blue-darker

Blue/1100

Blue/100

blue-dark

Blue/900

Blue/300

blue-default

Blue/700

Blue/700

blue-light

Blue/300

Blue/900

blue-lighter

Blue/100

Blue/1100

red-darker

Red/1100

Red/100

red-dark

Red/900

Red/300

red-default

Red/800

Red/800

red-light

Red/300

Red/900

red-lighter

Red/100

Red/1100

green-darker

Green/1200

Green/100

green-dark

Green/900

Green/300

green-default

Green/700

Green/900

green-light

Green/300

Green/1000

green-lighter

Green/100

Green/1200

orange-darker

Yellow/1200

Yellow/100

orange-dark

Yellow/900

Yellow/300

orange-default

Yellow/800

Yellow/700

orange-light

Yellow/300

Yellow/900

orange-lighter

Yellow/100

Yellow/1200

purple-darker

Purple/1200

Purple/100

purple-dark

Purple/900

Purple/300

purple-default

Purple/700

Purple/700

purple-light

Purple/300

Purple/900

purple-lighter

Purple/100

Purple/1200

surface-dark

Neutral/1100

Neutral/300

surface-dark helper

Neutral/1000

30394C 40 %

surface-bg

Neutral/200

Neutral/1200

surface-main helper

Neutral/300

Neutral/800

surface-main

Neutral/100

Neutral/100

surface-alpha

FFFFFF 64 %

1C2026 64 %

text-main

Neutral/1100

Neutral/100

text-sub

Neutral/700

Neutral/500

text-disabled

Neutral/500

Neutral/700

text-white

Neutral/100

Neutral/1100

icon-main

Neutral/1100

Neutral/100

icon-sub

Neutral/700

Neutral/500

icon-disabled

Neutral/500

Neutral/700

icon-white

Neutral/100

Neutral/1100

bs-dark

Neutral/1100

Neutral/1100

bs-main

Neutral/400

Neutral/900

bs-sub

Neutral/300

Neutral/300

bs-white

Neutral/100

Neutral/1100

Logo-light blue

00AAFF

00AAFF

Logo-dark blue

0A2896

0A2896

White

FFFFFF

FFFFFF

Learn more about How I made and used Tokens in Virtual UI

Learn more about How I made and used Tokens in Virtual UI

Buttons

2 versions

3 sizes

10 customizable settings

Button

Button

Full list of Button instances

Full list of Button instances

Inputs

7 versions

8 states

14 customizable settings

Your name

I'm not tracking the data you typing.

Your name

I'm not tracking the data you typing.

Full list of Input instances

Full list of Input instances

Dropdown

2 sizes

5 states

5 customizable settings

Select anything

I'm not tracking the data you typing.

Select anything

I'm not tracking the data you typing.

Full list of Dropdown instances

Full list of Dropdown instances

Check Box & Radio Button

2 sizes

5 states

5 customizable settings

Check Box

Check Box

Radio Button

Radio Button

Full list of Check Box & Radio Button instances

Full list of Check Box & Radio Button instances

Toast

2 versions

3 sizes

10 customizable settings

Open Toast

Open Toast

Full list of Toast instances

Full list of Toast instances

Tab Component

2 sizes

5 states

5 customizable settings

Cards

Loans

Deposits

Accounts

Cards

Loans

Deposits

Accounts

Version 1

Menu 1

Menu 2

Menu 3

Menu 1

Menu 2

Menu 3

Version 2

You have explored Virtual UI, our design system at Bank VTB Azerbaijan. Virtual UI ensures consistency, efficiency, and a superior user experience across all our platforms. This design system has been instrumental in developing our internet banking services. By leveraging Virtual UI, we streamline our design and development processes, ensuring that every component aligns with our brand and usability standards. Want to explore more about Virtual UI? you can check the VTB Online project in my portfolio to see Virtual UI on the go.

VTB Online

Want to learn more about Virtual UI?

Virtual UI was specially made for VTB Online, our internet banking service.

VTB Online

Want to learn more about Virtual UI?

Virtual UI was specially made for VTB Online, our internet banking service.