Brand elements

Brand elements (tool ID brand-elements) is the Glyphfield Studio tool that applies the active brand identity to a catalog of 89 templates. Each element renders on an artboard at its own pixel size with the identity's fonts, colors, corner radius, logos and graphic device, then scales to fit the canvas. Select an element, edit its copy on the artboard or in the inspector, adjust the composition, and export a PNG, an HTML email or a JSON brief.

Every template takes its content from the identity: products and their one-line summaries, proof, customers, published plans, the code sample and install command, and the sample person and event (see Brand identity). A template does not fall back to Glyphfield's own product copy.

Layout

Catalog

GET /api/elements returns the catalog with each element's id, name, category, dimensions, format, symbol, keywords and preview family. The catalog size (dimensions) is the intended production size. When it is a pixel size with the same proportions as the artboard and larger than it, the PNG export renders at the catalog size. The 3000 × 3000 podcast cover is one example. Component sizes such as the 420 × 560 pricing card and print sizes in millimeters or inches describe the subject, so those elements export at their artboard size. The tables list the PNG size at 1×.

Digital (35)

The 26 emails render 640 px wide at their content height and export as HTML. Their catalog size is "640 px / responsive". The three enterprise emails are plain-text emails.

Product (20)

Developer (9)

Social (8)

Editorial (7)

Event (5)

Physical (5)

Controls

Click a headline, supporting copy, action, name, role or partner name on the artboard to edit it in place. The accessible labels are Edit headline in place, Edit supporting copy in place and so on. In-place edits stay in sync with the inspector, the source and the brief.

The Element editor shows only the controls an element supports:

Settings are stored per project and per element. Reset element removes the element's settings and returns it to the identity defaults.

Export

The export preview is the dialog that shows an export with its file name and a download button.

PNG files embed the brand fonts and are named <identity>-<element>.png or <identity>-<element>@2x.png. HTML files are named <identity>-<element>.html.

The HTML email is a 600 px table layout with inlined styles, an Outlook (MSO) wrapper, a hidden preheader of up to 140 characters, a table-based button that renders in Outlook, and absolute image URLs. Its footer links to Unsubscribe at /account on the identity's website. The content differs by element:

The wordmark header and header art appear while Show logo is on. General Translation's lifecycle emails use GT's animated GIF header art, linked by absolute URL. Every other email uses a 1200 × 380 PNG of the brand's graphic device, embedded as a data URL. Host that PNG and replace its src before you send through a client that blocks data URLs, such as Gmail.

Source format

File → Edit source code shows the selected element as glyphfield.brand-element version 2:

{
  "schema": "glyphfield.brand-element",
  "version": 2,
  "elementId": "welcome-email",
  "headline": "Welcome to Stripe",
  "body": "…",
  "cta": "Open workspace",
  "layout": "stacked",
  "accentColor": "#533AFD"
}

Applying source selects elementId when it is present. It stores only the values that differ from the identity defaults, so untouched copy keeps following identity edits. Omitted settings keep their current values, so { "elementId": "x-post" } only selects an element. Colors are six-digit HEX, and enum values must match the editor options. Numbers are clamped: artwork offsets to ±120, artwork scale to 40–200, opacities to 0–100 and font weight to 100–900 (displayed at most 550). Text is limited to 400 characters for the headline, 2000 for the body, 200 for the action and the role, and 120 for the name and the partner name. Unknown keys are ignored. A version 1 document has no elementId and applies to the selected element.

Browser API

The Browser API (window.glyphfield.studio) exposes these actions while Brand elements is the active tool. An export artifact is an object with a non-empty blob and a fileName.

The browser brief is { element, settings, identity: { colors, id, name, shortName, tagline, typography, voice, website }, schemaVersion: 2 }.

HTTP

GET /api/elements returns { categories, count, elements, generation, schemaVersion: 1 }. POST /api/generate with kind: "element-brief" and an elementId returns { element, generation: { previewFamily, source }, identity, schemaVersion: 1 }. The HTTP brief resolves the element against an identity but has no editor settings. See Generation API. A document from the source drawer is not an HTTP request body.

Limits

• PNG export at 1× or 2× of the PNG size, which is the catalog pixel size when it matches the artboard's proportions and the artboard size otherwise.
• HTML export for email elements only.
• Font weights display up to 550.