glph catalog studio

glphcatalog studioAcme - acme-1

A live demo of deterministic governance: an AI agent's A2UI surface, checked and auto-corrected by the same engine the test suite pins. The brand's rules run first; your experience profile runs last and has the last word on presentation. How it works

Import a design system (paste DTCG tokens, AI drafts the catalog, you review it)

AI proposes, you ratify, the engine enforces.

Color tokens

primary

primaryText

surface

text

muted

danger

Scales

Spacing scale (px)Type scale (px)

Brand rules

Grid base (px)Min contrast (normal text)Color snap max deltaEColors must be tokensSpacing must be on gridType sizes must be in scale

Your experience

BYOE

Off: the surface is judged by the brand's rules alone. Pick a profile and the same surface is re-judged on your terms.

Your profile runs after the brand pass, so it has the last word on type, contrast, line height, density and motion. The brand keeps its components, variants and structure. Fixes use the brand's own tokens and scales wherever they can.

A file you own. Take it with you.

Import a profile (paste JSON or load a file)

Load file

Rules: minFontSizePx, minContrast, minLineHeight, minSpacingPx, reducedMotion. The same file works in the API's profile key.

Governance - live

brand: 5 violations

Example surface

Agent emitted (raw A2UI stream)

contrast 1.45:1 / Carousel autoplay on

glph corrected (deterministic)

contrast 5.17:1 / Carousel autoplay on

color-not-tokenCard>Button.background#3B82F6 -> color.primary (#2563EB)auto-fix: color.primary
spacing-off-gridCard>Button.paddingX13px -> multiple of 4pxauto-fix: 12px
type-not-in-scaleCard>Button.fontSize13px -> one of scale: 12, 14, 16, 20, 24, 32auto-fix: 14px
contrast-too-lowCard>Button.textColor#9CA3AF on #2563EB -> >= 4.5:1auto-fix: color.primaryText
component-not-allowedCard>CarouselCarousel -> one of: Button, Card, Badge

A2UI surface stream (editable)

[
  {
    "version": "v0.9.1",
    "createSurface": {
      "surfaceId": "acme_card",
      "catalogId": "acme-1"
    }
  },
  {
    "version": "v0.9.1",
    "updateComponents": {
      "surfaceId": "acme_card",
      "components": [
        {
          "id": "root",
          "component": "Card",
          "padding": "16px",
          "radius": "8px",
          "background": "#FFFFFF",
          "children": [
            "cta",
            "promo"
          ]
        },
        {
          "id": "cta",
          "component": "Button",
          "variant": "primary",
          "background": "#3B82F6",
          "paddingX": "13px",
          "fontSize": "13px",
          "lineHeight": 1.2,
          "textColor": "#9CA3AF",
          "label": {
            "path": "/cta/label"
          }
        },
        {
          "id": "promo",
          "component": "Carousel",
          "autoplay": true
        }
      ]
    }
  },
  {
    "version": "v0.9.1",
    "updateDataModel": {
      "surfaceId": "acme_card",
      "path": "/cta/label",
      "value": "Get started"
    }
  }
]

Components (agent allowlist)

Button

renderable

primarysecondaryghost

variantenum(primary | secondary | ghost)

backgroundtoken:color

textColortoken:color

paddingXtoken:spacing

fontSizetoken:typeScale

Card

renderable

defaultelevated

paddingtoken:spacing

radiustoken:radius

backgroundtoken:color

Badge

renderable

neutraldanger

variantenum(neutral | danger)