CTA design
Before implementing a Call to Action (CTA) on your website or application, we recommend reviewing Instacart's button design guidelines.
Button design guidelines
CTA buttons must be round, with Instacart’s:
- Branded logo
- Color scheme
- Font usage
- Padding, and spacing
- Dark
- Light
- White
- Button Height: 46px
- Button Width: Dynamic based on Text
- Button Text:
- “Get Recipe Ingredients” (this copy has been A/B tested and performs best)
- “Get Ingredients” (use this when recipes are not included)
- “Shop with Instacart” (approved by our legal team)
- “Order with Instacart” (approved by our legal team)
- Logo Size: 22px
- Padding Vertical: 16px
- Padding Horizontal: 18px
- Background Color: #003D29
- Foreground Text Color: #FAF1E5
- Foreground Full Color Logo (#FF7009 & #0AAD0A)
- Stroke Color: N/A
- Stroke Weight: N/A
- Button Height: 46px
- Button Width: Dynamic based on Text
- Button Text:
- “Get Recipe Ingredients” (this copy has been A/B tested and performs best)
- “Get Ingredients” (use this when recipes are not included)
- “Shop with Instacart” (approved by our legal team)
- “Order with Instacart” (approved by our legal team)
- Logo Size: 22px
- Padding Vertical: 16px
- Padding Horizontal: 18px
- Background Color: #FAF1E5
- Foreground Text Color: #003D29
- Foreground Full Color Logo (#FF7009 & #0AAD0A)
- Stroke Color: #EFE9E1
- Stroke Weight: 0.5px
- Button Height: 46px
- Button Width: Dynamic based on Text
- Button Text:
- “Get Recipe Ingredients” (this copy has been A/B tested and performs best)
- “Get Ingredients” (use this when recipes are not included)
- “Shop with Instacart” (approved by our legal team)
- “Order with Instacart” (approved by our legal team)
- Logo Size: 22px
- Padding Vertical: 16px
- Padding Horizontal: 18px
- Background Color: #FFFFFF
- Foreground Text Color: #000000
- Foreground Full Color Logo (#FF7009 & #0AAD0A)
- Stroke Color: #E8E9EB
- Stroke Weight: 0.5px