grain.json

Grain Brand Identity

A complete profile of Grain's visual system — colors, typography, components, and personality — extracted from https://grain.com/. Built for designers, agents, and AI tools.

Page: https://characterquilt.com/branding/grain
Machine-readable JSON: https://characterquilt.com/branding/grain.json
Per-page llms.txt: https://characterquilt.com/branding/grain/llms.txt

Quick Facts

Field	Value
Primary	#009959
Accent	#00B96C
Body Font	Inter
Heading Font	Poppins

Color Palette

primary: #009959
secondary: #01A05E
accent: #00B96C
background: #FFFFFF
textPrimary: #000000
link: #00B96C

Typography

primary: Inter — https://fonts.google.com/specimen/Inter
heading: Poppins — https://fonts.google.com/specimen/Poppins

Visual Assets

UI Components

buttonPrimary: background=#009959, textColor=#FFFFFF, borderRadius=8px, shadow=none
buttonSecondary: background=transparent, textColor=#000000, borderColor=#D6D6D6, borderRadius=8px, shadow=none

Brand Personality

Tone: modern · Energy: medium · Audience: growing teams and businesses

Grain Brand in the Wild

Real-world brand assets — ads, campaigns, marketing materials.

Grain for Agencies and Consultants
- Image: https://cdn.prod.website-files.com/5f5e90c17e7c9eb95c7acb17/68c157b12da10f4e318347de_consultants-image.png
- Source: https://grain.com/use-case/agencies-and-consultants
AI Notetaker: The Complete Guide for Teams | Grain
- Image: https://cdn.prod.website-files.com/5f612f13a3a233cf73074803/699cdea4fc760d7cefced6c0_FirstBlogImage.png
- Source: https://grain.com/blog/ai-notetaker-complete-guide-for-teams
What's New in Grain: Video Library, #Tags, and More | Grain
- Image: https://cdn.prod.website-files.com/5f612f13a3a233cf73074803/6718099015b8890fc078eedd_62614fd13cb12a7f13ce0529_Highlight%2520tags.png
- Source: https://grain.com/blog/grain-spring-product-update
Sales Automation Software to Save 10 Hours a Week | Grain
- Image: https://cdn.prod.website-files.com/5f612f13a3a233cf73074803/64c3cc78970c979933420868_Ps4FuX1cPBAlLrBXwmJzr3sfpeBYYVml0cJ7GRWdepMid1Sh4lHAHcy3oPejW_hbTlOLzXQtuefj-OEDzU8RceJC24IWp_mxOrYkxuvVXQlTI2NLiOYcXydIv6MUIN1ayZaYtIwtEoTPlhPRRLiyKUpx23mgidfpxf9a0gqI5NqmzPlUB860x6_pYHJE0w.png
- Source: https://grain.com/blog/sales-automation-software
Sales Meeting Agenda That Drives Team Success | Grain
- Image: https://cdn.prod.website-files.com/5f612f13a3a233cf73074803/6716d6ea513f2918a0454b53_64bab8f77c5a34cdcaf5782b_Ambition_CadenceTemplate-carousel2.png
- Source: https://grain.com/blog/sales-meeting-agenda
How to Recruit Participants for Research | Grain
- Image: https://cdn.prod.website-files.com/5f612f13a3a233cf73074803/67180c9a36f58de71132e90f_61142a1e6147bad6361cb2a5_Subreddits%2520for%2520Product%2520Managers.png
- Source: https://grain.com/blog/recruiting-participants-for-user-research

Working with these fonts

Not found on Google Fonts?

CharacterQuilt.com suggests this flow that can help:

Open the company's homepage in a browser with DevTools open.
In the Network tab, filter by "Font" (or by extension: woff2, woff, ttf, otf).
Hard-reload the page and click around (pricing, blog, careers) — some weights only load on specific routes.
For each captured font URL: right-click → Save As to download the file locally.
View the page's CSS (DevTools → Sources, or curl the stylesheet URLs) and copy out the matching @font-face declarations. Rewrite each src: url(...) to point to your local file path.

Programmatic alternative: load the URL with Playwright or Puppeteer, listen for response events whose Content-Type starts with font/, and write the body to disk. The CSS extraction step is the same.

Only do this if you have permission to use the brand assets — most proprietary fonts are licensed and may not be redistributable.

Machine-Readable Profile

