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

SendGrid runs Whitney SSm (inherited from the Twilio parent system) across every display, heading, body, button, and nav surface, with Twilio Sans Mono as the secondary voice for code blocks. Display headlines sit at 40-48px in weight 700 with tight -0.8 to -1.44px letter-spacing, body at 16px in weight 400, and labels at 14px in weights 400-600. There is no SendGrid-specific typeface remaining on the page — the pre-merger Roboto / Source Sans-style stack was replaced wholesale when the page moved to twilio.com. The closest open-source substitute for Whitney SSm is Inter at the same weights; reduce line-height by 8-10% to match Whitney's tighter cap height at the 48px hero size.

Why did SendGrid move to a navy canvas after years on white?

The canvas at #000d25 is inherited verbatim from parent Twilio's 2023 brand refresh. Pre-acquisition SendGrid ran a standard developer-API white surface with blue chrome (the conventional category default Mailgun and Postmark still hold). When the SendGrid landing migrated to twilio.com/sendgrid in 2024, the page picked up the Twilio navy floor instead of remaining a chromatic outlier. The navy serves the dual brand voltages much better than white — both the SendGrid red plaques and the cobalt CTA register at stronger saturation on the dark surface, and the migration cost was effectively zero because Twilio's component library was already built for the dark canvas. The brand statement is now subsidiary-to-platform rather than standalone-API.

What is the red plaque pattern in the SendGrid resource grid?

The 'Resources to learn, build, or troubleshoot' band below the fold uses six SendGrid-red circular plaques (50% border-radius, 48px diameter, white icon glyph inside, red background fill at #ef223a) as the visual anchor for each resource category — Documentation, Help Center, Partners, Resource Center, API, Status. The pattern is the page's single recurring identity moment: it is the only consistent SendGrid-coded visual on a surface that otherwise inherits everything else from Twilio. The plaques sit on the navy canvas without a card border, depending entirely on the red fill against the dark surface for separation. There are no analogous cobalt-blue plaques anywhere on the page; the plaque shape is reserved for the red identity voltage.

Can I use this DESIGN.md to build my own email-API 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 SendGrid's specific moves: navy canvas inherited from a parent system, red as identity plaque against the dark surface, cobalt as the single action pill CTA, and Whitney SSm at weight 700 for the display ladder. The tokens resolve cleanly without invention. One caveat: this surface is genuinely a sub-brand landing inside a larger platform, not a standalone product site. If you want to build an independent email-API brand, the pre-merger SendGrid pattern (white canvas, blue chrome) is closer to category convention. Use this file if your product is one tool inside a larger suite — the design language conveys 'we belong to something bigger' rather than 'we are an independent API'.

SendGrid Design System

SendGrid's post-merger marketing system as a DESIGN.md file: deep navy canvas inherited from Twilio, SendGrid red as identity plaques, cobalt action voltage, Whitney SSm display.

About SendGrid DESIGN.md

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

Communication & Messaging
Marketing & CRM

SendGrid's marketing page does something visible only if you remember what SendGrid looked like before 2024: it lives on Twilio's deep navy floor at #000d25 with Whitney SSm running every typographic surface, fully absorbed into the parent design system. The hero headline reads "SendGrid loves Twilio. We're finally moving in together on Twilio.com!" against the same dark canvas Twilio's product platform uses, and the cobalt blue pill CTA underneath ("Get started for free") is the exact same color and shape as the Twilio primary button. The only visible SendGrid-coded moment is the red — six circular red plaques marking the resource quadrant (Documentation, Help Center, Partners, Resource Center, API, Status), a small red heart emoji in the headline, and an outline red border on the secondary chip set.

The voltage discipline mirrors the parent brand: cobalt for action, red for identity, never the inverse. Before the acquisition SendGrid ran a white canvas with blue chrome and the red was reserved for the wordmark only; the new surface flips both moves at once. The navy floor amplifies the saturated red — the red plaques pop harder against #000d25 than they ever did against white — and the cobalt CTA inherits its job directly from Twilio's system rather than coexisting with a SendGrid-specific blue. The "blue email API" identity is gone; what remains is "Twilio's email product" rendered in Twilio's system with a single red color reserved for SendGrid identity work.

The DESIGN.md file captures the post-merger surface as a machine-readable spec. Inside: 11 color tokens drawn from the navy canvas, the dual voltage, and the SendGrid red plaque set; 11 typography tokens running Whitney SSm at the 700-weight display ladder; a sparser radius scale than parent Twilio (5 values, dominated by 4px and the 50px pill); and 15 component definitions covering the cobalt pill CTA, the red identity plaque, the navy section card, and the resource-quadrant grid. Feed this file to Claude or Cursor and it will reproduce the specific moves: navy canvas, red-as-identity-plaque, cobalt-as-action, and Whitney SSm 700 across the display tier. Use this spec for an email product that wants to read as part of a larger platform rather than as a standalone API brand.

What makes it distinct

Navy floor inheritedthe SendGrid surface lives on the same #000d25 canvas as parent Twilio, abandoning the white email-API convention SendGrid held pre-acquisition
Red as identity plaqueSendGrid red #ef223a fills six circular icon plaques marking the Documentation / Help / Partners / Resource Center / API / Status quadrant, never bleeds into CTA fills
Cobalt as actionTwilio cobalt #1866ee carries the single 'Get started for free' primary pill and the 'Log in' outline button; the action voltage is inherited verbatim from the parent system
Sky accent #3acefathe lone SendGrid teal moment appears as a chart annotation and as the rendered color of the integrated 'Code (free trial)' label, a vestige of pre-merger sky
Single-column editorial layoutthe page reads top-down without the dense product-tile grids that populate twilio.com proper, signaling 'subsidiary product' rather than 'platform'

Live at sendgrid.com

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

sendgrid.com

Explore SendGrid

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.