RPC app · Design reference

Rapid Prime Connect · Mobile app

The RPC app,
made modern.

A working prototype of the RPC app, laid out around what members do most: today’s actions, their numbers and, in RPC Pro, the assistant. Switch versions and platforms above, then open the style guide.

View style guide

6:56 78 78%

Hello,
Kristoffer

RPC Assistant Knows your team Who’s closest to ranking up? Where do I place my new $1K recruit? Who’s gone quiet for 30 days? Ask about your team

0Contacts 0Resources 0Share Manage Your Access

0/3

Today’s Actions

Daily challenges

View all Share a video today Reach out to 2 new leads Check in with a teammate

0 Hot prospects Strong engagement 0% % Engaged

Exposures

Stats

This week0 This month0 Lifetime0

Events

17OCTSuper Saturday9:00 AM Pacific · Online 24OCTWeekly Pro training6:00 PM Pacific · Online 15NOVOlyNation Global PresentationTickets open

Coaching

Your first three conversationsVideo · 8 min Following up without pressureVideo · 6 min Hosting a small groupVideo · 11 min

Profile My team Resources Notifications Help and support

RPC Pro · Mobile app style guide

One look, from
website to app.

The colours, type, parts and behaviour the RPC app should use so it feels modern and matches the RPC Pro website, on iPhone and Android. Every example on this page is live code from the prototype.

SourceRPC Pro website and the RPC Pro Design System Built at390 × 844 (pt on iOS, dp on Android) FontsUrbanist and Plus Jakarta Sans, as on the website UpdatedOctober 30, 2026

01 · Colour

Obsidian and espresso,
lit by gold.

Gold marks the main action, anything new and the active tab. In the app it is a flat fill, so it feels modern next to the website’s metallic gold. Red appears only for Hot prospects and Exposures.

Ground and surfaces

App background

#0C0A07 + amber glow rgba(226,150,52,.40)

Every screen. The glow sits at the top and fades out by mid-screen.

Card

#15100B · inner line rgba(243,237,225,.08)

Stats, bento tiles, Exposures and lists.

Tile

#1D160E · pressed #261C11

Assistant suggestions, inputs, chips and tree nodes.

Featured card

#15100B + gold wash · line rgba(232,194,122,.26)

Today’s Actions. One per screen.

Text

Ivory

#F6EFE2

Headings, numbers and key text.

Aa body

Body

rgba(243,237,225,.82)

Paragraphs, answers and values.

Aa secondary

Secondary

rgba(243,237,225,.56)

Sub-lines, labels and inactive tabs.

Aa hint

Hint

rgba(243,237,225,.38)

Placeholders and chevrons.

Gold

Button

Gold fill

#E8C27A · hover #F0CE8C · press #D9AE62 · ink #1A1107

Buttons, the centre button, avatars, the assistant spark. Always flat.

Tint

Gold tint

rgba(214,146,52,.13) · strong .22

Behind gold line icons, the active tab pill, your chat messages.

Champagne

#D9AE62

Eyebrow labels and field labels.

Gold text gradient

178° #FFE3A6 → #E2A94F → #9A5F20

Only for the name in the greeting. The website uses it for headline payoffs.

Signals

Hot red

#FF6A3D · tint rgba(255,106,61,.14)

Hot prospects and Exposures numbers only.

Success

#8BD17C · tint rgba(139,209,124,.12)

Placed recruits, bonus chips and the live dot.

Lines

rgba(243,237,225,.08) · strong .14

Dividers inside cards and edges of inputs and the tab bar.

02 · Type

The website’s type,
sized for thumbs.

The same pairing as the RPC Pro website: Urbanist for headings and big numbers, Plus Jakarta Sans for everything else. Both are free Google Fonts and are in the asset pack.

GreetingHello,
KristofferUrbanist 46 / 1.0 on two lines. Light 300 ivory, then the name in 600 gold gradient. Tracking −0.035em. Screen titleEventsUrbanist 40, 600, ivory. Card and sheet titleToday’s ActionsUrbanist 19–22, 600, ivory, tracking −0.02em. Big number412 7Urbanist 28–44, 700, tracking −0.02 to −0.03em. Row and tile textReach out to 2 new leadsPlus Jakarta Sans 15–16.5, 500. List titles use 600. Body and chatHere are your top 10 earners so far this month.Plus Jakarta Sans 15.5 / 1.5, 400. Bold words turn gold highlight #F6D894. LabelStrong engagementPlus Jakarta Sans 12.5–14, 500, secondary. EyebrowDaily challengesPlus Jakarta Sans 11, 600, uppercase, tracking +0.2em, champagne. Same as the website’s eyebrows. ButtonSend to 12 peoplePlus Jakarta Sans 16, 600, written as the label reads. Small buttons 14.5.

