🧩 Component Library
Real UI-kit primitives recreated as HTML — full color palette (light + dark), the real Gilroy font (9 weights), all 29 typography presets, and 311 icons. Source of truth: tokens.css + typography.css + icons.css + components.css + component-map.json. Components are built in batches; the rest is mapped and grown on demand.
Colors
violet
blue
green
red
yellow
gray10
gray2
black
violetDark
violetLight
violetExtralight
blueDark
blueLight
blueExtralight
redDark
redLight
redExtralight
greenDark
greenLight
greenExtralight
yellowDark
yellowLight
yellowExtralight
gray8
gray6
gray4
white
purpleGradient
brandGradient
mainScreen
walletGradient
accountGradient
Typography — Gilroy
simple_typography.dart · real Gilroy font (9 weights)
header3
header5
subtitle1
body1Semibold
body2Medium
captionBold
header1
header2
header4
header6
subtitle2
body1Medium
body1Bold
body2Semibold
body2Bold
captionMedium
captionSemibold
captionSmall
callout
INVEST VARIANTS
header0Invest
header1Invest
header2Invest
header3Invest
header4SMInvest
header4MInvest
body1InvestSM
body2InvestSM
body3InvestSM
captionInvestSM
Icons
311 real SVGs · 214 recolorable masks
App bar
GlobalBasicAppBar
Action buttons
SActionButton + ActionPannel
Transaction item
TransactionListItem
Salary
17 Jun · Incoming
+€2,400.00Spotify
15 Jun · Subscription
−€9.99Swap BTC → EUR
11 Jun · Exchange
€220.00Badges
SBadge
Neutral
Action required
Active
Rejected
In review
Pills, buttons
LinkedWalletPill · SButtonContext · SButton
Linked to Smart Wallet
Buttons
SButton — 7 variants
Inputs
SInput · SSearchInput · SCheckBox
Full name
Yaroslav Polishchuk
Email
not-an-email
I agree to the terms
Segment control
SegmentControl
Status & links
SStatusButtons · SHyperlink · SimpleLoader
Verification in review
Identity verified
Banners
SBannerBasic
List cells & chip
OneColumnCell · TwoColumnCell · SDivider · SChipSuggestion
Card settings
Monthly limit€5,000.00
Add new card
Virtual · instant
FreePlaceholder & state banner
SPlaceholder · WirexProfileStateBanner
Nothing here yet
Your transactions will appear once you start using the card.
Bottom bar
SBottomBar + SBottomButton
Amount input & keyboard
SNumericInput · SNumericKeyboard
1,240.50EUR
≈ $1,342.10
Swap, copyable, glyphs
STransaction · SCopyable · SGlyphCircle
Bitcoin0.014 BTC
Euro€1,240.50
Wallet address
0x9f3a…b21C4d
Toasts, tags, skeleton
SNotificationBox · STagButton · SSkeletonLoader
Saved successfullySomething went wrong
DefaultSelectedClaimVerifyDisabled
Benefits, flags, filled input
CardBenefitItem · FlagItem · SInputNew
No monthly fees
Instant virtual card issue
FlagItem (fallback shown — country SVGs added on demand)
Card nickname
My travel card
Asset list ⭐
SimpleTableAsset — the most-used row · asset-icon = initials placeholder or <img>
Bitcoin
0.0142 BTC
€1,240.50
+2.4%
Ethereum
1.20 ETH
€2,980.00
−1.1%
EuroMain
Available balance
€840.20
Account group
SimpleTableAccount — asset row + CTA
Promo, large header, address
SPromoBanner · SimpleLargeAppbar · BlockchainAddress
Get 2% cashback
On every card purchase this month — automatically.
0x9f3A2c1d84be77109a0bf5e6d3b21C4d
Tooltip, dropdown, carousel dots
SSimpleToolTip · SDropdownmenuButton · CarouselWidget
Copied to clipboard
EUR
USD
Suggestion & specific buttons
SuggestionButton · SpecificButton
Add a beneficiary
Send to a saved contact
Hold to confirm, timer, policy, empty
HoldToConfirmButton · SConfirmActionTimer · PolicyCheckbox · EmptySearchResult
SConfirmActionTimer
I agree to the Terms of Service and Privacy Policy.
No results for
“bitcoinz”
→ Open the Cards Main Screen prototype built entirely from these components.