Logos, color, type, and backgrounds

Logo lab

Logo lab previews the active mark in identity colors and at common application sizes.

• Select ink, paper, emphasis, or success color.
• Switch between base white, base dark, grid, noise, and live GPU surfaces.
• Choose any ShaderGradient or Ariadne material and edit its colors in HEX or OKLCH.
• Choose 64 px or 128 px output.
• Enable transparent export when the mark should have no background.

The preview surface is derived from identity colors and does not change with Studio light or dark mode.

Color tokens

Color tokens provides large swatches with editable HEX and OKLCH values plus percentage opacity. Copy tokens writes perceptual CSS custom properties and preserves a HEX reference.

Use this tool to check contrast across ink, paper, emphasis, and status colors before committing the values in Brand settings.

Typography

Typography compares Display, Body, Accent, and Code roles in one view. Select a bundled family or load an OTF, TTF, WOFF, or WOFF2 file for the current browser session.

Uploaded font files are loaded with the browser FontFace API. They are not uploaded to Glyphfield.

Background lab

Background lab builds exportable SVG layers or live GPU materials and downloads a PNG.

Recipes

• Linear or radial gradient
• Grainy gradient
• Ordered Bayer dither using 2×2, 4×4, or 8×8 matrices
• Pattern field
• ShaderGradient and Ariadne live materials

Overlays

Add dots, lines, or grids and control spacing and opacity. Logos can use the light or dark mark with adjustable size, opacity, and horizontal/vertical position.

Output presets cover common square, landscape, OpenGraph, and presentation sizes. Static recipes remain available to the agent API as deterministic SVG; live WebGL materials are rendered and downloaded in the browser.