03 · Surfaces

Soft layers,
no heavy borders.

Depth comes from tone: background, card, tile. Edges are thin inner lines, and shadows never move.

Card

Default 412Contacts58Resources187Share

Fill #15100B, radius 22, padding 16.
Inner line 1 rgba(243,237,225,.08). Shadow 0 24 44 −26 rgba(0,0,0,.95).

Featured card

One per screen 1/3

Today’s Actions

Daily challenges

Card fill plus a gold wash from the top left rgba(232,194,122,.11).
Inner line rgba(232,194,122,.26). No glow.

Tile

Inside sections Who’s gone quiet for 30 days?Top 10 earners this month

Fill #1D160E, radius 18, padding 14. Pressed #261C11.
No line. Tiles sit on the background or inside a card.

Sheet

Pop-up panels New message11 opted-in contacts

Top glow #1E160C on #0C0A07, top line rgba(240,200,130,.30).
Corners 24pt on iOS, 28dp on Android. Handle 36 × 4. Backdrop black at 62%, no blur.

04 · Components

The parts,
ready to build.

Each example is the same code the prototype runs. Sizes are in points (iOS) or dp (Android) at a 390-wide screen.

Logos

One at a time

RPC version (no assistant)

RPC Pro version (with the assistant)

A screen shows one logo, never both. The RPC PRO laurel is only for the Pro version, which includes the RPC Assistant.
Use the supplied files as they are. Never redraw, recolour or stretch them.
Header logo: RPC PRO 36 tall, RPC 30 tall. Fit wide logos inside square slots.

Header and greeting

Home

Hello,
Kristoffer

1 of 3 daily challenges done

Shown here in the Pro version. The RPC version uses the RPC logo in the same spot.
Bell and avatar are 44 circles. The avatar opens the profile.
The line under the greeting reports today’s progress from the data.

Assistant area

Home

RPC AssistantKnows your teamWho’s closest to ranking up?Where do I place my new $1K recruit?Who’s gone quiet for 30 days?Ask about your team

RPC Pro only. In the RPC version this whole area is left out and Home starts with the stats card.
Three suggestion tiles in a 2-column grid. The first is tall, washed in gold and has a gold icon. Tapping a tile opens the assistant and asks it right away.
The prompt bar is a 56-tall pill with a 40 gold send button. Tapping it opens the assistant with the keyboard up.
Suggestions come from the assistant’s starter questions, so the backend can rotate them.

Stats and Manage Your Access

Home 412Contacts58Resources187ShareManage Your Access

Three numbers split by 1-wide lines. Numbers Urbanist 30 / 700, labels 13 with a 14 gold icon.
Manage Your Access: flat gold pill, 48 tall, Plus Jakarta Sans 16 / 600, soft glow below. Existing users look for it after logging in, so it stays on Home.

Today’s Actions

Home 1/3

Today’s Actions

Daily challenges

View allShare a video todayReach out to 2 new leads

Progress ring 48, stroke 4.5, gold on ivory at 10%. It fills when a row is checked.
Rows are at least 60 tall. Check 26: empty ring, then flat gold with a dark tick. Done titles are struck through.

Bento tiles and Exposures

Home 7Hot prospectsStrong engagement38%% Engaged

Exposures

Stats

This week64This month241Lifetime3,912

Two square tiles, 164 tall, number Urbanist 44 / 700. Hot prospects uses red; the icon sends one ring out every 6s.
Exposures: three tinted cells, numbers Urbanist 28 / 700 in red.

Buttons

Three kinds Send to 12 people View in treeMessage these 8Cancel

Primary: full width, 52 tall, flat #E8C27A, glow 0 10 26 −12 rgba(232,180,90,.65).
Hover #F0CE8C, press #D9AE62 and scale 0.98. Disabled drops to 40%.
No metallic gradient, highlight band or sheen in the app.

Assistant chat

RPC Assistant Who’s closest to ranking up? These eight are closest to their next rank. Tamara Miller is the nearest.Show the left vs right leg balanceMessage these 8

Your messages: strong gold tint, radius 20 with a 6 tail corner.
Answers: no bubble, labelled “RPC Assistant” in gold. Tables and lists sit in cards below.
Follow-up chips: tiles with a thin line, 40 tall.

Members, ranks and packages

Answers and tree TMTamara MillerLas Vegas · Level 1M3P4 No rankM1M2M3M4M5M6M7P1–P5

Rows at least 60 tall. Avatars are flat gold circles with initials.
Ranks M1–M4 use muted tints. M5 and up turn solid: gold, ivory, then gold highlight.

