Rappi Styles

Background colors

The following classes can be applied to change the background palette.

Main backgrounds
                
<div class="rp-bg-white">
  <!-- #FFFFFF -->
</div>
                
              
                
<div class="rp-bg-black">
  <!-- #000000 -->
</div>
                
              
                
<div class="rp-bg-brand">
  <!-- #ff9259 #ff2426 -->
</div>
                
              
                
<div class="rp-bg-primary-light">
  <!-- #FAFAF8 -->
</div>
                
              
                
<div class="rp-bg-primary-dark">
  <!-- #332927 -->
</div>
                
              
                
<div class="rp-bg-secondary-light">
  <!-- #706967 .7 -->
</div>
                
              
                
<div class="rp-bg-secondary-dark">
  <!-- #706967 -->
</div>
                
              
                
<div class="rp-bg-success-gradient">
  <!-- #65E06E #0CC665 -->
</div>
                
              
                
<div class="rp-bg-alert-gradient">
  <!-- #FFA600 #FF7D00 -->
</div>
                
              
                
<div class="rp-bg-error-gradient">
  <!-- #FF4E4E #FF2425 -->
</div>
                
              
Blue backgrounds
                
<div class="rp-bg-blue-1">
  <!-- #ecfcff -->
</div>
                
              
                
<div class="rp-bg-blue-2">
  <!-- #1d9ff3 -->
</div>
                
              
                
<div class="rp-bg-blue-3">
  <!-- #1DA1F2 -->
</div>
                
              
                
<div class="rp-bg-blue-4">
  <!-- #1778f2 -->
</div>
                
              
                
<p class="rp-bg-blue-5">
  <!-- #35497B -->
</p>
                
              
Purple backgrounds
                
<div class="rp-bg-purple-1">
  <!-- #dcdbff -->
</div>
                
              
                
<div class="rp-bg-purple-2">
  <!-- #8f8fc1 -->
</div>
                
              
                
<div class="rp-bg-purple-3">
  <!-- #913cff -->
</div>
                
              
                
<div class="rp-bg-purple-4">
  <!-- #980DD9 -->
</div>
                
              
                
<div class="rp-bg-purple-5">
  <!-- #6816fc -->
</div>
                
              
                
<div class="rp-bg-purple-6">
  <!-- #6816fc #913cff -->
</div>
                
              
Orange backgrounds
                
<div class="rp-bg-orange-1">
  <!-- #f8b595 -->
</div>
                
              
                
<div class="rp-bg-orange-2">
  <!-- #ffe981 -->
</div>
                
              
                
<div class="rp-bg-orange-3">
  <!-- #ffd559 -->
</div>
                
              
                
<div class="rp-bg-orange-4">
  <!-- #ff8f57 -->
</div>
                
              
                
<div class="rp-bg-orange-5">
  <!-- #ff7175 -->
</div>
                
              
                
<div class="rp-bg-orange-6">
  <!-- #815d39 -->
</div>
                
              
Green backgrounds
                
<div class="rp-bg-green-1">
  <!-- #d7fffe -->
</div>
                
              
                
<div class="rp-bg-green-2">
  <!-- #8bc1c1 -->
</div>
                
              
                
<div class="rp-bg-green-3">
  <!-- #09bc8a -->
</div>
                
              
                
<div class="rp-bg-green-4">
  <!-- #0CC665 -->
</div>
                
              
Pink backgrounds
                
<div class="rp-bg-pink-1">
  <!-- #ffe1d3 -->
</div>
                
              
                
<div class="rp-bg-pink-2">
  <!-- #eaceb4 -->
</div>
                
              
                
<div class="rp-bg-pink-3">
  <!-- #cfaa99 -->
</div>
                
              
Gray backgrounds
                
<div class="rp-bg-gray-1">
  <!-- #f4f4f4 -->
</div>
                
              
                
<div class="rp-bg-gray-2">
  <!-- #f8f9fb -->
</div>
                
              
                
<div class="rp-bg-gray-3">
  <!-- #e5edef -->
</div>
                
              
                
<div class="rp-bg-gray-4">
  <!-- #f9f9f8 -->
</div>
                
              
                
<div class="rp-bg-gray-5">
  <!-- #f7f7f7 -->
</div>
                
              
                
<div class="rp-bg-gray-6">
  <!-- #efece9 -->
</div>
                
              
                
<div class="rp-bg-gray-7">
  <!-- #e5e5e4 -->
</div>
                
              
                
