diff --git a/.impeccable/design.json b/.impeccable/design.json new file mode 100644 index 0000000..a7b7c17 --- /dev/null +++ b/.impeccable/design.json @@ -0,0 +1,162 @@ +{ + "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": "", + "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": "Approved", + "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": "
| Document | Status |
|---|---|
| PO-001 | Pending |