Tokens and components shared by the user app, the wallet simulator and the backoffice. Every screen in this folder is built only from tokens.css and components.css; wave 2 turns each class here into one component.
Jade is for actions and focus only. Status colours never double as the accent, so a green “Released” badge can never be mistaken for a button. Dark theme is its own set of values, not an inversion; every token is redefined for it.
--bg--surface--surface-2--surface-sunken--border--border-strong--text--text-2--text-3--accent--accent-hover--accent-soft--accent-text--focus--ok--info--wait--warn--bad--muted--net-tron--net-eth--net-venom--asset-usdt--asset-usdc--series-1--series-2--series-3System faces only, so no screen makes an external request. Digits are tabular wherever money or times line up. Monospace is reserved for addresses, hashes, references and codes.
38 / bold1,817.00USDT
30 / boldDubai in November
24 / bold18 / semi16 / semi16 / bodyHere are five options for all four of you, 8–15 November.
14 / bodyHeld in escrow until the booking is confirmed.
13 / smallReturned to this account automatically if it is not.
11 / labelTreasury hot wallets
mono 134b2ad832cc3e…7438f82
An amount is never shown without its asset, and the network is shown wherever it could be confused. USDT on TRON and USDT on Ethereum are different money. The user app shows cents; any digits beyond the cents stay visible but quiet, so an exact value is never rounded away. The receipt and the backoffice always show the asset's full precision (6 for stablecoins, 2 for USD, 9 for VENOM). Totals the user pays are exact.
Truncate in the middle, keeping 6 characters at the start and 5 at the end, because that is what people compare against their wallet. Every address and hash has a copy button that copies the full value. Where a person is about to send money, the full address is shown with both ends emphasised, and a known contract carries a verification badge.
Amount fields carry the asset code inside the box, so nobody types a bare number. Hints say what a value does, not what it is.
Five tones carry meaning: violet money is moving, blue money is safe in escrow but the booking is not final, green final and good, jade money returned, red a problem a person must look at. Moving states pulse.
For the one card that needs to stand apart, such as the payment card in a chat.
For context that sits behind the main content, such as "what Venom remembers".
Numbers right-aligned and tabular; a wide table scrolls inside its own frame, never the page. Journal lines put debits and credits in separate columns so a balanced entry is visible at a glance.
| Account | Asset | Debit | Credit |
|---|---|---|---|
| 2110 Customer funds in escrow | USDT-TRC20 | 1,817.000000 | |
| 1110 Escrow contract | USDT-TRC20 | 1,817.000000 | |
| 1210 Treasury hot wallet | USDT-TRC20 | 1,817.000000 | |
| 2210 Supplier cost to settle | USDT-TRC20 | 1,730.476190 | |
| 4010 Service fee revenue | USDT-TRC20 | 43.261905 | |
| 2310 Buyback earmark | USDT-TRC20 | 43.261905 | |
| JE-2026-0923-0037 · balanced | USDT-TRC20 | 3,634.000000 | 3,634.000000 |
On phones, anything that asks for a decision about money is a bottom sheet; on desktop, a modal. Both show the amount first and the destination second.
Venom Travel will no longer be able to take payments from TbgxgX…XXdV2 without asking. One transaction, about 6.20 TRX.
Travel content (options, travellers) and payment content (the pay card) look different on purpose: the pay card belongs to the payment program, which never sees the trip, and the person should see that the money question is asked by a different part of the product.
Every block here is generic: a program sends data for it and never ships markup. Status card is any live item with a route and fact tiles; a changed tile is outlined, an old time stays struck through. Agenda is a timeline keyed by local time; a dashed dot is a suggestion nobody paid for. Choices always end in their money line. Compare puts the attribute above its values on phones so three options fit 360 px.
The chat is home. Every user screen is one phone-width column (.app › .app-main, at most 720 px) with a compact .app-head; at 1024 px and up an optional .app-aside sits beside it. There is no tab bar and no sidebar: the manual screens live behind .app-menu, and each of them ends in an .ask-bar carrying data-ask-assistant with the screen's context, so the way back into the chat is always the same thing in the same place.
Ask when needed, show where the money is. Account, passports, wallet and limits are cards in the conversation at the moment they are first needed (account, passports, wallet, limits), never a sign-up funnel. A card that hands off to another app shows a .handoff state until it returns.