Mobile app kit · brand guide

Building a branded app on Opyqa

For designers and developers who build the iOS and Android apps for a client. One rule above all: the client's brand goes in through four values (name, icon, primary colour, gradient). Everything else stays the same so every app is safe, familiar and fast to ship.

Tokens · v1iOS 17+ · Android 10+Light + Petrol dark

01White-label in four values

Swap these and the whole app re-brands. The demo name "Your Exchange" and our icon are placeholders.

Your Exchange

→

Client Pay

app.name	"Your Exchange"
app.icon	1024 × 1024 PNG
color.primary	#1670DB
gradient.start / end	#1560E8 → #0B8F82

02App icon

Deliver one 1024 px master. iOS applies its own corner mask, so never round the corners yourself. Android uses an adaptive icon: keep the mark inside the 66 dp safe zone.

iOS · 1024 master

60 pt

Android

03Colour · light

Name colours by role, never by hue. iOS: named colours in the asset catalogue. Android: a Material 3 colour scheme.

#F4F8FFsurfaceScreen background

#FFFFFFraisedCards, sheets

#10265EinkMain text

#3E5384mutedSecondary text

#D3E0F5lineBorders, dividers

#1670DBprimaryButtons, links, selection

#12805CsuccessCompleted

#A15F00warningAwaiting, timers

#C3303AdangerFailed, on hold

04Colour · Petrol dark

The dark theme is Petrol, never black. Follow the system setting by default and let people override it in Account.

#07323AsurfaceScreen background

#0C414BraisedCards, sheets

#E6FBF7inkMain text

#BCDADFmutedSecondary text

#1B5864lineBorders, dividers

#3FE0C2primaryButtons (text #05272E)

#4FD9A0successCompleted

#FFB547warningAwaiting, timers

#FF8A8FdangerFailed, on hold

05Typography

Bundle the three families with the app. If a font fails to load, fall back to SF Pro (iOS) or Roboto (Android).

Outfit 700 · 30/34Exchange

Outfit 600 · 20/26Track the order

Figtree 600 · 15/20Continue · section titles · list titles

Figtree 400 · 13/18Body text, descriptions and helper lines.

Figtree 500 · 11/14Captions, labels above fields

JetBrains Mono 600 · 15O542379 · 500.00 USDT · TQ7v…9k2F

06Spacing and touch

A 4-point grid. Generous touch targets, compact text.

16Screen side margin

12Gap between cards

44 pt / 48 dpMinimum touch target

46Button height

16 / 14Card radius iOS / Android

13 / pillButton radius iOS / Android

07Core components

Build these once and reuse them on every screen.

Amount box with coin pill

You sendMin 100 · Max 10,000 EUR

500.00₮USDT · TRC20 ›

Buttons

Primary

Secondary

Ghost

Network warning

Only USDT on TRC20. Other coins or networks can be lost.

08Order status colours

Fixed for every brand, so support teams and customers read them the same way. Always pair the colour with the word.

AwaitingAwaiting payment, awaiting funds

ReceivedPayment received, deposit received

ProcessingProcessing, exchanging, sending crypto, paying out

CompletedCompleted

On holdOn hold, failed

CancelledCancelled

Status names come from the admin. The app never invents its own.

09iOS and Android: what changes

Same screens, same order of steps. Only the platform chrome changes.

Element	iOS	Android
Main navigation	Tab bar, 4 items, SF-style line icons	Bottom navigation bar, 4 items, pill indicator
Screen title	Large title that collapses on scroll	Top app bar; brand gradient on Home
Pickers	Sheet with grabber, "Done" top right	Modal bottom sheet, radio rows, "Select" button
Back	Chevron + previous title, swipe from edge	Back arrow in top app bar, system back
Biometrics	Face ID / Touch ID	Fingerprint / face unlock (BiometricPrompt)
Feedback	Push + in-app banner	Push + snackbar with action
Buttons	46 pt, 13 pt corner radius	46 dp, full pill radius
Switches	Green iOS switch	Material 3 switch in primary

10Screens to ship

The minimum set for store review and launch. See the iOS and Android boards.

Welcome and sign-in
Exchange: Swap, Convert, Buy/Sell
Coin, network and method pickers
Payment with timer and QR
Order tracking
Orders list
Account and settings
Push notifications
Support chat (from the support bot settings)
Legal: Terms, Privacy, AML/KYC

11Launch checklist for each client

Collect these before the build starts.

App name and short name (max 30 / 12 characters)
Bundle ID / application ID (com.yourbrand.exchange)
App icon master 1024 × 1024 px, no transparency
Primary colour and gradient start/end (2 hex values)
Support email, Telegram handle and website URL
Terms, Privacy, AML/KYC links (shown in Account › Legal)
Store screenshots: iPhone 6.7" 1290 × 2796, Android 1080 × 1920
Android feature graphic 1024 × 500
Privacy questionnaire answers (App Store + Google Play)
Languages to ship (EN, UK, RU, FR included)

12Do and don't

DoShow the coin and the network together everywhere: "USDT · TRC20".

DoUse the mono font for order IDs, amounts to copy and addresses.

DoKeep status colours fixed across every brand.

DoWrite IDs without "#": O542379.

Don'tPut the Opyqa name or logo in a client's app.

Don'tHardcode rates, limits or fees. They come from the admin.

Don'tAdd text or a border to the app icon.

Don'tUse colour alone for status. Always add the word.