Design System Gallery
Every variation of Text, Button and Card. Switch theme to check dark mode.
Logo: variants
Finsta is the product's identity. A vector, so it stays sharp at any size and adapts to light and dark.
horizontal: headers and toolbars
stacked: hero areas and cards
mark: tight spaces, avatars, app icons
Logo: colours
Each colour is contrast-checked for the surface it is meant for, in both themes.
primary: Default. Ink on the page or a card.
brand: Brand blue, for hero areas.
secondary: Quiet, for footers.
inverse: for filled brand surfaces.
Designer credit
A quiet line for footers and credits pages. Never in the header, app icon, product screens, money flows, AI labels or alerts.
Text: variants
Each variant caps how far system text scaling can grow it.
heading1: Send money safely
heading2: Send money safely
heading3: Send money safely
body: Send money safely
bodyStrong: Send money safely
bodySmall: Send money safely
label: Send money safely
caption: Send money safely
Text: colour roles
`color` is a text role. It never carries status meaning.
primary
secondary
link
disabled
`inverse` is for text on a filled action surface; Button handles that for you.
Text: tones
`tone` carries status. Always pair it with a word or icon, never colour alone.
success
warning
danger
info
neutral
Button: primary
Sizes small, medium, large. Then disabled and loading. Press and hold to see the pressed state.
Button: secondary
Sizes small, medium, large. Then disabled and loading. Press and hold to see the pressed state.
Button: tertiary
Sizes small, medium, large. Then disabled and loading. Press and hold to see the pressed state.
Button: destructive
Sizes small, medium, large. Then disabled and loading. Press and hold to see the pressed state.
Button: fullWidth
Spans its parent's width. Small buttons keep a 48pt tap area via hitSlop.
Button: parent decides
Components don't position themselves. Stack align='start' hugs content; Row wraps.
Card: variants
On the page background, so you can see the difference.
default
Everyday account · available balance
elevated
Everyday account · available balance
outlined
Everyday account · available balance
Card: padding
Semantic sizes: sm 8pt, md 16pt, lg 24pt, xl 32pt.
Composed
Send to Alex
Review transfer
You can cancel until it is processed.