{
  "$schema_version": 1,
  "$canonical_source": "design-system/Iconography.html",
  "$notes": [
    "Machine-readable inventory of the Swivel icon system.",
    "Material Symbols Outlined is the single icon family. Brand marks (the Swivel S, partner logos) are NOT icons — they live in assets/logo and assets/partners.",
    "Status, object, and concept glyphs are RESERVED: use the named icon for the named meaning. Don't substitute.",
    "When you add a new reserved glyph, update this file and Iconography.html in the same commit."
  ],
  "family": {
    "name": "Material Symbols Outlined",
    "source": "Google Fonts",
    "css_class": "material-symbols-outlined",
    "variation_axes": {
      "opsz": {
        "values": [
          20,
          24
        ],
        "default": 24
      },
      "wght": {
        "range": [
          100,
          700
        ],
        "default": 400
      },
      "FILL": {
        "values": [
          0,
          1
        ],
        "default": 0,
        "meaning": "0 = chrome, 1 = state"
      },
      "GRAD": {
        "range": [
          -25,
          200
        ],
        "default": 0
      }
    },
    "load_url": "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0&display=block"
  },
  "size_scale": [
    {
      "id": "xs",
      "px": 14,
      "context": "Inline chip glyphs (cancel ×, copy). Only where parent text is ≤12px."
    },
    {
      "id": "sm",
      "px": 16,
      "context": "Inline with 14px body text. Field affordances, dropdown carets, table-row hints."
    },
    {
      "id": "md",
      "px": 18,
      "context": "Default. Button-group glyphs, icon buttons, table icons, nav.",
      "default": true
    },
    {
      "id": "lg",
      "px": 22,
      "context": "Alert leading icons, card glyphs, anywhere paired with a title."
    },
    {
      "id": "xl",
      "px": 28,
      "context": "Hero / empty-state / object-detail glyphs. Pairs with display type."
    }
  ],
  "color_usage": [
    {
      "id": "default",
      "token": "--graphite-bg",
      "use": "Neutral affordance — chrome, fields, table actions. ~90% of icons."
    },
    {
      "id": "emphasis",
      "token": "--graphite-base",
      "use": "Active state, selected items, foreground text pairings."
    },
    {
      "id": "nav",
      "token": "--slate-100",
      "use": "Navigation icons, toolbar buttons, table toolbars."
    },
    {
      "id": "accent",
      "token": "--switch-contrast",
      "use": "Sparingly — KPI glyphs, in-product accents that tie to the switch brand."
    },
    {
      "id": "success",
      "token": "--success",
      "fill": 1,
      "use": "Healthy state, deployed, verified."
    },
    {
      "id": "warning",
      "token": "--warning",
      "fill": 1,
      "use": "Degraded, approaching limits."
    },
    {
      "id": "error",
      "token": "--error",
      "fill": 1,
      "use": "Failures, blocking states."
    },
    {
      "id": "info",
      "token": "--info",
      "fill": 1,
      "use": "Neutral notification, sync, progress."
    }
  ],
  "fill_weight": {
    "rule": "Outline = chrome. Fill = state. Don't mix on the same surface unless the fill is carrying meaning.",
    "pairs": [
      {
        "glyph": "check_circle",
        "outline_use": "Affordance",
        "fill_use": "Row is in success state",
        "fill_color": "--success"
      },
      {
        "glyph": "favorite",
        "outline_use": "Off",
        "fill_use": "On — color follows the meaning of 'on'",
        "fill_color": "--error"
      },
      {
        "glyph": "notifications",
        "outline_use": "Bell affordance",
        "fill_use": "Has unread items"
      },
      {
        "glyph": "verified",
        "outline_use": "Trust mark",
        "fill_use": "Object is verified by Swivel",
        "fill_color": "--switch-contrast"
      }
    ]
  },
  "position": {
    "leading": {
      "meaning": "noun",
      "examples": [
        "object-glyph",
        "search",
        "calendar"
      ],
      "gap_px": 8,
      "default_color": "--graphite-bg"
    },
    "trailing": {
      "meaning": "action",
      "examples": [
        "dropdown-caret",
        "dismiss-x",
        "external-link"
      ]
    }
  },
  "accessibility": {
    "decorative_icon_beside_label": {
      "rule": "Always aria-hidden=\"true\" when the label sits next to the icon. AT should hear 'New rule', not 'plus, New rule'.",
      "example": "<span class=\"material-symbols-outlined\" aria-hidden=\"true\">add</span> New rule"
    },
    "icon_only_control": {
      "rule": "Button carries the aria-label; glyph stays hidden so the name isn't doubled.",
      "example": "<button aria-label=\"Delete row\"><span class=\"material-symbols-outlined\" aria-hidden=\"true\">delete</span></button>"
    },
    "contrast": {
      "rule": "All semantic colors clear 4.5:1 against white and the matching -bg token. Never place a colored icon on its own base color (e.g. --success on --success).",
      "default_pair_contrast": "--graphite-bg on --white = 5.4:1"
    },
    "rtl": {
      "flips_in_rtl": [
        "arrow_back",
        "arrow_forward",
        "chevron_right",
        "chevron_left",
        "undo",
        "redo",
        "send"
      ],
      "never_flips": [
        "warning",
        "delete",
        "person",
        "check_circle",
        "info",
        "error"
      ],
      "implementation": ":dir(rtl) { transform: scaleX(-1); }"
    }
  },
  "swivel_objects": [
    {
      "label": "Automation",
      "glyph": "auto_mode",
      "color": "--slate-100"
    },
    {
      "label": "Script",
      "glyph": "terminal",
      "color": "--slate-100"
    },
    {
      "label": "Beacon",
      "glyph": "rocket_launch",
      "fill": 1
    },
    {
      "label": "Proposal",
      "glyph": "description",
      "color": "--slate-100"
    },
    {
      "label": "Creative",
      "glyph": "burst_mode",
      "color": "--slate-100"
    },
    {
      "label": "User",
      "glyph": "person"
    },
    {
      "label": "Agent",
      "glyph": "smart_toy"
    },
    {
      "label": "Organization",
      "glyph": "domain"
    },
    {
      "label": "User activity",
      "glyph": "restore"
    },
    {
      "label": "Buyer",
      "glyph": "handshake",
      "color": "--slate-100"
    },
    {
      "label": "Ad product",
      "glyph": "storefront",
      "color": "--slate-100"
    }
  ],
  "swivel_concepts": [
    {
      "label": "Agent activity",
      "glyph": "sensors",
      "color": "--slate-100"
    },
    {
      "label": "Create / Add",
      "glyph": "add"
    },
    {
      "label": "Agentic buys",
      "glyph": "face_retouching_natural"
    },
    {
      "label": "Dismiss",
      "glyph": "cancel",
      "color": "--error"
    },
    {
      "label": "Delete",
      "glyph": "delete",
      "color": "--error",
      "variation": "FILL 0 · wght 500"
    },
    {
      "label": "Save",
      "glyph": "save"
    },
    {
      "label": "Edit",
      "glyph": "edit",
      "variation": "FILL 1"
    },
    {
      "label": "Success",
      "glyph": "check_circle"
    },
    {
      "label": "Include",
      "glyph": "done",
      "color": "--success"
    },
    {
      "label": "Exclude",
      "glyph": "block",
      "color": "--error"
    },
    {
      "label": "Geo target",
      "glyph": "public"
    },
    {
      "label": "Language",
      "glyph": "language"
    },
    {
      "label": "Explore",
      "glyph": "hub",
      "variation": "FILL 1"
    },
    {
      "label": "Update",
      "glyph": "backup"
    },
    {
      "label": "Warning",
      "glyph": "report_problem"
    },
    {
      "label": "Guaranteed",
      "glyph": "verified"
    },
    {
      "label": "Revert",
      "glyph": "settings_backup_restore"
    },
    {
      "label": "Video",
      "glyph": "videocam",
      "variation": "FILL 1"
    },
    {
      "label": "VAST",
      "glyph": "code"
    },
    {
      "label": "Filter",
      "glyph": "filter_list"
    },
    {
      "label": "Collapse / Expand",
      "glyph": "keyboard_arrow_down"
    },
    {
      "label": "Dropdown menu",
      "glyph": "arrow_drop_down"
    },
    {
      "label": "Dashboard",
      "glyph": "dashboard",
      "color": "--slate-100"
    },
    {
      "label": "Pacing",
      "glyph": "speed",
      "color": "--slate-100"
    },
    {
      "label": "Analytics",
      "glyph": "insights",
      "color": "--slate-100"
    },
    {
      "label": "Table",
      "glyph": "table_chart",
      "color": "--slate-100"
    },
    {
      "label": "Chart",
      "glyph": "insert_chart",
      "color": "--slate-100"
    },
    {
      "label": "Automation manager",
      "glyph": "bolt",
      "color": "--slate-100"
    },
    {
      "label": "Datalake explorer",
      "glyph": "insights",
      "color": "--slate-100"
    },
    {
      "label": "Media buyer",
      "glyph": "shopping_cart",
      "color": "--slate-100"
    },
    {
      "label": "Operator",
      "glyph": "tune",
      "color": "--slate-100"
    },
    {
      "label": "Scripting agent",
      "glyph": "terminal",
      "color": "--slate-100"
    }
  ],
  "status_indicators": {
    "rule": "Fixed glyph + color per state. Render as the bare icon in its semantic color — never wrap in a chip. Never substitute another icon for one of these four meanings.",
    "states": [
      {
        "id": "active",
        "label": "Active / Approved",
        "glyph": "task_alt",
        "color": "--success",
        "fill": 1,
        "meaning": "Object is running, healthy, in-market."
      },
      {
        "id": "pending_approval",
        "label": "Pending approval",
        "glyph": "task_alt",
        "color": "--warning",
        "fill": 1,
        "meaning": "Awaiting an internal sign-off before activation."
      },
      {
        "id": "pending_partner_action",
        "label": "Pending partner action",
        "glyph": "more_horiz",
        "color": "--graphite-bg",
        "fill": 1,
        "meaning": "Blocked on an external partner — not actionable by us."
      },
      {
        "id": "rejected_inactive",
        "label": "Rejected / inactive",
        "glyph": "remove_circle_outline",
        "color": "--error",
        "fill": 0,
        "meaning": "Declined, paused, or otherwise off."
      }
    ]
  },
  "object_chip": {
    "rule": "28×28 square chip — bg token as fill, base token as icon color. For object icons in table type cells and section headers. Never for status — status uses the bare icon in its semantic color.",
    "size_px": 28,
    "border_radius_token": "--radius-sm",
    "color_signal": {
      "neutral": {
        "fill": "--graphite-10",
        "icon": "--graphite-bg",
        "meaning": "Object is healthy and unattended."
      },
      "action_due": {
        "fill_token_pattern": "*-bg",
        "icon_token_pattern": "*",
        "meaning": "Match the fill to the action's urgency, never as decoration — semantic-colored chip = this object needs you."
      }
    }
  },
  "icon_button_sizing": {
    "rule": "Glyph inside is always one step smaller than the button. Hit zone is always at least 40×40, no matter how small the visible button.",
    "sizes": [
      {
        "button_size": "sm",
        "button_px": 24,
        "glyph_px": 16,
        "min_hit_zone_px": 40
      },
      {
        "button_size": "md",
        "button_px": 34,
        "glyph_px": 18,
        "min_hit_zone_px": 40
      },
      {
        "button_size": "lg",
        "button_px": 40,
        "glyph_px": 22,
        "min_hit_zone_px": 40
      }
    ]
  },
  "do_dont": [
    {
      "do": "Use the reserved glyph for the named concept. Same icon everywhere the concept appears."
    },
    {
      "dont": "Substitute another icon for one of the four status meanings."
    },
    {
      "dont": "Mix outlined and filled glyphs on the same surface unless fill is carrying meaning."
    },
    {
      "dont": "Place a colored icon on its own base color (e.g. --success on --success)."
    },
    {
      "dont": "Invent in-between sizes — pick the nearest token in size_scale."
    },
    {
      "dont": "Use the Swivel S mark as a generic icon. It's a brand mark, not an affordance."
    }
  ],
  "canonical_subset": {
    "$note": "The canonical Material Symbols subset for Swivel product UI, passed to the Google Fonts icon_names URL parameter. Design-system showcase pages currently load the full font — keep this subset in sync with what's actually used on production surfaces.",
    "subset_loader_url": "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0..1,0&icon_names=<list>&display=block",
    "icons": [
      "add",
      "arrow_back",
      "arrow_forward",
      "arrow_upward",
      "auto_mode",
      "block",
      "bolt",
      "calendar_today",
      "category",
      "chat",
      "check",
      "check_circle",
      "chevron_right",
      "circle",
      "close",
      "code",
      "dashboard",
      "data_object",
      "delete",
      "download",
      "error",
      "face_retouching_natural",
      "filter_alt",
      "folder",
      "grid_view",
      "help",
      "home",
      "info",
      "insights",
      "list",
      "menu",
      "more_horiz",
      "notifications",
      "palette",
      "person",
      "play_arrow",
      "refresh",
      "rocket_launch",
      "search",
      "settings",
      "share",
      "star",
      "sync",
      "tag",
      "text_fields",
      "timeline",
      "trending_up",
      "tune",
      "upload",
      "videocam",
      "visibility",
      "warning",
      "widgets"
    ],
    "missing_from_subset_but_used_elsewhere": [
      "terminal",
      "description",
      "burst_mode",
      "smart_toy",
      "domain",
      "restore",
      "cancel",
      "save",
      "edit",
      "done",
      "public",
      "language",
      "hub",
      "backup",
      "report_problem",
      "verified",
      "settings_backup_restore",
      "keyboard_arrow_down",
      "arrow_drop_down",
      "filter_list",
      "task_alt",
      "remove_circle_outline",
      "campaign",
      "favorite"
    ]
  },
  "brand_marks": {
    "$note": "Brand marks are NOT icons. They sit alongside Material icons as object identifiers — never as substitutes for affordance icons.",
    "files": {
      "symbol_slate": "assets/logo/swivel-symbol-slate.svg",
      "symbol_switch": "assets/logo/swivel-symbol-switch.svg"
    },
    "inline_usage": {
      "mark_size_px": 16,
      "gap_token": "--space-md",
      "pattern": "[mark · 16px] + object name in meta rows and headers"
    }
  }
}