Design System

incubating

Status of this Document

This report was published by the User Journal Graph Community Group . It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Contributor License Agreement (CLA) there is a limited opt-out and other conditions apply. Learn more about W3C Community and Business Groups .

Editors: Seva Dolgopolov
Group: User Journal Graph Community Group
Repository: View Source
License: W3C-Software-and-Document

Status: incubating supported extension for design system metadata on UJG nodes.

This page provides an exploratory payload shape for design-system concerns such as component selection, variants, token references, and slot-level rendering hints. The schema and examples below are informative brainstorming material, not normative conformance artifacts.

1. Namespace

Canonical namespace string: https://ujg.specs.openuji.org/ed/extensions/design-system
Payload location: extensions["https://ujg.specs.openuji.org/ed/extensions/design-system"]

2. Scope

Applicable UJG objects: Node
Likely attachment points: ExperienceStep, Touchpoint, State

3. Exploratory JSON Schema

json

 {
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "$id": "https://ujg.specs.openuji.org/ed/extensions/design-system/schema",
  "title": "UJG Design System Extension Payload",
  "type": "object",
  "additionalProperties": false,
  "properties": {
    "version": { "type": "string" },
    "component": { "type": "string" },
    "variant": { "type": "string" },
    "themeRef": { "type": "string", "format": "uri-reference" },
    "tokenRefs": {
      "type": "object",
      "additionalProperties": { "type": "string" }
    },
    "slots": {
      "type": "object",
      "additionalProperties": {
        "type": "object",
        "additionalProperties": false,
        "properties": {
          "component": { "type": "string" },
          "contentKey": { "type": "string" },
          "visible": { "type": "boolean" }
        }
      }
    }
  },
  "required": ["component"]
} 
 {
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "$id": "https://ujg.specs.openuji.org/ed/extensions/design-system/schema",
  "title": "UJG Design System Extension Payload",
  "type": "object",
  "additionalProperties": false,
  "properties": {
    "version": { "type": "string" },
    "component": { "type": "string" },
    "variant": { "type": "string" },
    "themeRef": { "type": "string", "format": "uri-reference" },
    "tokenRefs": {
      "type": "object",
      "additionalProperties": { "type": "string" }
    },
    "slots": {
      "type": "object",
      "additionalProperties": {
        "type": "object",
        "additionalProperties": false,
        "properties": {
          "component": { "type": "string" },
          "contentKey": { "type": "string" },
          "visible": { "type": "boolean" }
        }
      }
    }
  },
  "required": ["component"]
} 

4. Example

json

 {
  "@id": "https://example.com/steps/cart-review",
  "@type": "ExperienceStep",
  "extensions": {
    "https://ujg.specs.openuji.org/ed/extensions/design-system": {
      "version": "0.1.0",
      "component": "checkout.summary-card",
      "variant": "compact",
      "themeRef": "https://example.com/themes/commerce/light",
      "tokenRefs": {
        "surface": "surface/subtle",
        "accent": "brand/primary",
        "spacing": "space/300"
      },
      "slots": {
        "header": {
          "contentKey": "cart.review.title",
          "visible": true
        },
        "footer": {
          "component": "checkout.summary-actions",
          "visible": true
        }
      }
    }
  }
} 
 {
  "@id": "https://example.com/steps/cart-review",
  "@type": "ExperienceStep",
  "extensions": {
    "https://ujg.specs.openuji.org/ed/extensions/design-system": {
      "version": "0.1.0",
      "component": "checkout.summary-card",
      "variant": "compact",
      "themeRef": "https://example.com/themes/commerce/light",
      "tokenRefs": {
        "surface": "surface/subtle",
        "accent": "brand/primary",
        "spacing": "space/300"
      },
      "slots": {
        "header": {
          "contentKey": "cart.review.title",
          "visible": true
        },
        "footer": {
          "component": "checkout.summary-actions",
          "visible": true
        }
      }
    }
  }
} 