Food Delivery / iOS / Android / Web

Rappi

Rappi greets you in orange-red and moves you along in mint green, with feather-light headlines and bold labels in one wide geometric face.

Download
  • #FF441F
  • #29D884
  • #E9FCF2
  • #2E2C36
  • #3870FF
  • #F7F8F9

Color

Every color token in the file, grouped by role.

Brand

  • primary#29D884
  • on primary#FFFFFF
  • primary wash#E9FCF2

Surfaces

  • canvas#FFFFFF

Text

  • on orange#FFFFFF
  • ink#2E2C36
  • ink muted#6A696E
  • link blue#3870FF

Lines

  • outline green#2ACF86
  • border#E6EBF1

More

  • orange#FF441F
  • field#F7F8F9
  • purple#5E00BE
  • night#000000

Typography

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

  • PP Object SansPP Object Sans is private and not available in open fonts. Shown in Montserrat, the closest open match.
  • display72px / 200 / 82.08px

    Rappi

  • headline24px / 700 / 34.08px

    Pack my box with five dozen liquor jugs

  • title20px / 700 / 30px

    Pack my box with five dozen liquor jugs

  • button16px / 700 / 26.08px

    Continue to checkout

  • body16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • small14px / 400 / 23.94px

    The quick brown fox jumps over the lazy dog

  • tag12px / 700 / 21.96px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • xs3px
  • sm8px
  • md16px
  • lg28px
  • xl50px
  • pill9999px

Spacing

The spacing scale, drawn to size.

  • xs6px
  • sm10px
  • md12px
  • base16px
  • lg20px

Components

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

  • button primary
    button-primary
  • button tonal
    button-tonal
  • login outline
    login-outline
  • search field
    search-field
  • hero band
    hero-band
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 112 lines
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

RoleValueWhere
Mint green#29d884 with white textRegistrarme, Descargar, Continuar [Measured]
Green wash#e9fcf2 with green textConocer más [Measured]
Green outline#2acf86Ya tengo cuenta [Measured]
Orange-red#ff441fHero band, listing title [Measured]
Ink#2e2c36Headings and body [Measured]
Muted#6a696eLinks and helper text [Measured]
Blue#3870ffStore names and promo labels [Measured]
Field gray#f7f8f9Address field [Measured]
Border#e6ebf1Dividers [Measured]
Purple#5e00beA financial product band [Measured]
Black#000000The log in page background [Measured]

Typography

PP Object Sans at 200, 400, 500, 600, 700 and 800, with Nunito in one widget. [Measured]

RoleDesktopMobileWeight
Display72 on 82.0840 on 50200 [Measured]
Log in hero72 on 82.08, -1.44px32 on 41.92400 desktop, 800 mobile [Measured]
Section headline24 on 34.08, -0.24pxnot measured700 [Measured]
Title20 on 3016 on 26700 [Measured]
Button16 on 26.08same700 [Measured]
Body16 on 24same400 [Measured]
Small14 on 23.94same400 to 700 [Measured]
Tag12 on 21.96not measured700 [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.