# Sprout Social — Style Reference
> Ordered command center
**Theme:** dark
Sprout Social presents a commanding, professional digital environment with a strong dark foundation accented by clean white surfaces and precise typography. The design emphasizes clarity and direct interaction, utilizing a single vivid green as its primary action indicator to punctuate key user pathways. Components maintain a uniform, measured appearance with consistent corner radii, conveying stability and trustworthiness. The overall feel is one of a dense, feature-rich interface presented with visual order and an accessible rhythm.
## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Midnight Core | `#040404` | `--color-midnight-core` | Page backgrounds, header, footer, deep surface accents, primary text on light backgrounds |
| Canvas White | `#ffffff` | `--color-canvas-white` | Card backgrounds, navigation backgrounds, input fields, primary text on dark backgrounds |
| Ghost Gray | `#d9d9d9` | `--color-ghost-gray` | Subtle borders, secondary text, decorative fills, and inactive states |
| Focus Silver | `#cbcece` | `--color-focus-silver` | Input borders, subtle button backgrounds, and soft shadows indicating elevation |
| Slate Text | `#162020` | `--color-slate-text` | Secondary text on light backgrounds, input text, and card text |
| Olive Accent | `#98e58e` | `--color-olive-accent` | Green action color for filled buttons, selected navigation states, and focused conversion moments |
| Sky Spectrum Fade | `linear-gradient(1deg, rgb(89, 203, 89) -31.61%, rgb(152, 229, 142) 8.18%, rgb(125, 234, 213) 36.91%, rgb(161, 194, 248) 63.53%, rgb(32, 91, 195) 109.97%)` | `--color-sky-spectrum-fade` | Hero section backgrounds, illustrative elements — indicating growth and expansiveness |
| Magenta Mist Fade | `linear-gradient(rgb(172, 68, 168) -33.09%, rgb(236, 154, 241) 25.66%, rgb(216, 215, 249) 68.39%, rgb(255, 255, 255) 110.38%)` | `--color-magenta-mist-fade` | Illustrative elements, UI highlights — conveying a soft, inviting depth |
## Tokens — Typography
### Proxima Nova — The primary typeface for all text elements. Its geometric sans-serif structure provides clarity and a modern, professional tone, supporting both compact UI labels and expressive marketing headlines. · `--font-proxima-nova`
- **Substitute:** Montserrat
- **Weights:** 400, 700, 800
- **Sizes:** 13px, 16px, 18px, 21px, 24px, 32px, 43px, 57px, 76px
- **Line height:** 1.05, 1.12, 1.18, 1.25, 1.33, 1.40, 1.48, 1.50, 1.64
- **Letter spacing:** normal
- **Role:** The primary typeface for all text elements. Its geometric sans-serif structure provides clarity and a modern, professional tone, supporting both compact UI labels and expressive marketing headlines.
### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 13px | 1.5 | — | `--text-caption` |
| body | 16px | 1.48 | — | `--text-body` |
| subheading | 18px | 1.4 | — | `--text-subheading` |
| heading-sm | 24px | 1.33 | — | `--text-heading-sm` |
| heading | 32px | 1.25 | — | `--text-heading` |
| heading-lg | 43px | 1.18 | — | `--text-heading-lg` |
| display | 57px | 1.12 | — | `--text-display` |
## Tokens — Spacing & Shapes
**Base unit:** 4px
**Density:** comfortable
### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 56 | 56px | `--spacing-56` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 160 | 160px | `--spacing-160` |
| 200 | 200px | `--spacing-200` |
### Border Radius
| Element | Value |
|---------|-------|
| cards | 16px |
| badges | 24px |
| inputs | 6px |
| buttons | 6px |
| largeElements | 64px |
### Shadows
| Name | Value | Token |
|------|-------|-------|
| sm | `rgba(39, 51, 51, 0.24) 0px 4px 8px 0px` | `--shadow-sm` |
### Layout
- **Section gap:** 32px
- **Card padding:** 16px
- **Element gap:** 16px
## Components
### Primary Action Button (Filled)
**Role:** Call to action
Filled background in Olive Accent (#98e58e), text in Midnight Core (#040404), with a 6px border-radius, 8px vertical and 12px horizontal padding. Signals the primary interactive element on the page.
### Ghost Button (Dark)
**Role:** Secondary action
Transparent background, text in Canvas White (#ffffff), with a 0px border-radius and 16px padding on all sides. Used for less prominent actions, maintaining hierarchy against dark backgrounds.
### Ghost Button (Light)
**Role:** Secondary action
Transparent background and text in Midnight Core (#040404), with a 0px border-radius and no padding, usually found in navigation or inline actions.
### White Information Card
**Role:** Content container
Canvas White (#ffffff) background, 16px border-radius, no shadow, with 24px padding on all sides. Used for presenting information blocks on dark backgrounds.
### Dark Feature Card
**Role:** Feature showcase
Midnight Core (#040404) background, 8px border-radius, no shadow, with 40px vertical and 32px horizontal padding. Highlights product features or integrations.
### Hero Input Field
**Role:** User input
Canvas White (#ffffff) background, Slate Text (#162020) for text, Focus Silver (#cbcece) 1px border, 4px border-radius, with 8px padding on all sides. For prominent email capture in hero sections.
### Navigation Link
**Role:** Navigation element
Inherits text color from parent context, typically Midnight Core or Canvas White. No background or padding. Hover states implied by color change or subtle underline.
## Do's and Don'ts
### Do
- Prioritize text legibility by ensuring Midnight Core (#040404) on Canvas White (#ffffff) backgrounds, and Canvas White on Midnight Core backgrounds.
- Use Olive Accent (#98e58e) exclusively for primary calls-to-action or key success indicators; avoid decorative use.
- Apply a 16px border-radius to all primary content cards and navigation containers to maintain a consistent soft edge.
- Maintain a comfortable rhythm with 'elementGap': 16px between most interactive elements and 'sectionGap': 32px between major content blocks.
- All headings should use Proxima Nova weight 700 or 800, carefully selecting corresponding sizes from the typescale to establish a clear hierarchy.
- Employ the rgba(39, 51, 51, 0.24) 0px 4px 8px 0px shadow sparingly, primarily for the sticky navigation, to indicate subtle elevation without visual clutter.
- Ensure input fields have a 1px Focus Silver (#cbcece) border and a 4px border-radius for clear definition and soft containment.
### Don't
- Do not introduce new chromatic colors outside of Olive Accent (#98e58e) for interactive elements.
- Avoid arbitrary changes in border-radius; adhere to 16px for cards, 6px for buttons/inputs, and 24px for badges.
- Do not use generic system fonts; only use Proxima Nova or its designated substitute.
- Do not use shadows on content cards directly; rely on background color changes for surface differentiation.
- Do not deviate from the established spacing units; avoid custom padding or margin values that aren't multiples of 4px.
- Avoid hero sections with busy imagery; prioritize gradients or a solid Midnight Core background to highlight text content and interactive elements.
- Do not use black (#000000) for primary text on default light backgrounds where Midnight Core (#040404) is available for better visual cohesion.
## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Midnight Core Canvas | `#040404` | Primary page background for main content areas and deep sections. |
| 1 | Canvas White Panel | `#ffffff` | Card backgrounds, main navigation, and prominent content blocks appearing on the Midnight Core Canvas. |
## Elevation
- **Sticky Navigation Bar:** `rgba(39, 51, 51, 0.24) 0px 4px 8px 0px`
## Imagery
The visual language relies heavily on product UI screenshots and stylized workflow diagrams, which are embedded within soft-edged white cards or presented within the primary content area. When photography is used, it features high-key, professional, and slightly staged images of individuals interacting with technology, often with a clear focus on the user. Illustrations are dimensional and gradient-filled, avoiding hard outlines, featuring organic shapes that blend into backgrounds. Icons are minimal, either solid-filled or slightly outlined, often monochrome. Imagery serves an explanatory and product-showcasing role, rarely decorative atmosphere, and is generally contained within defined spaces rather than full-bleed.
## Layout
The page primarily uses a full-bleed structure with content often contained within a maximum width section, likely centered. The hero section is full-bleed with a dark background, featuring a prominent centered headline and input fields. Subsequent sections alternate between dark (Midnight Core) and light (Canvas White) backgrounds, creating a clear vertical rhythm. Content within sections is often arranged in multi-column layouts, such as two-column text-left/visual-right patterns or three-column card grids for features and integrations. Navigation is a fixed top bar on a Canvas White background, while the header itself is initially on Midnight Core. The overall density feels comfortable, providing ample breathing room around content blocks.
## Agent Prompt Guide
Quick Color Reference:
- text: #040404
- background: #040404
- border: #d9d9d9
- accent: #98e58e
- primary action: #98e58e (filled action)
Example Component Prompts:
- Create a Primary Action Button: #98e58e background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.
- Create a White Information Card: Canvas White (#ffffff) background, 16px border-radius, 24px padding. Headline 'Understand your audience' Proxima Nova weight 700, size 32px, Midnight Core (#040404). Body text 'Analyze demographics, interests, and activity patterns to tailor your content strategy.' Proxima Nova weight 400, size 16px, Slate Text (#162020).
- Create a Dark Feature Card: Midnight Core (#040404) background, 8px border-radius, 40px vertical/32px horizontal padding. Headline 'Seamless Integrations' Proxima Nova weight 700, size 24px, Canvas White (#ffffff). Body text 'Connect your favorite tools directly into your social workflow.' Proxima Nova weight 400, size 18px, Canvas White (#ffffff).
## Similar Brands
- **Hootsuite** — Social media management tool with a similar emphasis on clean UI, prominent feature cards, and accessible typography.
- **Buffer** — Social media scheduling and analytics platform that uses a dark/light contrast for sections and clean, functional components.
- **Later** — Marketing platform with a focus on visual content presentation and a structured grid layout for features and integrations.
- **Mailchimp** — Known for a distinct brand color (yellow) used as a primary accent against neutral backdrops, similar to Sprout Social's use of green.
## Quick Start
### CSS Custom Properties
```css
:root {
/* Colors */
--color-midnight-core: #040404;
--color-canvas-white: #ffffff;
--color-ghost-gray: #d9d9d9;
--color-focus-silver: #cbcece;
--color-slate-text: #162020;
--color-olive-accent: #98e58e;
--color-sky-spectrum-fade: #59cb59;
--gradient-sky-spectrum-fade: linear-gradient(1deg, rgb(89, 203, 89) -31.61%, rgb(152, 229, 142) 8.18%, rgb(125, 234, 213) 36.91%, rgb(161, 194, 248) 63.53%, rgb(32, 91, 195) 109.97%);
--color-magenta-mist-fade: #ac44a8;
--gradient-magenta-mist-fade: linear-gradient(rgb(172, 68, 168) -33.09%, rgb(236, 154, 241) 25.66%, rgb(216, 215, 249) 68.39%, rgb(255, 255, 255) 110.38%);
/* Typography — Font Families */
--font-proxima-nova: 'Proxima Nova', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-caption: 13px;
--leading-caption: 1.5;
--text-body: 16px;
--leading-body: 1.48;
--text-subheading: 18px;
--leading-subheading: 1.4;
--text-heading-sm: 24px;
--leading-heading-sm: 1.33;
--text-heading: 32px;
--leading-heading: 1.25;
--text-heading-lg: 43px;
--leading-heading-lg: 1.18;
--text-display: 57px;
--leading-display: 1.12;
/* Typography — Weights */
--font-weight-regular: 400;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
/* Spacing */
--spacing-unit: 4px;
--spacing-4: 4px;
--spacing-8: 8px;
--spacing-12: 12px;
--spacing-16: 16px;
--spacing-24: 24px;
--spacing-32: 32px;
--spacing-40: 40px;
--spacing-48: 48px;
--spacing-56: 56px;
--spacing-64: 64px;
--spacing-80: 80px;
--spacing-160: 160px;
--spacing-200: 200px;
/* Layout */
--section-gap: 32px;
--card-padding: 16px;
--element-gap: 16px;
/* Border Radius */
--radius-md: 6px;
--radius-2xl: 16px;
--radius-3xl: 24px;
--radius-full: 64px;
/* Named Radii */
--radius-cards: 16px;
--radius-badges: 24px;
--radius-inputs: 6px;
--radius-buttons: 6px;
--radius-largeelements: 64px;
/* Shadows */
--shadow-sm: rgba(39, 51, 51, 0.24) 0px 4px 8px 0px;
/* Surfaces */
--surface-midnight-core-canvas: #040404;
--surface-canvas-white-panel: #ffffff;
}
```
### Tailwind v4
```css
@theme {
/* Colors */
--color-midnight-core: #040404;
--color-canvas-white: #ffffff;
--color-ghost-gray: #d9d9d9;
--color-focus-silver: #cbcece;
--color-slate-text: #162020;
--color-olive-accent: #98e58e;
--color-sky-spectrum-fade: #59cb59;
--color-magenta-mist-fade: #ac44a8;
/* Typography */
--font-proxima-nova: 'Proxima Nova', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-caption: 13px;
--leading-caption: 1.5;
--text-body: 16px;
--leading-body: 1.48;
--text-subheading: 18px;
--leading-subheading: 1.4;
--text-heading-sm: 24px;
--leading-heading-sm: 1.33;
--text-heading: 32px;
--leading-heading: 1.25;
--text-heading-lg: 43px;
--leading-heading-lg: 1.18;
--text-display: 57px;
--leading-display: 1.12;
/* Spacing */
--spacing-4: 4px;
--spacing-8: 8px;
--spacing-12: 12px;
--spacing-16: 16px;
--spacing-24: 24px;
--spacing-32: 32px;
--spacing-40: 40px;
--spacing-48: 48px;
--spacing-56: 56px;
--spacing-64: 64px;
--spacing-80: 80px;
--spacing-160: 160px;
--spacing-200: 200px;
/* Border Radius */
--radius-md: 6px;
--radius-2xl: 16px;
--radius-3xl: 24px;
--radius-full: 64px;
/* Shadows */
--shadow-sm: rgba(39, 51, 51, 0.24) 0px 4px 8px 0px;
}
```
Earthy, shifting canvases
White canvas, thoughtful function

Deep Violet Command Center. An…
Warm,橙色效率
Clean canvas, purposeful accents
Crisp Utility, Rounded Edges
Digital workbench illuminated by…
Warm, creative toolkit
Midnight Grid Command Center

Crisp paper on a clean desk. A…

Crisp alpine air and digital green…

Crisp canvas, magenta highlight
Midnight gradient with neon…
Violet-tinged sunrise on white…

Forest clearing at dawn — dark…
Electric Data Flow; a structured,…

Organic Green Engine. A lush,…

Vibrant digital workbench.
Playful block playground

Strategic blueprint on polished…