Evergreen

# Evergreen — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Segment. "Evergreen" 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:** Evergreen
**Owner:** Segment
**Official documentation:** https://evergreen.segment.com/
**Visual character:** Segment-era SaaS polish: navy ink on airy white, a single electric blue, and componentry tuned for data-heavy dashboards.

---

## Summary

A React UI Framework for building ambitious products on the web.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product. Evergreen is in maintenance mode; Twilio recommends Paste for new work._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Blue 500 / Primary | `#3366ff` | `--evergreen-blue-500` | Primary actions |
| Dark Text | `#101840` | `--evergreen-gray-900` | Primary text (deep navy) |
| Gray 500 Muted | `#696f8c` | `--evergreen-gray-500` | Secondary text |
| White | `#ffffff` | `--evergreen-white` | Surfaces |
| Gray 75 | `#f9fafc` | `--evergreen-gray-75` | Tinted background |
| Gray 300 Border | `#d8dae5` | `--evergreen-gray-300` | Borders |
| Red 500 Danger | `#d14343` | `--evergreen-red-500` | Errors |
| Green 500 Success | `#52bd94` | `--evergreen-green-500` | Success |

## Typography

- **Body:** System stack — weights 400, 500, 600 — `'SF UI Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif`
- **Mono:** SF Mono — weights 400 — `'SF Mono', 'Monaco', monospace`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| heading-900 | `32px` | `40px` |
| heading-700 | `20px` | `24px` |
| heading-500 | `16px` | `20px` |
| body-400 | `14px` | `20px` |
| caption-300 | `12px` | `16px` |

## Spacing

Base unit: `8px`

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

## Corner radius

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

## Elevation / shadows

| Name | Value |
| --- | --- |
| elevation-1 | `0 0 1px rgba(67,90,111,0.3), 0 2px 4px -2px rgba(67,90,111,0.47)` |

## Motion

| Name | Value |
| --- | --- |
| default | `120ms ease-in-out` |

## Quick start (CSS)

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

:root {
  /* Color */
  --evergreen-blue-500: #3366ff; /* Primary actions */
  --evergreen-gray-900: #101840; /* Primary text (deep navy) */
  --evergreen-gray-500: #696f8c; /* Secondary text */
  --evergreen-white: #ffffff; /* Surfaces */
  --evergreen-gray-75: #f9fafc; /* Tinted background */
  --evergreen-gray-300: #d8dae5; /* Borders */
  --evergreen-red-500: #d14343; /* Errors */
  --evergreen-green-500: #52bd94; /* Success */

  /* Typography */
  --font-body: 'SF UI Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', 'Monaco', monospace;

  /* Type scale */
  --text-heading-900: 32px /* line-height 40px */;
  --text-heading-700: 20px /* line-height 24px */;
  --text-heading-500: 16px /* line-height 20px */;
  --text-body-400: 14px /* line-height 20px */;
  --text-caption-300: 12px /* line-height 16px */;

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

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

  /* Elevation */
  --shadow-elevation-1: 0 0 1px rgba(67,90,111,0.3), 0 2px 4px -2px rgba(67,90,111,0.47);

  /* Motion */
  --motion-default: 120ms ease-in-out;
}
```

## Engineering profile

- **Ships for:** React
- **Token pipeline:** Custom
- **Source model:** Open source

## Apply this style with an AI tool

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

> Design in the spirit of Evergreen by Segment — A React UI Framework for building ambitious products on the web. Character: Segment-era SaaS polish: navy ink on airy white, a single electric blue, and componentry tuned for data-heavy dashboards. Use a primary colour near #3366ff, the typeface "System stack" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 8px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Evergreen documentation](https://evergreen.segment.com/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/evergreen) — 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._