Expression tools

OpenGraph, Terminal card, Partnership lockup, Blog cover and Slide templates are the five expression tools. They make finished brand artifacts such as social images, code cards, co-brand lockups, blog covers and slide decks. All five share one editor and one document format. Each tool starts from a brand template built from the active identity (the brand identity of the open project): its colors, type roles, logos, graphic device, products, proof and voice. Everything on the artboard is a layer that you can select, move, restyle or delete.

Tools

Each built-in identity sets its own default layout and page surface for each tool.

Formats

OpenGraph, Terminal card, Partnership lockup and Blog cover use the social formats. Slide templates uses the slide formats. Format re-flows every page into its current layout at the new size. Layers that you added move and scale with the page.

Editor layout

Format and layout holds Format, one button per layout, Page surface and Reset to brand template. Slide templates chooses layouts in its Slide library section instead.

Type, spacing and logos

Every template sizes type from one modular scale per format with a ratio of 4:3. The body size is √(width × height) × 0.0176 for slides and √(width × height) × 0.0212 for social formats. Social images get the larger share because people often see them as small thumbnails.

• Template tracking follows the size: −0.022 em at title size and larger, −0.018 em at headline size, −0.014 em at subhead size, −0.008 em at lead size and 0 at body size and smaller. Uppercase text gets half of these values, and code keeps 0. Templates set tracking to 0 or a negative value. The Tracking slider in the inspector accepts −10% to +20%.
• Text renders with kerning on (the kern feature). When a font has an optical size axis, the axis follows the font size. The canvas, the inline text editor, SVG and PNG use the same settings.
• A 16:9 slide title is 6–8% of the slide height (67 px on a 1600 × 900 slide). Headlines on content layouts stay at or below 6% of the height. Tests in src/lib/__tests__/expressionType.test.ts check these limits.
• Templates have no kicker, eyebrow, brand-name or issue labels above headlines. Metadata such as the website, the page number, a metric's label or a comparison side goes in the footer or after its content.
• Logos are sized by the ink they show. Each bundled logo file carries a measured ink box. A mark's height falls as its width grows (height ∝ aspect^−0.4), so a square monogram and a long wordmark carry similar visual weight.

Edit on the canvas

• Click a layer on the canvas or in Layers to select it. Shift-click, ⌘-click or Ctrl-click adds a layer to the selection or removes it. ⌘/Ctrl + A selects every unlocked layer on the page. Escape clears the selection.
• Drag a layer to move it. Within 6 screen pixels, the layer snaps to the artboard edges and center and to the edges and centers of other layers. Guides show each match.
• Drag an edge or corner handle to resize a layer. To rotate a layer, use the Rotation slider (−180° to 180°) or the buttons that rotate it by 15° in the Layer section.
• Arrow keys nudge the selected layer by 1 px. Shift + arrow nudges it by 10 px.
• To type on the canvas, double-click a text layer or select it and press Enter. Escape or a click outside the text ends editing.
• Delete or Backspace deletes the selection. ⌘/Ctrl + D duplicates it with a 24 px offset. With one layer selected, ⌘/Ctrl + ] moves it forward and ⌘/Ctrl + [ moves it backward. Add Shift to move it to the front or the back.
• To open the selection menu, right-click a layer or focus it and press Shift + F10.
• ⌘/Ctrl + Z undoes and Shift + ⌘/Ctrl + Z redoes while the pointer is over the canvas or the canvas has focus. History keeps 120 steps. Repeated edits to the same property within 900 ms count as one step, so a drag or a burst of typing undoes at once.

Layers lists the stack with the top layer first. To restack, drag a row by its handle, or focus the row and press Alt + ↑ or Alt + ↓. Each row has a button that hides the layer and a button that locks it. A locked layer cannot be selected or moved on the canvas. Select its row in Layers to edit it in the inspector. The page background starts locked, so a click on the page selects the content on top of it.

Add layers

Add has one button per layer kind: Text, Image (an image from the identity library), Logo, Shape, Divider, Shader (a shader background), Texture and Device (a brand device). Upload image layer adds a local image file. Shader and texture layers go directly above the page background, below the content. A shader layer shows the captured still of its material from the Shader Library (Glyphfield's catalog of shader materials), so the canvas and the export match.

Brand devices are generated graphics in the identity's colors: greetings (Language field), beam (Knowledge beam), waves (Utility wave), ledger (Savings ledger), horizon (Network horizon), convergence (Convergence field), field (Programmable field), window (Focus window) and interruption (Engineered interruption).

Inspector

When several layers are selected, the Selection section offers the six alignment buttons, Duplicate selection and Delete selection.

Color fields list the identity's color roles (ink, paper, muted, emphasis, success, warning, progress and error, where the identity defines them) and Custom color…, which opens the shared color picker. A layer that uses a role stays linked to the identity. When that identity color changes, the layer changes with it.

Layouts

A layout button re-flows the layers that the template placed. Text, uploads and styles that you set by hand stay. Content that the new layout has no slot for is kept and returns when you switch back. Reset to brand template rebuilds the document from the identity's template at the current format, and you can undo it.

Export

PNG and SVG files are named studio-<tool ID>.png and studio-<tool ID>.svg. In Slide templates, slides after the first add a two-digit slide number, for example studio-slides-02.png. Exports render from the same document as the canvas.

Source format

Each tool stores its work as a CanvasDocument schema 2 (Glyphfield's portable document format) with expression source version 2. Each page is an artboard, and Slide templates has one page per slide. Elements are layers. Each template layer has a data.slot role, and its colors are brand roles. metadata.studio holds { sourceVersion: 2, toolId, state }. state holds the format, each page's layout and surface, the text that a layout set aside, and flat title, body, code and language fields. The flat fields mirror the first page's headline, its list or supporting copy, and its code. Editing a flat field in source updates the layer it mirrors.

Applying source rejects a document of another tool or kind and a document with a newer sourceVersion. Text layers need a textStyle, and code layers need at least one tab. Library assets embedded as data URLs are pointed back at the identity's files. Version-1 sources (the flat tool state from before the shared editor) migrate when you open or apply them. See Source format reference.

Browser API

The Browser API (window.glyphfield.studio) gives every expression tool these actions. {tool} stands for opengraph, terminal, partnership, blog or slides.

layer.update clamps fontSize to 4–1200, fontWeight to 100–550, letterSpacing to −0.2 to 0.5 em, lineHeight to 0.6–3, opacity to 0–1 and radius to 0–2000. align is left, center or right. fill is a color role, a #RRGGBB value or none. Call document.describe first. It returns the layer IDs, slots, formats and layouts that the other actions take. Each tool page lists the extra actions of that tool.

const studio = window.glyphfield.studio;
const doc = await studio.invoke('opengraph.document.describe');
const headline = doc.pages[0].layers.find((layer) => layer.slot === 'headline');
await studio.invoke('opengraph.layer.update', { id: headline.id, content: 'Ship every locale', fontRole: 'Display' });
await studio.invoke('opengraph.format.set', { format: 'square' });
const png = await studio.invoke('opengraph.export.png');
studio.download(png);

HTTP

POST /api/generate with kind: "template" renders the same brand templates as a standalone SVG with the brand fonts embedded. template is slides (the default), blog, partnership, opengraph or terminal. Each request renders one page. The SVG leaves out any font whose data URL is longer than 560,000 characters. The Generation API lists the optional fields, such as layout, slideLayout, format, title and body.