{
  "id": "hey",
  "version": "1.0.0",
  "name": "HEY",
  "description": "HEY is an opinionated email-and-calendar product authored by Basecamp / 37signals — the brand voice is anti-trend, utility-first, and deliberately confrontational about email conventions (\"Imbox,\" \"The Feed,\" \"Paper Trail,\" \"Screener\" as reframings of inbox conventions). The visual identity matches: pure-white canvas, near-black body type, a single bright Yellow (#FFFF00) used as a screaming highlight, and a Bootstrap-era action blue (#0088CC). Typography is the system stack — Lucida Grande, Helvetica, Arial — never a proprietary face. HEY's design is a statement against design-trend conformity.\n",
  "provenance": {
    "source": "https://hey.com/about",
    "license": "Proprietary — All Rights Reserved",
    "attribution": "HEY, the HEY wordmark, Basecamp, and 37signals are trademarks of 37signals LLC. Brand colors and identity guidance documented here are derived from hey.com and hey.com/about, captured on 2026-05-18.\n",
    "importedDate": "2026-05-18",
    "notes": "Derived from live site CSS at https://hey.com on 2026-05-18; no public brand guide located. HEY is authored by Basecamp / 37signals — the visual restraint and system-font choice are intentional brand decisions inherited from the parent company's operating philosophy. The bright Yellow (#FFFF00) is the brand's single most distinguishing visual choice — used aggressively as a highlight throughout the product. No proprietary typeface; the marketing site renders in the system stack (\"Lucida Grande\", \"Lucida Sans Unicode\", Arial, Helvetica, Verdana, sans-serif).\n"
  },
  "tags": [
    "hey",
    "basecamp",
    "thirty-seven-signals",
    "email",
    "brand",
    "yellow",
    "utility",
    "opinionated"
  ],
  "palette": {
    "ref": "hey@1.0.0",
    "swatches": [
      {
        "id": "hey-yellow",
        "name": "HEY Yellow",
        "value": "#FFFF00",
        "description": "The defining HEY accent — a pure CSS-yellow used as a highlight throughout the product (think text-marker / \"Screener\" highlight bar). Loud by design.\n",
        "aliases": []
      },
      {
        "id": "hey-blue",
        "name": "HEY Blue",
        "value": "#0088CC",
        "description": "The action blue captured from hey.com — used for links, primary buttons, and active-state affordance.\n",
        "aliases": []
      },
      {
        "id": "hey-blue-hover",
        "name": "HEY Blue Hover",
        "value": "#1A8AD5",
        "description": "Slightly brighter hover variant.",
        "aliases": []
      },
      {
        "id": "hey-blue-active",
        "name": "HEY Blue Active",
        "value": "#176BAD",
        "description": "Pressed / active blue.",
        "aliases": []
      },
      {
        "id": "hey-white",
        "name": "HEY White",
        "value": "#FFFFFF",
        "description": "Page canvas — pure white, no warm tint.",
        "aliases": []
      },
      {
        "id": "hey-near-white",
        "name": "HEY Near White",
        "value": "#FCFCFC",
        "description": "Subtle elevated surface.",
        "aliases": []
      },
      {
        "id": "hey-grey-100",
        "name": "HEY Grey 100",
        "value": "#F5F5F5",
        "description": "Hairline panel background.",
        "aliases": []
      },
      {
        "id": "hey-grey-300",
        "name": "HEY Grey 300",
        "value": "#DDDDDD",
        "description": "Border and divider on light surfaces.",
        "aliases": []
      },
      {
        "id": "hey-grey-500",
        "name": "HEY Grey 500",
        "value": "#888888",
        "description": "Tertiary text / inactive icon.",
        "aliases": []
      },
      {
        "id": "hey-grey-700",
        "name": "HEY Grey 700",
        "value": "#555555",
        "description": "Secondary text.",
        "aliases": []
      },
      {
        "id": "hey-text",
        "name": "HEY Text",
        "value": "#333333",
        "description": "Body text on white canvas.",
        "aliases": []
      },
      {
        "id": "hey-heading",
        "name": "HEY Heading",
        "value": "#222222",
        "description": "Heading and emphasis text on white.",
        "aliases": []
      },
      {
        "id": "hey-near-black",
        "name": "HEY Near Black",
        "value": "#1E1E1E",
        "description": "Deepest ink for high-contrast type and dark-mode canvas.",
        "aliases": []
      },
      {
        "id": "hey-success",
        "name": "HEY Success",
        "value": "#3C763D",
        "description": "Confirmation green — Bootstrap success-text heritage.",
        "aliases": []
      },
      {
        "id": "hey-success-bg",
        "name": "HEY Success Background",
        "value": "#DFF0D8",
        "description": "Success-state surface tint.",
        "aliases": []
      },
      {
        "id": "hey-error",
        "name": "HEY Error",
        "value": "#A94442",
        "description": "Error red — Bootstrap danger-text heritage.",
        "aliases": []
      },
      {
        "id": "hey-error-bg",
        "name": "HEY Error Background",
        "value": "#F2DEDE",
        "description": "Error-state surface tint.",
        "aliases": []
      },
      {
        "id": "hey-warning",
        "name": "HEY Warning",
        "value": "#8A6D3B",
        "description": "Warning amber.",
        "aliases": []
      },
      {
        "id": "hey-warning-bg",
        "name": "HEY Warning Background",
        "value": "#FCF8E3",
        "description": "Warning-state surface tint.",
        "aliases": []
      }
    ],
    "modes": {
      "light": {
        "roles": {
          "background": "hey-white",
          "surface": "hey-grey-100",
          "surface-elevated": "hey-near-white",
          "text-primary": "hey-text",
          "text-secondary": "hey-grey-700",
          "text-tertiary": "hey-grey-500",
          "primary": "hey-blue",
          "primary-hover": "hey-blue-hover",
          "accent": "hey-yellow",
          "accent-hover": "hey-yellow",
          "warning": "hey-warning",
          "warning-hover": "hey-warning",
          "error": "hey-error",
          "success": "hey-success",
          "border": "hey-grey-300"
        }
      },
      "dark": {
        "roles": {
          "background": "hey-near-black",
          "surface": "hey-grey-700",
          "surface-elevated": "hey-grey-500",
          "text-primary": "hey-white",
          "text-secondary": "hey-grey-300",
          "text-tertiary": "hey-grey-500",
          "primary": "hey-blue-hover",
          "primary-hover": "hey-blue",
          "accent": "hey-yellow",
          "accent-hover": "hey-yellow",
          "warning": "hey-warning",
          "warning-hover": "hey-warning",
          "error": "hey-error",
          "success": "hey-success",
          "border": "hey-grey-700"
        }
      }
    }
  },
  "fonts": [
    {
      "role": "heading",
      "ref": "helvetica-neue@1.0.0",
      "family": "Helvetica Neue",
      "classification": "sans-serif",
      "source": {
        "kind": "system",
        "stack": [
          "Helvetica Neue",
          "HelveticaNeue",
          "Helvetica",
          "-apple-system",
          "BlinkMacSystemFont",
          "Arial",
          "sans-serif"
        ]
      },
      "fallbackStack": [
        "Helvetica",
        "Arial",
        "sans-serif"
      ],
      "availableStyles": [
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "normal"
        }
      ]
    },
    {
      "role": "body",
      "ref": "helvetica-neue@1.0.0",
      "family": "Helvetica Neue",
      "classification": "sans-serif",
      "source": {
        "kind": "system",
        "stack": [
          "Helvetica Neue",
          "HelveticaNeue",
          "Helvetica",
          "-apple-system",
          "BlinkMacSystemFont",
          "Arial",
          "sans-serif"
        ]
      },
      "fallbackStack": [
        "Helvetica",
        "Arial",
        "sans-serif"
      ],
      "availableStyles": [
        {
          "weight": 400,
          "style": "normal"
        },
        {
          "weight": 700,
          "style": "normal"
        }
      ]
    },
    {
      "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": "hey-white",
      "on-identity": "hey-heading",
      "primary": "hey-blue",
      "primary-hover": "hey-blue-hover",
      "accent": "hey-yellow",
      "accent-hover": "hey-yellow",
      "mark": "hey-heading",
      "highlight": "hey-yellow",
      "success": "hey-success",
      "warning": "hey-warning",
      "error": "hey-error",
      "background": "hey-white",
      "surface": "hey-grey-100",
      "text-primary": "hey-text",
      "text-secondary": "hey-grey-700"
    },
    "typography": {
      "display": "heading",
      "prose": "body",
      "code": "mono"
    }
  },
  "assets": [],
  "rules": [
    {
      "type": "contrastRatio",
      "target": "text-primary",
      "severity": "error",
      "rationale": "HEY Text (#333333) on HEY White clears AAA at ~12.6:1. HEY's product is reading-dense by design (long email threads, paper-trail receipts); the AAA contrast target reflects the product's deliberate emphasis on extended-reading comfort.\n",
      "against": "background",
      "minRatio": 7,
      "standard": "WCAG-AAA"
    },
    {
      "type": "colorChoice",
      "target": "roles.colors.accent",
      "severity": "error",
      "rationale": "HEY Yellow (#FFFF00) is THE brand accent — the screaming highlight that defines the product's visual fingerprint. Substituting any other hue erases the brand's most distinguishing visual choice. The Yellow is used aggressively as a text-highlight / attention-redirect throughout HEY.\n",
      "allowed": [
        "hey-yellow"
      ],
      "forbidden": [
        "hey-blue",
        "hey-blue-hover",
        "hey-success",
        "hey-warning"
      ]
    },
    {
      "type": "forbiddenTreatment",
      "target": "logo",
      "severity": "error",
      "rationale": "HEY's wordmark is rendered as plain, system-font-flavored type — no gradient fills, no decorative treatments, no drop-shadows. The brand's whole point is anti-decoration; a treated HEY mark contradicts the brand's stated values.\n",
      "treatments": [
        "stretched",
        "rotated",
        "drop-shadow",
        "gradient-fill",
        "on-busy-photo",
        "decorative-typography"
      ]
    },
    {
      "type": "enumMembership",
      "target": "typography.body.fontFamily",
      "severity": "warning",
      "rationale": "HEY deliberately uses the OS system-font stack — Lucida Grande on macOS, Helvetica / Arial / Verdana as fallbacks — rather than a proprietary or web-hosted face. Introducing a custom typeface (Inter, Söhne, etc.) breaks the brand's intentional system-aesthetic stance.\n",
      "allowed": [
        "Lucida Grande",
        "Lucida Sans Unicode",
        "Helvetica Neue",
        "Helvetica",
        "Arial",
        "Verdana",
        "system-ui",
        "-apple-system",
        "BlinkMacSystemFont"
      ]
    },
    {
      "type": "contrastRatio",
      "target": "roles.colors.primary",
      "severity": "error",
      "rationale": "HEY Blue (#0088CC) on HEY White clears AA at ~5.3:1 — the product uses #0088CC for both link affordance and primary button fills; staying above AA is non-negotiable on the reading-dense product surface.\n",
      "against": "background",
      "minRatio": 4.5,
      "standard": "WCAG-AA"
    },
    {
      "type": "contextRestriction",
      "target": "roles.colors.accent",
      "severity": "error",
      "rationale": "HEY Yellow (#FFFF00) is a highlight — used as a thin text-marker stripe or a small badge. Using it as a body-text color (no contrast against white) or as a full-page background (visual assault) inverts the brand's deliberate \"loud but contained\" use of the hue.\n",
      "allowedContexts": [
        "highlight",
        "emphasis",
        "attention-redirect"
      ],
      "forbiddenContexts": [
        "body-text",
        "large-surface-fill"
      ]
    },
    {
      "type": "compositionConstraint",
      "target": "roles.colors.accent",
      "severity": "error",
      "rationale": "HEY Yellow is only legible on a dark text foreground (no contrast against white). Pairing it adjacent to HEY Blue creates a primary-color competition that destabilizes the single-accent rule.\n",
      "pairsWith": [
        "hey-heading",
        "hey-near-black",
        "hey-text"
      ],
      "doesNotPairWith": [
        "hey-white",
        "hey-blue"
      ]
    },
    {
      "type": "fontPairing",
      "target": "typography.heading",
      "severity": "recommendation",
      "rationale": "HEY uses the same system-font family for headings and body — hierarchy is signaled by size and weight rather than family-switching. A 1.3× minimum heading-to-body size ratio preserves hierarchy when one family does all the work.\n",
      "requires": "body",
      "minSizeRatio": 1.3
    }
  ]
}