# Rippling · Design system migration spec

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

> The site effectively balances a bold, premium brand identity with a clean, functional interface, making it an excellent reference for modern B2B SaaS design.

## 1. Identity DNA

Rippling's design system is built as a single, unified nervous system for a company's operations, reflecting its core proposition of integrating HR, IT, Finance, and Payroll. The visual language is premium, clean, and authoritative, designed to convey clarity over the complexity it replaces.

**One-liner:** An integrated platform that uses AI to connect HR, IT, Finance, and Payroll into one seamless system.
**Keywords:** unified platform · business operations · AI-driven · efficiency · integrated
**Analogy:** A single nervous system for a company, replacing dozens of fragmented tools.

## 2. Color

The color system is a study in high-contrast hierarchy, using a deep, saturated purple to establish a commanding presence in hero sections, while a vibrant orange serves as the accent for primary actions. A clean, white content area ensures readability and functional clarity.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#7A005D` | main background |
| `--bg-soft` | `#E1D8D2` | card background |
| `--bg-quiet` | `#FFFFFF` | quiet area |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `rgba(0,0,0,0.7)` | secondary text |
| `--muted` | `#383838` | placeholder |
| `--muted-soft` | `rgba(255,255,255,0.7)` | weak hint |
| `--accent` | `#FFA81D` | single accent |
| `--line` | `rgba(255,255,255,0.15)` | divider |

**Color principle:** High contrast between a deep, saturated purple hero and a clean, white content area, anchored by a vibrant orange accent.

The principle is clear separation: brand presence is concentrated in the hero, while the content area prioritizes legibility and task completion.

## 3. Typography

Typographic voice is delivered through geometric and humanist sans-serif categories, chosen for their modern clarity and efficiency. The system enforces a strict weight hierarchy, using **500 for headlines** and **400 for body text** to maintain clear visual order without decorative flourish.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 48px | 1.08 | 500 | -1px | Hero headlines |
| heading | 32px | 1.2 | 500 | 0 | Section headings |
| body | 16px | 1.5 | 400 | 0 | Body text |
| small | 14px | 1.4 | 400 | 0.2px | Captions and UI labels |
| micro | 12px | 1.3 | 400 | 0.25px | Fine print |

**Type rules:**
- Use tight tracking for large display headlines.
- Use slightly loose tracking (0.25px) for small UI text.
- Maintain a clear weight hierarchy between headings (500) and body (400).

## 4. Spacing

Spacing is governed by a consistent 4px vertical rhythm, creating a measured and orderly flow between elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent vertical rhythm based on 4px increments, with generous whitespace (40px-64px) between major content sections.

## 5. Surfaces

Surface treatment relies on depth through carefully crafted shadows rather than heavy borders. Separation between components is achieved through generous whitespace and subtle shifts in background color, with borders used sparingly as a last resort.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - 0px 6px 6px 0px rgba(0, 0, 0, 0.06)
  - 0px 96px 160px 48px rgba(27, 16, 20, 0.6)
- **Borders:** Minimal use of borders; separation is achieved through spacing and subtle color shifts. The primary border color is rgb(229, 231, 235).

## 6. Layout

The layout skeleton is centered within a 1280px max-width container, beginning with a full-width, two-column hero. Subsequent content sections transition to a full-width, centered single column, establishing a clear, spacious, and scannable document flow.

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

**Skeleton:** A centered, max-width container with a clear two-column structure in the hero (content left, visual right) and a full-width centered column for content sections.

## 7. Motion & Interaction

Motion is minimal and purposeful, acting as functional feedback rather than decoration. Interactions use smooth, consistent transitions for color fades and background shifts, creating a polished but unobtrusive sense of responsiveness.

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

- **Hover:** Subtle color transitions (0.15s) on text and background-color for interactive elements.
- **Click:** Immediate visual feedback, often a subtle scale or color shift.
- **Transition:** Smooth, ease-in-out transitions for all interactive state changes.
- **Keyboard:** Standard focus rings for accessibility, likely matching the accent color.

## 8. Voice & Don'ts

The editorial voice is confident, authoritative, and benefit-driven, with short, declarative headlines that cut to the core value proposition. Clarity is paramount, actively avoiding jargon without context, vague promises, and passive voice.

- **Tone:** Confident, authoritative, and benefit-driven.
- **Headline style:** Short, bold, and declarative, focusing on the core value proposition.
- **CTA style:** Direct and action-oriented, using a bright, high-contrast button.
- **Avoid:** Jargon without context / Vague promises / Passive voice / Cluttered layouts / Inconsistent typography / Low-contrast text

### Don'ts
- ❌ Don't use a low-contrast color for primary text on the purple background — screenshot shows high-contrast white and black text.
- ❌ Don't use a wide variety of font weights — screenshot shows a strict hierarchy between weight 400 and 500.
- ❌ Don't use sharp, square corners on buttons or cards — screenshot shows rounded corners (8px, 12px, or pill).
- ❌ Don't use a busy, multi-color palette — screenshot shows a focused palette of deep purple, orange, black, white, and beige.
- ❌ Don't use dense, compact layouts — screenshot shows generous spacing (24px-64px) between elements.
- ❌ Don't use decorative serif fonts — screenshot shows clean, geometric and humanist sans-serif categories.

The system deliberately avoids dense, compact layouts, a multi-color palette, and decorative serifs in favor of spaciousness, a focused color scheme, and clean sans-serif typography.

## System Prompt (paste into AI tool)

```
This is Rippling, a B2B SaaS platform. Its design DNA is premium, clean, and authoritative, focusing on unifying complex business operations. The primary colors are a deep purple (#7A005D) for hero sections, a vibrant orange (#FFA81D) for accents and calls-to-action, and a clean white/beige for content areas. Typography uses geometric and humanist sans-serif categories with a clear weight hierarchy (500 for headlines, 400 for body). Critical donts: avoid low-contrast text on the purple background, do not use a wide variety of font weights, and avoid sharp corners on UI elements. The layout is spacious and centered, using a 12-column grid with a maximum width of 1280px.
```