--- version: alpha name: "SendGrid" website: "https://sendgrid.com" description: >- An email-API brand that absorbed into Twilio's design system in 2024 — the SendGrid landing page now lives at twilio.com/sendgrid on the same deep navy floor (#000d25), with SendGrid red #ef223a doing identity work that the Twilio cobalt does not. Round red plaques mark resource categories (Documentation, Help Center, Partners, API), an inline red heart emoji punctuates the headline "SendGrid loves Twilio", and the wordmark stays in pure white set in Whitney SSm. The voltage discipline mirrors the parent brand: cobalt blue #1866ee fills the single primary CTA pill, red is reserved for identity plaques and emphasis icons, never as a button background. Whitney SSm at 700 carries display, with 50px pill CTAs and a sparser 5-radius scale than the wider Twilio surface. seo: title: "SendGrid Design System for React — navy canvas, Whitney SSm, 15 components" metaDescription: "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. Tokens for React, Next.js, AI tools." highlights: - "Navy floor inherited — the SendGrid surface lives on the same #000d25 canvas as parent Twilio, abandoning the white email-API convention SendGrid held pre-acquisition" - "Red as identity plaque — SendGrid red #ef223a fills six circular icon plaques marking the Documentation / Help / Partners / Resource Center / API / Status quadrant, never bleeds into CTA fills" - "Cobalt as action — Twilio 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 #3acefa — the 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 layout — the page reads top-down without the dense product-tile grids that populate twilio.com proper, signaling 'subsidiary product' rather than 'platform'" tags: - "Communication & Messaging" - "Marketing & CRM" lastUpdated: "2026-05-19" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://sendgrid.com" title: "SendGrid — official site" description: "SendGrid's public marketing site — the source of truth for the live tokens captured in this file." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." questions: - id: "primary-color" title: "What is SendGrid's primary brand color after the Twilio merger?" answer: "SendGrid runs the same dual-voltage system as parent Twilio. Cobalt blue #1866ee is the action voltage — it fills the single 'Get started for free' primary pill CTA at the top of the SendGrid landing page. SendGrid red #ef223a is the identity voltage — it fills six circular plaques marking the resource-category quadrant (Documentation, Help Center, Partners, Resource Center, API, Status), a small red heart emoji in the hero headline, and the secondary outline-button border. The red appears 6 times as background fill in the captured surface — every instance is a circular icon plaque, never a button. The pre-acquisition SendGrid blue is gone entirely; the brand now reads as 'Twilio's email product wearing red identity tags' rather than as an independent API brand." - id: "typography" title: "What typeface does SendGrid use, and what should I use as a substitute?" answer: "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." - id: "navy-canvas" title: "Why did SendGrid move to a navy canvas after years on white?" answer: "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." - id: "red-plaque-pattern" title: "What is the red plaque pattern in the SendGrid resource grid?" answer: "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." - id: "use-in-project" title: "Can I use this DESIGN.md to build my own email-API marketing site?" answer: "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'." mockups: - "marketing-hero" - "dashboard-card-grid" colors: primary: "#1866ee" identity-red: "#ef223a" accent-sky: "#3acefa" canvas: "#000d25" surface-1: "#191f36" surface-2: "#081f47" ink: "#ffffff" ink-muted: "#cacdd8" hairline: "#cacdd8" shadow: "#000000" faint: "#f3f4f7" typography: display-xl: fontFamily: "\"Whitney SSm\", helvetica, arial, sans-serif" fontSize: 48px fontWeight: 700 lineHeight: 60px letterSpacing: "-1.44px" display-md: fontFamily: "\"Whitney SSm\", helvetica, arial, sans-serif" fontSize: 40px fontWeight: 700 lineHeight: 52px letterSpacing: "-0.8px" heading-sm: fontFamily: "\"Whitney SSm\", helvetica, arial, sans-serif" fontSize: 20px fontWeight: 600 lineHeight: 32px letterSpacing: 0 heading-h5: fontFamily: "\"Whitney SSm\", helvetica, arial, sans-serif" fontSize: 18px fontWeight: 700 lineHeight: 28px letterSpacing: 0 body-md: fontFamily: "\"Whitney SSm\", helvetica, arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 28px letterSpacing: 0 body-default: fontFamily: "\"Whitney SSm\", helvetica, arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0 body-sm: fontFamily: "\"Whitney SSm\", helvetica, arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 20px letterSpacing: 0 label-md: fontFamily: "\"Whitney SSm\", helvetica, arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 20px letterSpacing: 0 link-md: fontFamily: "\"Whitney SSm\", helvetica, arial, sans-serif" fontSize: 20px fontWeight: 600 lineHeight: 32px letterSpacing: 0 button-md: fontFamily: "\"Whitney SSm\", helvetica, arial, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 24px letterSpacing: 0 caption: fontFamily: "\"Whitney SSm\", helvetica, arial, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 21px letterSpacing: 0 rounded: none: "0px" sm: "4px" md: "10px" lg: "20px" pill: "50px" full: "9999px" spacing: xs: "4px" sm: "6px" base: "8px" md: "12px" lg: "16px" xl: "24px" 2xl: "32px" 3xl: "48px" components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: "6px 24px" height: "36px" button-secondary: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: "6px 24px" height: "36px" borderColor: "{colors.hairline}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-default}" rounded: "{rounded.none}" padding: "8px 24px" height: "64px" nav-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-default}" padding: "8px 12px" hero-heading: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.display-xl}" section-heading: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.display-md}" body-paragraph: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-md}" identity-plaque: backgroundColor: "{colors.identity-red}" textColor: "{colors.ink}" rounded: "{rounded.full}" padding: "0" height: "48px" card-dark: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "32px" card-deep: backgroundColor: "{colors.surface-2}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: "24px" resource-tile: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.heading-h5}" padding: "16px" link-text: backgroundColor: transparent textColor: "{colors.accent-sky}" typography: "{typography.link-md}" text-input: backgroundColor: "{colors.surface-1}" textColor: "{colors.ink}" typography: "{typography.body-default}" rounded: "{rounded.sm}" padding: "8px 12px" height: "40px" borderColor: "{colors.hairline}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-muted}" typography: "{typography.body-sm}" padding: "48px 24px" divider-rule: backgroundColor: "{colors.hairline}" height: "1px" padding: "0" --- ## Overview SendGrid's marketing page is the most visible example in the directory of a brand that vanished into its parent's design system. **Inherited canvas, retained identity.** The page lives at twilio.com/sendgrid on the same deep navy surface (`{colors.canvas}` — #000d25) as the rest of the Twilio platform, runs Whitney SSm at the same 700-weight display ladder, and uses the same cobalt pill CTA (`{colors.primary}` — #1866ee) for "Get started for free." The only visible SendGrid-coded moment is the red — six circular red plaques (`{component.identity-plaque}`) marking the resource quadrant, a small red heart in the hero headline, and a red border on the secondary chip set. Where Stripe holds its sub-brands (Stripe Atlas, Stripe Capital) on dedicated micro-sites with their own colorway, and where Twilio's Segment subsidiary still runs a fully separate brand surface, SendGrid took the full Twilio system and kept only its red. The voltage discipline mirrors the parent. Cobalt fills the single primary pill — same color, same 50px pill, same 36px height as the Twilio primary button. Red fills the six identity plaques but never bleeds into CTA territory. The pre-acquisition SendGrid color story (white canvas, sky blue accents, red wordmark) is gone entirely; what remains is the wordmark color reapplied as a circular plaque language. The brand statement reads as subsidiary-to-platform rather than standalone-API. Typography runs Whitney SSm exclusively, with the display tier at 700 weight. The hero h1 sits at 48px / 700 (one step down from Twilio's 56px hero — a deliberate de-escalation that signals "product page, not platform page"), and the section h2 at 40px / 700 with -0.8px tracking. Body and labels drop to 400-600. There is no SendGrid-specific typeface remaining on the page. **Key Characteristics:** - Deep navy canvas (`{colors.canvas}` — #000d25) inherited verbatim from parent Twilio — 572 captured occurrences, the dominant single color. - Dual voltage with separated roles inherited from Twilio: cobalt for action (CTA pill, link color), SendGrid red `{colors.identity-red}` for identity (circular resource plaques, hero heart emoji, outline chip border). - Whitney SSm at 700 across the display ladder, with the hero one step smaller than parent Twilio (48px vs 56px) to signal product-not-platform. - 50px pill radius for the single primary CTA, with a sparser radius scale than parent Twilio (5 values: none / 4px / 10px / 20px / 50px / full). - Red identity plaques are the page's single recurring visual signature — 6 circular fills at 48px diameter, one per resource category, full-circle radius. - No SendGrid-specific typeface — the entire system was migrated to Twilio's Whitney SSm during the 2024 page move. - Single-column editorial layout — the page reads top-down without the dense product-tile grids that populate twilio.com proper. - Sky accent (`{colors.accent-sky}` — #3acefa) appears only as a chart annotation and as the "Explore SendGrid live in Twilio" link color — the lone vestige of pre-merger blue. ## Colors ### Brand - **Cobalt Action** (`{colors.primary}` — #1866ee): frequency 17. Used as background (2), text (6), border (6), shadow (3). The action voltage — fills the single "Get started for free" primary pill at the top of the page. Inherited verbatim from parent Twilio (wired as `--color-blue-500` and `--color-link`). The only CTA color on the page. - **SendGrid Red Identity** (`{colors.identity-red}` — #ef223a): frequency 6, all as background. The identity voltage — fills the six circular resource plaques (Documentation, Help Center, Partners, Resource Center, API, Status), the secondary chip border, and the inline heart emoji in the hero headline. Never appears as a button background or as text on this surface. Wired as `--color-red-light` and `--color-paper-accent`. - **Accent Sky** (`{colors.accent-sky}` — #3acefa): frequency 12 — 6 text, 6 border. The lone pre-merger SendGrid blue moment — used as the "Explore SendGrid live in Twilio" link color and as the chart annotation tone in the "200 billion emails delivered" section. Distinct from the cobalt action voltage; reads as a softer informational accent. ### Surface - **Canvas** (`{colors.canvas}` — #000d25): frequency 572. The page floor — inherited from parent Twilio, runs the entire SendGrid landing surface. The dominant color across the captured page. - **Surface-1** (`{colors.surface-1}` — #191f36): frequency 4 — 3 background, 1 shadow. The single elevated dark tone — used for the "Email at scale, proven deliverability" feature card backgrounds and the dark dropdown surface. Wired as `--color-gray-850` and `--color-blue-850`. - **Surface-2** (`{colors.surface-2}` — #081f47): frequency 2, both as background. The secondary elevated tone — used for nested chips and inline status surfaces. Slightly more saturated than `{colors.surface-1}` for visual ladder. ### Text - **Ink** (`{colors.ink}` — #ffffff): frequency 199 — 98 text, 98 border, 1 background, 2 shadow. Pure white is the dominant text color across every tier on the navy canvas. - **Ink Muted** (`{colors.ink-muted}` — #cacdd8): frequency 224 — 112 text, 112 border. The secondary text and hairline tone shared with the parent Twilio system. Slightly cool to harmonize with the navy. ### Hairline - **Hairline** (`{colors.hairline}` — #cacdd8): the same color as `{colors.ink-muted}`, doing double duty as text-secondary and border. The system has no dedicated mid-gray hairline; the muted text color carries border work on the dark canvas. ### Shadow & Faint - **Shadow** (`{colors.shadow}` — #000000): frequency 8 — 4 text, 4 border. Pure black used in CSS shadow declarations and as a deep contrast option in the rare light-card moment. - **Faint** (`{colors.faint}` — #f3f4f7): frequency 1, used as background on a single light-tone surface (the top-of-page language-selector strip). ## Typography ### Font Families The system runs **Whitney SSm** as the single typographic voice — no second display sans, no serif tier, no monospace beyond the inherited Twilio Sans Mono that does not appear in the captured SendGrid crop. Fallbacks walk `helvetica, arial, sans-serif`. The Whitney SSm inheritance is the single biggest signal that SendGrid is now a Twilio product rather than a standalone brand. The pre-merger SendGrid surface ran a Roboto / Source Sans-style stack with the wordmark as the only proprietary glyph; the 2024 migration replaced the entire typographic system in one move. ### Hierarchy | Token | Size | Weight | Line Height | Tracking | Use | |---|---|---|---|---|---| | `{typography.display-xl}` | 48px | 700 | 60px | -1.44px | Hero h1 ("SendGrid loves Twilio…") | | `{typography.display-md}` | 40px | 700 | 52px | -0.8px | Section h2 ("Same email solutions, new home base.") | | `{typography.heading-sm}` | 20px | 600 | 32px | 0 | Sub-section titles, footer category headings | | `{typography.heading-h5}` | 18px | 700 | 28px | 0 | Feature-block h5 ("Twilio SendGrid Email API and SMTP service") | | `{typography.body-md}` | 16px | 400 | 28px | 0 | Hero sub-paragraph, lead paragraphs (note 28px line-height for breathing) | | `{typography.body-default}` | 16px | 400 | 24px | 0 | Default running text in feature cards | | `{typography.body-sm}` | 14px | 400 | 20px | 0 | Caption and metadata rows | | `{typography.label-md}` | 14px | 500 | 20px | 0 | Small-caps-equivalent label treatment, chip text | | `{typography.link-md}` | 20px | 600 | 32px | 0 | "Explore SendGrid live in Twilio" inline link in `{colors.accent-sky}` | | `{typography.button-md}` | 16px | 500 | 24px | 0 | Primary and secondary pill labels | | `{typography.caption}` | 12px | 500 | 21px | 0 | Footnote and badge text | ### Principles Display weight stays at 700, inherited verbatim from parent Twilio. The hero at 48px / 700 is one step smaller than the Twilio platform hero at 56px / 700 — the deliberate de-escalation signals "product subpage" rather than "platform homepage." The tracking compression follows the parent ladder (-1.44px at 48px, -0.8px at 40px) to keep optical weight even across sizes. The single typographic departure is the link tier — `{typography.link-md}` at 20px / 600 in the SendGrid sky `{colors.accent-sky}`. It is the only place on the page where size, weight, and color all signal "this is a link, please click." The rest of the page treats links as inline span color flips at body weight. ### Note on Font Substitutes Whitney SSm is a Hoefler & Co. licensed family inherited from Twilio. The closest open-source substitute is **Inter** at the same weights — reduce line-height by 8-10% to match Whitney's tighter cap height at the 48px hero size. **Source Sans 3** is the closer-feeling alternative if you want a warmer humanist read. ## Layout ### Spacing System - **Base unit:** 8px — the dominant gap value, appearing 72 times in the captured page. - **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 6px · `{spacing.base}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.2xl}` 32px · `{spacing.3xl}` 48px. - **Section padding (vertical):** ~80-96px between major editorial bands on the navy canvas; the rhythm is slightly tighter than the parent Twilio surface because the SendGrid page reads as a single-column subsidiary product page rather than a platform pitch. - **Card internal padding:** `{spacing.2xl}` (32px) on `{component.card-dark}` and `{spacing.xl}` (24px) on `{component.card-deep}`. - **Top-nav padding:** `{spacing.base}` (8px) vertical, `{spacing.xl}` (24px) horizontal — the SendGrid-specific top nav band is 64px tall, shorter than the Twilio parent nav. ### Grid & Container - **Max content width:** ~960px on hero and section displays, ~1280px on the resource quadrant and the customer-photo pair below the fold. - **Hero block:** full-bleed navy canvas, headline anchored ~653px wide with the SendGrid mascot illustration to the right at ~410px. - **Below-fold sections:** single-column editorial rhythm rather than the multi-column tile grids on twilio.com proper. The "Email at scale, proven deliverability" band uses a 2-up split (Twilio SendGrid Email API on the left, Email campaigns for marketers on the right). - **Resource quadrant:** 6-tile grid of `{component.identity-plaque}` + heading-h5 + body paragraph + link, with the red plaques on the left of each tile rather than centered above. This left-anchored layout reinforces single-column reading rather than card-grid scanning. ### Rhythm The page holds a single editorial tempo — hero, single-paragraph product introduction, 2-up feature block, 3-up customer pair, 6-tile resource quadrant, footer. There are no densely-packed grids, no carousels, no animated chrome. The rhythm signals "documentation home" more than "product pitch," which is the appropriate read for a subsidiary product landing rather than a flagship homepage. ## Elevation The system uses **no shadow on the navy canvas surfaces**. The 2 captured shadow occurrences are confined to the cobalt CTA pill and the dark feature cards — both inherited shadow tokens from the parent Twilio system using `rgb(18 28 45/0.1)` and `rgb(18 28 45/0.15)`. - **Flat (no shadow):** the hero, every editorial band, the resource quadrant, the footer — 99% of surfaces sit flat on the navy canvas. - **Pill elevation:** the cobalt CTA carries a soft 2-3px shadow tinted with the canvas color. - **Tonal lift:** `{colors.surface-1}` cards sit on `{colors.canvas}` by ~30% lightness contrast alone; no shadow is drawn because tonal lift carries the depth. - **Plaque elevation:** the red identity plaques sit flat — the saturation contrast against navy carries the lift without any shadow. ## Shapes The radius scale is **binary plus a single full-circle**, sparser than the parent Twilio scale: - **Pill:** `{rounded.pill}` 50px — the single CTA `{component.button-primary}` and the secondary outline button. 5 captured occurrences. - **Full circle:** `{rounded.full}` 50% / 9999px — the six red identity plaques. 6 captured occurrences. The fully-circular treatment is reserved exclusively for the SendGrid identity moment. - **Large card:** `{rounded.lg}` 20px — for the larger feature surface tile. 1 captured occurrence. - **Mid card:** `{rounded.md}` 10px — for the secondary mid-sized card treatment. 2 occurrences. - **Small surface:** `{rounded.sm}` 4px — for inputs and small chips. 9 captured occurrences. Wired as `--radius-base`. The full-circle radius doing identity work is the move that visually separates SendGrid from parent Twilio. Twilio uses fully-rounded pills for buttons; SendGrid reserves the full circle for the red plaques — a tighter, more iconographic treatment than the parent's pill-shaped chrome. ## Components **`button-primary`** — The cobalt pill CTA. `{colors.primary}` fill, white text, `{rounded.pill}` 50px radius, 6×24px padding, 36px height. Inherited verbatim from parent Twilio — same color, same shape, same dimensions. "Get started for free" is the canonical instance. **`button-secondary`** — Transparent fill, white text, 1px `{colors.hairline}` border, same 50px pill silhouette. "Log in" is the canonical instance. **`top-nav`** — `{colors.canvas}` navy surface, 64px height (shorter than the Twilio parent nav). SendGrid wordmark flush left in white, no center nav (the page assumes you've arrived from twilio.com), login + start-for-free flush right. **`nav-link`** — Transparent, white text in `{typography.body-default}`, 8×12px padding. **`hero-heading`** — White text, `{typography.display-xl}` (48px / 700 with -1.44px tracking). One step down from the Twilio platform hero at 56px to signal "product page" rather than "platform page." **`section-heading`** — White text, `{typography.display-md}` (40px / 700). Used for "Same email solutions, new home base." and "Email at scale, proven deliverability." **`body-paragraph`** — Default white text at `{typography.body-md}` (16px / 400 with 28px line-height for breathing in the hero region). **`identity-plaque`** — The page's single distinctive visual. `{colors.identity-red}` red fill, white icon glyph inside, `{rounded.full}` full circle, 48px diameter, no border, no shadow. Six instances across the resource quadrant, each marking a separate category (Documentation, Help Center, Partners, Resource Center, API, Status). The plaque shape and color are reserved — no analogous cobalt-blue plaques exist anywhere on the page. **`card-dark`** — `{colors.surface-1}` (#191f36) fill, white text, `{rounded.lg}` 20px radius, 32px internal padding. The default elevated content card on the navy canvas — used for the 2-up "Twilio SendGrid Email API" and "Email campaigns for marketers" feature block. **`card-deep`** — `{colors.surface-2}` (#081f47) fill, white text, `{rounded.lg}` 20px radius, 24px padding. The secondary elevated card for nested content and inline status surfaces. **`resource-tile`** — Transparent fill (no card surface), `{component.identity-plaque}` on the left, white `{typography.heading-h5}` title at the top right, body paragraph beneath, and a `{component.link-text}` sky-colored "View pricing →" link at the bottom. The 6-tile grid uses these as the visual anchor of the resource quadrant. **`link-text`** — Transparent, `{colors.accent-sky}` (#3acefa) text, `{typography.link-md}` (20px / 600). The single explicit link treatment in the system — "Explore SendGrid live in Twilio" and "View pricing →" use this. **`text-input`** — `{colors.surface-1}` fill, white text, `{rounded.sm}` 4px radius, 8×12px padding, 40px height. Inherited from the parent Twilio system. **`footer`** — `{colors.canvas}` (same navy as the page floor), `{colors.ink-muted}` text at `{typography.body-sm}`, 48×24px padding. Inherited from parent Twilio — the footer just continues the canvas with only a top hairline rule separating it from the body bands. **`divider-rule`** — A single 1px `{colors.hairline}` horizontal line used to separate the editorial bands. The system uses these sparingly — only between major content sections. ## Do's and Don'ts **Do** keep the SendGrid red `{colors.identity-red}` (#ef223a) reserved for the circular identity plaques. The red is the single visual moment that distinguishes SendGrid from the parent Twilio surface; multiplying it onto buttons or card backgrounds collapses the distinction. **Do** inherit the cobalt CTA verbatim — same color, same 50px pill, same 36px height as parent Twilio. The CTA inheritance is the single move that signals "this is a Twilio product"; breaking the inheritance (a sky-blue CTA, a larger button) reads as a different product line. **Do** use the full-circle (`{rounded.full}`) radius exclusively for the red identity plaques. The pill (`{rounded.pill}` 50px) is for the CTA. The two should never converge — pills are action, circles are identity. **Do** keep the hero one step smaller than the Twilio platform (`{typography.display-xl}` at 48px, not 56px). The size de-escalation is intentional category signaling — SendGrid is the product, Twilio is the platform. **Don't** reintroduce a SendGrid-specific blue. The pre-merger SendGrid blue chrome was retired in 2024; the only blue on the new surface is the inherited cobalt for action and the sky `{colors.accent-sky}` for link emphasis. Adding a SendGrid blue would collapse the dual-voltage discipline. **Don't** render the red plaques as squares or rounded rectangles. The 48px full-circle is the entire visual signature; converting them to 20px-radius cards turns iconographic identity into generic feature-grid chrome. **Don't** revert the canvas to white. The navy floor at `{colors.canvas}` is the single most visible inheritance from parent Twilio; reverting to white reads as either a pre-merger archive page or as a SendGrid-Mailchimp competitive convergence — neither is the intended brand statement. **Don't** add a dense product-tile grid below the fold. The page is deliberately single-column with one 2-up split and one 6-tile resource quadrant; introducing a 12-tile feature grid converts it from "subsidiary product page" to "platform pitch," which is the parent twilio.com surface's job. ## Known Gaps - **Hover and focus states:** documented for the inherited Twilio `{component.button-primary}` only; the full state matrix (focus rings, active press, disabled tints, plaque hover) is not visible on the captured surfaces. - **Form input error states:** `{component.text-input}` carries the resting state inherited from parent Twilio; SendGrid-specific error styling is not exposed on the landing page. - **Light mode:** the captured marketing surface is dark-canvas-only. The pre-acquisition SendGrid surface ran light by default, but no light variant exists in the current twilio.com/sendgrid implementation. - **Motion:** the hero illustration animates subtly on load (the mascot waves) and the resource-tile plaques fade in on scroll. The spec captures end-state values only. - **Product surfaces:** this DESIGN.md captures the marketing landing only. The SendGrid app surface (`app.sendgrid.com`) and the SendGrid Marketing Campaigns surface (`mc.sendgrid.com`) still run their own pre-merger token systems and component libraries not represented here. - **Mono code blocks:** Twilio Sans Mono is inherited via `--font-family-mono` but does not appear in the captured SendGrid crop; if the page introduces code samples in future revisions, the mono tier follows the parent Twilio specification. - **Old SendGrid blue:** the pre-merger SendGrid blue chrome (a cooler mid-sky tone) is not represented anywhere in the captured surface or extracted CSS variables; the migration appears to have fully retired the color.