Segment

The reference for a developer-CDP brand migrating into its acquirer — Twilio red + Segment blue on deep navy, isometric red cube illustrations, Whitney SSm single-family discipline.

Data Infrastructure Customer Data Platform strong

Design tokens

navyDeep

navyMid

white

black

slateLight

twilioRed

segmentBlue

segmentBlueAlt

cyan

overlay60

display: 'Whitney SSm', helvetica, arial, sans-serif
body: 'Whitney SSm', helvetica, arial, sans-serif
mono: (none on captured page)

Do / Don't

Reference it for

Deep navy #000d25 page with strong blue cast — dev-tool-credible without being pure-black
Single saturated brand-pair: Twilio red #ef223a + Segment royal blue #0263e0 + cyan accent #3acefa
Light slate-grey text #cacdd8 on dark surfaces — readable without being pure white
Whitney SSm single-family at 4 weights — paid Hoefler & Co, the same Twilio-corporate face
Heart emoji ❤️ in the H1 — confident emotional framing for a corporate merger announcement
Three offset floating-cube keyframes — cube-float-1 / cube-float-2 / cube-float-3 at slightly different durations creating natural-feeling drift
Isometric 3D red cubes as hero illustration — bespoke 3D renders with shadows
Code-snippet cursor blink — developer-product UI detail (terminal-style cursor animation)

Do not copy

The Whitney SSm font licence (paid Hoefler & Co)
The Twilio red #ef223a exact hue (Twilio-specific brand colour)
The Segment blue #0263e0 exact hue (Segment-specific brand colour)
The "Segment ❤️ Twilio" copy / heart-emoji framing
The isometric red Twilio cube illustrations (bespoke 3D renders)
The Twilio bullseye logo + Segment wordmark co-branded lockup
The Twilio.com migration messaging

Signature moves

deep-navy dev-tool canvas with brand-pair

a deep navy #000d25 page (dev-credible without pure black) carries a single saturated brand-pair (red + royal blue + cyan accent) with light slate-grey #cacdd8 body text

offset floating-cube drift

three cube-float keyframes (cube-float-1/2/3) at slightly different durations animate isometric 3D illustrations so the drift feels natural rather than synchronised, with drop-shadows simulating physical lighting

product-mode tabbed architecture cards

a two-card product-visualisation layout (text-left card plus isometric diagram right) sits under product-mode tabs with real architecture diagrams, and period-terminated H2s give a confident editorial register

Related references

Halo Dental

flagship

Other

A dental-tech hardware brand (the Halo "digital mirror") that opens on a black stage with its glowing ring-lit device, a 100px "Halo" wordmark and "We All Shine", then proves capability with a calm bento grid - Apple-product confidence aimed at clinicians.

Abby Wilson Therapy

strong

Other

A boutique therapist for "anxious, high-achieving women" who reassures by being polished and specific - a warm sand-and-charcoal editorial system, a Calluna serif voice, named specialties and a clearly walked process that says "I understand exactly who you are and how this works".

Ace And Tate

strong

Health

a near-monochrome Amsterdam eyewear store that lets warm product photography and one editorial serif carry all the personality, set on a soft grey field with ink-black type, calm spacing and almost no decoration.

Antara Spa

strong

Beauty

a Malaysian day spa that sells calm with one oversized Fraunces wordmark on a sun-warmed photographic hero, an earthy sand-brown-sage palette, and slow GSAP-and-Lenis scroll, the whole page tuned to feel like exhaling.