---
name: Segment
description: "This site is a great example of a modern, professional B2B SaaS design that balances technical credibility with a clean, accessible aesthetic."
version: alpha

colors:
  background: "#000D25"
  primary: "#FFFFFF"
  secondary: "#CADCD8"
  tertiary: "#1866EE"
  neutral: "#CADCD8"
  bg-soft: "#151F36"
  bg-quiet: "#F3F4F7"
  muted-soft: "#CADCD8"
  line: "rgba(202, 205, 216, 1.0)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1.44px"
  headline:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "-0.8px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.75
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 10px
  pill: 50px

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

---

## Overview

A professional customer data platform that simplifies complex data pipelines.

*Reliable infrastructure plumbing for customer data*

## Colors

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

- **Background (`#000D25`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#CADCD8`)** — uses `ink-soft` token
- **Accent (`#1866EE`)** — uses `accent` token
- **Muted (`#CADCD8`)** — uses `muted` token
- **Borders (`rgba(202, 205, 216, 1.0)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Generous vertical spacing between sections creates a calm, uncluttered layout.

## Elevation & Depth

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

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 10px
- `pill`: 50px

## Components

- **button:** Rounded pill buttons with solid blue fills for primary actions and outlines for secondary ones.
- **card:** Simple dark cards with subtle borders or background shifts to differentiate content areas.
- **chip:** Small, pill-shaped tags with light backgrounds and dark text for categorization.
- **input:** Standard form fields with clear borders and rounded corners.
- **hero:** A full-width, dark section with a large headline, supporting text, and a prominent illustration.

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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