--- version: alpha name: Rappi-design-analysis description: "A Latin American delivery super app with a Rappi orange-red hero (#ff441f), mint green action buttons (#29d884), dark slate text, PP Object Sans from a light 200 for big headlines to 700 for labels, 8px buttons and round store logos." status: Draft appVersion: "measured in a browser, 2026-10-15" platformsCovered: [Web] reviewer: "" verifiedAt: "" colors: primary: "#29d884" on-primary: "#ffffff" primary-wash: "#e9fcf2" outline-green: "#2acf86" orange: "#ff441f" on-orange: "#ffffff" ink: "#2e2c36" ink-muted: "#6a696e" link-blue: "#3870ff" canvas: "#ffffff" field: "#f7f8f9" border: "#e6ebf1" purple: "#5e00be" night: "#000000" typography: # Font note: "PP Object Sans" is a private font and is not available in open fonts. Closest open alternative: "Montserrat". display: fontFamily: "'PP Object Sans', ui-sans-serif, system-ui, sans-serif" fontSize: 72px fontWeight: 200 lineHeight: 82.08px headline: fontFamily: "'PP Object Sans', ui-sans-serif, system-ui, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 34.08px letterSpacing: -0.24px title: fontFamily: "'PP Object Sans', ui-sans-serif, system-ui, sans-serif" fontSize: 20px fontWeight: 700 lineHeight: 30px button: fontFamily: "'PP Object Sans', ui-sans-serif, system-ui, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 26.08px body: fontFamily: "'PP Object Sans', ui-sans-serif, system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px small: fontFamily: "'PP Object Sans', ui-sans-serif, system-ui, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 23.94px tag: fontFamily: "'PP Object Sans', ui-sans-serif, system-ui, sans-serif" fontSize: 12px fontWeight: 700 lineHeight: 21.96px rounded: xs: 3px sm: 8px md: 16px lg: 28px xl: 50px pill: 9999px spacing: xs: 6px sm: 10px md: 12px base: 16px lg: 20px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.sm}" height: 48px padding: 10px 16px button-tonal: backgroundColor: "{colors.primary-wash}" textColor: "{colors.primary}" typography: "{typography.button}" rounded: "{rounded.sm}" height: 48px padding: 10px 16px login-outline: backgroundColor: "{colors.canvas}" textColor: "{colors.outline-green}" typography: "{typography.button}" rounded: "{rounded.lg}" height: 40px padding: 0 16px search-field: backgroundColor: "{colors.field}" textColor: "{colors.ink}" typography: "{typography.small}" rounded: "{rounded.sm}" height: 48px padding: 6px 20px 6px 12px hero-band: backgroundColor: "{colors.orange}" textColor: "{colors.on-orange}" typography: "{typography.display}" --- ## Overview Rappi delivers restaurant food, groceries, pharmacy items and more across Latin America. Its Colombian site opens on a Rappi orange-red hero, then lists restaurants and stores on white with round logos. Actions are mint green, text is a dark slate, and PP Object Sans runs from a very light 200 for big headlines to a bold 700 for labels. [Observed] What defines the look: 1. **Orange-red hero, green actions.** The hero is `#ff441f`, but buttons are mint `#29d884` with white text (Registrarme, Descargar, Continuar con tu celular). [Measured] 2. **Tonal second buttons.** "Conocer más" is a pale green `#e9fcf2` with green text, 48 high. [Measured] 3. **Light display, bold labels.** "Únete a Rappi" is 72 on 82 at weight 200, while restaurant names and buttons are 700. [Measured] 4. **Dark slate text.** `#2e2c36` for text and `#6a696e` for secondary, on white and a `#f7f8f9` field gray. [Measured] 5. **8px buttons, round logos.** Buttons and fields use 8, store logos are full circles, and social sign-in buttons are 28px pills. [Measured] Source for this file: the Colombian home page with its address field, the restaurants listing and the log in page, measured in a browser at 1440 and 390 wide on 2026-10-15, with a dark color scheme pass. The site is in Spanish. Rappi does not publish its design system. Stores and checkout need an address and an account. No app captures were used. See Known Gaps. ## Core ### Colors | Role | Value | Where | |------|-------|-------| | Mint green | `#29d884` with white text | Registrarme, Descargar, Continuar [Measured] | | Green wash | `#e9fcf2` with green text | Conocer más [Measured] | | Green outline | `#2acf86` | Ya tengo cuenta [Measured] | | Orange-red | `#ff441f` | Hero band, listing title [Measured] | | Ink | `#2e2c36` | Headings and body [Measured] | | Muted | `#6a696e` | Links and helper text [Measured] | | Blue | `#3870ff` | Store names and promo labels [Measured] | | Field gray | `#f7f8f9` | Address field [Measured] | | Border | `#e6ebf1` | Dividers [Measured] | | Purple | `#5e00be` | A financial product band [Measured] | | Black | `#000000` | The log in page background [Measured] | ### Typography PP Object Sans at 200, 400, 500, 600, 700 and 800, with Nunito in one widget. [Measured] | Role | Desktop | Mobile | Weight | |------|---------|--------|--------| | Display | 72 on 82.08 | 40 on 50 | 200 [Measured] | | Log in hero | 72 on 82.08, -1.44px | 32 on 41.92 | 400 desktop, 800 mobile [Measured] | | Section headline | 24 on 34.08, -0.24px | not measured | 700 [Measured] | | Title | 20 on 30 | 16 on 26 | 700 [Measured] | | Button | 16 on 26.08 | same | 700 [Measured] | | Body | 16 on 24 | same | 400 [Measured] | | Small | 14 on 23.94 | same | 400 to 700 [Measured] | | Tag | 12 on 21.96 | not measured | 700 [Measured] | ### Shape and spacing Buttons and fields use 8, cards 16, social buttons 28, store logo frames 50 and round tags 9999. [Measured] Buttons carry 10 by 16 padding. [Measured] ### Iconography and motion Not measured. [Inferred] ### Themes Light, with a black log in page. The dark color scheme pass changed nothing. [Measured] ## Platform: iOS How the Rappi iOS app looks and behaves was not captured. Rappi does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done. ### Back and up navigation Expected on iOS: Chevron plus previous title, swipe from the left edge. Not measured. [Inferred] ### Primary navigation Expected on iOS: Bottom tab bar, about five items. A home of service shortcuts (restaurants, market, pharmacy) with a bottom tab bar is expected. [Inferred] ### Main action Expected on iOS: Nav bar or bottom bar button. A green checkout or add button. [Inferred] ### Sheets, dialogs and messages Expected on iOS: Action sheets, alerts, modals. Not measured. [Inferred] ### Controls Expected on iOS: Cupertino switches, pickers, segmented controls. Not measured. [Inferred] ### Text sizing Expected on iOS: Dynamic Type. Not measured. [Inferred] ### Touch and pointer targets Expected on iOS: 44pt minimum. Not measured. [Inferred] ### Insets and system bars Expected on iOS: Safe areas, status bar. Not measured. [Inferred] ### Icons Expected on iOS: SF Symbols or custom. Not measured. [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. Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only. ### Platform conformance Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates. The app is expected to share the orange-red, the mint green and PP Object Sans with the web. [Inferred] ## Platform: Android How the Rappi Android app looks and behaves was not captured. Rappi does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done. ### Back and up navigation Expected on Android: System back and gesture, up arrow in the top bar. Not measured. [Inferred] ### Primary navigation Expected on Android: Navigation bar, rail on tablets. A home of service shortcuts (restaurants, market, pharmacy) with a bottom navigation bar is expected. [Inferred] ### Main action Expected on Android: Floating action button. A green checkout or add button. [Inferred] ### Sheets, dialogs and messages Expected on Android: Bottom sheets, dialogs, snackbars. Not measured. [Inferred] ### Controls Expected on Android: Material switches, pickers, chips. Not measured. [Inferred] ### Text sizing Expected on Android: Font scale. Not measured. [Inferred] ### Touch and pointer targets Expected on Android: 48dp minimum. Not measured. [Inferred] ### Insets and system bars Expected on Android: Edge to edge, system bars. Not measured. [Inferred] ### Icons Expected on Android: Material Symbols or custom. Not measured. [Inferred] ### Account and sign-in rules Expected on Android: Account deletion and data safety requirements. Note the date checked. Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only. ### Platform conformance Expected on Android: For each important component: what Android expects, what this app does, and why it deviates. The app is expected to share the orange-red, the mint green and PP Object Sans with the web. [Inferred] ## Platform: Web The home page, a restaurants listing and the log in page, measured at 1440 and 390 wide. ### Back and up navigation Expected on Web: Browser back, breadcrumbs. Browser back. [Observed] ### Primary navigation Expected on Web: Top nav or sidebar. A white header with the city chooser and Ingreso (log in) link, over the orange-red hero with its address field. The listing adds a green Registrarme button, 36 high. [Measured] ### Main action Expected on Web: Page-level button. Entering an address: a 48 high gray field with an 8px corner, and a "Usa tu ubicación actual" button (56 high on mobile). Sign-up and download buttons are mint green, 48 high. [Measured] ### Sheets, dialogs and messages Expected on Web: Modals, toasts. Not measured. [Inferred] ### Controls Expected on Web: Native or custom. The log in page stacks a green "Continuar con tu celular" pill (40 high, full round), Facebook blue and Apple black pills (28px corner) and a green outlined "Ya tengo cuenta". [Measured] ### Text sizing Expected on Web: Browser zoom. Sizes are fixed pixel values that step down at the mobile width (72 to 40 for the display). [Measured] ### Touch and pointer targets Expected on Web: Pointer and keyboard. Buttons are 36 to 56 high and fields 48. [Measured] ### Insets and system bars Expected on Web: Viewport, scrollbars. Not measured. [Inferred] ### Icons Expected on Web: Any. Not measured. [Inferred] ### Account and sign-in rules Expected on Web: Not applicable unless the product has accounts. The log in page offers phone number, Facebook and Apple as equal buttons. [Measured] ### Platform conformance Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates. A conventional responsive delivery site that leads with the address field. [Observed] ## Cross-platform consistency Consistent across platforms: the orange-red brand, the mint green actions and PP Object Sans. [Measured for web, Inferred for the apps] Intentionally different: not measured. [Inferred] ## Do's and Don'ts ### Do - Use orange-red for the brand band and mint green for actions. - Set big headlines light (200) and labels bold (700). - Use tonal green for second buttons. - Keep buttons and fields at 8px. ### Don't - Don't make buttons orange-red. - Don't set big headlines bold on the home page. - Don't use pure black text on white. ## Known Gaps - Stores, menus, the basket and checkout need an address and an account and were not measured. - Only the Colombian site was measured. - The iOS and Android apps were not captured, and Rappi publishes no design system, so every mobile topic is inferred. - Icons, motion and modals were not measured. - PP Object Sans is private. Montserrat was chosen by comparing the same 72px headline side by side: an exact width match with similar wide, round forms. Sora was a close second. - Contrast below 4.5 to 1 on shipped pairs: white on mint green (1.87 to 1), green on the green wash (1.75 to 1), the green outline button (2.03 to 1) and white on the orange-red hero (3.44 to 1, where the 72px text is large). The values were kept. - Account deletion and store policy rules were not verified.