{
  "feature": "spacing-system",
  "version": "1.0.0",
  "category": "ui",
  "description": "Define a consistent spacing and sizing scale using mathematical ratios so components are visually balanced, grouping is clear, and whitespace reinforces information hierarchy.\n",
  "rules": {
    "start_with_too_much_white_space": "Start with too much white space — conservative spacing always looks better than cramped layouts",
    "establish_spacing_and_sizing_system": "Establish a spacing and sizing system — use a base unit (4px, 8px) and multiply by scale (1, 2, 3, 4, 6, 8, 12...)",
    "dont_have_to_fill_whole_screen": "You don't have to fill the whole screen — avoid stretching content to viewport width; use containers",
    "grids_are_overrated": "Grids are overrated — align by rhythm and intent, not arbitrary grids",
    "relative_sizing_doesnt_scale": "Relative sizing doesn't scale — use absolute units in system, scale responsively in breakpoints",
    "avoid_ambiguous_spacing": "Avoid ambiguous spacing — every gap between elements should be intentional and expressed in system"
  },
  "outcomes": {
    "interface_design_begins": {
      "priority": 1,
      "given": [
        "interface design begins"
      ],
      "then": [
        {
          "action": "create_record",
          "target": "spacing_scale",
          "type": "spacing_scale",
          "payload": [
            "base_unit",
            "scale_values"
          ]
        },
        {
          "action": "set_field",
          "target": "base_unit",
          "value": "4px or 8px"
        },
        {
          "action": "set_field",
          "target": "scale_multiples",
          "value": "[1, 2, 3, 4, 6, 8, 12, 16]"
        }
      ],
      "result": "spacing scale is defined and enforced across all components"
    },
    "two_elements_adjacent": {
      "priority": 2,
      "given": [
        "two elements are adjacent in interface"
      ],
      "then": [
        {
          "action": "set_field",
          "target": "gap_size",
          "value": "value from established scale"
        }
      ],
      "result": "no ambiguous spacing; every gap is intentional"
    },
    "content_container_sized": {
      "priority": 3,
      "given": [
        "content container is sized"
      ],
      "then": [
        {
          "action": "set_field",
          "target": "max_width",
          "value": "calculated from typography (measure)"
        },
        {
          "action": "set_field",
          "target": "horizontal_padding",
          "value": "from spacing scale"
        }
      ],
      "result": "content is readable and respects typography measure"
    },
    "related_content_grouped": {
      "priority": 4,
      "given": [
        "related content is grouped"
      ],
      "then": [
        {
          "action": "set_field",
          "target": "internal_spacing",
          "value": "tighter spacing (1-2x base unit)"
        },
        {
          "action": "set_field",
          "target": "external_spacing",
          "value": "looser spacing (4-6x base unit)"
        }
      ],
      "result": "visual grouping is clear without explicit borders or backgrounds"
    }
  },
  "fields": [
    {
      "name": "base_unit",
      "type": "number",
      "label": "Foundation spacing unit in pixels (4px or 8px)",
      "required": false
    },
    {
      "name": "scale_multipliers",
      "type": "text",
      "label": "Sequence of scale values (e.g., 1, 2, 3, 4, 6, 8, 12, 16)",
      "required": false
    },
    {
      "name": "container_max_width",
      "type": "number",
      "label": "Maximum content width in pixels (calculated from type measure)",
      "required": false
    },
    {
      "name": "gutter_width",
      "type": "number",
      "label": "Horizontal spacing inside containers",
      "required": false
    }
  ],
  "tags": [
    "design-system",
    "layout",
    "accessibility"
  ],
  "related": [
    {
      "feature": "visual-hierarchy",
      "type": "required",
      "reason": "Spacing reinforces hierarchy through grouping and visual weight"
    },
    {
      "feature": "typography-system",
      "type": "required",
      "reason": "Type measure determines ideal container width for readability"
    },
    {
      "feature": "responsive-design",
      "type": "recommended",
      "reason": "Spacing scale scales responsively across viewport breakpoints"
    },
    {
      "feature": "container-layouts",
      "type": "recommended",
      "reason": "Spacing system is applied within container layout patterns"
    }
  ],
  "agi": {
    "goals": [
      {
        "id": "reliable_spacing_system",
        "description": "Define a consistent spacing and sizing scale using mathematical ratios so components are visually balanced, grouping is clear, and whitespace reinforces information hierarchy.\n",
        "success_metrics": [
          {
            "metric": "success_rate",
            "target": ">= 99%",
            "measurement": "Successful operations divided by total attempts"
          },
          {
            "metric": "error_rate",
            "target": "< 1%",
            "measurement": "Failed operations divided by total attempts"
          }
        ],
        "constraints": []
      }
    ],
    "autonomy": {
      "level": "semi_autonomous"
    },
    "safety": {
      "action_permissions": [
        {
          "action": "interface_design_begins",
          "permission": "autonomous"
        },
        {
          "action": "two_elements_adjacent",
          "permission": "autonomous"
        },
        {
          "action": "content_container_sized",
          "permission": "autonomous"
        },
        {
          "action": "related_content_grouped",
          "permission": "autonomous"
        }
      ]
    },
    "tradeoffs": [
      {
        "prefer": "accessibility",
        "over": "aesthetics",
        "reason": "UI must be usable by all users including those with disabilities"
      }
    ],
    "coordination": {
      "protocol": "request_response",
      "consumes": [
        {
          "capability": "visual_hierarchy",
          "from": "visual-hierarchy",
          "fallback": "degrade"
        },
        {
          "capability": "typography_system",
          "from": "typography-system",
          "fallback": "degrade"
        }
      ]
    }
  }
}