{
  "schemaVersion": "1.0",
  "entityFamily": "sub-modules",
  "entityType": "DefinedTerm",
  "entityId": "sub-modules:28",
  "canonicalUrl": "https://babadook.tech/sub-modules/creative-design",
  "machineBaseUrl": "https://babadook.tech/ai/sub-modules/creative-design",
  "name": "Creative & Design",
  "aliases": [],
  "summary": "Browser-based design tools with canvas, animation engine, design tokens, and design-to-code pipeline.",
  "description": [
    "Browser-based design tools including the design canvas, animation engine, design token system, component library, and design-to-code pipeline. Creative & Design bridges the gap between design and development with production-ready output."
  ],
  "sections": [
    {
      "id": "design-and-ship-in-one-platform-7b3efd6f-1244-4894-9a97-c8ccafb92ae7",
      "heading": "Design and Ship in One Platform",
      "body": [
        "subtitle: A design tool that outputs production code, not static mockups. Design tokens, component libraries, and animations — all natively integrated with your content and data."
      ],
      "specifications": [],
      "relationships": [],
      "media": [],
      "children": [
        {
          "id": "design-canvas-1",
          "heading": "Design Canvas",
          "body": [
            "desc: Vector and raster editing with infinite canvas, smart guides, auto-layout, and real-time collaboration."
          ],
          "specifications": [],
          "relationships": [],
          "media": [],
          "children": [],
          "sourceBlockType": "unsupported"
        },
        {
          "id": "animation-engine-2",
          "heading": "Animation Engine",
          "body": [
            "desc: 24 animation presets with keyframe editing, easing curves, and scroll-triggered sequences."
          ],
          "specifications": [],
          "relationships": [],
          "media": [],
          "children": [],
          "sourceBlockType": "unsupported"
        },
        {
          "id": "design-tokens-3",
          "heading": "Design Tokens",
          "body": [
            "desc: Centralized token system for colors, typography, spacing, and motion — propagated across every component."
          ],
          "specifications": [],
          "relationships": [],
          "media": [],
          "children": [],
          "sourceBlockType": "unsupported"
        },
        {
          "id": "design-to-code-4",
          "heading": "Design-to-Code",
          "body": [
            "desc: Export production-ready React, Vue, or HTML from any design with responsive breakpoints and accessibility."
          ],
          "specifications": [],
          "relationships": [],
          "media": [],
          "children": [],
          "sourceBlockType": "unsupported"
        },
        {
          "id": "pre-built-library-1",
          "heading": "Pre-built library",
          "body": [
            "value: 56",
            "unit: components"
          ],
          "specifications": [],
          "relationships": [],
          "media": [],
          "children": [],
          "sourceBlockType": "unsupported"
        },
        {
          "id": "animation-presets-2",
          "heading": "Animation presets",
          "body": [
            "value: 24",
            "unit: presets"
          ],
          "specifications": [],
          "relationships": [],
          "media": [],
          "children": [],
          "sourceBlockType": "unsupported"
        },
        {
          "id": "canvas-frame-time-3",
          "heading": "Canvas frame time",
          "body": [
            "value: <16ms",
            "unit: ms"
          ],
          "specifications": [],
          "relationships": [],
          "media": [],
          "children": [],
          "sourceBlockType": "unsupported"
        }
      ],
      "sourceBlockType": "product_showcase",
      "sourceBlockId": "7b3efd6f-1244-4894-9a97-c8ccafb92ae7"
    },
    {
      "id": "where-design-meets-production-adedeb4d-3585-4b2a-8b3e-1370b0687606",
      "heading": "where-design-meets-production",
      "body": [
        "Where Design Meets Production Traditional design tools produce images. DXP Creative produces deployable artifacts. Every canvas element maps directly to a component in the DXP component system, inheriting responsive behavior, accessibility attributes, and data bindings. The animation engine provides 24 presets covering scroll-triggered reveals, hover interactions, loading states, and micro-animations. Each preset is configurable through easing curves, duration, delay, and trigger conditions — no keyframe timeline knowledge required for common patterns. Design tokens propagate changes from a single source of truth. Change a primary color in the token system and every component, page, and export updates automatically. Tokens cover color palettes, typography scales, spacing systems, border radii, shadows, and motion curves."
      ],
      "specifications": [],
      "relationships": [],
      "media": [],
      "children": [
        {
          "id": "data-viz-1",
          "heading": "data Viz",
          "body": [],
          "specifications": [],
          "relationships": [],
          "media": [],
          "children": [],
          "sourceBlockType": "unsupported"
        }
      ],
      "sourceBlockType": "content_block",
      "sourceBlockId": "adedeb4d-3585-4b2a-8b3e-1370b0687606"
    },
    {
      "id": "creative-design-specifications-28d0dbf4-8ddc-4a5a-be0f-b131e64deb2b",
      "heading": "Creative & Design Specifications",
      "body": [],
      "specifications": [
        {
          "label": "Canvas Rendering",
          "value": "WebGL 2.0 with <16ms frame time at 4K resolution",
          "group": "spec Items"
        },
        {
          "label": "Component Library",
          "value": "56 pre-built, accessible, responsive components",
          "group": "spec Items"
        },
        {
          "label": "Animation Presets",
          "value": "24 configurable presets with custom easing curves",
          "group": "spec Items"
        },
        {
          "label": "Export Formats",
          "value": "React, Vue, Svelte, HTML, CSS, SVG, PNG, PDF",
          "group": "spec Items"
        },
        {
          "label": "Collaboration",
          "value": "Real-time multi-user with CRDT conflict resolution",
          "group": "spec Items"
        },
        {
          "label": "Design Tokens",
          "value": "JSON/YAML token files with Standard design token compatibility",
          "group": "spec Items"
        },
        {
          "label": "Prototyping",
          "value": "Interactive prototypes with state transitions and data binding",
          "group": "spec Items"
        }
      ],
      "relationships": [],
      "media": [],
      "children": [],
      "sourceBlockType": "product_specification",
      "sourceBlockId": "28d0dbf4-8ddc-4a5a-be0f-b131e64deb2b"
    },
    {
      "id": "faq-section-1ce07c6e-24d5-4fe9-94e9-7f6709bc7e41",
      "heading": "faq section",
      "body": [],
      "specifications": [],
      "relationships": [],
      "media": [],
      "children": [
        {
          "id": "section-1-1",
          "heading": "Section 1",
          "body": [
            "How does DXP Creative compare to standalone design tools?",
            "DXP Creative is purpose-built for production output. While standalone tools export static assets that developers must manually translate, DXP Creative exports production-ready components with responsive behavior, accessibility, and data bindings already applied."
          ],
          "specifications": [],
          "relationships": [],
          "media": [],
          "children": [],
          "sourceBlockType": "unsupported"
        },
        {
          "id": "section-2-2",
          "heading": "Section 2",
          "body": [
            "Can I import existing Visual Editor designs?",
            "Yes. DXP Creative supports Visual Editor file import including layers, components, auto-layout, and design tokens. Imported designs are converted to DXP components that can be immediately deployed."
          ],
          "specifications": [],
          "relationships": [],
          "media": [],
          "children": [],
          "sourceBlockType": "unsupported"
        },
        {
          "id": "section-3-3",
          "heading": "Section 3",
          "body": [
            "Do I need to know code to use the animation engine?",
            "No. The 24 animation presets cover common interaction patterns with visual controls for timing, easing, and triggers. For advanced animations, the keyframe editor provides full control over property curves."
          ],
          "specifications": [],
          "relationships": [],
          "media": [],
          "children": [],
          "sourceBlockType": "unsupported"
        },
        {
          "id": "section-4-4",
          "heading": "Section 4",
          "body": [
            "How do design tokens work across teams?",
            "Design tokens are stored as versioned JSON files that propagate across all components, pages, and exports. When a designer updates a token value, every consuming component updates automatically — no manual propagation required."
          ],
          "specifications": [],
          "relationships": [],
          "media": [],
          "children": [],
          "sourceBlockType": "unsupported"
        }
      ],
      "sourceBlockType": "faq_section",
      "sourceBlockId": "1ce07c6e-24d5-4fe9-94e9-7f6709bc7e41"
    },
    {
      "id": "features-5",
      "heading": "features",
      "body": [
        "canvas: true",
        "tokens: true",
        "animation: true",
        "prototyping: true",
        "design to code: true",
        "component library: 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": "modules",
      "targets": [
        {
          "id": "50",
          "family": "modules",
          "name": "Animation Engine",
          "slug": "animation-engine",
          "canonicalUrl": "https://babadook.tech/modules/animation-engine",
          "relationship": "modules"
        },
        {
          "id": "53",
          "family": "modules",
          "name": "Component Library",
          "slug": "component-library",
          "canonicalUrl": "https://babadook.tech/modules/component-library",
          "relationship": "modules"
        },
        {
          "id": "49",
          "family": "modules",
          "name": "Design Canvas",
          "slug": "design-canvas",
          "canonicalUrl": "https://babadook.tech/modules/design-canvas",
          "relationship": "modules"
        },
        {
          "id": "52",
          "family": "modules",
          "name": "Design-to-Code Pipeline",
          "slug": "design-to-code",
          "canonicalUrl": "https://babadook.tech/modules/design-to-code",
          "relationship": "modules"
        },
        {
          "id": "51",
          "family": "modules",
          "name": "Design Token System",
          "slug": "design-token-system",
          "canonicalUrl": "https://babadook.tech/modules/design-token-system",
          "relationship": "modules"
        },
        {
          "id": "54",
          "family": "modules",
          "name": "Prototyping & Interaction",
          "slug": "prototyping-interaction",
          "canonicalUrl": "https://babadook.tech/modules/prototyping-interaction",
          "relationship": "modules"
        }
      ]
    },
    {
      "type": "deployment_types",
      "targets": [
        {
          "id": "38",
          "family": "deployment-type",
          "name": "Cloud (SaaS)",
          "slug": "cloud-saas",
          "relationship": "deployment_types"
        },
        {
          "id": "3",
          "family": "deployment-type",
          "name": "Self-Hosted",
          "slug": "self-hosted",
          "relationship": "deployment_types"
        }
      ]
    }
  ],
  "authors": [],
  "media": [],
  "regulatoryContext": {
    "exportControlAndLicensingReviewRequired": false
  },
  "language": "en",
  "receipt": {
    "sourceBlockCount": 17,
    "projectedBlockCount": 17,
    "sourceValueCount": 51,
    "projectedValueCount": 51,
    "sourceRelationshipCount": 9,
    "projectedRelationshipCount": 9,
    "sourceClaimCount": 0,
    "projectedClaimCount": 0,
    "unknownBlockTypes": [],
    "omittedFields": [],
    "missingValuePaths": [],
    "invalidClaims": [],
    "complete": true
  },
  "contentHash": "9ecc439d90e172dc243615d4c98e6f652a4226306b1186c98cc58f22a755ca9c"
}