Moodboard

Moodboard (tool ID design-board) is the Glyphfield Studio tool that composes the active brand identity as a presentation board of tiles on a 12-column grid. Every tile is built from the identity: its graphic device, logos, type, palette, voice, products, proof and library images. You can reorder, hide, resize, recolor and rewrite tiles.

Compositions

Board style selects one of five boards. Each board keeps its own tile edits.

Showcase and Campaign follow the identity's art direction (artDirection.moodboard), so their tile mix and proportions differ between identities.

Layout

Board surface is Light or Dark. Generated applications lists the identity's applications, and Central idea and sources shows the central concept, the graphic device and the source notes.

Tiles

Select a tile on the board or in the Tiles list. Drag a tile onto another tile on the board to reorder. Escape clears the selection. The list shows each tile's name, layout and width, with these accessible controls:

• Hide <tile> tile <id> or Show <tile> tile <id> toggles the tile. The remaining tiles reflow.
• Select <tile> tile <id> in list selects it.
• Move <tile> tile <id> earlier and Move <tile> tile <id> later reorder it.

The selected tile's settings have Reset tile and these fields:

With a tile selected, click its text on the board to edit it in place. The accessible labels are Edit <tile> headline, Edit <tile> body and Edit <tile> caption.

The image tiles are Key visual, Poster, Billboard, Imagery, Social post and Website. Their images come from the identity's curated library images. An identity without curated images uses any of its non-logo images.

Export

Output size offers Standard, Retina (the default), High resolution, Ultra and Custom. A preset sets the PNG width, and the height follows the board ratio. Custom takes Custom width from 800 to 4800 px. The board is vector artwork, so it renders at the chosen size directly.

The Export section shows the exact pixel size before export. PNG and SVG both embed every brand font and library image, so the output matches the preview. PNG files are named <brand>-moodboard-<width>x<height>.png.

Source format

File → Edit source code shows glyphfield.moodboard version 2:

{
  "schema": "glyphfield.moodboard",
  "version": 2,
  "composition": "showcase",
  "exportPresetId": "retina",
  "customWidth": 2400,
  "boards": {
    "showcase": {
      "title": "Brand showcase",
      "surface": "light",
      "tiles": [
        { "id": "cover", "kind": "cover", "label": "Key visual", "variants": ["device", "image", "type"], "hidden": false, "variant": "device", "span": 8, "tone": "deep", "assetId": "", "copy": { "headline": "Financial infrastructure for the internet.", "body": "…", "caption": "stripe.com" } }
      ]
    }
  }
}

• composition is showcase, campaign, system, specimen or catalog. Every key in boards must be one of these.
• exportPresetId is standard, retina, high, ultra or custom. customWidth is clamped to 800–4800.
• Tile order follows tiles. A partial list moves the listed tiles first, and omitted tiles keep their settings. Tile IDs must be unique.
• variant must be one of the tile's variants. span is 3, 4, 6, 8 or 12. tone is paper, muted, ink, deep or accent. assetId is an eligible library image, or empty for the graphic device.
• title holds up to 120 characters and each copy field up to 600. Values equal to the identity defaults are not stored, so untouched copy keeps following later identity edits.
• A version 1 document (composition, exportPresetId and customWidth only) still applies and keeps the current tile edits.

Board source configures presentation only. Content, assets, fonts and art direction come from Brand identity.

Browser API

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

Tile controls use the accessible labels above. The Specimen board has several Typography tiles and several Colour tiles, so Select Typography tile matches more than one tile. Use the list labels, which include the tile ID.

Limits

• PNG width up to 4800 px. The long edge reaches 6000 px on 4:5 boards and 7200 px on the Catalog board at Ultra.
• SVG export always uses the 1600 px wide layout.
• Board title 120 characters. Tile copy 600 characters per field.