{
"schema": "brand-kit@2",
"palette": {
"paper": "#FFFFFF",
"surface": "#F3F4F7",
"ink": "#000D25",
"ink_muted": "#606B85",
"accent": "#1866EE",
"on_accent": "#FFFFFF",
"accent_secondary": "#EF223A",
"night": "#000D25",
"on_night": "#FFFFFF",
"extras": [
{
"name": "Ink (Blue 900)",
"hex": "#000D25",
"role": "The page. Every band of the homepage sits on this near-black navy; also nav text, nav icons and the dark text on white",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)",
"site_var": "--color-ink / --color-blue-900: 0 13 37"
},
{
"name": "White",
"hex": "#FFFFFF",
"role": "Nav bar ground; all headline and body text on the ink page; outline-button rings and link underlines on dark",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
{
"name": "Utility gray (Gray 50)",
"hex": "#F3F4F7",
"role": "The 32px (phone 44px) utility strip above the nav: language, Support, Login",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)",
"site_var": "--color-gray-50"
},
{
"name": "Action blue (Blue 500)",
"hex": "#1866EE",
"role": "Every filled button (Start for free, View all products, Start conversations...) and the nav Contact sales outline ring and text",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)",
"site_var": "--color-blue-500"
},
{
"name": "Action blue hover (Blue 700)",
"hex": "#0E3E92",
"role": "Filled button hover fill (measured)",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)",
"site_var": "--color-blue-700"
},
{
"name": "Code navy (Blue 850)",
"hex": "#081F47",
"role": "Code sample panel and its active language tab",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)",
"site_var": "--color-blue-850"
},
{
"name": "Card navy (Gray 850)",
"hex": "#191F36",
"role": "Analyst recognition cards (radius 20px); the product image panels are the same navy (#191E36 baked into the PNGs)",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)",
"site_var": "--color-gray-850"
},
{
"name": "Panel navy",
"hex": "#191E36",
"role": "Product image panel color, baked into the product card PNGs (radius 20)",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
{
"name": "Twilio Red (logo)",
"hex": "#F22F46",
"role": "The Twilio logo (bug and wordmark) on white; the red outline hexagon baked into the closing photo",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)",
"note": "fill of the inline logo SVG on twilio.com"
},
{
"name": "Red light",
"hex": "#EF223A",
"role": "Stat numbers (customer-story stats in the blocky stat face, analyst 4x/5x), the New badge fill",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)",
"site_var": "--color-red-light: 239 34 58"
},
{
"name": "Accessible red",
"hex": "#B10F23",
"role": "Analyst card hover fill; red for small text where contrast is needed",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)",
"site_var": "--color-accessible-red / --color-red-60: 177 15 35"
},
{
"name": "Twilio Red 60 (Paste)",
"hex": "#DB132A",
"role": "Paste red-60 and the site variable --color-twilio-red; destructive actions and errors in product UI",
"prov": "published",
"source": "https://github.com/twilio-labs/paste/blob/main/packages/paste-design-tokens/tokens/aliases/color-palette.yml",
"site_var": "--color-twilio-red: 219 19 42"
},
{
"name": "Footer link gray (Gray 30)",
"hex": "#CACDD8",
"role": "Footer link text and the bold \"All products >\" style column links",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)",
"site_var": "--color-gray-30"
},
{
"name": "Hairline gray (Gray 100)",
"hex": "#DDE0E6",
"role": "Phone footer accordion dividers (1px)",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)",
"site_var": "--color-gray-100: 221 224 230"
},
{
"name": "Code comment",
"hex": "#7688C2",
"role": "Code comment text and the 1px divider right of the line numbers",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
{
"name": "Sky (Blue 200)",
"hex": "#3ACEFA",
"role": "Code line numbers; text-link hover color on dark",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)",
"site_var": "--color-blue-200: 58 206 250"
},
{
"name": "Paper (warm)",
"hex": "#FDF7F4",
"role": "The site's warm light ground variable (used on light product pages, not on the homepage)",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)",
"site_var": "--color-paper: 253 247 244"
},
{
"name": "Night (Blue 80)",
"hex": "#001489",
"role": "Deep blue variable on the site (--color-night)",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)",
"site_var": "--color-night / --color-blue-80"
},
{
"name": "Paste Blue 60",
"hex": "#0263E0",
"role": "Paste primary interactive color: buttons and links in Twilio product UI; --color-link on the marketing site",
"prov": "published",
"source": "https://github.com/twilio-labs/paste/blob/main/packages/paste-design-tokens/tokens/aliases/color-palette.yml"
},
{
"name": "Paste Gray 60",
"hex": "#606B85",
"role": "Paste weak text (color-text-weak) on light grounds; muted text on paper",
"prov": "published",
"source": "https://github.com/twilio-labs/paste/blob/main/packages/paste-design-tokens/tokens/aliases/color-palette.yml"
},
{
"name": "Paste Gray 100",
"hex": "#121C2D",
"role": "Paste default text color (color-text) in product UI",
"prov": "published",
"source": "https://github.com/twilio-labs/paste/blob/main/packages/paste-design-tokens/tokens/aliases/color-palette.yml"
},
{
"name": "Paste Green 50",
"hex": "#36D576",
"role": "Paste success",
"prov": "published",
"source": "https://github.com/twilio-labs/paste/blob/main/packages/paste-design-tokens/tokens/aliases/color-palette.yml"
},
{
"name": "Paste Orange 60",
"hex": "#F47C22",
"role": "Paste warning",
"prov": "published",
"source": "https://github.com/twilio-labs/paste/blob/main/packages/paste-design-tokens/tokens/aliases/color-palette.yml"
},
{
"name": "Paste Purple 60",
"hex": "#6D2ED1",
"role": "Paste purple (New badges and decorative accents in product UI)",
"prov": "published",
"source": "https://github.com/twilio-labs/paste/blob/main/packages/paste-design-tokens/tokens/aliases/color-palette.yml"
},
{
"name": "Paste Yellow 50",
"hex": "#FAD100",
"role": "Paste yellow",
"prov": "published",
"source": "https://github.com/twilio-labs/paste/blob/main/packages/paste-design-tokens/tokens/aliases/color-palette.yml"
}
]
},
"typography": {
"display": {
"family": "Open Sans",
"weight": 750,
"tracking": -0.03,
"line_height": 1.18,
"fallback_stack": "\"Open Sans\", \"Helvetica Neue\", Arial, sans-serif",
"real": "Whitney SSm (Hoefler&Co., licensed web font) on twilio.com; the published brand face is Twilio Sans Display",
"stand_in": true,
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)",
"site": {
"weight": 700,
"size_px": "56 hero H1 (34 phone); 40 section H2 (28 phone)",
"line_height": "66px at 56, 52px at 40, 36px at 28, 40px at 34",
"tracking": "-0.03em at 56 and 34 (-1.68px, -1.02px); -0.02em at 40 and 28 (-0.8px, -0.56px)",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
}
},
"body": {
"family": "Open Sans",
"weight": 400,
"tracking": 0.01,
"line_height": 1.6,
"scale": 1,
"fallback_stack": "\"Open Sans\", \"Helvetica Neue\", Arial, sans-serif",
"real": "Whitney SSm 400/500/600/700 on twilio.com; Twilio Sans Text in the published system",
"stand_in": true,
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)",
"site": {
"weights": "400 body, 500 buttons and links, 600 card stat captions and footer bold links, 700 card titles",
"sizes_px": "20/32 lead, 18/28 card body, 16/24 buttons, 14/20 nav and footer, 12/18-21 utility and legal",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
}
},
"mono": {
"family": "JetBrains Mono",
"weight": 300,
"fallback_stack": "\"JetBrains Mono\", Menlo, Consolas, monospace",
"real": "Twilio Sans Mono (Twilio's own face, loaded on twilio.com and in Paste)",
"stand_in": true,
"prov": "published",
"source": "https://github.com/twilio-labs/paste/blob/main/packages/paste-design-tokens/tokens/themes/twilio/aliases/font-family.yml",
"site": {
"weights": "300 in the homepage code sample",
"sizes_px": "16/24",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
}
},
"stat": {
"family": "Oxanium",
"weight": 800,
"fallback_stack": "Oxanium, \"Russo One\", Impact, sans-serif",
"real": "Buffalo (campaign display face loaded on twilio.com, weight 400, only for customer-story stat numbers)",
"stand_in": true,
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)",
"site": {
"size_px": "72 (both widths), line-height 42px, letter-spacing 2.5px, color #EF223A",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
}
},
"calibration": "Calibrated 2026-10-31 by rendering the same lines on twilio.com in Whitney SSm and in 28 open candidates (canvas measureText width, ink per px, x-height). Best overall: Open Sans (mean width error 2.4%, x-height -1.3%). Same weight: \"Reaching a business\" 56px/700/-1.68px Whitney 541.2px vs Open Sans 700 528.8 (-2.3%) with 8% less ink; Open Sans 800: +1.2% width, +7% ink. USE Open Sans 750 for Whitney 700 (variable axis; about -0.5% width, ink within 1%). Body: \"Bad communication can turn a simple task into a horror\" 20px/400 Whitney 539.1 vs Open Sans 400 520.8 (-3.4%), ink +8%: use 400 with letter-spacing +0.01em. Buttons 16px/500: Open Sans 550 (-1.5% width). Runner-ups: Be Vietnam Pro (width 1.4% but body ink +25%), Proza Libre (x-height -5.5%), Rubik. Stat face Buffalo 72px +2.5px \"150% 1min 21M+ 97k+\" = 962px; Oxanium 800 at 72px = 819px, so set Oxanium 800 at 80px with letter-spacing 5px (about 960px) and keep line-height 42px. Mono: Twilio Sans Mono is not open; JetBrains Mono 300 at 16/24."
},
"style": {
"button_shape": "pill",
"button_note": "Every button on the homepage is a full pill (border-radius 50px): filled Blue 500 #1866EE with white 16px/500 text, padding 8px 24px, 40px tall (36px in the nav); the secondary is the same pill with a 2px inset white ring and no fill. Text links are white 16px/500 with a 2px white bottom border.",
"corners": "20px on cards, the hero video and product panels; buttons full pill; the code tabs 4px top corners",
"linework": "thin 1px rounded-cap line icons (Paste icon set) in white on dark; outline ring 2px on secondary buttons",
"motion": "color, background and ring transitions 0.3s ease-in-out on buttons; 0.18s ease-in-out on analyst cards; customer-story carousel scrolls continuously; code sample types itself",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
"voice": {
"tone": [
"conversational",
"thoughtful",
"reliable",
"quirky"
],
"notes": [
"The four voice principles come from the Twilio brand team and are published in Paste: conversational, thoughtful, reliable, quirky (published, https://paste-dsys.com/foundations/content/voice-and-tone/).",
"Tone runs on a spectrum of direct, balanced and casual, chosen by the reader's situation and emotional state (published).",
"Homepage voice (observed 2026-10-31): a seasonal campaign layer (Halloween 2026) wraps plain product promises in themed puns: nightmare, horror story, escape plan, hair-raising, hauntingly good. Strip the theme and each line is a short benefit plus a verb-first CTA. A landing page follows this homepage voice: one theme, light puns, never in CTAs."
],
"rules": [
{
"id": "headline-case",
"kind": "headline_case",
"value": "sentence",
"prov": "published",
"source": "https://paste-dsys.com/foundations/typography/"
},
{
"id": "spelling",
"kind": "spelling",
"value": "en-US",
"prov": "published",
"source": "https://paste-dsys.com/foundations/content/product-style-guide/"
},
{
"id": "person",
"kind": "person",
"value": "we_you",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
{
"id": "oxford-comma",
"kind": "guidance",
"text": "Use the serial (Oxford) comma in lists of 3 or more",
"prov": "published",
"source": "https://paste-dsys.com/foundations/content/product-style-guide/"
},
{
"id": "no-ampersand",
"kind": "avoid",
"terms": [
"&"
],
"instead": "\"and\"",
"prov": "published",
"source": "https://paste-dsys.com/foundations/content/product-style-guide/"
},
{
"id": "select-not-click",
"kind": "prefer",
"term": "select",
"over": [
"click",
"tap",
"choose",
"pick"
],
"prov": "published",
"source": "https://paste-dsys.com/foundations/content/word-list/"
},
{
"id": "sign-in",
"kind": "prefer",
"term": "sign in",
"over": [
"log in",
"login"
],
"prov": "published",
"source": "https://paste-dsys.com/foundations/content/word-list/"
},
{
"id": "use-not-leverage",
"kind": "prefer",
"term": "use",
"over": [
"leverage"
],
"prov": "published",
"source": "https://paste-dsys.com/foundations/content/word-list/"
},
{
"id": "no-easy",
"kind": "avoid",
"terms": [
"easy",
"easily"
],
"prov": "published",
"source": "https://paste-dsys.com/foundations/content/word-list/"
},
{
"id": "no-latin",
"kind": "avoid",
"terms": [
"e.g.",
"i.e.",
"etc."
],
"instead": "\"for example\" or \"that is\"",
"prov": "published",
"source": "https://paste-dsys.com/foundations/content/word-list/"
},
{
"id": "in-order-to",
"kind": "prefer",
"term": "to",
"over": [
"in order to"
],
"prov": "published",
"source": "https://paste-dsys.com/foundations/content/word-list/"
},
{
"id": "no-all-caps",
"kind": "guidance",
"text": "Avoid forced capitalization; title case only for proper nouns and products",
"prov": "published",
"source": "https://paste-dsys.com/foundations/typography/"
},
{
"id": "contractions",
"kind": "guidance",
"text": "Use contractions with pronouns (it's, you'll, we're) to sound conversational",
"prov": "published",
"source": "https://paste-dsys.com/foundations/content/product-style-guide/"
},
{
"id": "reading-level",
"kind": "guidance",
"text": "Write for a 10-13 year old reading level: short sentences, common words, explain technical terms",
"prov": "published",
"source": "https://paste-dsys.com/foundations/content/product-style-guide/"
},
{
"id": "no-directional",
"kind": "guidance",
"text": "No directional or color cues (\"above\", \"the blue button\"); name the thing",
"prov": "published",
"source": "https://paste-dsys.com/foundations/content/product-style-guide/"
},
{
"id": "cta-verbs",
"kind": "guidance",
"text": "CTAs are 2-3 word verb phrases: Start for free, Send messages, Verify users, View docs",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
}
],
"approved": {
"phrases": [
"Start for free",
"No credit card required",
"Flexible pricing",
"builders",
"building blocks"
],
"words": [
"builders",
"conversations",
"context",
"channels",
"platform"
]
},
"banned": [
"click",
"leverage",
"easy",
"e.g.",
"etc.",
"log in"
],
"is_not": "Never stiff or jargon-heavy, never overclaims what the product does (Paste: \"Never suggest or claim that the product does something it can't\"), never cute in an error.",
"prov": "published",
"source": "https://paste-dsys.com/foundations/content/voice-and-tone/"
},
"spec": {
"source": "https://www.twilio.com/en-us",
"how": "computed styles, element boxes and canvas font measurement in headless Chromium at 1440x900 and 390x844 after a full scroll (lazy images loaded)",
"provenance": "observed",
"breakpoints": {
"phone_max": 767,
"all": [
400,
768,
1024,
1232
],
"note": "Paste publishes 400/1024/1232px; the 768 switch is our reading of the marketing site (phone layout at 390)"
},
"motion": [
{
"name": "button",
"easing": "ease-in-out",
"duration_ms": 300,
"use": "background, color, border and ring on every button and text link",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
{
"name": "card",
"easing": "ease-in-out",
"duration_ms": 180,
"use": "analyst card background (#191F36 to #B10F23) and number color on hover",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
{
"name": "media-fade",
"easing": "ease",
"duration_ms": 300,
"use": "hero video poster opacity and product image swap to the hover image",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
{
"name": "badge",
"easing": "ease-in-out",
"duration_ms": 700,
"use": "New badge transition",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
}
],
"icons": {
"grid": "16px and 20px UI icons in a 24px set; 32px for code language and outbound arrows",
"sizes": [
{
"name": "ui",
"px": 16,
"use": "globe, checks, plus, chevrons"
},
{
"name": "nav",
"px": 20,
"use": "search"
},
{
"name": "feature",
"px": 32,
"use": "code language logos, outbound arrow"
}
],
"stroke": "1px rounded-cap outline in the 16px set",
"caps_joins": "round caps and joins",
"color": "white on ink; ink #000D25 on the white nav",
"rule": "Icons are decorative next to text labels; meaning never by icon alone (Paste)",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
"layout": {
"page_margin": {
"desktop": 120,
"phone": 32
},
"section_padding": {
"desktop": 64,
"phone": 64
},
"container_max": 1200,
"hero_text_max": 576,
"columns": 3,
"columns_phone": 1,
"gutter": 48,
"gutter_phone": 32,
"card_gap": 48,
"nav_height": 112,
"note": "Content column x 120-1320 (1200px) at 1440; phone 32px gutters (footer 24px). Three-column grids are 368px columns with 48px gaps (x 120, 536, 952). Hero: two 576px columns (x 120 and x 744) with a 48px gap. Bands are separated by padding only: every band sits on the same #000D25 ground, there are no divider lines and no alternating grounds. Header 112px = 32px utility strip + 80px nav (phone 44 + 80 = 124). Paste publishes an 8px spacing grid (multiples of 8) and a 1232px max content width.",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
"type": [
{
"role": "Hero H1",
"id": "display-xl",
"face": "display",
"size": {
"desktop": 56,
"phone": 34
},
"line_height": 1.18,
"tracking_px": -1.68,
"tracking_phone_px": -1.02,
"weight": 750,
"note": "Whitney SSm 700 on the site: 56/66 desktop, 34/40 phone. Open Sans stand-in at 750",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
{
"role": "Section H2",
"id": "display-l",
"face": "display",
"size": {
"desktop": 40,
"phone": 28
},
"line_height": 1.3,
"tracking_px": -0.8,
"tracking_phone_px": -0.56,
"weight": 750,
"note": "40/52 desktop, 28/36 phone; Whitney 700",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
{
"role": "Analyst number (4x, 5x)",
"id": "display-num",
"face": "display",
"size": {
"desktop": 64,
"phone": 64
},
"line_height": 1.3,
"tracking_px": -1.92,
"weight": 750,
"note": "64/83.2 #EF223A, Whitney 700",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
{
"role": "Analyst claim",
"id": "title-xl",
"face": "body",
"size": {
"desktop": 28,
"phone": 28
},
"line_height": 1.286,
"tracking_px": 0,
"weight": 400,
"note": "28/36 white, 400 (not bold)",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
{
"role": "Lead paragraph",
"id": "lead",
"face": "body",
"size": {
"desktop": 20,
"phone": 18
},
"line_height": 1.6,
"tracking_px": 0.2,
"weight": 400,
"note": "20/32 desktop, 18/28 phone",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
{
"role": "Card title (product)",
"id": "title",
"face": "display",
"size": {
"desktop": 20,
"phone": 18
},
"line_height": 1.6,
"tracking_px": 0,
"weight": 750,
"note": "20/32 desktop, 18/28 phone, Whitney 700",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
{
"role": "Card body (product)",
"id": "body-l",
"face": "body",
"size": {
"desktop": 18,
"phone": 16
},
"line_height": 1.556,
"tracking_px": 0.18,
"weight": 400,
"note": "18/28 desktop, 16/24 phone",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
{
"role": "Stat caption",
"id": "caption-strong",
"face": "body",
"size": {
"desktop": 18,
"phone": 16
},
"line_height": 1.556,
"tracking_px": 0,
"weight": 600,
"note": "18/28 desktop, 16/24 phone, 600 white",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
{
"role": "Button label",
"id": "button",
"face": "body",
"size": {
"desktop": 16,
"phone": 14
},
"line_height": 1.5,
"tracking_px": 0,
"weight": 550,
"note": "Whitney 500 16/24 (phone 14/20); Open Sans 550",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
{
"role": "Nav link / footer link",
"id": "body-s",
"face": "body",
"size": {
"desktop": 14,
"phone": 12
},
"line_height": 1.43,
"tracking_px": 0,
"weight": 400,
"note": "nav 14/20 #000D25; footer links 14/20 #CACDD8 (phone 12/18)",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
{
"role": "Footer column heading",
"id": "label",
"face": "body",
"size": {
"desktop": 14,
"phone": 16
},
"line_height": 1.43,
"tracking_px": 0,
"weight": 500,
"note": "desktop 14/20 500 white with font-variant: all-small-caps (reads as small capitals); phone 16/24 600 normal case",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
{
"role": "Utility / legal",
"id": "micro",
"face": "body",
"size": {
"desktop": 12,
"phone": 12
},
"line_height": 1.5,
"tracking_px": 0,
"weight": 500,
"note": "utility strip 12/21 500 #000D25; copyright 12/18 400 white; hero check labels 14/20 (phone 12/18) 400",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
{
"role": "Code",
"id": "code",
"face": "mono",
"size": {
"desktop": 16,
"phone": 16
},
"line_height": 1.5,
"tracking_px": 0,
"weight": 300,
"note": "Twilio Sans Mono 300 on the site; comment #7688C2, line number #3ACEFA",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
{
"role": "Customer stat (Oxanium stand-in for Buffalo)",
"id": "stat",
"face": "stat",
"size": {
"desktop": 80,
"phone": 80
},
"line_height": 0.525,
"tracking_px": 5,
"weight": 800,
"note": "Site: Buffalo 400 72px, line-height 42px, +2.5px, #EF223A. With Oxanium 800 set 80px, letter-spacing 5px, line-height 42px to match the rendered width",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
}
],
"components": {
"button_primary": {
"fill": "#1866EE",
"text": "#FFFFFF",
"radius": "pill",
"height": 40,
"padding_x": 24,
"padding": "8px 24px",
"font_size": 16,
"weight": 550,
"face": "body",
"text_style": "16px/24px Whitney 500 (Open Sans 550); phone 14px/24px",
"example": "Start for free (148x40), View all products (184x40), Send messages (168x40)",
"states": {
"hover": {
"css": {
"background-color": "#0E3E92",
"transition": "background-color 0.3s ease-in-out"
},
"measured": {
"fill": "#0E3E92"
},
"prov": "observed"
}
},
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
"button_secondary_on_dark": {
"fill": "none",
"text": "#FFFFFF",
"ring": "#FFFFFF",
"ring_px": 2,
"radius": "pill",
"height": 40,
"padding_x": 24,
"padding": "8px 24px",
"font_size": 16,
"weight": 550,
"face": "body",
"example": "See our platform (179x40), View docs (128x40), Get inspired (144x40)",
"states": {
"hover": {
"css": {
"background-color": "#1866EE",
"box-shadow": "inset 0 0 0 2px #1866EE"
},
"measured": {
"fill": "#1866EE",
"ring": "#1866EE"
},
"prov": "observed"
}
},
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
"button_nav_primary": {
"fill": "#1866EE",
"text": "#FFFFFF",
"radius": "pill",
"height": 36,
"padding_x": 24,
"padding": "6px 24px",
"font_size": 16,
"weight": 550,
"face": "body",
"example": "Start for free in the nav (135x36; phone 14px, 123x36)",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
"button_nav_outline": {
"fill": "none",
"text": "#1866EE",
"ring": "#1866EE",
"ring_px": 2,
"radius": "pill",
"height": 36,
"padding_x": 24,
"padding": "6px 24px",
"font_size": 16,
"weight": 550,
"face": "body",
"example": "Contact sales in the nav (141x36), on white",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
"text_link_on_dark": {
"text": "#FFFFFF",
"note": "white 16px/24px 500 with border-bottom 2px solid #FFFFFF directly under the text (no underline offset); hover color #3ACEFA. Explore what's possible (184x26), View pricing (98x26)",
"states": {
"hover": {
"css": {
"color": "#3ACEFA"
},
"prov": "observed"
}
},
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
"card_analyst": {
"fill": "#191F36",
"radius": 20,
"padding": "32px",
"note": "368x512 desktop, 318 wide on phone; logo 48px tall (32 phone) white; number 64/83.2 #EF223A; claim 28/36 400 white with superscript footnote; 32px outbound arrow bottom right, label hidden at rest",
"states": {
"hover": {
"css": {
"background-color": "#B10F23"
},
"prov": "observed"
}
},
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
"badge_new": {
"fill": "#EF223A",
"text": "#FFFFFF",
"radius": 10,
"padding": "0 12px",
"note": "14px/20px 600, 20px tall, sits 8px after the card title on its baseline",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
"code_sample": {
"fill": "#081F47",
"radius": 0,
"note": "tab row 58px tall on #000D25 with 7 equal tabs (131px) holding 32px white language logos; active tab #081F47 with 4px top corners; panel 928x460 #081F47; line-number gutter 48px, numbers #3ACEFA, 1px #7688C2 divider; code Twilio Sans Mono 300 16/24, padding 24px 64px 24px 61px",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
"accordion_sources": {
"note": "full content width minus 32px, padding 24px, title 20/32 600 -0.4px white, 16px white plus icon at right, border-bottom 2px solid #FFFFFF; no fill",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
}
},
"signature": [
{
"name": "One dark ink page",
"where": "the whole homepage, hero to footer",
"spec": "every band sits on #000D25; separation comes from 64px padding, card fills (#191F36, #081F47) and photography, never from alternating grounds or rules. Only the nav is white",
"once": "one ground for the whole page",
"dont": "alternate light and dark bands, or add gradients behind sections",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)",
"example": {
"ground": "night",
"text": "Reaching a business shouldn't be a nightmare"
}
},
{
"name": "Blue pills on navy",
"where": "every call to action",
"spec": "action is always Blue 500 #1866EE as a filled pill (radius 50px, 40px tall, 16px/500 white); the second action is the same pill as a 2px white ring or a white text link with a 2px underline. Red never carries an action",
"dont": "use red or square buttons for CTAs",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
{
"name": "Red is for numbers",
"where": "customer-story stats and analyst counts, the New badge, the logo",
"spec": "Red light #EF223A on big numbers only: blocky stat face (Buffalo; Oxanium stand-in) for customer stats, 64px bold for analyst counts. Paste reserves Twilio Red for moments of impact (illustration, logo, iconography)",
"dont": "set paragraphs or buttons in red",
"prov": "published",
"source": "https://paste-dsys.com/foundations/colors/"
},
{
"name": "Product UI as illustration",
"where": "the six product cards",
"spec": "each product is shown as a fragment of real UI (a profile card, a channel switcher, a flowchart) in white-outlined dark panels with tiny red accents, inside a 368x460 rounded #191E36 panel (Paste's \"medium scene\" idea: real UI screens blended with people and graphic elements)",
"dont": "use abstract icons or stock 3D for product cards",
"prov": "published",
"source": "https://paste-dsys.com/foundations/illustrations/"
},
{
"name": "Trapezoid photo cards",
"where": "customer stories carousel",
"spec": "photos of people using phones, cut to a slanted trapezoid with rounded corners and a navy bottom fade, white customer logo, red stat, white 600 caption; they run edge to edge in a continuous carousel",
"dont": "use rectangular photo tiles",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
}
],
"page": {
"source": "https://www.twilio.com/en-us",
"date": "2026-10-31",
"prov": "observed",
"voices": "Homepage = campaign voice over plain product promises (Halloween 2026 puns in headlines and leads; CTAs and product names stay plain). Paste's product voice (conversational, direct, no puns in errors) governs UI text. A landing page follows the homepage voice.",
"nav": {
"summary": "Two strips: a 32px light-gray utility strip with language, Support and Login at the right; then an 80px white nav with the red Twilio logo at left, five centered menu triggers, and search, Contact sales (outline) and Start for free (filled) at right. Sticky.",
"ground": "utility strip #F3F4F7 (y 0-32); nav #FFFFFF (y 32-112); no bottom border or shadow visible against the ink hero",
"height": "112px total desktop (32 + 80); phone 124px (44 + 80)",
"border": "none",
"logo": {
"variant": "full-color Twilio logo: red #F22F46 bug + wordmark on white",
"px": "108x39",
"position": "x 24, y 53 (vertically centred in the 80px bar)",
"file": "https://www.twilio.com/en-us"
},
"links": {
"count": 5,
"labels": "Products, Solutions, Why Twilio, Resources, Pricing (all five open menus; each has an 8x4 chevron-down 8px after the label)",
"size": "14px/20px",
"weight": 400,
"color": "#000D25",
"alignment": "centred group, buttons 80px tall with padding 8px 16px at x 397 (Products, 108 wide), 505 (Solutions, 111), 616 (Why Twilio, 124), 740 (Resources, 117), 857 (Pricing, 94)"
},
"utility": "right-aligned in the 32px strip, 12px/21px 500 #000D25: [16px globe icon] English [10x5 chevron] at x 1170-1254, a 1px #CACDD8 vertical divider 16px tall, Support [chevron] at x 1286, Login [chevron] at x 1367 (ends x 1417)",
"actions": [
"Search: 20px magnifier (#000D25 stroke) in a 40x40 button at x 1084, y 52",
"Contact sales: outline pill, 2px inset ring #1866EE, text #1866EE 16px/500, padding 6px 24px, 141x36 at x 1132 y 54",
"Start for free: filled pill #1866EE, white 16px/500, padding 6px 24px, 135x36 at x 1281 y 54 (8px after Contact sales; right edge x 1416)"
],
"sticky": "the whole 112px header is position sticky at the top",
"phone": {
"shows": "utility strip 44px #F3F4F7 with only [globe] English [chev] (x 201) and Login [chev] (x 317), 12px; then 80px white bar: logo 108x39 at x 24 y 65, Start for free pill 14px/500 padding 6px 24px 123x36 at x 187 y 66, hamburger (three 2px #000D25 lines, 24px wide) in a 48x48 button at x 318 y 60",
"menu": "full-height white sheet with the five sections as accordions (not shown at rest)",
"cta": "Start for free stays visible"
}
},
"hero": {
"summary": "Ink #000D25 band. Left column: three-line 56px bold white headline, a three-line 20px lead, a blue Start for free pill with a white underlined text link beside it, and a row of three check-circle reassurances. Right column: a 576x240 rounded video frame with a round translucent play button.",
"desktop": {
"section": "y 111-709 (598px), padding 96px top, 32px bottom; ground #000D25",
"column_split": "two 576px columns: text x 120-696, media x 744-1320 (48px gap)",
"vertical_anchors": "H1 top y 207 (3 lines, 66px each, bottom 405); lead y 425-513 (3 lines at 32px); CTA row y 549-589; checks row y 621-645; video y 306-546 (vertically centred on the text column)",
"text_max_width": "H1 576px: breaks \"Reaching a business / shouldn't be a / nightmare\"; lead 576px: \"Bad communication can turn a simple task into a horror / story. Don't let that happen to your customers. Get it right / with every conversation, with Twilio.\"",
"media": "video frame 576x240 at x 744 y 306, border-radius 20px, overflow hidden, #000D25 behind; at rest it shows a dim teal still of a woman (hero-video-frame-desk.png, object-fit cover)",
"cta_size": "Start for free 148x40 at x 120 y 549; Explore what's possible text link at x 284 (16px after the pill), text 16/24 500 white, 2px #FFFFFF bottom border, 184x26 at y 557"
},
"phone": {
"order": "H1, lead, CTA pill, text link, checks row, video",
"alignment": "everything centred; 32px side gutters; section y 123-915, padding 64px top, 32px bottom",
"sizes": "H1 34px/40px -1.02px, 3 lines centred (\"Reaching a / business shouldn't / be a nightmare\") y 187-307; lead 18px/28px centred, 5 lines y 326-459; Start for free 135x40 (14px) centred at y 495; Explore what's possible 14px/20px 500 with the 2px underline centred at y 553; checks centred at y 611 in 12px/18px; video 326x136 at x 32 y 716, radius 20px (hero-video-frame-phone.png)"
},
"at_rest": {
"video": "PLACE THE IMAGE: hero-video-frame-desk.png (1152x480 = 576x240 at 2x) as the frame's background or an ![]()
with object-fit cover in a 576x240 box with border-radius 20px. Phone: hero-video-frame-phone.png (652x272 = 326x136 at 2x). It is a still of the Halloween campaign video: never replace it with a gradient or icon",
"play_button": "68x68 circle centred in the frame (x 998 y 392 desktop; x 161 y 749 phone): background rgba(20,12,35,0.65), border 1px solid rgba(255,255,255,0.8), a white solid play triangle about 20px tall, optically centred (nudged 2px right)",
"checks": "three items in a row, 12px apart: 16px white check-in-circle icon (icon-check-circle.svg), 12px gap, label 14px/20px 400 white: \"Free trial\", \"No credit card required\", \"Flexible pricing\" (desktop items at x 124, 223, 420)",
"motion": "video plays on click only; poster fades (animation only)"
},
"type": "H1 Whitney SSm 700 56/66 -1.68px #FFFFFF (Open Sans 750); lead 20/32 400 #FFFFFF",
"cta": "one filled pill + one underlined text link",
"proof": "the check row is the only proof in the hero",
"copy": [
"H1: \"Reaching a business shouldn't be a nightmare\"",
"Lead: \"Bad communication can turn a simple task into a horror story. Don't let that happen to your customers. Get it right with every conversation, with Twilio.\"",
"CTA: \"Start for free\"; link: \"Explore what's possible\"",
"Checks: \"Free trial\" / \"No credit card required\" / \"Flexible pricing\""
]
},
"sections": [
{
"name": "Building blocks intro (60/40 head with two buttons)",
"summary": "A section head: 40px two-line H2 and a 20px three-line paragraph in the left 720px; two pills (filled + ring) right-aligned on the right.",
"ground": "#000D25",
"desktop": "band y 709-1077, padding 64px top; H2 at x 120 y 837, 720px wide, 2 lines (\"Building blocks for every / conversation\"), 40/52 700 -0.8px; paragraph 20/32 at y 949, 3 lines, 720 wide; buttons on one row right-aligned to x 1320, vertically at y 905-945: View all products (filled, 184x40, x 941) then 16px gap, See our platform (2px white ring, 179x40, x 1141)",
"phone": "y 915-1351, all centred: H2 28/36 2 lines y 979; paragraph 18/28 5 lines y 1059; View all products 167x40 centred y 1223; See our platform 163x40 centred y 1279 (stacked, 16px apart)",
"anatomy": [
"Left column 60% (720px), right column 40%; no eyebrow, no divider"
],
"copy": [
"H2: \"Building blocks for every conversation\"",
"P: \"Your toolkit is expanding. Discover a new generation of building blocks designed to orchestrate context-rich conversations across channels, for humans and AI agents.\"",
"Buttons: \"View all products\" (filled), \"See our platform\" (ring)"
]
},
{
"name": "Product cards (2 rows x 3)",
"summary": "Six product cards in two rows of three: each is a 368x460 rounded navy image panel showing a slice of product UI, then a 20px bold title, an 18px three-line description and a blue pill.",
"ground": "#000D25",
"desktop": "band y 1077-2691 (padding 0 0 64px). Row 1 images at y 1109, row 2 at y 1896; columns x 120, 536, 952 (368 wide, 48 gap). Card stack: image 368x460 (the PNG already contains the #191E36 rounded panel, radius 20, place it as-is); 32px gap; title 20/32 700 white (row 1 y 1601); 16px gap; body 18/28 400 white, 3 lines (y 1652, text ~340px wide); 32px gap; button 40px pill (row 1 y 1768). Row 1 button bottom 1808 to row 2 image top 1896 = 88px",
"phone": "single column at x 32, 326 wide: image 326x408 (y 1356, 2033, 2710, 3381, 4058, 4735 = 677px pitch), title 18/28 at image bottom + 32, body 16/24 3 lines, button 14px 40px, then 48px to the next image",
"anatomy": [
"Order: Conversations [New badge], Messaging, Email / Voice, User authentication, Customer data",
"New badge: #EF223A pill radius 10px, 0 12px padding, 14/20 600 white \"New\", 8px after the \"Conversations\" title on the same line",
"Buttons, in order: Start conversations (200x40), Send messages (168), Send emails (142), Make calls (131), Verify users (141), Connect data (153); filled #1866EE pills, left-aligned under the text",
"Each image has a hover twin (*-hover.png: the same UI over a blue glow) that fades in on hover (animation only); at rest show the plain image"
],
"copy": [
"Conversations: \"Build conversations that never die with persistent memory, intelligence, and orchestration for humans and AI.\"",
"Messaging: \"Send, receive, and manage SMS, RCS, WhatsApp, and more when every second matters.\"",
"Email: \"Deliver email that always reaches its final destination with the trusted SendGrid Email API.\"",
"Voice: \"Build voice experiences that keep customer connections alive while unchaining ROI with data and AI.\"",
"User authentication: \"Fight fraud and keep accounts securely locked up with verification and identity lookup tools.\"",
"Customer data: \"Unify clean, consented customer data from any source for hair-raising insights on every customer.\""
],
"components": "button_primary, badge_new"
},
{
"name": "Developer code sample",
"summary": "Centred head (40px H2, 20px two-line paragraph, a ring View docs pill), then a 928px code sample: a row of seven language tabs over a tall navy code panel.",
"ground": "#000D25 (the panel #081F47)",
"desktop": "band y 2691-3565, padding 64px 0. H2 one line centred, y 2755 (column x 256-1184, 928 wide); paragraph 20/32 centred 2 lines y 2815 (\"Sign up for a free Twilio account and grab one of our official server-side SDKs. No locked doors, / no hidden codes. Just your first text, call, or email live in minutes.\"); View docs ring pill 128x40 centred at y 2911; tab row x 256-1184 y 2983-3041 (58 tall, #000D25), seven 131x58 tabs from x 260, each a centred 32px white language logo; the first (Python) is active: fill #081F47, radius 4px 4px 0 0; panel x 256 y 3041 928x460 #081F47",
"phone": "y 5369-6304, padding 64 0 32: H2 28/36 centred 2 lines y 5433; paragraph 18/28 centred 5 lines; View docs 118x40 centred y 5685; tab row y 5757, 326 wide, seven 45x55 tabs (icons 24px); panel y 5813, 326x460, code clipped at the right edge",
"anatomy": [
"Tabs in order: Python, C#, PHP, Ruby, Java, Node.js, curl (code-python.svg ... code-curl.svg)",
"Panel content at rest: line number \"1\" in #3ACEFA in a 48px gutter with a 1px #7688C2 right border, then the comment \"# Download the helper library from https://www.twil\" in #7688C2 JetBrains Mono 300 16/24 followed by a white text cursor bar; the text starts x 317 y 3067 (padding 24px 64px 24px 61px). The rest of the 460px panel is empty navy",
"The snippet types itself (animation only); build the resting line above"
],
"copy": [
"H2: \"Build. Without needing an escape plan.\"",
"Button: \"View docs\""
],
"components": "code_sample, button_secondary_on_dark"
},
{
"name": "Customer stories carousel",
"summary": "Left-aligned two-line H2 and paragraph with a ring Get inspired pill at right, then a full-bleed row of 560x420 trapezoid photo cards, each with a white customer logo, a big red stat and a white caption.",
"ground": "#000D25",
"desktop": "band y 3565-4481, padding 64px 0. H2 x 120 y 3693, 691 wide, 2 lines (\"Different teams, different stacks. / Safe and sound on one platform.\"); paragraph 20/32 y 3805, 2 lines; Get inspired ring pill 144x40 right-aligned (x 1176, y 3745). Carousel y 3965-4385 full width (overflow hidden): cards 560x420 on a 560px pitch, at rest the IBM card at x -211 (cut at the left edge), Smava at x 349, OhMD at x 909 (cut by the right edge)",
"phone": "y 6305-7293: H2 28/36 centred 4 lines y 6433; paragraph 18/28 centred 4 lines; Get inspired 132x40 centred y 6721; cards 464x340 at y 6857 on a 464px pitch, IBM at x -297, Smava at x 167 (cut by the right edge); overlay padding 24px 96px, logo 100x34, stat same 42px line, caption 16/24 600",
"anatomy": [
"Card = the story PNG (story-.png, 1294x948 at 2x, trapezoid with rounded corners and navy bottom fade already in the file, transparent outside) at 560x420, plus an overlay box anchored to the card bottom (560x246, padding 32px 96px, flex column, 48px gap... measured: logo top y 4171, stat y 4267, caption y 4325)",
"Overlay content: white logo 160x48 (object-fit contain, left aligned; story-logo-*.svg already white), stat in the stat face #EF223A (Buffalo 72px/42px +2.5px on the site; Oxanium 800 80px/42px letter-spacing 5px), caption 18/28 600 white",
"Order and stats (the brand's published numbers): IBM 30% increased product adoption; Smava 150% higher click rates; OhMD 1min appointment flow target; Toyota Connected 13% after call work reduction; Resy 21M+ messages sent monthly; Lyft 30M interactions weekly; Posh 97k+ fraud attempts blocked; Delivery Hero 60% fewer escalations",
"Continuous horizontal scroll (animation only); at rest render the three positions above"
],
"copy": [
"H2: \"Different teams, different stacks. Safe and sound on one platform.\"",
"P: \"From scaling startups to global enterprises, companies are building hauntingly good customer experiences with Twilio.\"",
"Button: \"Get inspired\""
],
"components": "button_secondary_on_dark"
},
{
"name": "Analyst recognition (3 cards)",
"summary": "Centred one-line H2, then three navy rounded cards, each with a white analyst logo, a red 64px multiplier, a 28px four-line claim with a footnote number, and an outbound arrow bottom right.",
"ground": "#000D25 (cards #191F36)",
"desktop": "band y 4481-5237, padding 32px top. H2 centred y 4545 (40/52). Cards 368x512 at y 4661, x 120 / 536 / 952, radius 20, padding 32px. Inside: logo 48px tall (Gartner 172x48, Omdia 152x48, IDC 107x48) at y 4693; number \"4x\"/\"4x\"/\"5x\" 64/83.2 700 -3% #EF223A at y 4776; claim 28/36 400 white at y 4856, 4 lines in 304px; 32px white outbound arrow (icon-outbound-arrow.svg) bottom right at y 5109 (right edge = card right - 32)",
"phone": "y 7293-9139: H2 28/36 centred 2 lines y 7357; cards stacked 318 wide at x 36 (y 7493, 8036, 8616; 48px gaps), padding 32, logo 32px tall, number 64px, claim 28/36 (5 lines in 254px)",
"anatomy": [
"Claims, verbatim, with superscript footnotes 1-3: \"Twilio was named a Leader in the 2026 Gartner® Magic Quadrant™ for CPaaS¹\"; \"Twilio was named a leader in the Omdia Universe: Customer Engagement Platforms (CEP)²\"; \"Twilio was named a leader in the IDC MarketScape: Worldwide CPaaS³\"",
"The whole card is a link; the link label (Read the report / View the excerpt) is not visible at rest, only the arrow",
"Hover: card fill #B10F23 (0.18s ease-in-out)"
],
"copy": [
"H2: \"We think our track record speaks for itself\""
],
"components": "card_analyst"
},
{
"name": "Closing CTA with cut-out photo",
"summary": "Two columns inside the 1200 container: left a 40px two-line H2, a 20px five-line paragraph and Start for free + View pricing; right a cut-out photo of a man holding a phone inside a red outline hexagon, sitting on the band's bottom edge.",
"ground": "#000D25 with a very faint blue glow image (cta-ground.png, almost transparent) as the container background, center/cover",
"desktop": "band y 5237-5780 (no padding on the outer band; inner container x 120-1320, padding 64px 32px 0). Text column x 152-720 (568), vertically centred against the photo: H2 y 5356 (2 lines, \"Don't wait for the next / nightmare\"), paragraph 20/32 y 5496 (5 lines), buttons y 5684: Start for free 148x40 at x 152, View pricing text link (2px underline) at x 316. Photo cta-man-phone.png 568x479 at x 720 y 5301, bottom flush with the band bottom (y 5780); its top crosses above the H2",
"phone": "y 9139-9939, padding 64px 32px 0, centred: H2 28/36 2 lines y 9203; paragraph 18/28 7 lines; Start for free 135x40 centred y 9535; View pricing link y 9591; photo 326x275 at y 9664, flush with the band bottom",
"anatomy": [
"The red hexagon outline is part of the photo file; never draw it"
],
"copy": [
"H2: \"Don't wait for the next nightmare\"",
"P: \"Twilio gives you the power to create digital experiences on any channel with full customer context and AI-enabled tools to work efficiently. All on a single platform with flexible plans and pay-as-you-go pricing. No tricks. No traps.\"",
"CTA \"Start for free\", link \"View pricing\""
]
},
{
"name": "Sources accordion",
"summary": "One closed accordion row titled Sources with a plus icon and a 2px white rule under it (it holds the analyst footnotes).",
"ground": "#000D25",
"desktop": "band y 5780-5958; row x 152-1288 (1136 wide) at y 5812, 114 tall, padding 24px; title \"Sources\" 20/32 600 -0.4px white at x 176; 16px white plus icon at x 1216 (icon-plus.svg); border-bottom 2px solid #FFFFFF",
"phone": "y 9939-10117; row x 32 w 326, title 18/28 600, plus at right, same 2px white rule",
"anatomy": [
"Closed at rest"
]
}
],
"footer": {
"summary": "Ink footer: left a white Twilio logo, an \"Get an AI summary:\" row with three AI icons, ten company links, four social icons and the copyright; right four link columns with small-caps headings.",
"ground": "#000D25 (band y 5958-6704, padding 32px 0)",
"anatomy": [
"Left column x 132 (width ~250): footer-logo.svg white 133x48 at y 6078; \"Get an AI summary:\" 14/20 600 white at y 6150 followed by three 18-20px white icons (ChatGPT, Gemini, Claude) at x 286, 332, 378",
"Left links 14/20 400 #CACDD8 on a 34px pitch from y 6196: Twilio careers, Twilio.org, Press and media, Investor relations, Legal, Privacy, Security, Impressum, Sitemap, LLMS",
"Social row y ~6554: Facebook, X, LinkedIn, YouTube, white 16-18px icons, 46px pitch from x 132",
"Copyright 12/18 400 white at y 6604, 2 lines in 276px: \"Copyright © 2026 Twilio Inc. All rights / reserved.\"",
"Four columns with headings at y 6066, x 432, 669, 906, 1143 (237px pitch, ~165-190px wide): heading 14/20 500 white, font-variant all-small-caps (renders as small capitals), a 1px white rule 12px below spanning the column; links 14/20 400 #CACDD8 from y 6115 on a 34px pitch (2-line items take 48px); each column ends with a 600-weight #CACDD8 link and a 12px chevron-right",
"Considering Twilio?: About Twilio, Customer Engagement Platform (CEP), Communications, Conversational AI, User authentication and identity, Customer Data Platform (CDP), AI, Customer stories, Events, Contact sales, then \"Why Twilio >\"",
"Products and Features: SMTP, Branded Calling, Twilio Segment, Twilio Engage, Connections, SendGrid Email API, RCS messaging, Latest innovations, Pre-built solutions, Support plans, then \"All products >\"",
"Use Cases: AI agent productivity, Customer data management, Audience segmentation, Contact center, SMS marketing, Customer acquisition, Voice response system (IVR), Fraud prevention, Bulk text messaging, Mass email sender, then \"All use cases >\"",
"Developers: Developer resources, Twilio Essentials, SDKs, CDP integrations, Serverless, Conversation, SMTP Email API, SMS API, WhatsApp API, Voice API, Connections, then \"All docs >\"",
"No street address or phone number in the footer"
],
"phone": "y 10117-11499, 24px gutter: logo 133x48 (y 10229), Get an AI summary 12/18 + icons, the ten links 12/18 #CACDD8, social icons in 40x40 boxes with 1px white border and 4px radius (16px apart), copyright one line; then the four columns become closed accordion rows (390 wide, 73px tall, padding 24px, heading 16/24 600 white, plus icon at right, 1px #DDE0E6 bottom rule) at y 11031, 11152, 11273, 11394"
},
"dark_ground": {
"secondary_button": "transparent pill with 2px inset white ring, white 16px/500 text; hover fills #1866EE",
"link": "white 16px/500 with a 2px solid white bottom border; hover #3ACEFA",
"muted_text": "#CACDD8 (footer links); body copy is always pure #FFFFFF",
"hairline": "2px #FFFFFF under the Sources row; 1px white under footer headings; 1px #DDE0E6 phone footer dividers",
"logo_variant": "red Twilio logo on the white nav; all-white Twilio logo in the footer; customer and analyst logos all white"
},
"not_built": "A third-party cookie banner (light gray, bottom of the viewport) overlays the live page; it is not part of the design: do not build it."
},
"bands": [
{
"label": "Header (utility strip + nav)",
"ground": "#F3F4F7 strip, #FFFFFF nav",
"content": "language/Support/Login; logo, 5 menus, search, Contact sales, Start for free",
"desktop": "32 + 80 = 112px, sticky",
"phone": "44 + 80 = 124px: English, Login; logo, Start for free, hamburger",
"anatomy": [
"Only white surface on the page"
]
},
{
"label": "Hero",
"ground": "#000D25",
"content": "H1, lead, CTA + link, checks | rounded video frame",
"desktop": "y 111-709, two 576 columns",
"phone": "centred stack, video last",
"anatomy": [
"Video frame 576x240 radius 20 with a 68px round play button"
]
},
{
"label": "Building blocks intro",
"ground": "#000D25",
"content": "H2 + paragraph left, two pills right",
"desktop": "y 709-1077",
"phone": "centred, buttons stacked",
"anatomy": []
},
{
"label": "Product cards",
"ground": "#000D25",
"content": "2 rows x 3 image cards with title, body, pill",
"desktop": "y 1077-2691",
"phone": "one column",
"anatomy": [
"New badge on Conversations"
]
},
{
"label": "Code sample",
"ground": "#000D25",
"content": "centred head, View docs, 7 tabs, navy code panel",
"desktop": "y 2691-3565",
"phone": "same, 326 wide",
"anatomy": []
},
{
"label": "Customer stories",
"ground": "#000D25",
"content": "head + Get inspired; trapezoid photo carousel with red stats",
"desktop": "y 3565-4481",
"phone": "centred head, 464 cards",
"anatomy": []
},
{
"label": "Analyst cards",
"ground": "#000D25",
"content": "centred H2; 3 navy cards",
"desktop": "y 4481-5237",
"phone": "stacked",
"anatomy": []
},
{
"label": "Closing CTA",
"ground": "#000D25",
"content": "H2, paragraph, CTA + link | cut-out photo",
"desktop": "y 5237-5780",
"phone": "centred, photo last",
"anatomy": []
},
{
"label": "Sources",
"ground": "#000D25",
"content": "closed accordion",
"desktop": "y 5780-5958",
"phone": "same",
"anatomy": []
},
{
"label": "Footer",
"ground": "#000D25",
"content": "logo, AI summary, links, social, copyright | 4 columns",
"desktop": "y 5958-6704",
"phone": "stack + 4 accordions",
"anatomy": []
}
]
},
"system": {
"fixed": [
"One ink #000D25 page with a white nav",
"Blue #1866EE pill CTAs",
"Red only for the logo, numbers and badges",
"Plain sans type in sentence case, bold headlines",
"Product shown as real UI fragments",
"Conversational, precise copy"
],
"flex": "the campaign layer: theme, photography, puns and the stat display face change with the season (Halloween 2026 at time of study)",
"traits": [
{
"is": "Conversational",
"not": "stiff",
"text": "Write how we speak (paraphrase).",
"prov": "published",
"source": "https://paste-dsys.com/foundations/content/voice-and-tone/"
},
{
"is": "Thoughtful",
"not": "generic",
"text": "Write for a specific person and their situation (paraphrase).",
"prov": "published",
"source": "https://paste-dsys.com/foundations/content/voice-and-tone/"
},
{
"is": "Reliable",
"not": "overclaiming",
"text": "Accurate and honest about what is and isn't possible (paraphrase).",
"prov": "published",
"source": "https://paste-dsys.com/foundations/content/voice-and-tone/"
},
{
"is": "Quirky",
"not": "unprofessional",
"text": "Professional and fun at the same time (paraphrase).",
"prov": "published",
"source": "https://paste-dsys.com/foundations/content/voice-and-tone/"
}
]
},
"formats": [
{
"format": "Landing page",
"level": 3,
"must": "Build it the way twilio.com is built (kit.spec.page, homepage voice): white two-strip header with the red logo; every band on #000D25; Open Sans (Whitney stand-in) bold sentence-case headlines; Blue #1866EE pill CTAs with a ring or underlined-link secondary; product UI images in rounded navy panels; red #EF223A only on numbers; footer on ink with small-caps column heads",
"flex": "which sections and how many cards; a seasonal theme in copy and photography"
},
{
"format": "Deck",
"level": 2,
"must": "Ink or white grounds, bold sentence-case titles, blue for links and calls to action, red for the key number",
"flex": "photography and product UI fragments"
},
{
"format": "Product UI",
"level": 1,
"must": "Paste tokens and components; blue-60 actions; red only for errors and destructive actions",
"flex": "illustration in empty and welcome states"
},
{
"format": "Email",
"level": 2,
"must": "White body, ink headline, one blue pill CTA, red logo",
"flex": "one hero image"
}
],
"checks": [
{
"name": "Logo hidden",
"text": "Cover the logo. It should still read as Twilio: one ink page, blue pills, red numbers and product UI fragments."
},
{
"name": "Red audit",
"text": "Red appears only on the logo, numbers and badges; never on a button."
},
{
"name": "Voice",
"text": "Run the word list: no click, leverage, easy, e.g.; sentence case throughout."
}
],
"examples": [],
"make_it_yours": {
"note": "Everything above transfers. These are Twilio's own and must be replaced with yours: name and logo, purpose, positioning, messaging pillars, proof, taglines and boilerplate.",
"replace": [
"identity",
"purpose",
"positioning",
"messaging.pillars",
"messaging.proof_points",
"messaging.taglines",
"messaging.boilerplate"
],
"reference": {
"purpose": {
"mission": {
"label": "Mission",
"text": "On a mission to enable every builder",
"prov": "published",
"source": "https://www.twilio.com/en-us/company"
},
"story": {
"text": "Founded in 2008 to bring communications to the cloud; now a platform combining channels, contextual data and AI orchestration (paraphrase).",
"prov": "published",
"source": "https://www.twilio.com/en-us/company",
"paraphrase": true
},
"values": [
{
"name": "Wear the customer's shoes",
"means": "Listen to and build with customers",
"prov": "published",
"source": "https://www.twilio.com/en-us/company/values"
},
{
"name": "Ask \"what if?\"",
"means": "Curiosity first; turn uncertainty into possibility",
"prov": "published",
"source": "https://www.twilio.com/en-us/company/values"
},
{
"name": "Own the outcome",
"means": "Do what we say; high standards",
"prov": "published",
"source": "https://www.twilio.com/en-us/company/values"
},
{
"name": "We > me",
"means": "Collective success; debate, then commit",
"prov": "published",
"source": "https://www.twilio.com/en-us/company/values"
},
{
"name": "No shenanigans",
"means": "Transparent, candid, respectful",
"prov": "published",
"source": "https://www.twilio.com/en-us/company/values"
}
]
},
"positioning": {
"statement": {
"text": "The customer engagement platform for builders: channels, context and AI in one platform.",
"prov": "inferred",
"source": "https://www.twilio.com/en-us/why-twilio"
},
"category": {
"text": "CPaaS and customer engagement platform (CEP)",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)",
"also": [
"https://www.twilio.com/en-us/why-twilio"
]
},
"audience": {
"text": "Developers and the businesses they build for, from startups to global enterprises",
"prov": "published",
"source": "https://www.twilio.com/en-us/company"
},
"problem": {
"text": "Bad, context-free communication frustrates customers (the homepage frames it as a horror story).",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
"promise": {
"text": "Continuous customer conversations with humans or AI agents, on one platform.",
"prov": "published",
"source": "https://www.twilio.com/en-us/why-twilio"
},
"differentiators": [
{
"text": "Neutral by design",
"prov": "published",
"source": "https://www.twilio.com/en-us/why-twilio"
},
{
"text": "Trusted at scale",
"prov": "published",
"source": "https://www.twilio.com/en-us/why-twilio"
},
{
"text": "Endlessly extensible",
"prov": "published",
"source": "https://www.twilio.com/en-us/why-twilio"
},
{
"text": "Free trial and pay-as-you-go pricing",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
}
],
"alternatives": [
{
"text": "Single-vendor suites that lock in a model or stack (their framing)",
"prov": "published",
"source": "https://www.twilio.com/en-us/why-twilio"
}
]
},
"messaging": {
"taglines": [
{
"text": "Build for the AI era. Build with Twilio.",
"where": "Why Twilio page hero",
"prov": "published",
"source": "https://www.twilio.com/en-us/why-twilio"
},
{
"text": "Don't wait for change. Build it.",
"where": "Values page",
"prov": "published",
"source": "https://www.twilio.com/en-us/company/values"
},
{
"text": "Reaching a business shouldn't be a nightmare",
"where": "homepage hero, Halloween 2026 campaign",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
}
],
"attributes": [
"builders",
"context",
"trust",
"flexibility"
],
"boilerplate": {
"text": "Twilio is a customer engagement platform that combines communication channels, contextual data and AI orchestration so businesses can build conversations with humans and AI agents (paraphrase of the company page).",
"prov": "published",
"source": "https://www.twilio.com/en-us/company",
"paraphrase": true
},
"pillars": [
{
"name": "Neutral by design",
"claim": "Work across models and tech stacks; no single-vendor lock-in.",
"proof": [
"p-byo-llm"
],
"prov": "published",
"source": "https://www.twilio.com/en-us/why-twilio"
},
{
"name": "Trusted at scale",
"claim": "Scale, security and compliance for global interactions.",
"proof": [
"p-countries",
"p-messages"
],
"prov": "published",
"source": "https://www.twilio.com/en-us/why-twilio"
},
{
"name": "Endlessly extensible",
"claim": "Simple APIs and building blocks developers adapt.",
"proof": [
"p-sdks"
],
"prov": "published",
"source": "https://www.twilio.com/en-us/why-twilio"
},
{
"name": "Recognized leader",
"claim": "Analyst recognition for CPaaS and customer engagement.",
"proof": [
"p-gartner",
"p-idc"
],
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
}
],
"proof_points": [
{
"id": "p-countries",
"kind": "stat",
"text": "180+ countries and territories; 400K+ customers",
"prov": "published",
"source": "https://www.twilio.com/en-us/company"
},
{
"id": "p-messages",
"kind": "stat",
"text": "262B+ messages sent/received; 38B+ voice calls; 2.4T+ emails sent",
"prov": "published",
"source": "https://www.twilio.com/en-us/why-twilio"
},
{
"id": "p-byo-llm",
"kind": "fact",
"text": "Bring your own LLM; integrate with existing tools",
"prov": "published",
"source": "https://www.twilio.com/en-us/why-twilio"
},
{
"id": "p-sdks",
"kind": "fact",
"text": "Official server-side SDKs for Python, C#, PHP, Ruby, Java, Node.js plus curl",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
{
"id": "p-gartner",
"kind": "award",
"text": "4x Leader in the Gartner Magic Quadrant for CPaaS (2026)",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
{
"id": "p-idc",
"kind": "award",
"text": "5x leader in the IDC MarketScape: Worldwide CPaaS",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
}
],
"claim_boundaries": [
{
"text": "Customer stats are each customer's own (Smava 150% higher click rates and so on), shown with the customer's logo, never as Twilio averages",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
{
"text": "Analyst claims carry a numbered footnote to a Sources accordion",
"prov": "observed",
"source": "https://www.twilio.com/en-us (2026-10-31)"
},
{
"text": "Paste: never claim the product does something it can't",
"prov": "published",
"source": "https://paste-dsys.com/foundations/content/voice-and-tone/"
}
]
}
}
}
}