{
  "colorScheme": "light",
  "fonts": [
    {
      "family": "Inter",
      "role": "body"
    },
    {
      "family": "Poppins",
      "role": "heading"
    },
    {
      "family": "Georgia",
      "role": "unknown"
    }
  ],
  "colors": {
    "primary": "#009959",
    "secondary": "#01A05E",
    "accent": "#00B96C",
    "background": "#FFFFFF",
    "textPrimary": "#000000",
    "link": "#00B96C"
  },
  "typography": {
    "fontFamilies": {
      "primary": "Inter",
      "heading": "Poppins"
    },
    "fontStacks": {
      "heading": [
        "Poppins",
        "Georgia",
        "sans-serif"
      ],
      "body": [
        "Inter",
        "Arial",
        "sans-serif"
      ],
      "paragraph": [
        "Inter",
        "Arial",
        "sans-serif"
      ]
    },
    "fontSizes": {
      "h1": "38px",
      "h2": "42px",
      "body": "18px"
    }
  },
  "spacing": {
    "baseUnit": 4,
    "borderRadius": "8px"
  },
  "components": {
    "buttonPrimary": {
      "background": "#009959",
      "textColor": "#FFFFFF",
      "borderRadius": "8px",
      "borderRadiusCorners": {
        "topLeft": "8px",
        "topRight": "8px",
        "bottomRight": "8px",
        "bottomLeft": "8px"
      },
      "shadow": "none"
    },
    "buttonSecondary": {
      "background": "transparent",
      "textColor": "#000000",
      "borderColor": "#D6D6D6",
      "borderRadius": "8px",
      "borderRadiusCorners": {
        "topLeft": "8px",
        "topRight": "8px",
        "bottomRight": "8px",
        "bottomLeft": "8px"
      },
      "shadow": "none"
    }
  },
  "images": {
    "logo": "data:image/svg+xml;utf8,%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20125%2034%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20data-fc-idx%3D%220%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M103.533%208.222a2.1%202.1%200%200%201%20.649-1.539c.432-.432.95-.648%201.554-.648a2.14%202.14%200%200%201%201.569.648c.432.423.648.94.648%201.554%200%20.614-.216%201.137-.648%201.569a2.09%202.09%200%200%201-1.554.649%202.136%202.136%200%200%201-1.569-.649%202.153%202.153%200%200%201-.649-1.584zm4.081%2021.868V13.563h-3.563V30.09h3.563z%22%20fill%3D%22%23000%22%20style%3D%22fill%3A%20rgb(0%2C%200%2C%200)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M97.213%2013.58h3.58v16.527h-3.58v-1.73c-1.573%201.47-3.264%202.205-5.074%202.205-2.285%200-4.174-.826-5.667-2.477-1.482-1.686-2.223-3.79-2.223-6.312%200-2.478.741-4.542%202.223-6.194%201.482-1.651%203.337-2.477%205.565-2.477%201.923%200%203.649.792%205.176%202.375V13.58zm-9.316%208.213c0%201.583.424%202.873%201.272%203.868.871%201.007%202.224%201.68%203.547%201.68%201.414%200%202.557-.656%203.428-1.629.87-1.007%201.306-2.285%201.306-3.835%200-1.55-.435-2.828-1.306-3.834-.871-.985-2.003-1.647-3.394-1.647-1.312%200-2.664.668-3.547%201.664-.87%201.006-1.306%202.25-1.306%203.733zM73.524%2013.58h3.648v1.477c.702-.735%201.324-1.239%201.867-1.51.554-.283%201.21-.424%201.968-.424%201.007%200%202.059.328%203.156.984l-1.748%203.495c-.724-.52-1.43-.78-2.12-.78-2.082%200-3.123%201.572-3.123%204.717v8.569h-3.648V13.581zM110.672%2013.572h3.58v1.527c1.335-1.324%202.839-1.986%204.513-1.986%201.923%200%203.422.606%204.497%201.816.927%201.03%201.391%202.71%201.391%205.04v10.13h-3.835v-9.231c0-1.629-.226-2.755-.678-3.377-.442-.633-1.245-.95-2.41-.95-1.267%200-2.166.419-2.698%201.256-.52.825-.78%202.268-.78%204.327v7.975h-3.58V13.572zM71.08%2016.635H60.509v3.546h6.278c-.181%201.844-1.047%203.428-2.597%204.752-1.55%201.312-3.297%201.968-5.243%201.968-2.285%200-4.406-.877-6.363-2.63-2.093-1.89-3.139-4.293-3.139-7.212%200-2.828.94-5.18%202.817-7.059%201.878-1.911%204.202-2.867%206.974-2.867%202.4%200%204.516.864%206.349%202.592l2.688-2.689c-1.11-1.026-2.234-1.82-3.37-2.38-1.776-.838-3.688-1.256-5.735-1.256-3.812%200-7.047%201.33-9.706%203.987-2.658%202.647-3.987%205.871-3.987%209.672%200%203.722%201.306%206.912%203.92%209.57%202.612%202.647%205.752%203.97%209.417%203.97%203.755%200%206.85-1.368%209.281-4.105%201.075-1.222%201.838-2.534%202.29-3.937.465-1.516.697-3.258.697-5.226v-.696z%22%20fill%3D%22%23000%22%20style%3D%22fill%3A%20rgb(0%2C%200%2C%200)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M13.798.4a5.907%205.907%200%200%201%204.278%200c1.546.601%203.071%201.3%204.569%202.098.311.166.263.627-.07.743C14.383%206.108%208.508%2013.906%208.508%2023.077c0%202.856.57%205.58%201.603%208.063.146.35-.221.708-.558.532a42.262%2042.262%200%200%201-6.922-4.52%205.907%205.907%200%200%201-2.139-3.705A42.261%2042.261%200%200%201%200%2017c0-2.193.168-4.346.492-6.447a5.907%205.907%200%200%201%202.14-3.705%2042.261%2042.261%200%200%201%205.336-3.65A42.263%2042.263%200%200%201%2013.798.4z%22%20fill%3D%22%2300B96C%22%20style%3D%22fill%3A%20rgb(0%2C%20185%2C%20108)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M29.243%206.849a42.393%2042.393%200%200%200-.58-.458%201.847%201.847%200%200%200-1.461-.365c-8.9%201.625-15.647%209.419-15.647%2018.788%200%202.912.651%205.672%201.817%208.142.18.382.514.668.913.808a5.907%205.907%200%200%200%203.791-.165c1.983-.77%203.931-1.7%205.83-2.797a42.258%2042.258%200%200%200%205.337-3.65%205.907%205.907%200%200%200%202.139-3.704c.324-2.102.492-4.255.492-6.447%200-2.193-.168-4.346-.492-6.447a5.907%205.907%200%200%200-2.139-3.705z%22%20fill%3D%22%2300B96C%22%20style%3D%22fill%3A%20rgb(0%2C%20185%2C%20108)%20!important%3B%22%2F%3E%3C%2Fsvg%3E","favicon":"https://cdn.prod.website-files.com/5f5e90c17e7c9eb95c7acb17/61d3457a519242f2c75c725c_favicon.png","ogImage":"https://cdn.prod.website-files.com/5f5e90c17e7c9eb95c7acb17/67816d3d605f079c9fa107d5_Accurate%20AI%20Notetaker%20for%20Teams.avif","logoHref":"/"},"__llm_logo_reasoning":{"selectedIndex":1,"reasoning":"Selected #0 because it is visible, located in the header, and links to the homepage, matching the brand 'Grain'.","confidence":0.9,"source":"llm"},"__llm_button_reasoning":{"primary":{"index":1,"text":"Get started free","reasoning":"Button #1 has a vibrant brand color (#009959) and action-oriented text ('Get started free'), making it the primary CTA."},"secondary":{"index":2,"text":"Book a demo","reasoning":"Button #9 has a transparent background, providing a clear contrast to the primary button's vibrant color, and serves as a secondary action ('Book a demo')."},"confidence":0.95},"personality":{"tone":"modern","energy":"medium","targetAudience":"growing teams and businesses"},"designSystem":{"framework":"custom","componentLibrary":""},"confidence":{"buttons":0.95,"colors":0.9,"overall":0.925},"__llm_metadata":{"logoSelection":{"llmCalled":true,"llmSucceeded":true,"finalSource":"llm","rawLogoSelection":{"selectedLogoIndex":0,"selectedLogoReasoning":"Selected #0 because it is visible, located in the header, and links to the homepage, matching the brand 'Grain'.","confidence":0.9}},"buttonClassification":{"llmCalled":true,"llmSucceeded":true}}}