Finance / iOS / Android / Web

Rainbow

Rainbow is fun on the surface and strict underneath: ten-step ramps for every hue, a rounded typeface, and corner smoothing that changes per platform.

Download
  • #0E76FD
  • #5F5AFA
  • #FF5CA0
  • #1DB847
  • #FF801F
  • #FFD014

Color

Every color token in the file, grouped by role.

Brand

  • primary#0E76FD
  • primary hover#1761E0
  • primary deep#0B4AB8
  • primary wash#EDF9FF
  • on primary#FFFFFF

Surfaces

  • paper#FFFFFF
  • canvas#F7F7F7
  • dark surface#1B1C1E
  • dark bg#12131A
  • dark card#1E2028

Text

  • pink#FF5CA0
  • ink#000000
  • ink soft#1B1D1F
  • blue grey text#5F6670
  • dark text soft#9CA6B1
  • web ink#111111
  • web muted#9F9F9F

Lines

  • blue grey border#DADEE5

Status

  • success web#33D878

More

  • green#1DB847
  • green deep#189943
  • purple#5F5AFA
  • purple swap#575CFF
  • red#FA423C
  • orange#FF801F
  • yellow#FFD014
  • blue grey wash#F5F5F7
  • blue grey deep#242529

Typography

Each style is set with the file's own family, size, weight and spacing.

  • SF Pro RoundedSF Pro Rounded is private and not available in open fonts. Shown in Nunito, the closest open match.
  • heading large44px / 800 / 53px

    Rainbow

  • heading28px / 800 / 34px

    Pack my box with five dozen liquor jugs

  • title20px / 700 / 27px

    Pack my box with five dozen liquor jugs

  • body16px / 500 / 22px

    The quick brown fox jumps over the lazy dog

  • body small14px / 500 / 19px

    The quick brown fox jumps over the lazy dog

  • caption11px / 600 / 13px

    Continue to checkout

Shape