<div class="rp-bg-gray-8">
  <!-- #e8e7e7 -->
</div>
                
              
                
<div class="rp-bg-gray-9">
  <!-- #c7c7c7 -->
</div>
                
              
                
<div class="rp-bg-gray-10">
  <!-- #b8b4b4 -->
</div>
                
              
                
<div class="rp-bg-gray-11">
  <!-- #9faab7 -->
</div>
                
              
                
<div class="rp-bg-gray-12">
  <!-- #7d7d7d -->
</div>
                
              
                
<div class="rp-bg-gray-13">
  <!-- #333333 -->
</div>
                
              

Borders radius

The following classes can be applied to change the border radius.

Border radius
                
<div class="rp-br-4">
  <!-- 4px -->
</div>
                
              
                
<div class="rp-br-8">
  <!-- 8px -->
</div>
                
              
                
<div class="rp-br-16">
  <!-- 16px -->
</div>
                
              

Buttons

The following classes can be applied to change the button style.

And the following classes can be applied to change the button palette.

Flat
                
<button class="rp-button">
  Default
</button>
                
              
                
<button class="rp-button rp-primary">
  Primary
</button>
                
              
                
<button class="rp-button rp-success">
  Success
</button>
                
              
                
<button class="rp-button rp-accent">
  Accent
</button>
                
              
                
<button class="rp-button rp-warn">
  Warn
</button>
                
              
                
<button class="rp-button" disabled>
  Disabled
</button>
                
              
                
<button class="rp-button rp-primary rp-big">
  Primary
</button>
                
              
                
<button class="rp-button rp-primary rp-small">
  Primary
</button>
                
              
                
<button class="rp-button rp-primary rp-loading">
  Loading primary
</button>
                
              
                
<button class="rp-button rp-success rp-loading">
  rp-loading success
</button>
                
              
                
<button class="rp-button rp-accent rp-loading">
  Loading accent
</button>
                
              
                
<button class="rp-button rp-warn rp-loading">
  Loading warn
</button>
                
              
Raisable
                
<button class="rp-button rp-raisable">
  Default
</button>
                
              
                
<button class="rp-button rp-raisable rp-primary">
  Primary
</button>
                
              
                
<button class="rp-button rp-raisable rp-success">
  Success
</button>
                
              
                
<button class="rp-button rp-raisable rp-accent">
  Accent
</button>
                
              
                
<button class="rp-button rp-raisable rp-warn">
  Warn
</button>
                
              
                
<button class="rp-button rp-raisable" disabled>
  Disabled
</button>
                
              
                
<button class="rp-button rp-raisable rp-primary rp-big">
  Primary
</button>
                
              
                
<button class="rp-button rp-raisable rp-primary rp-small">
  Primary
</button>
                
              
Filled
                
<button class="rp-button rp-filled rp-raisable">
  Default
</button>
                
              
                
<button class="rp-button rp-filled rp-raisable rp-primary">
  Primary
</button>
                
              
                
<button class="rp-button rp-filled rp-raisable rp-success">
  Success
</button>
                
              
                
<button class="rp-button rp-filled rp-raisable rp-accent">
  Accent
</button>
                
              
                  
<button class="rp-button rp-filled rp-raisable rp-warn">
  Warn
</button>
                  
                
                
<button class="rp-button rp-filled rp-raisable" disabled>
  Disabled
</button>
                
              
                
<button class="rp-button rp-filled rp-raisable rp-primary rp-big">
  Primary
</button>
                
              
                
<button class="rp-button rp-filled rp-raisable rp-primary rp-small">
  Primary
</button>
                
              
                
<button class="rp-button rp-filled rp-raisable rp-loading">
  Loading
</button>
                
              
Outlined
                
<button class="rp-button rp-outlined rp-raisable">
  Default
</button>
                
              
                
<button class="rp-button rp-outlined rp-raisable rp-primary">
  Primary
</button>
                
              
                
<button class="rp-button rp-outlined rp-raisable rp-success">
  Success
</button>
                
              
                
<button class="rp-button rp-outlined rp-raisable rp-accent">
  Accent
</button>
                
              
                
<button class="rp-button rp-outlined rp-raisable rp-warn">
  Warn
</button>
                
              
                
<button class="rp-button rp-outlined rp-primary rp-big">
  Primary
</button>
                
              
                
<button class="rp-button rp-outlined rp-primary rp-small">
  Primary
</button>
                
              
                
