Skip to content
DesignMunkDesignMunk Submit a site

Sprout Social

sproutsocial.com
Deliver smarter, faster business impact from social.
AI Software Next.js Homepage proxima-nova
Share Visit site
sproutsocial.com DESKTOP · 1440
Sprout Social

AI Breakdown

Design export

---
version: alpha
name: Sprout Social
description: Deliver smarter, faster business impact from social.
colors:
  primary: "#040404"
  secondary: "#27a155"
  tertiary: "#98e58e"
  neutral: "#ffffff"
  border: "#e5e7eb"
  brand-amazon-parrot: "#77dd66"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Proxima Nova
    fontSize: 57px
    fontWeight: 800
    lineHeight: 1.12
  headline-md:
    fontFamily: Proxima Nova
    fontSize: 43px
    fontWeight: 800
    lineHeight: 1.18
  headline-sm:
    fontFamily: Proxima Nova
    fontSize: 32px
    fontWeight: 800
    lineHeight: 1.25
  headline-xs:
    fontFamily: Proxima Nova
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.22
  body-md:
    fontFamily: Proxima Nova
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.67
rounded:
  sm: 6px
  md: 8px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 48px
  xl: 80px
components:
  button-primary:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 7.99999px 12px
    height: 59px
  button-secondary:
    textColor: "{colors.neutral}"
    rounded: 0px
    padding: 7.99999px 12px
    height: 59px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Sprout Social: Black hero and repeating green CTAs

## Overview

Sprout Social's UI is confident, data-forward and conversion-minded. Contrast is high (black, white and green), with dense headlines and compact body copy. Spacing follows an 8px system with broad section paddings for pace. The feel is serious and enterprise-ready, with flashes of color reserved for action states and emphasis.

## Colors

