# Segment · Design system migration spec

> Source: https://segment.com  ·  Curated by OpenDesign  ·  en

> This site is a great example of a modern, professional B2B SaaS design that balances technical credibility with a clean, accessible aesthetic.

## 1. Identity DNA

Segment's visual system is built like reliable infrastructure plumbing for customer data: its foundation is a deep, dark canvas that lets the essential information flow clearly to the surface. The design prioritizes clarity and directness, using a single, vibrant blue accent to mark the critical junctures where a user must act.

**One-liner:** A professional customer data platform that simplifies complex data pipelines.
**Keywords:** data · platform · integration · pipeline · unified
**Analogy:** Reliable infrastructure plumbing for customer data

## 2. Color

The palette is a study in high-contrast utility. A deep navy background provides the sturdy substrate, while crisp white text ensures absolute legibility, with a single, functional blue reserved exclusively for primary actions.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000D25` | main background |
| `--bg-soft` | `#151F36` | card background |
| `--bg-quiet` | `#F3F4F7` | quiet area |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#CADCD8` | secondary text |
| `--muted` | `#CADCD8` | placeholder |
| `--muted-soft` | `#CADCD8` | weak hint |
| `--accent` | `#1866EE` | single accent |
| `--line` | `rgba(202, 205, 216, 1.0)` | divider |

**Color principle:** High-contrast dark mode for a technical, premium feel, using blue for primary actions.

Color is applied with restraint, serving function above all else to maintain the system's technical credibility.

## 3. Typography

The typographic voice is set in a humanist sans-serif, with a conservative weight palette of 400 and 700. Display text is set with tight tracking to maintain visual density, while body copy uses a generous line-height of 1.75 for comfortable reading.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -1.44px | Hero section headlines |
| headline | 40px | 1.2 | 700 | -0.8px | Section headlines |
| body | 16px | 1.75 | 400 | 0 | Standard body text |

**Type rules:**
- Tight tracking on large display text to maintain visual density.
- Standard line-height of 1.75 for body text ensures readability.
- Font weights are kept conservative, primarily using 400 and 700.

## 4. Spacing

The rhythm of the page is defined by generous vertical spacing, creating a calm, uncluttered layout that allows each section to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing between sections creates a calm, uncluttered layout.

## 5. Surfaces

Depth is suggested through minimal, purposeful means: subtle soft shadows for elevation and thin, functional borders for delineation. Components use rounded corners to soften their presence against the dark substrate.

- **Radius:** sm 4px · md 8px · lg 10px · pill 50px
- **Shadows:**
  - 0px 10px 37.5px 0px rgba(18, 28, 45, 0.15)
  - inset 0px 0px 0px 2px rgb(24, 102, 238)
  - inset 0px 0px 0px 2px rgb(255, 255, 255)
- **Borders:** Minimal use of borders, primarily 1px or 2px for buttons and underlines.

## 6. Layout

The structural skeleton is a clean, top-heavy affair, with a full-width hero section commanding initial attention. Below, the layout resolves into a structured, multi-column grid that organizes features with disciplined alignment.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A clean, top-heavy layout with a prominent hero section followed by a multi-column feature grid.

## 7. Motion & Interaction

Motion is deliberately limited to micro-interactions, providing clear, immediate feedback through smooth color transitions. All interactive elements share a consistent 0.3-second ease-in-out timing, creating a predictable and responsive feel without distraction.

- **Durations:** micro 150ms · small 200ms · medium 300ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth background-color and color transitions on interactive elements.
  - Subtle transform effects on hover for buttons and links.

- **Hover:** Subtle changes in background color or opacity to indicate interactivity.
- **Click:** Immediate visual feedback with color shifts.
- **Transition:** All interactive elements use smooth 0.3s ease-in-out transitions.
- **Keyboard:** Standard focus rings are applied to interactive elements for accessibility.

## 8. Voice & Don'ts

The editorial voice is professional, helpful, and straightforward, building trust through clear, direct language that often uses first-person plural. Calls to action are specific and guiding, steering the user toward the next logical step.

- **Tone:** Professional, helpful, and straightforward.
- **Headline style:** Clear and direct, often using first-person plural to build trust.
- **CTA style:** Action-oriented and specific, guiding the user to the next step.
- **Avoid:** Overly casual slang / Aggressive sales language / Unnecessarily complex jargon

### Don'ts
- ❌ Don't use busy, multi-colored gradients — the screenshot shows a solid, deep navy background.
- ❌ Don't use sharp, square corners — the screenshot shows rounded corners (4px, 8px, 50px) on all components.
- ❌ Don't use centered text for long paragraphs — the screenshot shows left-aligned body text for readability.
- ❌ Don't use thin, delicate typography — the screenshot shows bold, clear headlines and legible body text.
- ❌ Don't use a cluttered navigation bar — the screenshot shows a simple, top-aligned navigation with minimal items.
- ❌ Don't use heavy drop shadows for depth — the screenshot shows subtle, soft shadows for a flat design aesthetic.

The system deliberately avoids busy gradients, complex jargon, and aggressive sales language, focusing instead on the quiet confidence of clean data infrastructure.

## System Prompt (paste into AI tool)

```
This is a professional B2B SaaS landing page for a customer data platform. The design is characterized by a deep navy (#000D25) background, crisp white (#FFFFFF) text, and a primary blue (#1866EE) accent color. Typography relies on a humanist-sans font family (Whitney SSm) with tight tracking for headlines and generous spacing for body text. The layout is clean and spacious, using a 12-column grid with ample vertical rhythm. Key interactions involve smooth 0.3s transitions on buttons and links. Critical design rules include: don't use square corners on buttons, don't center long-form text, and don't introduce multiple high-contrast accent colors.
```