<button class="rp-button rp-outlined rp-fillable">
  Fillable
</button>
                
              
                
<button class="rp-button rp-outlined rp-fillable rp-primary">
  Primary
</button>
                
              
                
<button class="rp-button rp-outlined rp-fillable rp-success">
  Success
</button>
                
              
                
<button class="rp-button rp-outlined rp-fillable rp-accent">
  Accent
</button>
                
              
                
<button class="rp-button rp-outlined rp-fillable rp-warn">
  Warn
</button>
                
              
                
<button class="rp-button rp-outlined rp-primary rp-big">
  Primary
</button>
                
              
                
<button class="rp-button rp-outlined rp-primary rp-small">
  Primary
</button>
                
              
                
<button class="rp-button rp-outlined" disabled>
  Disabled
</button>
                
              
                
<button class="rp-button rp-outlined rp-loading">
  Loading
</button>
                
              

Fonts

The following classes can be applied to change the font style (text or to title). By default the font is rp-f-text

The following classes can be applied to change the font size and font style.

Tags default

Heading 1

                
<h1 class="h1">
 Heading 1 <!-- 2.5rem -->
</h1>
                
              

Heading 2

                
<h2 class="h2">
 Heading 2 <!-- 2rem -->
</h2>
                
              

Heading 3

                
<h3 class="h3">
 Heading 3 <!-- 1.75rem -->
</h3>
                
              

Heading 4

                
<h4 class="h4">
 Heading 4 <!-- 1.5rem -->
</h4>
                
              
Heading 5
                
<h5 class="h5">
 Heading 5 <!-- 1.25rem -->
</h5>
                
              
Heading 6
                
<h6 class="h6">
 Heading 6 <!-- 1rem -->
</h6>
                
              

Paragraph

                
<p class="p">
 Paragraph <!-- 1rem -->
</p>
                
              
Tags with title and text style

Heading 1

                
<h1 class="h1 rp-f-heading">
 Heading 1 <!-- 2.5rem -->
</h1>
                
              

Heading 2

                
<h2 class="h2 rp-f-heading">
 Heading 2 <!-- 2rem -->
</h2>
                
              

Heading 3

                
<h3 class="h3 rp-f-heading">
 Heading 3 <!-- 1.75rem -->
</h3>
                
              

Heading 4

                
<h4 class="h4 rp-f-heading">
 Heading 4 <!-- 1.5rem -->
</h4>
                
              
Heading 5
                
<h5 class="h5 rp-f-heading">
 Heading 5 <!-- 1.25rem -->
</h5>
                
              
Heading 6
                
<h6 class="h6 rp-f-heading">
 Heading 6 <!-- 1rem -->
</h6>
                
              

Paragraph

                
<p class="p rp-f-text">
 Paragraph <!-- 1rem -->
</p>
                
              
Customized texts

Big title

                
<h1 class="f-big-title">
 Big title <!-- 58px -->
</h1>
                
              

Mid title

                
<h2 class="f-medium-title">
 Mid title <!-- 28px -->
</h2>
                
              

Title

                
<h3 class="f-title">
 Title <!-- 20px -->
</h3>
                
              

Headline

                
<h4 class="f-headline">
 Headline <!-- 18px -->
</h4>
                
              

Body

                
<p class="f-body">
 Body <!-- 16px -->
</p>
                
              

Caption 1

                
<p class="f-caption-1">
 Caption 1 <!-- 14px -->
</p>
                
              

Caption 2

                
<p class="f-caption-2">
 Caption 2 <!-- 12px -->
</p>
                
              

Subhead

                
<p class="f-subhead">
 Subhead <!-- 10px -->
</p>
                
              
                
<label class="f-label">
 Label <!-- 10px -->
</label>
                
              

Small

                
<p class="f-small">
 Small <!-- 8px -->
</p>
                
              

Icons

The following classes can be applied to add an icon

Icons
                
<i class="iconf-Logo-3x">
 <!-- Rappi -->
</i>
                
              
                
<i class="iconf-gift">
 <!-- Gift -->
</i>
                
              
                
<i class="iconf-local-bar">
 <!-- Local bar -->
</i>
                
              
                
<i class="iconf-local-grocery-store">
 <!-- Local grosery store -->
</i>
                
              
                
<i class="iconf-new-releases">
 <!-- New releases -->
</i>
                
              
                
<i class="iconf-rappi-moustache">
 <!-- Rappi moustache -->
</i>
                
              
                
