CURATED · OPEN · FREE

Segment

A professional customer data platform that simplifies complex data pipelines.

01

Identity DNA

Reliable infrastructure plumbing for customer data

02

Color

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

03

Typography

humanist-sans · monospace

• display56px · 700
• headline40px · 700
• body16px · 400

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.

04

Spacing

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

05

Surfaces

Minimal use of borders, primarily 1px or 2px for buttons and underlines.

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)

06

Layout

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

07

Motion & Interaction

Smooth background-color and color transitions on interactive elements. · Subtle transform effects on hover for buttons and links.

Subtle changes in background color or opacity to indicate interactivity. · Immediate visual feedback with color shifts.

08

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.

09

Voice & Don'ts

• Tone Professional, helpful, and straightforward.
• Headlines Clear and direct, often using first-person plural to build trust.
• CTAs Action-oriented and specific, guiding the user to the next step.

• 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.
• Avoid: Overly casual slang
• Avoid: Aggressive sales language
• Avoid: Unnecessarily complex jargon

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko