Your brand

The brand endpoint returns your organization’s brand as Mereon draws its lesson videos: the colors, the fonts and every version of the logo. It exists for tools that record a demo or a walkthrough and want it to look like the rest of your training, with title cards, frames and highlights in your own style. @mereon/demo reads this endpoint and builds those title cards and highlights on your machine, with the same brand rules as lesson videos.

It comes from your organization’s brand kit, which an administrator manages in Mereon under Settings, Brand kit. Changing the kit is not part of the API.

Who can use it

It needs a token granted the content:write scope, the one that lets you add guides and videos. The person behind the token needs one of guide.create, video.create or content-review.create, which every member of an organization has except external users. What it returns is what every learner already sees in your published lesson videos, all of it taken from your public website, so it is not limited to administrators.

Get your brand

GET /v1/brand

{
  "branded": true,
  "organizationName": "Acme Homes",
  "theme": {
    "primary": "#c8102e",
    "onPrimary": "#ffffff",
    "dark": "#1f2937",
    "onDark": "#ffffff",
    "background": "#ffffff",
    "surface": "#f4f4f5",
    "text": "#111827",
    "mutedText": "#6b7280",
    "headingFont": "Montserrat",
    "bodyFont": "Inter",
    "headingUppercase": false,
    "shape": {
      "controls": "pill",
      "controlRatio": 0.5,
      "panels": "rounded",
      "panelRadius": 16,
      "accentEdge": true,
      "depth": "soft"
    }
  },
  "fonts": {
    "heading": {
      "family": "Montserrat",
      "faces": [
        { "weight": 400, "src": "https://…" },
        { "weight": 600, "src": "https://…" },
        { "weight": 700, "src": "https://…" }
      ]
    },
    "body": {
      "family": "Inter",
      "faces": [
        { "weight": 400, "src": "https://…" },
        { "weight": 600, "src": "https://…" },
        { "weight": 700, "src": "https://…" }
      ]
    }
  },
  "logos": [
    {
      "src": "https://…",
      "role": "on-dark",
      "form": "open",
      "edge": [],
      "baked": null,
      "ink": ["#ffffff"],
      "opacity": 1,
      "aspect": 3,
      "maxHeight": 84
    }
  ],
  "usage": { "minContrast": 3, "clearSpaceRatio": 0.25 }
}

branded is false when your organization has no brand kit yet. The theme is then a plain neutral one, the look Mereon’s own videos use without a kit, and logos is empty. Set your organization’s name in the heading font in place of a logo.

The theme

Every color is #rrggbb. onPrimary and onDark are text colors that read on primary and dark. headingFont and bodyFont are Google Fonts families: your brand’s own font when Google has it, otherwise the closest one it does.

shape describes your website’s corners and depth, measured from its pages. controlRatio is the corner radius of a typical button over its height, from 0 for square to 0.5 for a pill. panelRadius is the corner radius of a typical card or photo in pixels on a page 1,440 pixels wide. accentEdge says whether your site marks boxes with a thick colored bar on one side, and depth is flat, soft (a soft shadow) or hard (an offset one).

The fonts

fonts carries the files for the theme’s two families, heading for headingFont and body for bodyFont, so a tool drawing a demo needs no font service of its own. Each entry in faces is one weight, and its src is a WOFF2 file of the family’s Latin characters that Mereon serves, signed to download for an hour like the logos. body is the same as heading when the theme uses one family for both.

When Mereon could not get a family, its faces is empty, and that text should be set in a system font instead.

The logos

Each version has a role: primary, on-dark, on-light, icon, monochrome or alternate. src is the file, signed to download for an hour, so download the files you need rather than keeping the links. aspect is the logo’s width over its height. maxHeight is the height in pixels of a raster file, the tallest you can draw it without enlarging it and blurring it; it is null for a vector file such as an SVG, which stays sharp at any size, and for a file that could not be read, whose size is not known.

Choose a version by the background it goes on. ink is the mark’s main colors and opacity how solid it is, so you can check each one against usage.minContrast (a contrast ratio, 3 by default). A version with a baked color carries a box of that color around it, and only belongs on that color. Keep clear space of usage.clearSpaceRatio times the logo’s height on every side. Never recolor a logo, outline it or put it on a plate to make it read: choose another version or another background, or leave it out.

Status	Meaning
200	Your brand, or the neutral look when there is no kit.
403	The person behind the token cannot add guides or videos, or propose them for review.