Fields and toggles

Composer Send by SMS7 opted inIn-app11 on RPC Name

Fields: tile fill, thin line, radius 14, 52 tall. Focus turns the line gold.
Toggles: 56 tall. On uses the strong gold tint and a gold line.

List rows

Events, Coaching, More 17OCTSuper Saturday9:00 AM Pacific · Online24OCTWeekly Pro training6:00 PM Pacific · Online

Rows 72 tall with a 52 date chip. The next event is flat gold; later ones use the tint.
Coaching uses 52 gold play circles. More uses 40 tinted icon squares.

Toast, success and tree

Feedback Message sent to 11 people New recruit is placed under Liza Cruz+$375 tier bonus for Shane Nguyen at level 2 Kristoffer AlderM5P5Liza CruzNo rankPlace here

Toast: tile colour with a gold line, shows for 2.6s above the tab bar.
Tree nodes 104 × 58. Yours has a gold line. The suggested slot is a pulsing flat gold tile.

Floating tab bar

Every screen

Floats 12 from each side and 10 above the home indicator or gesture bar. 68 tall, radius 26, fill #17120C with a thin line.
Active tab: gold icon and label with a 56 × 30 tinted pill behind the icon (the Material 3 pattern, which also reads well on iOS). Labels always show.
Centre button: 52 flat gold circle for Add contact, inside the bar.

05 · iOS and Android

One design,
native on both.

Layout, colour and type are shared. Each platform keeps its own system behaviours, so the app feels at home on either. Use the switch at the top of the prototype to compare.

UnitsPoints (pt)Density-independent pixels (dp), text in sp Screen edgesRespect safe-area insets top and bottom. Content scrolls under the status bar.Draw edge to edge. Pad with status bar and navigation bar insets. Going backSwipe from the left edge goes back a screen. Sheets swipe down to close.The system back (gesture or button) closes the open sheet first, then goes back a screen. The prototype does this; press Esc to try it. Tab barThe floating bar, 68pt, labels always on.The same bar, 68dp. The tinted pill behind the active icon matches Material 3. Press feedbackThe pressed item dims to 62%.A ripple spreads from the touch point (ivory at 16%, 500ms). Sheets24pt top corners, grab handle, swipe down to close.28dp top corners, drag handle, back closes. Tap targetsAt least 44pt. We use 48 everywhere.At least 48dp. Text sizeSupports Dynamic Type up to 130% without clipping.Supports font scale up to 130% without clipping. HapticsLight impact when a challenge is checked or a message is sent.The same moments with HapticFeedbackConstants.CONFIRM. KeyboardThe prompt bar rises with the keyboard.Use adjustResize so the prompt bar stays above the keyboard. IconsThe same line icons on both (from the asset pack), not SF Symbols or Material icons, so the brand looks the same everywhere. Status barLight content on the dark background on both.

06 · Motion and speed

Quick, smooth,
never laggy.

Motion only moves, scales or fades things, which phones can do at 60 frames a second. Everything switches off when the phone’s Reduce Motion setting is on.

Screen changeThe new screen fades in and rises 8.300ms · cubic-bezier(.2,.7,.1,1) SheetsSlide up from the bottom. The backdrop fades to 62% black.420ms · cubic-bezier(.32,.72,0,1) NumbersCount up from zero once on load.900ms · ease-out cubic ProgressThe ring and the Engaged meter fill after a short pause.800–900ms after 250ms PressButtons darken and shrink slightly. iOS dims, Android ripples.scale .94–.98 · 100–150ms Hot prospectsOne red ring scales out from the icon.every 6s ChatMessages rise in. Typing dots bounce in champagne.300ms · dots 1.2s PlacementThe suggested slot pulses. A placed recruit pops in green.1.8s pulse · 450ms pop

Keep it fast

Animate only position, scale and opacity.
Keep shadows still. Change colours, never shadows, on press.
No blur or frosted glass in the app.
Use virtualised lists for long lists (FlatList, LazyColumn, UICollectionView).
Load the Home numbers in one request and cache them for the session.

Targets

60 frames a second while scrolling Home on a mid-range Android phone.
Home shows its layout within 1 second; numbers count up as they arrive.
Sheets start moving within 100ms of a tap.
Loading states use tile-coloured placeholders in the same shapes, not spinners.

07 · Layout

Room to breathe,
thumbs first.

Built at 390 × 844. Home reads top to bottom in the order people use it: who they are, the assistant, their numbers, today’s actions, then results.

