{
  "id": "gmail",
  "version": "1.0.0",
  "name": "Gmail",
  "description": "Gmail is Google's email service — launched 2004, refreshed in 2020 with the multicolor \"M\" envelope mark that replaced the long-standing single-red envelope. Gmail is a product-brand under the Google parent (see brands/google/1.0.0); it inherits Google's typography (Google Sans for display, Roboto for body), the corporate four-color identity, and the approachable, information-clear voice. The visual fingerprint that distinguishes Gmail specifically is the five-color envelope mark — Blue, Green, Yellow, Red, and a deeper Crimson for the inner fold — and the Compose-button blue (#4285F4) as the primary action affordance across the product surface.\n",
  "provenance": {
    "source": "https://about.google/brand-resource-center/",
    "license": "Proprietary — All Rights Reserved",
    "attribution": "Gmail, the Gmail envelope mark, and Google Sans are trademarks of Google LLC. Brand colors and identity guidance documented here are derived from the Google Brand Resource Center (about.google/brand-resource-center/), the public 2020 Gmail icon SVG hosted on Wikimedia Commons, and the live Gmail product surface at mail.google.com.\n",
    "importedDate": "2026-05-18",
    "notes": "Gmail inherits typography and brand voice from the Google parent (see brands/google/1.0.0). Identity role uses the Gmail envelope mark colors specifically. This atom is brand-atoms' read of public Gmail brand surfaces; it is not an official Google brand document. Gmail's logo and envelope mark are among the most-protected trademarks on the internet; no asset files are bundled here. The proprietary Google Sans / Product Sans typefaces are referenced via the google-sans@1 atom and Inter@1 is the open-source rendering substitute when Google Sans is unavailable.\n"
  },
  "tags": [
    "gmail",
    "google",
    "email",
    "product-brand",
    "productivity",
    "consumer"
  ],
  "palette": {
    "ref": "gmail@1.0.0",
    "swatches": [
      {
        "id": "gmail-red",
        "name": "Gmail Red",
        "value": "#EA4335",
        "description": "Right downstroke of the Gmail \"M\" envelope. Google Red / Material Red 500 — the canonical Google four-color red.\n",
        "aliases": []
      },
      {
        "id": "gmail-crimson",
        "name": "Gmail Crimson",
        "value": "#C5221F",
        "description": "Deeper red used for the envelope interior fold in the 2020 Gmail icon. Provides depth between the outer Red and the inner envelope face.\n",
        "aliases": []
      },
      {
        "id": "gmail-yellow",
        "name": "Gmail Yellow",
        "value": "#FBBC04",
        "description": "Right-of-center valley of the \"M\". Google Yellow / Material Yellow 600 — used for highlight and starred states inside the Gmail UI.\n",
        "aliases": []
      },
      {
        "id": "gmail-green",
        "name": "Gmail Green",
        "value": "#34A853",
        "description": "Left-of-center valley of the \"M\". Google Green / Material Green 500 — used as the canonical success / send-confirmed hue in Gmail product chrome.\n",
        "aliases": []
      },
      {
        "id": "gmail-blue",
        "name": "Gmail Blue",
        "value": "#4285F4",
        "description": "Left downstroke of the \"M\". Google Blue / Material Blue 500 — Gmail's primary action color (Compose button, link affordance).\n",
        "aliases": []
      },
      {
        "id": "gmail-grey-900",
        "name": "Gmail Grey 900",
        "value": "#202124",
        "description": "Primary text on light surfaces; near-black drawn from Material Grey 900 to match the Google parent.\n",
        "aliases": []
      },
      {
        "id": "gmail-grey-700",
        "name": "Gmail Grey 700",
        "value": "#5F6368",
        "description": "Secondary text and inactive icons (Material Grey 700).",
        "aliases": []
      },
      {
        "id": "gmail-grey-200",
        "name": "Gmail Grey 200",
        "value": "#E8EAED",
        "description": "Divider and subtle surface tint (Material Grey 200).",
        "aliases": []
      },
      {
        "id": "gmail-grey-100",
        "name": "Gmail Grey 100",
        "value": "#F1F3F4",
        "description": "Page-level background — Gmail's product chrome uses this warm light-grey as the inbox canvas.\n",
        "aliases": []
      },
      {
        "id": "gmail-white",
        "name": "Gmail White",
        "value": "#FFFFFF",
        "description": "Base background and reversed surface fill.",
        "aliases": []
      }
    ],
    "modes": {
      "light": {
        "roles": {
          "background": "gmail-white",
          "surface": "gmail-grey-100",
          "surface-elevated": "gmail-white",
          "text-primary": "gmail-grey-900",
          "text-secondary": "gmail-grey-700",
          "primary": "gmail-blue",
          "primary-hover": "gmail-blue",
          "accent": "gmail-red",
          "accent-hover": "gmail-crimson",
          "warning": "gmail-yellow",
          "warning-hover": "gmail-yellow",
          "error": "gmail-red",
          "success": "gmail-green",
          "border": "gmail-grey-200"
        }
      },
      "dark": {
        "roles": {
          "background": "gmail-grey-900",
          "surface": "gmail-grey-700",
          "surface-elevated": "gmail-grey-700",
          "text-primary": "gmail-white",
          "text-secondary": "gmail-grey-200",
          "primary": "gmail-blue",
          "primary-hover": "gmail-blue",
          "accent": "gmail-red",
          "accent-hover": "gmail-crimson",
          "warning": "gmail-yellow",
          "warning-hover": "gmail-yellow",
          "error": "gmail-red",
          "success": "gmail-green",
          "border": "gmail-grey-700"
        }
      }
    }
  },
  "fonts": [
    {
      "role": "heading",
      "ref": "google-sans@1.0.0",
      "family": "Google Sans",
      "classification": "sans-serif",
      "source": {
        "kind": "external",
        "family": "Google Sans",
        "notes": "Proprietary font; no public Google Fonts URL. Cross-platform consumers must fall back to Roboto or an open geometric sans via the fallbackStack below.\n"
      },
      "fallbackStack": [
        "Roboto",
        "Inter",
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "availableStyles": [
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "normal"
        }
      ]
    },
    {
      "role": "body",
      "ref": "roboto@1.0.0",
      "family": "Roboto",
      "classification": "sans-serif",
      "source": {
        "kind": "google-fonts",
        "family": "Roboto",
        "url": "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
      },
      "fallbackStack": [
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Helvetica Neue",
        "Arial",
        "sans-serif"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 900,
          "style": "normal"
        },
        {
          "weight": 900,
          "style": "italic"
        }
      ]
    },
    {
      "role": "mono",
      "ref": "jetbrainsmono-nerdfont@1.0.0",
      "family": "JetBrainsMono Nerd Font",
      "classification": "monospace",
      "source": {
        "kind": "external",
        "family": "JetBrainsMono Nerd Font",
        "notes": "Nerd-Font-patched build of JetBrains Mono. Not available via Google Fonts. Download woff2/ttf files from the Nerd Fonts GitHub release and self-host, or install system-wide for terminal/IDE use.\n"
      },
      "fallbackStack": [
        "JetBrains Mono",
        "Fira Code",
        "Menlo",
        "Monaco",
        "Consolas",
        "Liberation Mono",
        "monospace"
      ],
      "availableStyles": [
        {
          "weight": 100,
          "style": "normal"
        },
        {
          "weight": 100,
          "style": "italic"
        },
        {
          "weight": 200,
          "style": "normal"
        },
        {
          "weight": 200,
          "style": "italic"
        },
        {
          "weight": 300,
          "style": "normal"
        },
        {
          "weight": 300,
          "style": "italic"
        },
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 400,
          "style": "italic"
        },
        {
          "weight": 500,
          "style": "normal"
        },
        {
          "weight": 500,
          "style": "italic"
        },
        {
          "weight": 600,
          "style": "normal"
        },
        {
          "weight": 600,
          "style": "italic"
        },
        {
          "weight": 700,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "italic"
        },
        {
          "weight": 800,
          "style": "normal"
        },
        {
          "weight": 800,
          "style": "italic"
        }
      ]
    }
  ],
  "roles": {
    "colors": {
      "identity": "gmail-red",
      "on-identity": "gmail-white",
      "primary": "gmail-blue",
      "primary-hover": "gmail-blue",
      "accent": "gmail-red",
      "accent-hover": "gmail-crimson",
      "mark-outer": "gmail-red",
      "mark-inner": "gmail-crimson",
      "mark-blue": "gmail-blue",
      "mark-green": "gmail-green",
      "mark-yellow": "gmail-yellow",
      "background": "gmail-white",
      "surface": "gmail-grey-100",
      "text-primary": "gmail-grey-900",
      "text-secondary": "gmail-grey-700",
      "error": "gmail-red",
      "success": "gmail-green",
      "warning": "gmail-yellow"
    },
    "typography": {
      "display": "heading",
      "prose": "body",
      "code": "mono"
    }
  },
  "assets": [],
  "rules": [
    {
      "type": "colorChoice",
      "target": "logo.envelope-mark",
      "severity": "error",
      "rationale": "The 2020 Gmail envelope mark uses exactly five colors — Blue, Green, Yellow, Red, and Crimson Dark — declared in the public Gmail icon SVG. Monochromatic Gmail marks are reserved for special contexts (favicons at extreme small sizes) that Google's brand guidance calls out explicitly.\n",
      "allowed": [
        "gmail-red",
        "gmail-crimson",
        "gmail-yellow",
        "gmail-green",
        "gmail-blue"
      ],
      "forbidden": [
        "gmail-grey-900",
        "gmail-grey-700"
      ]
    },
    {
      "type": "forbiddenTreatment",
      "target": "logo",
      "severity": "error",
      "rationale": "Gmail's 2020 refresh replaced the pre-2020 solid-red envelope. Reverting to the legacy mark, recoloring the strokes, or altering proportions all conflict with current Google brand guidance. The mark requires generous clearspace and an unbusy background.\n",
      "treatments": [
        "stretched",
        "rotated",
        "recolored",
        "drop-shadow",
        "on-busy-photo",
        "reverted-to-old-red-envelope",
        "reordered-colors"
      ]
    },
    {
      "type": "contrastRatio",
      "target": "text-primary",
      "severity": "error",
      "rationale": "WCAG 2.1 Level AA contrast requirement for body text. Gmail Grey 900 (#202124) on Gmail White clears AA at ~16:1, matching the Google parent's accessibility floor for Material surfaces.\n",
      "against": "background",
      "minRatio": 4.5,
      "standard": "WCAG-AA"
    },
    {
      "type": "contrastRatio",
      "target": "roles.colors.primary",
      "severity": "error",
      "rationale": "Gmail Blue (#4285F4) on Gmail White must remain perceptible as the Compose-button and primary-link affordance. Below 3:1 the \"clickable\" signal collapses on the inbox canvas.\n",
      "against": "background",
      "minRatio": 3,
      "standard": "WCAG-AA-large"
    },
    {
      "type": "colorChoice",
      "target": "roles.colors.error",
      "severity": "error",
      "rationale": "Gmail uses Google Red (#EA4335) as the canonical error / destructive color across the product UI (delete-thread, send-failed). Other reds dilute the signal and break parity with the Google parent.\n",
      "allowed": [
        "gmail-red"
      ]
    },
    {
      "type": "colorChoice",
      "target": "roles.colors.success",
      "severity": "recommendation",
      "rationale": "Gmail uses Google Green (#34A853) as the canonical success color — \"Message sent,\" \"Recipient added,\" conversation-marked labels. Other greens are acceptable for illustration but should not appear in confirmation chrome.\n",
      "allowed": [
        "gmail-green"
      ]
    },
    {
      "type": "fontPairing",
      "target": "typography.heading",
      "severity": "recommendation",
      "rationale": "Gmail's marketing surfaces pair Google Sans (display / titles) with Roboto (body / UI), inheriting the Google parent's typographic pairing. A 1.5× minimum size ratio preserves the geometric-vs-neogrotesque hierarchy when the two families appear together.\n",
      "requires": "body",
      "minSizeRatio": 1.5
    },
    {
      "type": "compositionConstraint",
      "target": "roles.colors.primary",
      "severity": "recommendation",
      "rationale": "The five envelope hues belong together as the brand mark. Pairing Gmail Blue with a single sibling hue (without the full five-color set) reads as a brand-identity conflict rather than a coordinated palette — same pattern as the Google parent.\n",
      "pairsWith": [
        "gmail-white",
        "gmail-grey-100",
        "gmail-grey-900"
      ],
      "doesNotPairWith": [
        "gmail-red",
        "gmail-green",
        "gmail-yellow"
      ]
    }
  ]
}