<i class="iconf-restaurant-menu">
 <!-- Restaurant Menu -->
</i>
                
              
                
<i class="iconf-sync">
 <!-- Sync -->
</i>
                
              
                
<i class="iconf-work">
 <!-- Work -->
</i>
                
              
                
<i class="iconf-delete-outline">
 <!-- Delete -->
</i>
                
              
                
<i class="iconf-account_state3x">
 <!-- Acoount -->
</i>
                
              
                
<i class="iconf-add_money3x">
 <!-- Add money -->
</i>
                
              
                
<i class="iconf-add_phone3x">
 <!-- Add phone -->
</i>
                
              
                
<i class="iconf-add_profile3x">
 <!-- Add profile -->
</i>
                
              
                
<i class="iconf-add-card">
 <!-- Add cart -->
</i>
                
              
                
<i class="iconf-admin3x">
 <!-- Admin -->
</i>
                
              
                
<i class="iconf-arrrow_dopwn3x">
 <!-- Arrow-down -->
</i>
                
              
                
<i class="iconf-arrrow_left3x">
 <!-- Arrow left -->
</i>
                
              
                
<i class="iconf-arrrow_right3x">
 <!-- Arrow right -->
</i>
                
              
                
<i class="iconf-arrrow_up3x">
 <!-- Arrow up -->
</i>
                
              
                
<i class="iconf-ATM3x">
 <!-- ATM -->
</i>
                
              
                
<i class="iconf-bank3x">
 <!-- Bank -->
</i>
                
              
                
<i class="iconf-bars_code3x">
 <!-- Bars -->
</i>
                
              
                
<i class="iconf-bell">
 <!-- Bell -->
</i>
                
              
                
<i class="iconf-bars_code3x">
 <!-- Bars -->
</i>
                
              
                
<i class="iconf-bmo3x">
 <!-- BMO -->
</i>
                
              
                
<i class="iconf-cake3x">
 <!-- Cake -->
</i>
                
              
                
<i class="iconf-bars_code3x">
 <!-- Bars -->
</i>
                
              
                
<i class="iconf-calendar_in3x">
 <!-- Calendar -->
</i>
                
              
                
<i class="iconf-calendar_out3x">
 <!-- Calendar -->
</i>
                
              
                
<i class="iconf-calendar">
 <!-- Calendar -->
</i>
                
              
                
<i class="iconf-camera">
 <!-- Camera -->
</i>
                
              
                
<i class="iconf-candado">
 <!-- Lock -->
</i>
                
              
                
<i class="iconf-basket">
 <!-- Basket -->
</i>
                
              
                
<i class="iconf-card_reload3x">
 <!-- Card reload -->
</i>
                
              
                
<i class="iconf-cash">
 <!-- Cash -->
</i>
                
              
                
<i class="iconf-cashback3x">
 <!-- Cash back -->
</i>
                
              

Inputs

The following classes can be applied to change the input style.

Inputs
                
<input class="rp-input">
                
              
                
<input class="rp-input rp-input-invalid">
                
              

Loaders

The following classes can be applied to add a loader style.

Loaders
                
<div class="rp-loader"></div>
                
              

Texts colors

The following classes can be applied to change the button palette.

Main text colors

White

                
<p class="rp-text-white">
  White <!-- #FFFFFF -->
</p>
                
              

Black

                
<p class="rp-text-black">
  Black <!-- #000000 -->
</p>
                
              

Brand

                
<p class="rp-text-brand">
  Brand <!-- #FF441F -->
</p>
                
              

Primary

                
<p class="rp-text-primary-dark">
  Primary <!-- #332927 -->
</p>
                
              

Secondary dark

                
<p class="rp-text-secondary-dark">
  Secondary dark <!-- #706967 -->
</p>
                
              

Secondary light

                
<p class="rp-text-secondary-light">
  Secondary light <!-- #706967 .7 -->
</p>
                
              

Success

                
<p class="rp-text-success">
  Success <!-- #0CC665 -->
</p>
                
              

Alert

                
<p class="rp-text-alert">
  Alert <!-- #FF7D00 -->
</p>
                
              

Error

                
<p class="rp-text-error">
  Error <!-- #FF2425 -->
</p>
                
              
Blue colors text

Blue 1

                
<p class="rp-text-blue-1">
  Blue 1 <!-- #ecfcff -->
</p>
                
              

Blue 2

                
<p class="rp-text-blue-2">
  Blue 2 <!-- #1d9ff3 -->
</p>
                
              