Screen margin16 cards · 20 textCards and tiles inset 16. Header, greeting and titles inset 20. Spacing4 · 8 · 10 · 12 · 14 · 16 · 20 · 2412 between cards, 10 between tiles, 24 above sections. Radius999 · 26 · 24 · 22 · 18 · 14 · 12Pills, tab bar, sheets, cards, tiles, fields and chips, icon squares. Tap target48 minimumIcon buttons 44 visible with a 48 hit area. Rows 60–72 tall. Tab bar68 tall · 12 inset · 10 above system barLeave 124 of space at the bottom of every scrolling screen. Lines1 · 1.51 for dividers and edges. 1.5 for focus and selected states.

08 · Rules

What keeps it
RPC Pro.

These come from the RPC Pro website’s design review and this redesign. They apply to every screen.

Do

Use the supplied logo files exactly as they are, one logo per screen.
Keep gold for the main action, new items and the active tab, as a flat fill.
Use the line icons from the asset pack on gold or gold tints. Never emoji.
Build from standard native parts: tab bar, bottom sheets, lists.
Keep one two-tone moment per screen at most.

Don’t

Redraw, recolour or stretch any logo, or show the RPC PRO logo outside the Pro version.
Use the website’s metallic button gradient, highlight bands or sheens in the app.
Use orange for warnings or notices.
Use serif type, or squeeze the letter spacing on big words.
Bring back the light theme, purple links or thick borders.

09 · Tokens

Copy
the tokens.

Every value on this page as CSS variables. The names carry over to Swift, Kotlin or React Native constants.

rpc-pro-app-tokens.cssCopy /* RPC Pro app tokens. Source: RPC Pro Design System + RPC Pro website build. */ :root { /* ground and surfaces */ --ground: #080705; --app-bg: #0C0A07; --glow-top: radial-gradient(130% 48% at 50% -6%, rgba(226,150,52,.40) 0%, rgba(226,150,52,.12) 46%, rgba(226,150,52,0) 74%); --surface: #15100B; /* cards */ --surface-2: #1D160E; /* tiles inside the assistant area, inputs */ --surface-3: #261C11; /* pressed */ --raised: linear-gradient(160deg, rgba(46,34,20,.92), rgba(14,11,8,.96)); --featured: linear-gradient(160deg, rgba(232,194,122,.11) 0%, rgba(232,194,122,0) 55%), #15100B; --sheet: radial-gradient(120% 38% at 50% 0%, #1E160C 0%, #0C0A07 72%); /* text */ --ivory: #F6EFE2; --ivory-2: #F3EDE1; --text-2: rgba(243,237,225,.82); --text-3: rgba(243,237,225,.56); --text-4: rgba(243,237,225,.38); --label: #CFC5B3; /* gold */ --champagne: #D9AE62; --gold: #E8C27A; --gold-hi: #F6D894; --gold-ink: #1A1107; --gold-fill: #E8C27A; /* flat gold: buttons, icon tiles, avatars */ --gold-fill-hover: #F0CE8C; --gold-fill-press: #D9AE62; --g-text: linear-gradient(178deg, #FFE3A6 0%, #E2A94F 45%, #9A5F20 100%); --tint: rgba(214,146,52,.13); --tint-2: rgba(214,146,52,.22); /* lines */ --line: rgba(243,237,225,.08); --line-2: rgba(243,237,225,.14); --hair: rgba(240,210,150,.16); --hair-2: rgba(240,200,130,.30); /* light (static shadows only; never animated) */ --glow-btn: 0 10px 26px -12px rgba(232,180,90,.65); --glow-soft: 0 6px 18px -8px rgba(232,180,90,.55); --shadow-card: 0 24px 44px -26px rgba(0,0,0,.95); --shadow-float: 0 20px 40px -12px rgba(0,0,0,.85); /* app-only signals */ --red: #FF6A3D; --red-2: #FF7A45; --red-tint: rgba(255,106,61,.14); --ok: #8BD17C; --ok-ink: #A9DE9C; --ok-tint: rgba(139,209,124,.12); /* platinum (existing users on the website) */ --plat-edge: rgba(226,231,238,.62); --plat-label: #DDE2E9; --plat-ink: #14171C; /* shape */ --r-pill: 999px; --r-sheet: 24px; --r-card: 22px; --r-tile: 18px; --r-field: 14px; --r-icon: 12px; --tap: 48px; /* type */ --display: 'Urbanist', 'Plus Jakarta Sans', system-ui, sans-serif; /* headings and big numbers, as on the website */ --ui: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* body, labels, buttons, as on the website */ --web: 'Plus Jakarta Sans', system-ui, sans-serif; --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* motion */ --ease: cubic-bezier(.2,.7,.1,1); --spring: cubic-bezier(.32,.72,0,1); }

Design reference for the RPC app. All names and numbers in the prototype are sample data.