---
name: Rippling
description: "The site effectively balances a bold, premium brand identity with a clean, functional interface, making it an excellent reference for modern B2B SaaS design."
version: alpha

colors:
  background: "#7A005D"
  primary: "#000000"
  secondary: "rgba(0,0,0,0.7)"
  tertiary: "#FFA81D"
  neutral: "#383838"
  bg-soft: "#E1D8D2"
  bg-quiet: "#FFFFFF"
  muted-soft: "rgba(255,255,255,0.7)"
  line: "rgba(255,255,255,0.15)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.08
    fontWeight: 500
    letterSpacing: "-1px"
  heading:
    fontFamily: humanist-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "0"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  small:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0.2px"
  micro:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0.25px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

An integrated platform that uses AI to connect HR, IT, Finance, and Payroll into one seamless system.

*A single nervous system for a company, replacing dozens of fragmented tools.*

## Colors

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

- **Background (`#7A005D`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`rgba(0,0,0,0.7)`)** — uses `ink-soft` token
- **Accent (`#FFA81D`)** — uses `accent` token
- **Muted (`#383838`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.15)`)** — uses `line` token

## Typography

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

- 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).

## Layout

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.

*Rhythm:* Consistent vertical rhythm based on 4px increments, with generous whitespace (40px-64px) between major content sections.

## Elevation & Depth

- 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).

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

## Components

- **button:** Solid orange (accent) buttons with rounded corners (pill) for primary actions; text links with underline for secondary actions.
- **card:** Light beige/gray (bgSoft) cards with subtle shadows and rounded corners (md).
- **chip:** Used for navigation and categorization, often with a light background and subtle border.
- **input:** White background input fields with subtle borders and rounded corners (md), often stacked vertically.
- **hero:** Full-width section with deep purple background, large display headline, and a prominent email capture form.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```