- **Primary (#040404):** Deep ink for core text and dark surfaces.
- **Secondary (#27a155):** Brand green for primary actions and success states.
- **Tertiary (#98e58e):** Soft mint for highlights, hover and secondary accents.
- **Neutral (#ffffff):** Page backgrounds, cards and inputs.
- **Border (#e5e7eb):** Subtle dividers and card outlines in the absence of shadow.
- **Brand-amazon-parrot (#77dd66):** Bright promotional accent used sparingly for marketing moments.
- **Surface (#ffffff):** Default surface for content areas.
- **On-surface (#040404):** Default text on light surfaces.

## Typography

All typography uses Proxima Nova with a bold-forward hierarchy. Headline levels: 57px/800/1.12 (hero), 43px/800/1.18 (section), 32px/800/1.25 (subheads), and 18px/600 (eyebrow or kicker). Body text is 16px with weight 600 and a generous 1.67 line height for readability in dense modules.
- Availability: Proxima Nova is custom/self-hosted and not freely obtainable by agents.
- Substitutes: Use Inter, Roboto (available via Google Fonts in this file), or Source Sans 3 to approximate its modern, neutral geometry and weight coverage (ensure access to 700/800 for headings).
- When Proxima Nova is unavailable, set font-family: "Inter", "Roboto", system-ui, sans-serif, preserving the tokened sizes and weights.

## Layout

Spacing follows an 8px base: xs 8px, sm 16px, md 32px, lg 48px, xl 80px. Use xl for section paddings and hero gutters, lg for intra-section spacing, and md for grid gaps and card stacks. A simple responsive grid (12 columns or halves/thirds) maps cleanly to 32px gutters. Keep vertical rhythm consistent by stacking content in multiples of 8px and anchoring CTAs to the same baseline across modules.

## Elevation & Depth

No shadows are used. Hierarchy is established through contrast (black vs white), the border token (#e5e7eb) for separation, and spacious paddings. Cards lift via white surfaces on dark backgrounds, not via elevation. Emphasis shifts through the secondary green and weight changes, not blur or depth effects.

## Shapes

Corners are understated: 6px for controls and primary buttons; 8px for cards and larger containers. Secondary and link buttons can be square (0px) to de-emphasize them. Keep shape language consistent—no mixed radii within a single component.

## Components

Button variants (tokened):
- Primary button: white background (#ffffff), black text (#040404), 6px radius, 59px fixed height, horizontal padding 12px.
- Secondary button: white text (#ffffff), square corners (0px), 59px height; apply on dark surfaces where a lower-emphasis action is needed.
- Link button: black text (#040404), no radius; use for inline navigational actions.
- Card: white background, black text, 8px radius, 16px padding; add a #e5e7eb border when separation is required.

Distinctive components on this page:
### Global Navigation
- Light surface (#ffffff) with primary text (#040404). Two right-aligned CTAs: one using the primary button spec; the other can drop emphasis via the secondary or link style. Horizontal spacing in 16–32px steps.
### Hero Lead Capture
- Dark slab anchored by the 57px/800 headline. Email input on white surface with 6px radius, paired with a high-emphasis CTA that may use secondary green (#27a155). Vertical spacing ~32–48px.
### Carousel Media + Dots
- Right-side media panel with simple dot pagination. Use 8px increments for dot sizing and gaps; align dots to the hero baseline.
### Feature List Grid
- Four-up list under a section header set at 43px/800. Each item pairs a bold 32px title with 16px body and a single CTA; use mint (#98e58e) or border rules to separate items.
### Integrations Band
- Logo row on a neutral or subtly darkened surface. Maintain 32px grid gaps and a top border (#e5e7eb) to contain the strip.
### Pricing Teaser
- Three plan cards using the card spec (8px radius, white background). Plan name at 32px/800, price can step up to 43px/800. Each card ends with a 59px CTA button.
### Testimonial & Metrics
- Quote blocks paired with metric cards. Use card spec for metrics; emphasize numerals with 43px/800 and supporting labels at 16px.
### Support Chat/Demo Widget
- Fixed, bottom-right card using the card token (white, 8px radius). Internal CTAs follow the 59px height rule; ensure it doesn't overlap core controls on small screens.

## Do's and Don'ts

- Do keep primary CTAs at 59px height with 6px radius for visual consistency across sections.
- Do reserve #27a155 for primary actions and key confirmations; use #98e58e only as a gentle highlight.
- Do separate content with #e5e7eb borders or generous padding; avoid drop shadows.
- Don't mix corner radii within a component—controls at 6px, cards at 8px, or square when de-emphasizing.
- Don't reduce body text below 16px or headline weights below 800; the bold-forward hierarchy is part of the brand voice.
- Don't place multiple green CTAs in the same immediate viewport unless one is clearly secondary (link style or reduced contrast).

## Agent Prompt Guide

Quick color reference:
- Text on light: #040404
- Background: #ffffff
- Border: #e5e7eb
- Accent (primary action): #27a155; Highlight: #98e58e

1) Build the hero
- Background #040404. H1: Proxima Nova 57px, 800, line-height 1.12 (fallback: Inter or Roboto). Body: 16px, 600, line-height 1.67, color #ffffff.
- Email input: 59px height, 6px radius, background #ffffff, text #040404.
- CTA button: 59px height, 6px radius; either white (#ffffff text #040404) or accent fill #27a155 with text #ffffff.

2) Three-up feature grid
- Container padding: 80px top/bottom, 32px sides. Section title 43px/800 (#040404).
- Each card: background #ffffff, 8px radius, 16px padding, optional 1px border #e5e7eb.
- Item title 32px/800; body 16px/600. Use #98e58e for small highlights.

3) Pricing teaser
- Row of three cards using the card spec. Plan title 32px/800; price 43px/800.
- CTA per card: 59px height, 6px radius; default to white (#ffffff text #040404) or accent #27a155.
- Gaps between cards: 32px; section padding: 80px.

4) Footer mega-nav
- Background #ffffff, top border #e5e7eb. Column gaps 32px.
- Column heading 18px/600; links 16px/600, color #040404. Link hover can use #27a155.

## Similar Brands

- Hootsuite — enterprise social management with dark/light contrasts and green accents; Hootsuite leans more on illustration than photography.
- Buffer — simpler grid and lighter palette; fewer dark slabs but similar clarity in CTA placement.
- Intercom — strong black/white contrast and crisp cards; swaps Sprout's green for blues and gradients.
- Salesforce — enterprise clarity and integrations focus; more expansive blue system and heavier use of illustrations.
- Segment (Twilio) — analytics-forward with crisp typography and minimal shadows; accents are purple/teal rather than green.

More like this

Browse AI →
mintlify.com
Mintlify AI
Mintlify
Self-updating knowledge infrastructure for agents—24/7.
Homepage · 6 minutes ago
pallyy.com
Pallyy Marketing
Pallyy
Plan, approve, schedule, and publish on one simple social calendar.
Homepage · 2 hours ago
pallyy.com
Pallyy Pricing Marketing
Pallyy Pricing
A tidy three-column layout makes comparison easy, with the “Agency” tier clearly emphasized through a blue card, primary button, and “Recommended” badge.…
Pricing · 2 hours ago
kagaz.app
Kagaz Developer Tools
Kagaz
Invoice generator and API that creates beautiful invoices fast.
Homepage · 13 hours ago