ForgeFlow-ERP/.impeccable/design.json

{
  "schemaVersion": 2,
  "generatedAt": "2026-06-12T00:00:00+08:00",
  "title": "Design System: ForgeFlow ERP",
  "extensions": {
    "colorMeta": {
      "canvas": {
        "role": "neutral",
        "displayName": "ERP Canvas",
        "canonical": "#f0f2f5",
        "tonalRamp": ["#ffffff", "#f5f7fb", "#f0f2f5", "#e9edf3"]
      },
      "surface": {
        "role": "neutral",
        "displayName": "Work Surface",
        "canonical": "#ffffff",
        "tonalRamp": ["#ffffff", "#fbfdff", "#f8fafc"]
      },
      "primary": {
        "role": "primary",
        "displayName": "Operational Blue",
        "canonical": "#409eff",
        "tonalRamp": ["#ecf5ff", "#d9ecff", "#409eff", "#2563eb"]
      },
      "success": {
        "role": "semantic",
        "displayName": "Pass Green",
        "canonical": "#67c23a",
        "tonalRamp": ["#f0f9eb", "#e1f3d8", "#67c23a"]
      },
      "warning": {
        "role": "semantic",
        "displayName": "Review Amber",
        "canonical": "#e6a23c",
        "tonalRamp": ["#fdf6ec", "#faecd8", "#e6a23c"]
      },
      "danger": {
        "role": "semantic",
        "displayName": "Stop Red",
        "canonical": "#f56c6c",
        "tonalRamp": ["#fef0f0", "#fde2e2", "#f56c6c"]
      }
    },
    "typographyMeta": {
      "title": {
        "displayName": "Title",
        "purpose": "Panel and drawer titles inside authenticated product screens."
      },
      "body": {
        "displayName": "Body",
        "purpose": "Chinese-first operational UI text, descriptions, and table cells."
      },
      "label": {
        "displayName": "Label",
        "purpose": "Field labels, chips, table headers, and compact metadata."
      }
    },
    "shadows": [
      {
        "name": "low-surface",
        "value": "0 6px 16px rgba(31, 45, 61, 0.08), 0 1px 2px rgba(31, 45, 61, 0.06)",
        "purpose": "Tables, compact repeated cards, and low emphasis containers."
      },
      {
        "name": "panel-surface",
        "value": "0 12px 28px rgba(31, 45, 61, 0.12), 0 3px 8px rgba(31, 45, 61, 0.08)",
        "purpose": "Main panels and large workflow containers."
      },
      {
        "name": "floating-surface",
        "value": "0 20px 46px rgba(31, 45, 61, 0.16), 0 8px 18px rgba(31, 45, 61, 0.1)",
        "purpose": "Drawers, dropdowns, popovers, and overlays."
      }
    ],
    "motion": [
      {
        "name": "fast-state",
        "value": "140ms ease",
        "purpose": "Small button, link, and row hover feedback."
      },
      {
        "name": "normal-state",
        "value": "220ms cubic-bezier(0.2, 0.8, 0.2, 1)",
        "purpose": "Drawer and panel state transitions."
      }
    ],
    "breakpoints": [
      {
        "name": "tablet",
        "value": "860px"
      },
      {
        "name": "desktop-collapse",
        "value": "1180px"
      }
    ]
  },
  "components": [
    {
      "name": "Primary Button",
      "kind": "button",
      "refersTo": "button-primary",
      "description": "Main action button for saving, creating, and confirming high-value ERP actions.",
      "html": "<button class=\"ds-btn-primary\">Save document</button>",
      "css": ".ds-btn-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px; border: 1px solid #409eff; border-radius: 12px; background: #409eff; color: #ffffff; font: 700 13px/1 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif; cursor: pointer; transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease; } .ds-btn-primary:hover { background: #2563eb; border-color: #2563eb; } .ds-btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18); }"
    },
    {
      "name": "Status Badge",
      "kind": "chip",
      "refersTo": "status-primary",
      "description": "Compact semantic status label used across tables and detail drawers.",
      "html": "<span class=\"ds-status\"><span></span>Approved</span>",
      "css": ".ds-status { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 8px; border: 1px solid #d9ecff; border-radius: 4px; background: #ecf5ff; color: #409eff; font: 600 12px/1.45 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif; white-space: nowrap; } .ds-status span { width: 6px; height: 6px; border-radius: 999px; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent); }"
    },
    {
      "name": "Data Table Container",
      "kind": "custom",
      "refersTo": "table-container",
      "description": "Scrollable table frame with sticky headers for dense ERP records.",
      "html": "<div class=\"ds-table\"><table><thead><tr><th>Document</th><th>Status</th></tr></thead><tbody><tr><td>PO-001</td><td>Pending</td></tr></tbody></table></div>",
      "css": ".ds-table { overflow: auto; border: 1px solid rgba(209, 218, 232, 0.96); border-radius: 16px; background: #ffffff; box-shadow: 0 6px 16px rgba(31, 45, 61, 0.08), 0 1px 2px rgba(31, 45, 61, 0.06); } .ds-table table { width: 100%; border-collapse: separate; border-spacing: 0; font: 14px/1.45 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif; } .ds-table th { position: sticky; top: 0; background: #f8fbff; color: #334155; font-size: 12px; font-weight: 750; text-align: left; } .ds-table th, .ds-table td { padding: 12px; border-bottom: 1px solid #ebeef5; } .ds-table td { color: #42526b; }"
    }
  ],
  "narrative": {
    "northStar": "The Clear Production Desk",
    "overview": "ForgeFlow ERP is a clear, light, high-density operational interface for a hardware manufacturing company. It should help users trace orders, materials, batches, operations, documents, and costs without visual noise.",
    "keyCharacteristics": [
      "Light routine ERP surfaces",
      "Restrained blue action and selection language",
      "Chinese-first practical product typography",
      "Tables, drawers, forms, and status badges as core vocabulary",
      "Formal document visuals only for business documents"
    ],
    "rules": [
      {
        "name": "The Blue Rarity Rule",
        "body": "Blue identifies current position and next action; it is not broad decoration.",
        "section": "colors"
      },
      {
        "name": "The Fixed Scale Rule",
        "body": "Product screens use fixed UI type sizes, not fluid hero headings.",
        "section": "typography"
      },
      {
        "name": "The One Depth Signal Rule",
        "body": "Do not stack thick borders, large radius, glossy gradients, and heavy shadow on one element.",
        "section": "elevation"
      }
    ],
    "dos": [
      "Do keep routine ERP screens light, restrained, and table-first.",
      "Do standardize table, drawer, form, status badge, pagination, and action button behavior before styling individual pages.",
      "Do provide loading, empty, error, no-permission, disabled, saving, and archive-failed states for critical flows."
    ],
    "donts": [
      "Don't make screens look obviously AI-generated through generic card grids, decorative gradients, glass effects, or ornamental animation.",
      "Don't use side accent borders greater than 1px on cards or callouts.",
      "Don't let old dark industrial styling bleed into everyday ERP work screens."
    ]
  }
}