--- 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 | Hue | 10 | 30 | 50 | 60 | 70 | 90 | |-----|----|----|----|----|----|----| | 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.