Blue 3

                
<p class="rp-text-blue-3">
  Blue 3 <!-- #1DA1F2 -->
</p>
                
              

Blue 4

                
<p class="rp-text-blue-4">
  Blue 4 <!-- #1778f2 -->
</p>
                
              

Blue 5

                
<p class="rp-text-blue-5">
  Blue 5 <!-- #35497B -->
</p>
                
              
Purple colors text

Purple 1

                
<p class="rp-text-purple-1">
  Purple 1 <!-- #dcdbff -->
</p>
                
              

Purple 2

                
<p class="rp-text-purple-2">
  Purple 2 <!-- #8f8fc1 -->
</p>
                
              

Purple 3

                
<p class="rp-text-purple-3">
  Purple 3 <!-- #913cff -->
</p>
                
              

Purple 4

                
<p class="rp-text-purple-4">
  Purple 4 <!-- #980DD9 -->
</p>
                
              

Purple 5

                
<p class="rp-text-purple-5">
  Purple 5 <!-- #6816fc -->
</p>
                
              
Orange colors text

Orange 1

                
<p class="rp-text-orange-1">
  Orange 1 <!-- #f8b595 -->
</p>
                
              

Orange 2

                
<p class="rp-text-orange-2">
  Orange 2 <!-- #ffe981 -->
</p>
                
              

Orange 3

                
<p class="rp-text-orange-3">
  Orange 3 <!-- #ffd559 -->
</p>
                
              

Orange 4

                
<p class="rp-text-orange-4">
  Orange 4 <!-- #ff8f57 -->
</p>
                
              

Orange 5

                
<p class="rp-text-orange-5">
  Orange 5 <!-- #ff7175 -->
</p>
                
              

Orange 6

                
<p class="rp-text-orange-5">
  Orange 6 <!-- #815d39 -->
</p>
                
              
Green colors text

Green 1

                
<p class="rp-text-green-1">
  Green 1 <!-- #d7fffe -->
</p>
                
              

Green 2

                
<p class="rp-text-green-2">
  Green 2 <!-- #8bc1c1 -->
</p>
                
              

Green 3

                
<p class="rp-text-green-3">
  Green 3 <!-- #09bc8a -->
</p>
                
              

Green 4

                
<p class="rp-text-green-4">
  Green 4 <!-- #0CC665 -->
</p>
                
              
Pink colors text

Pink 1

                
<p class="rp-text-pink-1">
  Pink 1 <!-- #ffe1d3 -->
</p>
                
              

Pink 2

                
<p class="rp-text-pink-2">
  Pink 2 <!-- #eaceb4 -->
</p>
                
              

Pink 3

                
<p class="rp-text-pink-3">
  Pink 3 <!-- #cfaa99 -->
</p>
                
              
Gray colors text

Gray 1

                
<p class="rp-text-gray-1">
  Gray 1 <!-- #f4f4f4 -->
</p>
                
              

Gray 2

                
<p class="rp-text-gray-2">
  Gray 2 <!-- #f8f9fb -->
</p>
                
              

Gray 3

                
<p class="rp-text-gray-3">
  Gray 3 <!-- #e5edef -->
</p>
                
              

Gray 4

                
<p class="rp-text-gray-4">
  Gray 4 <!-- #f9f9f8 -->
</p>
                
              

Gray 5

                
<p class="rp-text-gray-5">
  Gray 5 <!-- #f7f7f7 -->
</p>
                
              

Gray 6

                
<p class="rp-text-gray-6">
  Gray 6 <!-- #efece9 -->
</p>
                
              

Gray 7

                
<p class="rp-text-gray-7">
  Gray 7 <!-- #e5e5e4 -->
</p>
                
              

Gray 8

                
<p class="rp-text-gray-8">
  Gray 8 <!-- #e8e7e7 -->
</p>
                
              

Gray 9

                
<p class="rp-text-gray-9">
  Gray 9 <!-- #c7c7c7 -->
</p>
                
              

Gray 10

                
<p class="rp-text-gray-10">
  Gray 10 <!-- #b8b4b4 -->
</p>
                
              

Gray 11

                
<p class="rp-text-gray-11">
  Gray 11 <!-- #9faab7 -->
</p>
                
              

Gray 12

                
<p class="rp-text-gray-12">
  Gray 12 <!-- #7d7d7d -->
</p>
                
              

Gray 13

                
<p class="rp-text-gray-13">
  Gray 13 <!-- #333333 -->
</p>