Design System Component Library Game Fintech

Design systems

Unified rules for large digital products: color, typography, components, states and interaction patterns. Two real interface systems are gathered here — for a card game service and for a fintech product.

01 / scale

Two finished design systems brought together into one component library

2design systems: a game service and a fintech product.

9sections of the component library — from color and font to icons and tags.

8interface screens: transactions, payment streams, editing.

3mobile screens — a responsive payment flow on iPhone.

02 / game service · Serbia

A dark interface system for a card game service

🎮 Card Game Game service · Serbia

Typographic scale, colors, icons, betting states and gameplay messages — a complete design system assembled on one canvas.

Full design system of the game service — 01 — Design systemTypography, colors, icons, buttons and betting states on one canvas.

03 / fintech service · Cyprus

A modular library for a fintech product

💳 ASAP Cashier Payment service · Cyprus

From basic tokens to complex tables, transactions, payment streams and adaptive working screens — the library is shown in full, uncropped.

Component library — 9 sections

Color palette of the financial service — 01Color — primary and secondary palette, statuses and gradients.

Typography of the financial service — 02Font — typographic scale and font weights.

Icons of the financial service — 03Icons — interface icon library.

Buttons of the financial service — 04Buttons — states, sizes and button variants.

Menu and pagination of the financial service — 05Menu & Pagination — menu and pagination components.

Input fields of the financial service — 06Input Fields — input fields and their states.

Frames of the financial service — 07Frames — card and container frames.

Tags and links of the financial service — 08Tags & Links — tags, badges and text links.

Flags and logos of the financial service — 09Flags & Logos — country flags and payment system logos.

Product interface — 8 screens

Checkout screen — 01 — TransactionCheckout: payment method, card details and order summary.

Expanded list of payment methods — 02 — Payment methodExpanded list of payment methods: card, bank transfer, wallets.

ASAP Cashier · customise

03 — CustomiseWidget customization panel: font, colors, corner radius and button text.

ASAP Cashier · customise + logo

04 — Customise + logoThe same panel after uploading the company logo.

Payment acceptance rule builder — 05 — Payment streamsA rule builder for accepting payments by country, currency and card type.

Editing a payment acceptance rule — 06 — Streams · editEditing a rule: the set of conditions expands right in the list.

Detailed transaction card — 07 — Transaction detailA detailed transaction card with Approve / Reject statuses.

Transaction list with filters and pagination — 08 — TransactionsA transaction list with filters, statuses and pagination.

Mobile payment flow — 3 screens

Mobile checkout screen

Transaction

Mobile payment method selection, step 1 of 2

Payment method · 1/2

Mobile card details entry, step 2 of 2

Card details · 2/2

Discuss a project

Need a website or app design?

Tell me about the project and audience — I will propose the structure, scope, timeline and price.

Order website design

04 / other service projects

Arc Suite

UX/UI and product design for four apps in the agent-based USDC economy.

Product Dashboards Web3

TeraHash

Design for a Bitcoin-native yield layer site: hashrate staking, dual-token, dark theme, 3D.

Website BTCfi Landing

Maksutov

A case study of the studio's own website: 251 static pages in four languages, no CMS, no framework.

Self-projectSEOi18n

Mobile Apps

A drinks and recipes catalog for the Monin brand: onboarding, search, recipe card.

Mobile iOS/Android Product