Taler Pay · components

Payment link screens →

Colors

globals.css → @theme. Names follow the Figma variables.

contrastContrast
low-contrastLow-contrast
additionalAdditional
mainMain
main-contentContent / Dark
successPaid title
elevation-0Elevation-0
elevation-1Elevation-1-green
elevation-2Elevation-2
dividerDivider
pageDesktop page
lightLight
warningBackground (orange)
warning-surfaceAlert bg
warning-contentAlert text
dangerFigma: card field error
walletTWX button
receipt-inkReceipt text

Fonts

3 families, loaded by next/font in layout.tsx. Wallet buttons use the OS font, nothing is loaded.

Space Grotesk

Aa Bb Cc 0123456789 $3,455.00

Class
font-sans (default)
Weights
400 · 500 · 600 · 700
Used for
All text: headings, body, buttons, chips, fields

JetBrains Mono

Aa Bb Cc 0123456789 $3,455.00

Class
font-mono
Weights
500
Used for
Wallet address on the transfer screen (CopyField)

Golos Text

Aa Bb Cc 0123456789 $3,455.00

Class
font-caption
Weights
400
Used for
Figma Caption/C4 only: label inside a field ("Card number")

Typography

text-<size>-<weight> = Figma style <Size>/<Weight>. Family per token — see Fonts.

heading-1-semibold · Heading 1 · 40$3,455.00
heading-2-semibold · Heading 2 · 30$3,455.00
heading-2-bold · Receipt · 30$3,455.00
heading-4-semibold · Heading 4 · 24Design consultation
headline-semibold · Headline/SemiBold · 20/30Confirming your transfer
headline-medium · Headline/Medium · 20/3012.5 USDT
body-lg-bold · Body Large/Bold · 18/27TWX wallet
body-lg-medium · Body Large/Medium · 18/27The USDT rate has expired
body-bold · Body/Bold · 16/24Pay $3,800.50
body-semibold · Body/SemiBold · 16/24Card details
body-medium · Body/Medium · 16/24Wedding photoshoot, final payment
body-regular · Body/Regular · 16/24Say something
footnote-semibold · Footnote/SemiBold · 14/20Total
footnote-medium · Footnote/Medium · 14/20Add a tip
footnote-regular · Footnote/Regular · 14/20Nothing found
caption-medium · Caption/Medium · 13/20Only on Tron (TRC20)
caption-regular · Caption/Regular · 13/20Comment
caption-4-regular · Caption/C4 R · 12/16Card number
small-semibold · Small/SemiBold · 12/18Show QR
small-medium · Small/Medium · 12/18Check the card number
small-regular · Small/Regular · 12/18Powered by Taler
tiny-medium · Badge · 10Cheapest
mono · Footnote/MediumTR7NHqjeKQxGTCi8q8ZY4pL8otSzgjLj6t

ChipGroup · tip

none · hover · selected · keyboard (←/→) · tap again to clear

Add a tip

ChipGroup · amount presets

selected · disabled (not in Figma) · error: nothing chosen

Choose amount

Choose amount

AmountField

empty · typed · error: Danger label + border, no text below · disabled

Enter amount

Choose an amount to continue

TextField · SearchField

placeholder · filled + clear · label · error · focus

Comment

Check the card number

Button

primary · outline · text + icon · loading · disabled

Wallet buttons

Apple / Google: official look only · TWX dark, green, with TAL · loading

Pay with · methods

hover · disabled with hint (not in Figma)

Pay with

The payment method may add a fee on top

PaymentBreakdown · ProgressCard

tip · fee · total

Collected$16,000 of $25,000
Amount
$3,455.00
Tip
$345.50
Total
$3,800.50
Amount
$25.00
Processing fee
<$0.01
Total
$25.01
Collected$26,000 of $25,000

DetailsCard · InfoCard

crypto details · comment · transaction

Rate
1 USDT = $1.00
Amount in USDT
3,800.50 USDT
Conversion fee 0.8%
30.40 USDT
Network fee
1.00 USDT
Total
3,831.90 USDT
Comment
Thank you, the photos are beautiful!
Tron transaction
a3f9c1e7b2d4…5e8f0c42d8b0

TWX banner

mobile App Store · mobile Google Play · desktop with QR

Coin list

badge · network mark · hover · loading

Choose a coin

Crypto transfer

waiting · last minute (orange) · copy → Copied

Rate locked, waiting for transfer

Rate locked, waiting for transfer

Only on Tron (TRC20) — on another network the money is lost

Send exact amount

Send to this address · Tron (TRC20)

StatusView

expired · confirming · paid

The USDT rate has expired

Get a new amount. The Tron (TRC20) address stays the same.

Amount
$3,455.00
Payment for
Wedding photoshoot, final payment

Confirming your transfer

We received it. It takes about a minute.

Paid $3,800.50

Confirmed on the network

Misc

Spinner · QR without logo · inline coin

Choose a network for USDT

ReceiptCard

Figma “Receipt, button pinned”.

Manax

Paid

$3,831.90

3,831.90 USDT

Paying for
Wedding photoshoot, final payment
Price
$3,455.00
Tip
10% · $345.50
From
USDT · Tron (TRC20)TXk9mQb4rYpH2vLdE7sNfWcKoZ1tJhRu5A
To
TALtAHCU9nwzs1qTCFNm1qpKefXJHVb4ZnQUnJaWeF4goTrffNgm
Recipient gets
0.30404 TAL
Rate
1 TAL = 12,500 USDT
Conversion fee
0.8% · 30.40 USDT
Network fee
1.00 USDT
Date
September 30, 2026, 9:58
Transaction ID
20260930-4417
Tron transaction
a3f9c1e7b2d4…5e8f0c42d8b0
Explorer
https://explorer.dev.gsmsoft.eu/#/explorer