What is Segment's primary brand color now?

Segment's marketing surface on Twilio.com runs on Twilio's brand voltage rather than a Segment-specific color. Twilight navy #000d25 fills the page canvas, cobalt blue #1866ee carries the primary CTA pill and diagram annotations, and Twilio Red #ef223a appears as the iso-block hero illustration floating beside the headline. The legacy Segment emerald green that defined the standalone brand identity for a decade is entirely absent — the page is the announcement of the brand merger, and the new identity is Twilio's. Across the captured page, the navy appears 576 times, the cobalt 17, and the Twilio Red exactly 6 (all as background on the hero iso-block illustration).

What typeface does Segment use, and what should I use as a substitute?

Twilio Segment runs Whitney SSm across every typographic tier — display, heading, body, button, nav, and metadata all share the same family. Whitney SSm is the small-cap variant of Whitney by Hoefler&Co, a humanist sans built for screen reading. Display headlines sit at 48px in weight 700 with -1.44px tracking, section heads at 40px / 700, body at 14-16px / 400, with a single 20px / 600 link-emphasis size. The closest open-source substitute is Inter at 95% line-height; the proportions transfer cleanly. Whitney's slight humanist warmth in the lowercase 'a' and 'e' is closer to Source Sans Pro than to Inter — pick based on what fits your project's overall feel. There is no second typeface family on the page.

Why does the Segment marketing page live on Twilio.com?

Twilio acquired Segment in 2020, and in 2026 the standalone segment.com marketing surface was retired and folded into twilio.com/en-us/segment. The hero headline on the page — 'Segment heart Twilio. We're finally moving in together on Twilio.com!' — is the announcement itself, complete with iso-block hero illustration showing the brand merger as a physical move. The page inherits Twilio's chromatic system (twilight navy canvas, cobalt CTA pill, Twilio Red brand block, Whitney SSm typeface) and abandons the Segment-specific emerald green entirely. This DESIGN.md captures the post-merger surface — the historical standalone Segment system is no longer accessible as a live marketing page.

What is Segment's corner-radius philosophy?

The radius scale is small-step plus pill. 4px appears 11 times on cards, dropdowns, and small chips; 10px sits on 2 elements (larger cards, image containers); 20px on 1 element (a single rounded illustration block); plus 50% (6 occurrences) for circular icon backgrounds and 50px (5 occurrences) for the fully-rounded pill CTAs. The exposed Twilio CSS layer also declares a full radius scale (--radius-small 0.2rem, --radius-base 0.4rem, --radius-large 1rem, --radius-extra-large 2rem, --radius-2x-large 5rem, --radius-circle 50%) but the rendered marketing surface uses only the small-step + pill subset. Pills carry the CTAs; small-step rounding handles every card.

Can I use this DESIGN.md to build my own CDP marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce the Twilio-Segment marketing surface: twilight navy #000d25 canvas with white type, cobalt-blue pill CTA at 36px height with 50px radius, Twilio Red iso-block hero illustration, Whitney SSm at 48px / 700 display weight, and the two-up product-diagram band below the fold. Every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config. The full underlying Twilio token graph (200+ CSS custom properties) is exposed in the cssVariables capture for reference, but the primary tokens captured here are the subset actually rendered on the marketing surface. The one move worth borrowing only if you are inside a parent-brand identity: the canvas-color inheritance — pull the navy from the parent header rather than coining a new background tone.

Segment Design System

Twilio Segment's marketing-system tokens as a DESIGN.md file.

About Segment DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source twilio.com

Analytics & Data
Marketing & CRM

Segment's marketing surface is no longer Segment's. The page lives at twilio.com/en-us/segment, runs on Twilio's twilight-navy canvas in deep blue-black #000d25, and uses Twilio's typeface (Whitney SSm), Twilio's red iso-block hero illustration #ef223a, and Twilio's cobalt-pill CTA #1866ee. The legacy Segment chromatic identity — the deep emerald green that defined the standalone Segment brand for a decade — is entirely absent from this surface. The hero headline reads "Segment heart Twilio. We're finally moving in together on Twilio.com!" — the page itself is the announcement that the brand merger has resolved into a single visual identity.

The DESIGN.md file packages the post-merger system into a machine-readable spec. Inside: 12 color tokens — a structural set of twilight navy, cobalt blue, pale steel hairline, and a single Twilio Red brand block — plus a darker variant #121c2d for elevated card surfaces and a sky-blue tone #3acefa for diagram-annotation glyphs. 13 typography tokens run Whitney SSm exclusively, from a 48px / weight 700 hero display down to 12px button labels. The Twilio CSS layer exposes 200+ named custom properties (a full color-token graph spanning blue, red, orange, yellow, green, purple, gray families, plus three radius scales and nine spacing scales) but the captured marketing page renders only the navy + cobalt + Twilio-red subset. 12 components cover the cobalt-pill primary, the iso-block hero, the navy section card, the two-up diagram band, and the white-band instructions footer.

Feed this file to Claude or Cursor and it reproduces the Twilio-Segment marketing surface: twilight navy canvas instead of any Segment-specific color, Twilio Red iso block as the hero brand chrome rather than a green logomark, cobalt 50px pill CTA, Whitney SSm at 48px / 700 display weight, and the two-up product-diagram band below the fold. The one move worth noting: this DESIGN.md captures the post-merger identity. The standalone Segment chromatic system (deep green, sharper edges, lighter canvas) lived at segment.com before the redirect and is no longer accessible as a current marketing surface — for that you'd need to read the archive.

What makes it distinct

Twilight navy canvasthe page floor is #000d25 with white type, anchored on the Twilio header system rather than a Segment-specific color
Twilio Red iso-block hero illustration#ef223a appears only as the floating brand block beside the headline, never as a CTA color
Cobalt-pill CTAprimary button is #1866ee at 36px height with a 50px fully-rounded pill, dressed in Twilio's standard CTA voice
Whitney SSm across every tierdisplay at 48px in weight 700, body at 14-16px in weight 400, no second typeface family
Diagram-anchored bodytwo side-by-side product diagrams below the fold show CDP profile and Data Platform flows in cobalt-on-navy

Live at twilio.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

twilio.com

Explore Segment

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Segment design system FAQ

Common questions about Segment's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Segment — official site

Twilio Segment's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.