Seeds

# Seeds — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Sprout Social. "Seeds" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Seeds
**Owner:** Sprout Social
**Official documentation:** https://seeds.sproutsocial.com/
**Visual character:** Social-media-management friendliness: Sprout green growth metaphors, plum-ink text, and dashboards that make engagement graphs feel kind.

---

## Summary

Sprout Social's design system documentation, tokens, and Figma resources supporting their social media management platform.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Sprout Green | `#2bb656` | `--seeds-color-brand` | Brand and primary CTAs |
| Text | `#2f2b43` | `--seeds-color-text-headline` | Headings (ink purple-navy) |
| Body Text | `#515168` | `--seeds-color-text-body` | Body text |
| White | `#ffffff` | `--seeds-color-container-background` | Surfaces |
| Neutral 100 | `#f6f7f9` | `--seeds-color-neutral-100` | Subtle background |
| Border | `#dfe2e6` | `--seeds-color-container-border` | Borders |
| Error Red | `#d93b3b` | `--seeds-color-error` | Errors |
| Info Blue | `#0f6bff` | `--seeds-color-info` | Information and links |

## Typography

- **Body:** Proxima Nova / system — weights 400, 600, 700 — `'Proxima Nova', -apple-system, 'Segoe UI', Helvetica, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| heading-1 | `36px` | `44px` |
| heading-2 | `28px` | `36px` |
| heading-4 | `20px` | `28px` |
| body | `16px` | `24px` |
| small | `14px` | `20px` |

## Spacing

Base unit: `8px (space-300)`

Scale: `4px` · `8px` · `16px` · `24px` · `32px` · `48px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `4px` |
| large | `8px` |
| pill | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| low | `0 1px 4px rgba(47,43,67,0.1)` |

## Quick start (CSS)

```css
/* Seeds — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://seeds.sproutsocial.com/ */

:root {
  /* Color */
  --seeds-color-brand: #2bb656; /* Brand and primary CTAs */
  --seeds-color-text-headline: #2f2b43; /* Headings (ink purple-navy) */
  --seeds-color-text-body: #515168; /* Body text */
  --seeds-color-container-background: #ffffff; /* Surfaces */
  --seeds-color-neutral-100: #f6f7f9; /* Subtle background */
  --seeds-color-container-border: #dfe2e6; /* Borders */
  --seeds-color-error: #d93b3b; /* Errors */
  --seeds-color-info: #0f6bff; /* Information and links */

  /* Typography */
  --font-body: 'Proxima Nova', -apple-system, 'Segoe UI', Helvetica, sans-serif;

  /* Type scale */
  --text-heading-1: 36px /* line-height 44px */;
  --text-heading-2: 28px /* line-height 36px */;
  --text-heading-4: 20px /* line-height 28px */;
  --text-body: 16px /* line-height 24px */;
  --text-small: 14px /* line-height 20px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  /* Radius */
  --radius-default: 4px;
  --radius-large: 8px;
  --radius-pill: 9999px;

  /* Elevation */
  --shadow-low: 0 1px 4px rgba(47,43,67,0.1);
}
```

## Engineering profile

- **Ships for:** React
- **Source model:** Hybrid
- **Figma:** Official Figma kit

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Seeds by Sprout Social — Sprout Social's design system documentation, tokens, and Figma resources supporting their social media management platform. Character: Social-media-management friendliness: Sprout green growth metaphors, plum-ink text, and dashboards that make engagement graphs feel kind. Use a primary colour near #2bb656, the typeface "Proxima Nova / system" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 8px (space-300) base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Seeds documentation](https://seeds.sproutsocial.com/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/sprout-seeds) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._