Segment DESIGN.md

Customer data platform design with bold green identity, data-pipeline clarity, integration catalog surfaces, and schema-driven UX.

1. Visual Theme & Atmosphere

Segment should feel structured, developer-friendly, and trustworthy. The design language communicates data collection, routing, warehouses, reverse ETL, and the customer data infrastructure that powers personalization.

• Mood: structured, reliable, technical, clean
• Density: medium-to-high, with source/destination catalogs, event schemas, and pipeline flow diagrams
• Character: bold green brand, clean white schema surfaces, dark pipeline visualizations, mono event names

2. Color Palette & Roles

The pipeline flow diagram is the signature visual. Green for healthy data flow, red for errors — this mapping must never break.

3. Typography Rules

css--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

4. Component Stylings

css.button-primary {
  min-height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: 6px;
  background: #52BD95;
  color: #FFFFFF;
  font: 600 14px/1 Inter, sans-serif;
}

.integration-card {
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  background: #FFFFFF;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.event-row {
  display: grid;
  padding: 10px 16px;
  border-bottom: 1px solid #E2E8F0;
  font: 400 14px/1.5 "JetBrains Mono", monospace;
}

.pipeline-node {
  border-radius: 8px;
  padding: 10px 16px;
  border: 1.5px solid #52BD95;
  background: #0F172A;
  color: #FFFFFF;
  font: 600 13px/1.3 Inter, sans-serif;
}

5. Layout Principles

Pipeline flow diagrams are left-to-right: Sources → Segment → Destinations. Integration catalog uses a 3-4 column grid with logo, name, category, and status.

6. Depth & Elevation

css.shadow-card     { box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06); }
.shadow-pipeline { box-shadow: 0 12px 32px rgba(82, 189, 149, 0.12); }
.shadow-modal    { box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16); }

Pipeline flow visualizations benefit from green-tinted ambient shadows to reinforce active data flow.

7. Do's and Don'ts

Do always use mono font for event names and property keys. Do make pipeline health immediately visible from the dashboard. Do surface error rates and delivery failures prominently. Do not use green for both the brand and non-pipeline success states. Do not bury the integration catalog — it is a primary discovery surface.

8. Responsive Behavior

The pipeline flow diagram requires desktop. Mobile serves as a monitoring view.

9. Agent Prompt Guide

Design like Segment: bold green pipeline CTAs, mono event names, dark flow diagrams, integration catalog grid, schema-browser hierarchy, delivery-health indicators, and data-infrastructure clarity.