Design system
Everything Finluck is made of
Colors, text styles, effects and components in one place. New pages, by hand or by the agent, should only use what is on this page.
Color styles
One accent, calm neutrals
Color/Periwinkle
The one accent. Buttons, active states, links.
#6E7BF2
Color/Periwinkle Deep
Gradient end, links on light surfaces.
#4E59D9
Color/Periwinkle Light
Gradient start and highlights.
#8C97F6
Color/Periwinkle Soft
Selected rows, notes, open FAQ items.
#ECEEFE
Color/Ink
Headings, numbers, dark buttons.
#14172E
Color/Muted
Body text and captions.
#6E7189
Color/Surface
Panels and cards.
#FFFFFF
Color/Canvas
Page background.
#F5F6FB
Color/Navy
One dark band per page at most.
#191C45
Color/Success
Money received, valid fields.
#22B07D
Color/Warning
Fees and outgoing amounts.
#E8913A
Color/Danger
Errors and falling rates.
#D9534F
Text styles
One family, twelve roles
Text/Display
104 / 76 / 48 px · 500
Money, without borders.
Text/H1
76 / 56 / 40 px · 500
We’re here to help
Text/H2
56 / 44 / 34 px · 500
Plans that grow with you
Text/H3
34 / 28 / 24 px · 500
Open your account
Text/Title
22 / 21 / 20 px · 500
Send in one tap
Text/Body Large
18 px · 400
Personal and business accounts for people who earn in more than one currency.
Text/Body
16 px · 400
One flat, upfront fee on every transfer.
Text/Small
14 px · 400
Fees this month · $3.80
Text/Caption
13 px · 400
Indicative rates for illustration.
Text/Kicker
14 px · 500 · Periwinkle
Why Finluck
Text/Button
15 px · 500
Open account
Components
Reuse these, never rebuild them
Open state
Tap a question to open or close it. Only one should be open at a time.
Closed state
Motion
Slow in, soft out
Section entrance
Appear on scroll: fade up 40 px, 0.9 s, ease 0.16 / 1 / 0.3 / 1
Headlines
Text effect by word: blur 12 px and rise 20 px
Floating parts
Loop: move 6 to 12 px, 2.4 to 4 s, mirror
Orbits
Loop: rotate 360° over 18 to 26 s, linear
Hover
Lift 2 to 6 px with a spring, never scale
Tickers
Ticker effect at 30 to 40 px/s, slows on hover