Hierarchy
Key amounts and actions stand out from explanations and service data.
YousoroFinance · Brand system 2026.10
The visual system
The visual system
YousoroFinance
Everything the product is built from: logo, colour, type, components and rules. Live examples you can touch, and colours you can copy with one click.
Ether
Malachite
Light
Dark
Try the designs
01
Brand foundation
Money is numbers.
We make them clear.
Precision
Amounts, dates, statuses and sources are shown without ambiguous wording.
Consistency
The same states look and work the same in every section.
Clarity
Every term has an “i” hint in plain words. No riddles.
02
Logo and mark
#FBFDFB · on #071714
Brand colour · on #F3F6F2
#FFFFFF · on Mint → Forest
App icon and avatar
Clear space — at least the height of the mark
- Do not stretch or squash
- Do not recolour at will
- Do not place on busy backgrounds without a plate
- Do not add shadows or glow
03
Colour system
One identity.
Three contexts.
Switch the context to see the real tokens. Click a colour to copy its HEX.
Primary cards
Each section of the dashboard opens with its own saturated gradient card. The section is recognised without reading the title.
Colour informs, it does not decorate
Tag colours
04
Two dashboard designs
“Ether” and “Malachite”.
Light and dark.
“Ether” is the modern default: soft surfaces, large radii, air. “Malachite” is the original classic: crisp borders and dense layout. Switch and see how the same interface changes.
AssetsIncomeExpensesAnalytics
October 2026
Total money: 1 778 508 ₽
Budget left+ 83 348 ₽
- Card radius 20–26 px
- Depth by soft shadows, no borders
- Tinted fields without outlines
- Card radius 12–16 px
- Crisp thin borders
- Dense data presentation
- Every change is checked in both designs
- In light and dark themes
- From 375 px up to wide screens
05
Typography
Primary typeface
Manrope
Open geometry and high legibility: from landing to dense financial tables. Tabular figures keep amounts from dancing.
400Regular
500Medium
650Semibold
750Bold
800ExtraBold
Display / 800Finances you can see whole.
Large editorial type, free rhythm and short meaningful blocks.
- Hero
- 48–88 / 0.96
- Section
- 36–64 / 1.02
- Body
- 16–18 / 1.70
Interface / 700Your capital1 778 508₽
+ 6,4%Compact hierarchy, even figures and captions that do not compete with data.
- Page
- 24–32 / 1.20
- Card
- 17 / 1.35
- Data
- 20–32 / 1.10
Utility typeface
IBM Plex Mono
Periods, versions, tokens, reward multipliers, micro-navigation
x1,5 YOUFI · 0123456789 · ₽ %
88Display
64Hero
48H1
36H2
24H3
17Body
13Caption
06
Shape and rhythm
4-pixel rhythm
48121624324864From data to story
68121624
Quiet depth
010203
Fast and meaningful
- Micro
- 150 ms
- UI
- 180–240 ms
- Page
- 320–460 ms
07
Live components
From tokens
to product.
buttonamount / selectsliding thumbLiquid asset
YOUFI multiplier
x1 YOUFIx1,5 YOUFIx2,5 YOUFIx5 YOUFI
StableAttentionRiskIn development
dashboardLiquid funds455 320
+ 31 800 ₽ in October
hint / toast / skeletonFree: 147,682 ₽
Account balance minus money set aside in savings goals.
Saved
08
Data and charts
Financial dynamics
January — December 2026
IncomeExpensesForecast
A chart supports a decision, it does not hide uncertainty: actual and forecast are always distinguishable.
09
Motion and states
Nothing jumps.
Everything explains itself.
Numbers count up
A figure never pops in: it smoothly counts up to its value.
0₽
Skeletons instead of blanks
While data is on the way, the frame stays and figures show a soft placeholder.
Income149 310 ₽Expenses126 547 ₽Left22 763 ₽
Press feedback
Buttons press in slightly, switches glide, hints fade in softly.
Respect for settings
If a person has “reduce motion” on, animations fall back to instant. Demos in this block always animate.
prefers-reduced-motion
10
Product voice
Short.
Specific.
Verifiable.
“31% of the plan is used, but at the current pace the month may exceed the budget by 14%.”
“Your spending is under control. Keep it up!”
One set of product rules.
The brandbook records the colours, fonts, components and data rules that are actually in use.
Open YousoroFinance Version 2.0 · October 2026
