{
  "schemaVersion": "1.0",
  "entityFamily": "modules",
  "entityType": "DefinedTerm",
  "entityId": "modules:51",
  "canonicalUrl": "https://babadook.tech/modules/design-token-system",
  "machineBaseUrl": "https://babadook.tech/ai/modules/design-token-system",
  "name": "Design Token System",
  "aliases": [],
  "summary": "Centralized design system with tokens for color, typography, spacing, elevation, and shadows that sync between the design canvas and production code in real-time.",
  "description": [
    "Centralized design system with tokens for color, typography, spacing, elevation, and shadows that sync between the design canvas and production code in real-time."
  ],
  "sections": [
    {
      "id": "one-source-of-truth-for-design-3b89c9af-7055-4af0-8b53-49a47e9b5674",
      "heading": "one-source-of-truth-for-design",
      "body": [
        "One Source of Truth for Design Design Token System bridges design and development with a single source of truth. Define colors, typography, spacing, elevation, and shadow tokens in the design tool — they automatically sync to CSS custom properties, Tailwind configs, and framework theme files. Change a color token in the design canvas and every component using that token updates simultaneously — in Visual Editor, in code, and in production. No more design drift."
      ],
      "specifications": [],
      "relationships": [],
      "media": [],
      "children": [
        {
          "id": "data-viz-1",
          "heading": "data Viz",
          "body": [],
          "specifications": [],
          "relationships": [],
          "media": [],
          "children": [],
          "sourceBlockType": "unsupported"
        }
      ],
      "sourceBlockType": "content_block",
      "sourceBlockId": "3b89c9af-7055-4af0-8b53-49a47e9b5674"
    },
    {
      "id": "design-token-specifications-0369e3b0-766d-43df-b72c-f2adf7c736e7",
      "heading": "Design Token Specifications",
      "body": [],
      "specifications": [
        {
          "label": "Token Types",
          "value": "Color, typography, spacing, elevation, shadow, border, opacity",
          "group": "spec Items"
        },
        {
          "label": "Output Formats",
          "value": "CSS custom properties, SCSS, Tailwind, JSON, Style Dictionary",
          "group": "spec Items"
        },
        {
          "label": "Sync",
          "value": "Real-time bi-directional between design and code",
          "group": "spec Items"
        },
        {
          "label": "Themes",
          "value": "Multiple themes with dark/light mode and brand variants",
          "group": "spec Items"
        },
        {
          "label": "Versioning",
          "value": "Token change history with semantic versioning",
          "group": "spec Items"
        }
      ],
      "relationships": [],
      "media": [],
      "children": [],
      "sourceBlockType": "product_specification",
      "sourceBlockId": "0369e3b0-766d-43df-b72c-f2adf7c736e7"
    },
    {
      "id": "features-3",
      "heading": "features",
      "body": [
        "color tokens: true",
        "real time sync: true",
        "spacing tokens: true",
        "elevation tokens: true",
        "typography tokens: true"
      ],
      "specifications": [],
      "relationships": [],
      "media": [],
      "children": [],
      "sourceBlockType": "features"
    }
  ],
  "specifications": [],
  "claims": [],
  "relationships": [
    {
      "type": "products",
      "targets": [
        {
          "id": "83",
          "family": "products",
          "name": "DXP",
          "slug": "dxp",
          "canonicalUrl": "https://babadook.tech/products/dxp",
          "relationship": "products"
        }
      ]
    },
    {
      "type": "capabilities",
      "targets": [
        {
          "id": "85",
          "family": "capabilities",
          "name": "Visual Design Tools",
          "slug": "visual-design-tools",
          "canonicalUrl": "https://babadook.tech/capabilities/visual-design-tools",
          "relationship": "capabilities"
        }
      ]
    },
    {
      "type": "sub_modules",
      "targets": [
        {
          "id": "28",
          "family": "sub-modules",
          "name": "Creative & Design",
          "slug": "creative-design",
          "canonicalUrl": "https://babadook.tech/sub-modules/creative-design",
          "relationship": "sub_modules"
        }
      ]
    },
    {
      "type": "use_cases",
      "targets": [
        {
          "id": "54",
          "family": "use-case",
          "name": "Design-to-Code",
          "slug": "design-to-code",
          "relationship": "use_cases"
        }
      ]
    }
  ],
  "authors": [],
  "media": [],
  "regulatoryContext": {
    "exportControlAndLicensingReviewRequired": false
  },
  "language": "en",
  "receipt": {
    "sourceBlockCount": 4,
    "projectedBlockCount": 4,
    "sourceValueCount": 19,
    "projectedValueCount": 19,
    "sourceRelationshipCount": 4,
    "projectedRelationshipCount": 4,
    "sourceClaimCount": 0,
    "projectedClaimCount": 0,
    "unknownBlockTypes": [],
    "omittedFields": [],
    "missingValuePaths": [],
    "invalidClaims": [],
    "complete": true
  },
  "contentHash": "0a2b3d8fbe53e578f55387ed091f52da644783dffc3a9f64bf846fc18480f9d9"
}