PageSourceSearch

https://matveyan.com/fintechdesignsystem.html

html matveyan.com collected 2026-10-06 13:13:39 UTC 32,690 bytes, 417 lines download raw bytes

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    
7    <title>Fintech Design System — Case Study | Matveyan</title>
8    <meta name="description" content="A fintech design system for mobile and web products, built to improve consistency, speed up delivery, and support complex financial interfaces." />
9    <link rel="canonical" href="https://matveyan.com/fintechdesignsystem.html" />
10    <link rel="icon" href="/favicon.ico?v=2" sizes="any" />
11    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=2" />
12    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2" />
13    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2" />
14    <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png?v=2" />
15
16    <meta property="og:title" content="Fintech Design System — Case Study | Matveyan" />
17    <meta property="og:description" content="A fintech design system for mobile and web products, built to improve consistency, speed up delivery, and support complex financial interfaces." />
18    <meta property="og:url" content="https://matveyan.com/fintechdesignsystem.html" />
19
20    <meta name="twitter:title" content="Fintech Design System — Case Study | Matveyan" />
21    <meta name="twitter:description" content="A fintech design system for mobile and web products, built to improve consistency, speed up delivery, and support complex financial interfaces." />
22
23    
23<script>document.documentElement.classList.add('boot-loading');</script>
23
24    <style>
25      html, body { margin: 0; background: #0f0f0f; }
26      .loader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: transparent; overflow: hidden; }
27      .boot-loading .loader { background: #0f0f0f; }
28      .loaderContent { position: absolute; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 20px; transform: translate(-50%, -50%); }
29      .loaderContent svg { display: block; width: 30px; height: auto; }
30      .loadline { position: relative; width: 200px; height: 1px; overflow: hidden; background: rgb(255 255 255 / 10%); }
31      .loading-bar { position: absolute; inset: 0 auto 0 0; width: 0%; height: 1px; background: #fff; }
32      .loadpercent { font-family: monospace; font-size: 12px; letter-spacing: 1px; color: #fff; }
33      .boot-loading body > :not(.loader) { opacity: 0 !important; visibility: hidden !important; }
34      .boot-loading #wave { opacity: 0 !important; visibility: hidden !important; }
35    </style>
36    <!-- Yandex.Metrika counter -->
37<script type="text/javascript">
38    (function(m,e,t,r,i,k,a){
39        m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
40        m[i].l=1*new Date();
41        for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
42        k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)
43    })(window, document,'script','https://mc.yandex.ru/metrika/tag.js?id=109113160', 'ym');
44
45    ym(109113160, 'init', {ssr:true, clickmap:true, referrer: document.referrer, url: location.href, accurateTrackBounce:true, trackLinks:true});
46</script>
46
47<!-- /Yandex.Metrika counter -->
48    
48<script type="module" crossorigin src="/assets/style-BKWkXVu2.js"></script>
48
49    <link rel="preload" crossorigin href="/assets/style-9zQ37i4M.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" crossorigin href="/assets/style-9zQ37i4M.css"></noscript>
50  </head>
51  <body class="inner">
52    <noscript><div><img src="https://mc.yandex.ru/watch/109113160" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
53    <div class="loader" aria-hidden="true">
54      <div class="loading-screen loading-screen--top"></div>
55      <div class="loading-screen loading-screen--bottom"></div>
56      <div class="loaderContent" id="loadingContent">
57        <svg width="49" height="35" viewBox="0 0 49 35" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
58          <path d="M14 7V35L0 28V0L14 7ZM31.5 7V35L17.5 28V0L31.5 7ZM49 7V35L35 28V0L49 7Z" fill="white"/>
59        </svg>
60        <div class="loadline">
61          <div class="loading-bar"></div>
62        </div>
63        <span class="loadpercent">0%</span>
64      </div>
65    </div>
66    <div class="coursor"></div>
67    <div class="frameScreen">
68      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topleft">
69        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
70      </svg>      
71      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topright">
72        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
73      </svg>    
74      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomleft">
75        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
76      </svg>    
77      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomright">
78        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
79      </svg>        
80      <div class="header">
81        <div class="logoBlock">
82          <a href="/">
83          <svg width="94" height="14" viewBox="0 0 94 14" fill="none" xmlns="http://www.w3.org/2000/svg">
84            <path d="M93.0507 2.59961C93.1067 2.59961 93.1507 2.61561 93.1827 2.64761C93.2147 2.67961 93.2307 2.72361 93.2307 2.77961V10.8196C93.2307 10.8756 93.2147 10.9196 93.1827 10.9516C93.1507 10.9836 93.1067 10.9996 93.0507 10.9996H91.6827C91.5747 10.9996 91.5027 10.9596 91.4667 10.8796L88.7967 5.10161V10.8196C88.7967 10.8756 88.7787 10.9196 88.7427 10.9516C88.7107 10.9836 88.6687 10.9996 88.6167 10.9996H87.5667C87.5107 10.9996 87.4667 10.9836 87.4347 10.9516C87.4027 10.9196 87.3867 10.8756 87.3867 10.8196V2.77961C87.3867 2.72361 87.4027 2.67961 87.4347 2.64761C87.4667 2.61561 87.5107 2.59961 87.5667 2.59961H88.9347C89.0427 2.59961 89.1147 2.63961 89.1507 2.71961L91.8207 8.49761V2.77961C91.8207 2.72361 91.8367 2.67961 91.8687 2.64761C91.9047 2.61561 91.9487 2.59961 92.0007 2.59961H93.0507Z" fill="white"/>
85            <path d="M86.2371 10.7956C86.2731 10.9316 86.2251 10.9996 86.0931 10.9996H84.8691C84.7531 10.9996 84.6851 10.9516 84.6651 10.8556L84.3291 9.48761H81.5211L81.1851 10.8556C81.1651 10.9516 81.0971 10.9996 80.9811 10.9996H79.7631C79.6271 10.9996 79.5791 10.9316 79.6191 10.7956L81.7431 2.74361C81.7751 2.64761 81.8451 2.59961 81.9531 2.59961H83.8971C84.0051 2.59961 84.0751 2.64761 84.1071 2.74361L86.2371 10.7956ZM81.8511 8.14361H83.9991L83.0331 4.21961H82.8171L81.8511 8.14361Z" fill="white"/>
86            <path d="M71.3431 2.59961C71.4151 2.59961 71.4611 2.61961 71.4811 2.65961C71.5051 2.69961 71.4991 2.75161 71.4631 2.81561L68.9431 7.65161V10.8196C68.9431 10.8756 68.9271 10.9196 68.8951 10.9516C68.8631 10.9836 68.8191 10.9996 68.7631 10.9996H67.5511C67.4951 10.9996 67.4511 10.9836 67.4191 10.9516C67.3871 10.9196 67.3711 10.8756 67.3711 10.8196V7.62761L64.8511 2.81561C64.8151 2.75161 64.8071 2.69961 64.8271 2.65961C64.8511 2.61961 64.8991 2.59961 64.9711 2.59961H66.2431C66.3511 2.59961 66.4231 2.63961 66.4591 2.71961L68.1571 6.16961L69.8551 2.71961C69.8911 2.63961 69.9631 2.59961 70.0711 2.59961H71.3431Z" fill="white"/>
87            <path d="M63.4093 9.60761C63.4653 9.60761 63.5093 9.62361 63.5413 9.65561C63.5733 9.68761 63.5893 9.73161 63.5893 9.78761V10.8196C63.5893 10.8756 63.5733 10.9196 63.5413 10.9516C63.5093 10.9836 63.4653 10.9996 63.4093 10.9996H58.2073C58.1553 10.9996 58.1113 10.9836 58.0753 10.9516C58.0433 10.9196 58.0273 10.8756 58.0273 10.8196V2.77961C58.0273 2.72361 58.0433 2.67961 58.0753 2.64761C58.1113 2.61561 58.1553 2.59961 58.2073 2.59961H63.3973C63.4533 2.59961 63.4973 2.61561 63.5293 2.64761C63.5613 2.67961 63.5773 2.72361 63.5773 2.77961V3.81161C63.5773 3.86761 63.5613 3.91161 63.5293 3.94361C63.4973 3.97561 63.4533 3.99161 63.3973 3.99161H59.5933V6.00161H63.0913C63.1433 6.00161 63.1853 6.01961 63.2173 6.05561C63.2533 6.08761 63.2713 6.12961 63.2713 6.18161V7.21961C63.2713 7.27561 63.2533 7.31961 63.2173 7.35161C63.1853 7.38361 63.1433 7.39961 63.0913 7.39961H59.5933V9.60761H63.4093Z" fill="white"/>
88            <path d="M55.1339 2.74361C55.1539 2.64761 55.2219 2.59961 55.3379 2.59961H56.5619C56.6939 2.59961 56.7419 2.66761 56.7059 2.80361L54.5759 10.8556C54.5439 10.9516 54.4739 10.9996 54.3659 10.9996H52.4219C52.3139 10.9996 52.2439 10.9516 52.2119 10.8556L50.0879 2.80361C50.0479 2.66761 50.0959 2.59961 50.2319 2.59961H51.4499C51.5659 2.59961 51.6339 2.64761 51.6539 2.74361L53.2859 9.37361H53.5019L55.1339 2.74361Z" fill="white"/>
89            <path d="M48.9219 2.59961C48.9779 2.59961 49.0219 2.61561 49.0539 2.64761C49.0859 2.67961 49.1019 2.72361 49.1019 2.77961V3.81161C49.1019 3.86761 49.0859 3.91161 49.0539 3.94361C49.0219 3.97561 48.9779 3.99161 48.9219 3.99161H46.7979V10.8196C46.7979 10.8756 46.7819 10.9196 46.7499 10.9516C46.7179 10.9836 46.6739 10.9996 46.6179 10.9996H45.4059C45.3499 10.9996 45.3059 10.9836 45.2739 10.9516C45.2419 10.9196 45.2259 10.8756 45.2259 10.8196V3.99161H43.1019C43.0459 3.99161 43.0019 3.97561 42.9699 3.94361C42.9379 3.91161 42.9219 3.86761 42.9219 3.81161V2.77961C42.9219 2.72361 42.9379 2.67961 42.9699 2.64761C43.0019 2.61561 43.0459 2.59961 43.1019 2.59961H48.9219Z" fill="white"/>
90            <path d="M41.9402 10.7956C41.9762 10.9316 41.9282 10.9996 41.7962 10.9996H40.5722C40.4562 10.9996 40.3882 10.9516 40.3682 10.8556L40.0322 9.48761H37.2242L36.8882 10.8556C36.8682 10.9516 36.8002 10.9996 36.6842 10.9996H35.4662C35.3302 10.9996 35.2822 10.9316 35.3222 10.7956L37.4462 2.74361C37.4782 2.64761 37.5482 2.59961 37.6562 2.59961H39.6002C39.7082 2.59961 39.7782 2.64761 39.8102 2.74361L41.9402 10.7956ZM37.5542 8.14361H39.7022L38.7362 4.21961H38.5202L37.5542 8.14361Z" fill="white"/>
91            <path d="M28.473 10.9996C28.421 10.9996 28.377 10.9836 28.341 10.9516C28.309 10.9196 28.293 10.8756 28.293 10.8196V2.77961C28.293 2.72361 28.309 2.67961 28.341 2.64761C28.377 2.61561 28.421 2.59961 28.473 2.59961H29.721C29.849 2.59961 29.921 2.63961 29.937 2.71961L31.203 9.25961H31.287L32.553 2.71961C32.569 2.63961 32.641 2.59961 32.769 2.59961H34.017C34.069 2.59961 34.111 2.61561 34.143 2.64761C34.179 2.67961 34.197 2.72361 34.197 2.77961V10.8196C34.197 10.8756 34.179 10.9196 34.143 10.9516C34.111 10.9836 34.069 10.9996 34.017 10.9996H33.087C33.031 10.9996 32.987 10.9836 32.955 10.9516C32.923 10.9196 32.907 10.8756 32.907 10.8196V5.78561H32.823L31.803 10.8556C31.787 10.9516 31.717 10.9996 31.593 10.9996H30.897C30.773 10.9996 30.703 10.9516 30.687 10.8556L29.667 5.78561H29.583V10.8196C29.583 10.8756 29.567 10.9196 29.535 10.9516C29.503 10.9836 29.459 10.9996 29.403 10.9996H28.473Z" fill="white"/>
92            <path fill-rule="evenodd" clip-rule="evenodd" d="M5.59961 2.7998V14L0 11.2002V0L5.59961 2.7998ZM12.5996 2.7998V14L7 11.2002V0L12.5996 2.7998ZM19.5996 2.7998V14L14 11.2002V0L19.5996 2.7998Z" fill="white"/>
93            </svg>
94          </a>
95          <svg id="wave" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 38.05" data-cursor-text="Enable sound">
96            <title>Audio Wave</title>
97            <path id="Line_1" data-name="Line 1" d="M0.91,15L0.78,15A1,1,0,0,0,0,16v6a1,1,0,1,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H0.91Z"/>
98            <path id="Line_2" data-name="Line 2" d="M6.91,9L6.78,9A1,1,0,0,0,6,10V28a1,1,0,1,0,2,0s0,0,0,0V10A1,1,0,0,0,7,9H6.91Z"/>
99            <path id="Line_3" data-name="Line 3" d="M12.91,0L12.78,0A1,1,0,0,0,12,1V37a1,1,0,1,0,2,0s0,0,0,0V1a1,1,0,0,0-1-1H12.91Z"/>
100            <path id="Line_4" data-name="Line 4" d="M18.91,10l-0.12,0A1,1,0,0,0,18,11V27a1,1,0,1,0,2,0s0,0,0,0V11a1,1,0,0,0-1-1H18.91Z"/>
101            <path id="Line_5" data-name="Line 5" d="M24.91,15l-0.12,0A1,1,0,0,0,24,16v6a1,1,0,0,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H24.91Z"/>
102            <path id="Line_6" data-name="Line 6" d="M30.91,10l-0.12,0A1,1,0,0,0,30,11V27a1,1,0,1,0,2,0s0,0,0,0V11a1,1,0,0,0-1-1H30.91Z"/>
103            <path id="Line_7" data-name="Line 7" d="M36.91,0L36.78,0A1,1,0,0,0,36,1V37a1,1,0,1,0,2,0s0,0,0,0V1a1,1,0,0,0-1-1H36.91Z"/>
104            <path id="Line_8" data-name="Line 8" d="M42.91,9L42.78,9A1,1,0,0,0,42,10V28a1,1,0,1,0,2,0s0,0,0,0V10a1,1,0,0,0-1-1H42.91Z"/>
105            <path id="Line_9" data-name="Line 9" d="M48.91,15l-0.12,0A1,1,0,0,0,48,16v6a1,1,0,1,0,2,0s0,0,0,0V16a1,1,0,0,0-1-1H48.91Z"/>
106          </svg>
107        </div>
108        <ul class="mainMenu">
109          <li><a href="cv.pdf" class="link" target="_blank" rel="noopener noreferrer">cv <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
110            <path d="M4 0H0L4 4V0Z" fill="white"/>
111            </svg>
112            </a></li>
113          <li><a href="https://www.behance.net/matart" class="link" target="_blank" rel="noopener noreferrer">behance <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
114            <path d="M4 0H0L4 4V0Z" fill="white"/>
115            </svg>
116            </a></li>
117          <li><a href="https://dribbble.com/MatveyAnanev" class="link" target="_blank" rel="noopener noreferrer">dribbble <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
118            <path d="M4 0H0L4 4V0Z" fill="white"/>
119            </svg>
120            </a></li>
121          <li><a href="https://www.linkedin.com/in/matveyan/" class="link" target="_blank" rel="noopener noreferrer">linkedin <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
122            <path d="M4 0H0L4 4V0Z" fill="white"/>
123            </svg>
124            </a></li>
125            <li><a href="mailto:[email protected]" class="link" target="_blank" rel="noopener noreferrer">Mail <svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
126              <path d="M4 0H0L4 4V0Z" fill="white"/>
127              </svg>
128              </a></li>
129        </ul>          
130        <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomleft">
131          <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
132        </svg>    
133        <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomright">
134          <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
135        </svg>        
136      </div>
137      </div>
138
139    <div class="bgCase caseDs"></div>
140    <div class="edge-blur" aria-hidden="true">
141      <div class="edge-blur__top"></div>
142      <div class="edge-blur__bottom"></div>
143    </div>
144    
145    
146      <div class="noise"></div>
147
148
149      <div class="section headcase">
150        <div class="container caseheader">
151          <ul class="breadcrumbs">
152            <li><a href="/">Home</a></li>
153            <li>Fintech Design System</li>
154          </ul>
155          <h1>Fintech Design System</h1>
156          <p>I developed a design system for mobile applications and websites. This design system is primarily intended for financial products, thanks to industry-specific components such as product cards, charts, and tables. The design system consists of Figma components, documentation, a web implementation in React, and a mobile implementation in React Native.</p>
157        </div>
158      </div>
159
160      <div class="section">
161        <div class="container casecontainer" data-motion-text>
162          <div class="casedescription">
163            <h2>Overview</h2>
164            <p>A scalable design system for fintech products across mobile apps and web interfaces. I designed and built a design system for financial products, covering Figma components, documentation, React implementation, and React Native implementation. The system is focused on complex fintech interfaces: product cards, charts, tables, states, templates, and reusable patterns for both customer-facing and operational products.</p>
165          </div>
166        </div>
167      </div>
168      <div class="section">
169        <div class="container casecontainer" data-motion-text>
170          <div class="casedescription">
171            <h2>Problem</h2>
172            <p>Fintech products often need to support dense data, multiple platforms, strict consistency, and fast product iteration. The goal was to create a flexible system that could work across web, iOS, and Android while staying easy to customize for different product teams and brand directions.</p>
173          </div>
174        </div>
175      </div>
176      <div class="section">
177        <div class="container casecontainer" data-motion-text>
178          <div class="casedescription">
179            <h2>Solution</h2>
180            <p>I worked on the system end to end: structure, component architecture, Figma Variables, documentation, design guidelines, and implementation logic for web and mobile.</p>
181          </div>
182        </div>
183      </div>
184      <div class="section">
185        <div class="container casecontainer" data-motion-text>
186          <div class="casedescription">
187            <h2>Principles</h2>
188            <p>The system is built around atomic design and design tokens. Colors, typography, spacing, radius, and platform-specific values are managed through Figma Variables, making the system easy to adapt without rebuilding components manually.</p>
189              <p>This approach allows teams to switch between light and dark themes, adjust visual style, and adapt Android layouts to iOS patterns with minimal effort.</p>
190          </div>
191          <div class="images">
192            <img src="/assets/1-Bgxr1Slx.jpg" alt="Fintech Design System principles screen" title="Fintech Design System principles screen">
193            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topleft">
194        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
195      </svg>      
196      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topright">
197        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
198      </svg>    
199      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomleft">
200        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
201      </svg>    
202      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomright">
203        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
204      </svg>        
205          </div>
206        </div>
207      </div>
208      <div class="section">
209        <div class="container casecontainer" data-motion-text>
210          <div class="casedescription">
211            <h2>Typography</h2>
212            <p>Typography is tokenized across platforms. The system uses native system fonts for iOS, Android, and web, helping interfaces feel familiar on each platform while keeping the design language consistent.
213
214              </p><p>Text styles are structured so teams can quickly switch between platform presets and maintain predictable hierarchy across product screens.</p>
215          </div>
216          <div class="images">
217            <img src="/assets/2-Dhf8A7gs.jpg" alt="Fintech Design System fonts screen" title="Fintech Design System fonts screen">
218            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topleft">
219              <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
220            </svg>      
221            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topright">
222              <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
223            </svg>    
224            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomleft">
225              <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
226            </svg>    
227            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomright">
228              <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
229            </svg>        
230          </div>
231        </div>
232      </div>
233      <div class="section">
234        <div class="container casecontainer" data-motion-text>
235          <div class="casedescription">
236            <h2>Components</h2>
237            <p>The library includes more than 40 basic components with documented states, variants, and interaction patterns.</p>
238            <p>It also includes more than 20 fintech-specific components designed for financial products, including product cards, charts, tables, data displays, and other interface patterns commonly used in banking, trading, and investment products.</p>
239          </div>
240        </div>
241      </div>
242      <div class="section">
243        <div class="container casecontainer" data-motion-text>
244          <div class="casedescription">
245            <h2>Documentation & Guidelines</h2>
246            <p>Each component is documented with usage guidelines, states, examples, and implementation notes. Documentation is split into two tracks:</p>
247            <p><b>Designer documentation:</b> component behavior, variants, states, layout rules, and usage examples</p>
248            <p><b>Developer documentation:</b> implementation guidance, props, states, and reusable patterns</p>
249            <p>The system also documents common product scenarios such as error states, loading states, empty states, templates, transitions, and animation behavior.</p>
250          </div>
251          <div class="images">
252            <img src="/assets/3-D-S2nodK.jpg" alt="Fintech Design System documentation and guidelines screen" title="Fintech Design System documentation and guidelines screen">
253            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topleft">
254        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
255      </svg>      
256      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topright">
257        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
258      </svg>    
259      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomleft">
260        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
261      </svg>    
262      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomright">
263        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
264      </svg>        
265          </div>
266        </div>
267      </div>
268      <div class="section">
269        <div class="container casecontainer" data-motion-text>
270          <div class="casedescription">
271            <h2>Basic components</h2>
272            <p>More than 40 components with all states, documentation and animation</p>
273          </div>
274          <div class="images">
275            <img src="/assets/4-D032CjVg.jpg" alt="Fintech Design System basic components screen" title="Fintech Design System basic components screen">
276            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topleft">
277        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
278      </svg>      
279      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topright">
280        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
281      </svg>    
282      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomleft">
283        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
284      </svg>    
285      <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomright">
286        <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
287      </svg>        
288          </div>
289        </div>
290      </div>
291      <div class="section">
292        <div class="container casecontainer" data-motion-text>
293          <div class="casedescription">
294            <h2>Specific components</h2>
295            <p>More than 20 components with all states, documentation and animation</p>
296          </div>
297          <div class="images">
298            <img src="/assets/5-CH4RFsGt.jpg" alt="Fintech Design System specific components screen" title="Fintech Design System specific components screen">
299            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topleft">
300              <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
301            </svg>      
302            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topright">
303              <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
304            </svg>    
305            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomleft">
306              <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
307            </svg>    
308            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomright">
309              <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
310            </svg>        
311          </div>
312        </div>
313      </div>
314
315      <div class="section">
316        <div class="container casecontainer" data-motion-text>
317          <div class="casedescription">
318            <h2>Examples</h2>
319            <p>Components are easily customizable — with just a few clicks and minor code changes, you can adjust the color palette, spacing, border radius, and more.</p>
320          </div>
321          <div class="images">
322            <img src="/assets/6-CbYCjHus.jpg" alt="Fintech Design System examples screen 1" title="Fintech Design System examples screen 1">
323            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topleft">
324              <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
325            </svg>      
326            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topright">
327              <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
328            </svg>    
329            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomleft">
330              <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
331            </svg>    
332            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomright">
333              <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
334            </svg>        
335          </div>
336          <div class="images">
337            <img src="/assets/7-BmnHh57k.jpg" alt="Fintech Design System examples screen 2" title="Fintech Design System examples screen 2">
338            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topleft">
339              <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
340            </svg>      
341            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="topright">
342              <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
343            </svg>    
344            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomleft">
345              <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
346            </svg>    
347            <svg width="5" height="5" viewBox="0 0 5 5" fill="none" xmlns="http://www.w3.org/2000/svg" class="bottomright">
348              <path d="M3 2H5V3H3V5H2V3H0V2H2V0H3V2Z" fill="#D9D9D9"/>
349            </svg>        
350          </div>
351        </div>
352      </div>
353
354      <div class="section">
355        <div class="container casecontainer" data-motion-text>
356          <div class="casedescription">
357            <h2>Impact</h2>
358            <p>Reduced time spent recreating common fintech UI patterns</p>
359            <p>Improved consistency across web, iOS, and Android</p>
360            <p>Created a shared language between design and engineering</p>
361            <p>Made theme and platform adaptation faster through tokens and variables</p>
362          </div>
363        </div>
364      </div>
365
366      <div class="section lalalast">
367        <div class="container last" data-motion-text>
368          <h2>Available for full-time product design roles</h2>
369          <p>If you’re hiring a senior designer for fintech, trading, or complex digital products, let’s talk.</p>
370              <ul class="mainMenu" >
371                <li><a target="_blank" rel="noopener noreferrer" href="https://www.linkedin.com/in/matveyan/" class="link">Linkedin<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
372                  <path d="M4 0H0L4 4V0Z" fill="white"/>
373                  </svg>
374                  </a></li>
375                <li><a target="_blank" rel="noopener noreferrer" href="https://www.behance.net/matart" class="link">Behance<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
376                  <path d="M4 0H0L4 4V0Z" fill="white"/>
377                  </svg>
378                  </a></li>
379                <li><a target="_blank" rel="noopener noreferrer" href="https://dribbble.com/MatveyAnanev" class="link">Dribbble<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
380                  <path d="M4 0H0L4 4V0Z" fill="white"/>
381                  </svg>
382                  </a></li>
383                <li><a target="_blank" rel="noopener noreferrer" href="mailto:[email protected]" class="link">Mail<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
384                  <path d="M4 0H0L4 4V0Z" fill="white"/>
385                  </svg>
386                  </a></li>
387                <li><a target="_blank" rel="noopener noreferrer" href="https://t.me/MatveyAnanev" class="link">Telegram<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
388                  <path d="M4 0H0L4 4V0Z" fill="white"/>
389                  </svg>
390                  </a></li>
391                <li><a target="_blank" rel="noopener noreferrer" href="https://t.me/fintechuien" class="link">Telegram channel<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
392                  <path d="M4 0H0L4 4V0Z" fill="white"/>
393                  </svg>
394                  </a></li>
395                <li><a target="_blank" rel="noopener noreferrer" href="https://x.com/MAnanev38201" class="link">X<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
396                  <path d="M4 0H0L4 4V0Z" fill="white"/>
397                  </svg>
398                  </a></li>
399              </ul>   
400              <img src="/assets/avatar-BLowVkpa.png" alt="Portrait of Matvey Ananev, fintech designer" title="Portrait of Matvey Ananev, fintech designer">
401          </div>
402          <div class="container vse" data-motion-text>
403            <svg viewBox="0 0 190 22" fill="none" xmlns="http://www.w3.org/2000/svg">
404              <path d="M189.675 0V21.8182H184.732L176.848 10.3551H176.72V21.8182H170.797V0H175.825L183.581 11.4205H183.751V0H189.675Z" fill="white"/>
405              <path d="M150.587 21.8182H144.195L151.397 0H159.494L166.695 21.8182H160.303L155.531 6.00852H155.36L150.587 21.8182ZM149.394 13.2102H161.411V17.642H149.394V13.2102Z" fill="white"/>
406              <path d="M121.312 0H127.918L132.179 8.86364H132.349L136.611 0H143.216L135.205 14.9574V21.8182H129.324V14.9574L121.312 0Z" fill="white"/>
407              <path d="M101.543 21.8182V0H117.267V4.77273H107.466V8.52273H116.458V13.2955H107.466V17.0455H117.225V21.8182H101.543Z" fill="white"/>
408              <path d="M81.6357 0L86.1101 15.3835H86.2805L90.755 0H97.4453L90.2436 21.8182H82.147L74.9453 0H81.6357Z" fill="white"/>
409              <path d="M52.4766 4.77273V0H71.4396V4.77273H64.8771V21.8182H59.0391V4.77273H52.4766Z" fill="white"/>
410              <path d="M35.6186 21.8182H29.2266L36.4283 0H44.5249L51.7266 21.8182H45.3345L40.5618 6.00852H40.3913L35.6186 21.8182ZM34.4254 13.2102H46.4425V17.642H34.4254V13.2102Z" fill="white"/>
411              <path d="M0 0H7.37216L12.4432 12.358H12.6989L17.7699 0H25.142V21.8182H19.3466V9.20455H19.1761L14.3182 21.6477H10.8239L5.96591 9.11932H5.79545V21.8182H0V0Z" fill="white"/>
412              </svg>          
413          </div>
414      </div>  
415  
416  </body>
417</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.