Corner radius tokens.

  • sm8px
  • md12px
  • lg20px
  • xl28px
  • pill9999px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • md12px
  • base16px
  • lg24px
  • xl32px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button primary light
    button-primary-light
  • card
    card
  • dark card
    dark-card
  • success chip
    success-chip
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 117 lines
version: alpha
name: Rainbow-design-analysis
description: "A playful, rounded crypto wallet built on a strict design system: ten-step color ramps for eight hues (blue #0e76fd, green #1db847, purple #5f5afa, pink #ff5ca0, red #fa423c, orange #ff801f, yellow #ffd014 and grays), set in SF Pro Rounded, with iOS-style smoothed corners on iPhone and plain rounded rectangles on Android."
status: Draft
appVersion: "source snapshot of the public repository, 2026-10-06"
platformsCovered: [iOS, Android, Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#0e76fd"
  primary-hover: "#1761e0"
  primary-deep: "#0b4ab8"
  primary-wash: "#edf9ff"
  green: "#1db847"
  green-deep: "#189943"
  purple: "#5f5afa"
  purple-swap: "#575cff"
  pink: "#ff5ca0"
  red: "#fa423c"
  orange: "#ff801f"
  yellow: "#ffd014"
  ink: "#000000"
  ink-soft: "#1b1d1f"
  paper: "#ffffff"
  canvas: "#f7f7f7"
  blue-grey-wash: "#f5f5f7"
  blue-grey-border: "#dadee5"
  blue-grey-text: "#5f6670"
  blue-grey-deep: "#242529"
  dark-surface: "#1b1c1e"
  dark-bg: "#12131a"
  dark-card: "#1e2028"
  dark-text-soft: "#9ca6b1"
  web-ink: "#111111"
  web-muted: "#9f9f9f"
  success-web: "#33d878"
  on-primary: "#ffffff"

typography:
  # Font note: "SF Pro Rounded" is a private font and is not available in open fonts. Closest open alternative: "Nunito".
  heading-large:
    fontFamily: "SF Pro Rounded, SF Rounded Web, ui-rounded, system-ui, sans-serif"
    fontSize: 44px
    fontWeight: 800
    lineHeight: 53px
  heading:
    fontFamily: "SF Pro Rounded, SF Rounded Web, ui-rounded, system-ui, sans-serif"
    fontSize: 28px
    fontWeight: 800
    lineHeight: 34px
  title:
    fontFamily: "SF Pro Rounded, SF Rounded Web, ui-rounded, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 700
    lineHeight: 27px
  body:
    fontFamily: "SF Pro Rounded, SF Rounded Web, ui-rounded, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 22px
  body-small:
    fontFamily: "SF Pro Rounded, SF Rounded Web, ui-rounded, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 19px
  caption:
    fontFamily: "SF Pro Rounded, SF Rounded Web, ui-rounded, system-ui, sans-serif"
    fontSize: 11px
    fontWeight: 600
    lineHeight: 13px

rounded:
  sm: 8px
  md: 12px
  lg: 20px
  xl: 28px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  base: 16px
  lg: 24px
  xl: 32px

components:
  button-primary:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    height: 48px
  button-primary-light:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    height: 48px
  card:
    backgroundColor: "{colors.paper}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 16px
  dark-card:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 16px
  success-chip:
    backgroundColor: "{colors.primary-wash}"
    textColor: "{colors.primary-deep}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"

Overview

Rainbow's interface is fun on the surface and disciplined underneath. The tone is friendly and colorful, with a rounded typeface, big pill buttons and bright accent colors. The structure is a real design system: every hue comes as a ten-step ramp from 10 (lightest) to 100 (darkest), grays come as translucent steps, and text and spacing sit on fixed tables. [Measured]

Three decisions define the look:

  1. Ten-step color ramps. Blue, green, purple, pink, red, orange and yellow each run from a pale 10 to a deep 100. For example blue is #edf9ff, #d1edff, #a3d7ff, #6bbfff, #3898ff, #0e76fd, #1761e0, #0b4ab8, #053085, #001e59. Apps pick a step instead of inventing a color. [Measured]
  2. A rounded typeface everywhere. SF Pro Rounded is bundled in the Android app and used on the web as "SF Rounded Web", which gives a soft, toy-like voice even in a financial product. [Measured]
  3. Corners differ by platform on purpose. The shape helper applies corner smoothing of 0.6 on iOS for an iPhone-style continuous curve and 0 on Android to match Material, so the same shape looks native on each. [Measured]

Source for this file: the public app source (design system folder) and rainbow.me, read on 2026-10-06. No on-device capture was done. See Known Gaps.

Core

Colors

Hue103050607090
Blue#edf9ff#a3d7ff#3898ff#0e76fd#1761e0#053085
Green#eafce8#a6f5ac#4bd166#1db847#189943#005723
Purple#f7f5ff#c6b8ff#7a70ff#5f5afa#5248e0#38228f
Pink#fff0fa#ffb8e2#ff7ab8#ff5ca0#e04887#851b53
Red#fff0f0#ffaca3#ff6257#fa423c#d13732#7a1714
Orange#fff6eb#ffcf99#ff983d#ff801f#e06e16#703b12
Yellow#fffbe0#ffee99#ffdf3d#ffd014#ebaf09#7a600a

Neutrals: a gray ramp that goes from #f7f7f7 through translucent steps of rgba(9,17,31,0.05) up to rgba(27,29,31,0.88) and #000, a white ramp for dark mode from #1b1c1e through translucent blue-tinted whites to #ffffff, and a blue-gray ramp from #f5f5f7 to #242529. Older tokens still in use include dark surfaces #1e2028 and #12131a, swap purple #575cff, a sky blue #e0e8ff and the Apple blue #0e76fd. [Measured]

The marketing site uses black #000, white, #111111, gray #9f9f9f and bright accents (#b65bf8, #fe5e42, #f7ff12, #0ed9f6, #ff9900, #33d878). [Measured]

Typography

SF Pro Rounded in Black, Heavy, Bold and Medium weights, on all platforms. [Measured] The type table pairs a size and a line height with a margin correction so text sits visually centered. Heading sizes run 18, 20, 23, 26, 28, 30, 34 and 44 with line heights 21, 22, 27, 30, 33, 34, 41 and 53. Text sizes run 10 to 23 pt, for example 11 over 13, 12 over 14, 14 over 19, 16 over 22. [Measured] The website uses 16, 20, 24, 26, 30, 36 and 42px. [Measured]

Shape and spacing

A shape helper builds rounded rectangles with corner smoothing: 0.6 on iOS and 0 on Android by default. Exact radius and spacing tables were not read. Pill and large-radius shapes are typical in the app. [Measured for smoothing, Inferred for the rest]

Iconography and motion

Emoji-like, colorful token icons and rounded glyphs. The app uses animated text components and a shared Skia-based shadow layout. [Measured for the animated text and shadow helper]

Themes

Light and dark, with an accent color that is chosen from the user's content (an accent color context exists in the design system). [Measured]

Platform: iOS

How the iOS app looks and behaves. Items come from public source files.

Back and up navigation

Expected on iOS: chevron plus previous title, swipe from the left edge.

Not verified. A custom navigation and sheet system is expected. [Inferred]

Primary navigation

Expected on iOS: bottom tab bar, about five items.

A custom bottom area for wallet, discover and activity. [Inferred]

Main action

Expected on iOS: nav bar or bottom bar button.

Large pill buttons for send, swap and buy. [Inferred]

Sheets, dialogs and messages

Expected on iOS: action sheets, alerts, modals.

Custom bottom sheets with large corner radii. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Custom controls drawn from the design system. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Text uses fixed point sizes from a table. System Dynamic Type support was not verified. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not verified. [Inferred]

Insets and system bars

Expected on iOS: safe areas, status bar.

Not verified. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Custom colorful icons. [Inferred]

Account and sign-in rules

Expected on iOS: equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

A self-custody wallet with no traditional account. There is no third-party social login to trigger Guideline 4.8. [Inferred] Checked: 2026-10-06 against source and general knowledge only.

Platform conformance

Expected on iOS: system components and Dynamic Type.

Mostly custom, but it deliberately applies iOS corner smoothing (0.6) so shapes match iPhone hardware curves. [Measured]

Platform: Android

How the Android app looks and behaves. Items come from public source files.

Back and up navigation

Expected on Android: system back and gesture, up arrow in the top bar.

System back handling. [Inferred]

Primary navigation

Expected on Android: navigation bar, rail on tablets.

The same custom bottom area as iOS. [Inferred]

Main action

Expected on Android: floating action button.

Large pill buttons, not a floating action button. [Inferred]

Sheets, dialogs and messages

Expected on Android: bottom sheets, dialogs, snackbars.

Custom bottom sheets. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Custom controls. [Inferred]

Text sizing

Expected on Android: font scale.

Fixed sizes from a table. System font scale handling was not verified. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not verified. [Inferred]

Insets and system bars

Expected on Android: edge to edge, system bars.

Not verified. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Custom icons. [Inferred]

Account and sign-in rules

Expected on Android: account deletion and data safety requirements. Note the date checked.

Self-custody wallet. The data safety form was not checked. [Inferred] Checked: 2026-10-06 against source only.

Platform conformance

Expected on Android: Material 3 components and roles.

Does not follow Material 3 components. It keeps the brand look but uses regular rounded rectangles on Android (no corner smoothing) to match Material's shape language. [Measured]

Platform: Web

The rainbow.me marketing site.

Back and up navigation

Expected on Web: browser back, breadcrumbs.

Browser back. [Inferred]

Primary navigation

Expected on Web: top nav or sidebar.

A top navigation. [Inferred]

Main action

Expected on Web: page-level button.

Download buttons. [Inferred]

Sheets, dialogs and messages

Expected on Web: modals, toasts.

Not a feature of the marketing site. [Inferred]

Controls

Expected on Web: native or custom.

Custom rounded buttons. [Inferred]

Text sizing

Expected on Web: browser zoom.

Sizes in px. [Measured]

Touch and pointer targets

Expected on Web: pointer and keyboard.

Not verified. [Inferred]

Insets and system bars

Expected on Web: viewport, scrollbars.

Responsive. [Inferred]

Icons

Expected on Web: any.

Colorful illustrations. [Inferred]

Account and sign-in rules

Expected on Web: not applicable unless the product has accounts.

No accounts. [Inferred]

Platform conformance

Expected on Web: web norms for links and forms.

Follows web norms and uses SF Rounded Web with system fallbacks. [Measured]

Cross-platform consistency

The same ramps, the same rounded typeface and the same friendly tone hold across the apps and site. Shapes adapt per platform through corner smoothing. The website uses a more saturated, black-and-neon palette than the app. [Measured]

Do's and Don'ts

Do

  • Choose colors by hue and step (for example blue60) and never invent a new shade.
  • Use SF Pro Rounded at heavy weights for headings.
  • Apply iOS corner smoothing on iPhone and plain rounded rectangles on Android.
  • Use large pill buttons for main actions.
  • Pair every size with its table line height and margin correction.

Don't

  • Don't use gray text from the deprecated token list for new work.
  • Don't use the neon website palette inside the app.
  • Don't mix smoothed and unsmoothed corners on one platform.

Known Gaps

  • No on-device capture was done. All app statements come from reading source, so layouts and behavior are not confirmed.
  • The semantic color mapping (which ramp step is used for which role in light and dark mode) was not read.
  • Radius and spacing tables were not extracted.
  • Navigation structure is inferred from product knowledge.
  • Dynamic Type and font scale support were not verified.
  • Account deletion and store policy rules were not verified.
  • Contrast: white text on the lighter blue button (#0e76fd) measures about 4.2 to 1, below the 4.5 to 1 target for normal text.