{
  "feature": "typography-system",
  "version": "1.0.0",
  "category": "ui",
  "description": "Define a consistent type scale, font selection, and readability rules that establish clear visual hierarchy and ensure text is readable across all interface sizes and contexts.\n",
  "rules": {
    "establish_type_scale": "Establish a type scale — use a base size (16px) and multiply by consistent ratios (1.125, 1.25, 1.5) for heading sizes",
    "use_good_fonts_with_multiple_weights": "Use good fonts with multiple weights — modern sans-serifs with 3+ weights (regular, medium, bold) are safest defaults",
    "keep_line_length_50_75_chars": "Keep line length between 50-75 characters for optimal readability",
    "align_text_to_baseline": "Align text to baseline, never center-align — readability is worse with center alignment",
    "line_height_proportional_to_measure": "Line-height should be proportional to measure — tighter leading for small text, looser for large",
    "not_every_link_needs_color": "Not every link needs a color — underline or weight change can signal interactivity",
    "align_with_readability_in_mind": "Align with readability in mind — consider visual weight, line-height, letter-spacing together",
    "use_letter_spacing_effectively": "Use letter-spacing effectively — only increase for headlines; body text rarely needs adjustment"
  },
  "outcomes": {
    "new_interface_created": {
      "priority": 1,
      "given": [
        "new interface is created"
      ],
      "then": [
        {
          "action": "create_record",
          "target": "type_scale",
          "type": "type_scale",
          "payload": [
            "base_size",
            "ratio",
            "heading_sizes"
          ]
        },
        {
          "action": "set_field",
          "target": "primary_font",
          "value": "modern_sans_serif_with_3plus_weights"
        },
        {
          "action": "set_field",
          "target": "line_length_max",
          "value": "75 characters"
        }
      ],
      "result": "typography system is established and documented"
    },
    "body_text_rendered": {
      "priority": 2,
      "given": [
        "body text is rendered"
      ],
      "then": [
        {
          "action": "set_field",
          "target": "font_size",
          "value": "16px or larger"
        },
        {
          "action": "set_field",
          "target": "line_height",
          "value": "1.5 to 1.75"
        },
        {
          "action": "set_field",
          "target": "measure",
          "value": "50-75 characters per line"
        },
        {
          "action": "set_field",
          "target": "text_alignment",
          "value": "left_aligned"
        }
      ],
      "result": "text is scannable and readable without eye strain"
    },
    "heading_rendered": {
      "priority": 3,
      "given": [
        "heading is rendered"
      ],
      "then": [
        {
          "action": "set_field",
          "target": "font_size",
          "value": "computed from type scale"
        },
        {
          "action": "set_field",
          "target": "font_weight",
          "value": "600 or bolder"
        },
        {
          "action": "set_field",
          "target": "line_height",
          "value": "1.1 to 1.3"
        }
      ],
      "result": "heading has clear visual distinction from body copy"
    },
    "small_metadata_text": {
      "priority": 4,
      "given": [
        "small metadata or UI text (12px or smaller)"
      ],
      "then": [
        {
          "action": "set_field",
          "target": "line_height",
          "value": "1.4 minimum"
        },
        {
          "action": "set_field",
          "target": "letter_spacing",
          "value": "+0.25px minimum"
        }
      ],
      "result": "small text remains readable and isn't cramped"
    }
  },
  "fields": [
    {
      "name": "base_size",
      "type": "number",
      "label": "Foundation font size (typically 16px for web)",
      "required": false
    },
    {
      "name": "type_scale_ratio",
      "type": "number",
      "label": "Multiplier for heading sizes (e.g., 1.125, 1.25, 1.5)",
      "required": false
    },
    {
      "name": "primary_font_family",
      "type": "text",
      "label": "Primary font name and weights (e.g., Inter 400, 500, 600, 700)",
      "required": false
    },
    {
      "name": "secondary_font_family",
      "type": "text",
      "label": "Optional secondary font for contrast (e.g., serif for displays)",
      "required": false
    },
    {
      "name": "line_length_range",
      "type": "text",
      "label": "Target character count per line (e.g., 50-75)",
      "required": false
    }
  ],
  "tags": [
    "design-system",
    "accessibility",
    "typography"
  ],
  "related": [
    {
      "feature": "visual-hierarchy",
      "type": "required",
      "reason": "Type scale is primary tool for expressing visual hierarchy"
    },
    {
      "feature": "spacing-system",
      "type": "recommended",
      "reason": "Line-height and letter-spacing are part of spacing system"
    },
    {
      "feature": "accessibility",
      "type": "required",
      "reason": "Font size and line-height must support readability for low-vision users"
    },
    {
      "feature": "dark-mode",
      "type": "recommended",
      "reason": "Typography contrast and brightness differ between light and dark modes"
    }
  ],
  "agi": {
    "goals": [
      {
        "id": "reliable_typography_system",
        "description": "Define a consistent type scale, font selection, and readability rules that establish clear visual hierarchy and ensure text is readable across all interface sizes and contexts.\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": "new_interface_created",
          "permission": "supervised"
        },
        {
          "action": "body_text_rendered",
          "permission": "autonomous"
        },
        {
          "action": "heading_rendered",
          "permission": "autonomous"
        },
        {
          "action": "small_metadata_text",
          "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": "accessibility",
          "from": "accessibility",
          "fallback": "degrade"
        }
      ]
    }
  }
}