ForgeFlow-ERP/DESIGN.md

name	description	colors	typography	rounded	spacing	components
ForgeFlow ERP	A clear operational ERP interface for hardware manufacturing workflows.	canvas canvas-soft surface surface-subtle text text-strong text-soft text-muted line line-strong primary primary-deep primary-soft info success warning orange danger #f0f2f5 #f5f7fb #ffffff #fbfdff #303133 #15202b #606266 #909399 #ebeef5 #d9e1ec #409eff #2563eb #ecf5ff #0ea5e9 #67c23a #e6a23c #d97706 #f56c6c	title body label fontFamily fontSize fontWeight lineHeight letterSpacing Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif 18px 700 1.35 0 fontFamily fontSize fontWeight lineHeight letterSpacing Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif 14px 400 1.55 0 fontFamily fontSize fontWeight lineHeight letterSpacing Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif 12px 600 1.3 0	xs sm md lg panel 4px 8px 10px 12px 14px	xs sm md lg xl 6px 8px 12px 16px 24px	button-primary button-secondary status-success status-primary table-container backgroundColor textColor rounded padding height {colors.primary} {colors.surface} {rounded.lg} 0 14px 38px backgroundColor textColor rounded padding height {colors.surface} {colors.text-soft} {rounded.lg} 0 14px 38px backgroundColor textColor rounded padding #f0f9eb {colors.success} {rounded.xs} 2px 8px backgroundColor textColor rounded padding {colors.primary-soft} {colors.primary} {rounded.xs} 2px 8px backgroundColor textColor rounded padding {colors.surface} {colors.text-soft} 16px 0

Design System: ForgeFlow ERP

1. Overview

Creative North Star: "The Clear Production Desk"

ForgeFlow ERP should feel like a clean production desk in a busy hardware factory: the work is dense, the stakes are real, and the interface keeps records, batches, orders, and responsibilities easy to read. The system is product-first, so familiarity is a feature. It should look mature enough for daily operational use, not like a marketing page or a visual experiment.

The current codebase contains two visual histories: an older dark industrial theme and a newer light admin theme. The light admin theme is the direction to preserve for routine ERP screens. Dark, animated, highly decorative industrial styling may remain on the login screen or special showcase surfaces, but it should not define ordinary data-entry, table, and workflow pages.

Key Characteristics:

• Light, calm, high-density operational surfaces.
• Blue primary actions used sparingly for current selection and key commands.
• Chinese-first typography using a practical system sans stack.
• Table, drawer, form, pagination, and status components as the core vocabulary.
• Formal paper-like styling only for archived business documents and document entry flows.

2. Colors

The palette is a restrained light ERP system: neutral surfaces carry most of the product, with blue reserved for action, selection, and traceability.

Primary

• Operational Blue (#409eff): current admin accent for active pagination, selected states, focus, and primary actions.
• Trace Blue (#2563eb): stronger blue already present in --ui-steel; use for focus rings, high-emphasis primary actions, and cross-record traceability.

Secondary

• Process Cyan (#0ea5e9): supporting process and information accents; do not use as broad decoration.
• Pass Green (#67c23a): success and completed states.
• Review Amber (#e6a23c): warning, pending review, and attention states.
• Stop Red (#f56c6c): destructive, failed, or blocked states.

Neutral

• ERP Canvas (#f0f2f5): app shell background.
• Work Surface (#ffffff): panels, forms, tables, and drawer bodies.
• Soft Surface (#fbfdff): subtle table and card gradients.
• Main Ink (#303133): default text.
• Soft Ink (#606266): secondary text and metadata.
• Muted Ink (#909399): placeholders and disabled text; verify contrast before using on tinted backgrounds.
• Hairline (#ebeef5): table and form dividers.

Named Rules

The Blue Rarity Rule. Blue should identify where the user is and what they can do next. It should not be used as a decorative wash across every panel.

The Light Admin Rule. Routine ERP screens use light surfaces. Dark industrial styling is reserved for login or explicitly staged visual moments.

3. Typography

Display Font: The product should avoid a separate display face inside authenticated screens. Body Font: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif. Label/Mono Font: No separate mono font is established; codes and batch numbers use the body stack unless a future token is introduced.

Character: Practical Chinese UI typography with a tight product scale. The interface should feel easy to scan in tables and drawers, not editorial or poster-like.

Hierarchy

• Title (700, 18px, 1.35): panel titles, drawer titles, key page headers.
• Section Title (700, 15-16px, 1.35): form sections, table group headings, workflow blocks.
• Body (400-500, 14px, 1.55): operational copy, descriptions, table cells.
• Table Header (750, 12px, 1.25): sticky table headers and sortable labels.
• Label (600, 12-13px, 1.3): field labels, tags, chips, small controls.

Named Rules

The Fixed Scale Rule. Product screens use fixed rem or px sizes, not fluid hero typography. Large clamp() headings are only acceptable on intentionally staged login or overview pages.

The No Display Labels Rule. Buttons, labels, chips, table headers, and drawer metadata use the product sans stack only.

4. Elevation

The current system uses a hybrid of tonal layering, borders, and shadows. The desired direction is flatter by default: panels and tables should rely on background contrast, dividers, and light shadows. High shadows are reserved for drawers, popovers, dropdowns, and active overlays.

Shadow Vocabulary

• Low Surface (0 6px 16px rgba(31, 45, 61, 0.08), 0 1px 2px rgba(31, 45, 61, 0.06)): tables, small cards, summary blocks.
• Panel Surface (0 12px 28px rgba(31, 45, 61, 0.12), 0 3px 8px rgba(31, 45, 61, 0.08)): main panels and large cards.
• Floating Surface (0 20px 46px rgba(31, 45, 61, 0.16), 0 8px 18px rgba(31, 45, 61, 0.1)): drawers, popovers, menus, and temporary overlays.
• Focus Ring (0 0 0 3px rgba(37, 99, 235, 0.18)): keyboard focus and active form controls.

Named Rules

The One Depth Signal Rule. Do not pair thick borders, large radius, glossy gradients, and heavy shadow on the same element. Pick the depth signal that best explains the state.

5. Components

Buttons

• Shape: 10-12px for normal buttons; full pill only for tags and compact chips.
• Primary: solid blue or restrained blue treatment, 38px default height, 8px icon/text gap.
• Hover / Focus: small state feedback only. Avoid decorative gradient sweeps and heavy lift.
• Secondary / Ghost: white or subtle neutral surface with border, no large shadow.
• Danger: red text or soft red background; reserve filled red for destructive confirmation.

Chips

• Style: compact pill tags for metadata and statuses, with neutral or semantic tint.
• State: selected chips may use blue text and soft blue background. Inactive chips should stay neutral.

Cards / Containers

• Corner Style: 12-14px for panels and repeated cards.
• Background: white to soft white gradients are acceptable when subtle.
• Shadow Strategy: low or panel surface only; avoid decorative ghost-card combinations.
• Border: 1px neutral border. Avoid colored side stripes.
• Internal Padding: 16-24px depending on density.

Inputs / Fields

• Style: white or very light background, 1px neutral border, 10-12px radius.
• Focus: blue focus ring and border shift.
• Error / Disabled: semantic color plus text; do not rely on color alone.
• Density: dense but readable. Long business forms should use sections, sticky actions, and progressive disclosure.

Tables

• Style: sticky headers, clear row dividers, horizontal overflow containment, and explicit wide/overview modes.
• Header: 12px semibold/demibold, neutral ink, sticky top.
• Cells: 14px body text, ellipsis only when the full value is available through tooltip, drawer detail, or export.
• Actions: fixed-width action column with consistent icon/button vocabulary.

Drawers

• Style: use one drawer vocabulary for business editing and details. Headers include title, optional context tag, and a single close action.
• Sizes: normal, wide, xl, fullscreen. Use fullscreen only when the workflow genuinely needs table-scale comparison.
• State: every drawer form needs saving, success, error, disabled, and unsaved-change handling.

Navigation

• Style: left workflow navigation plus top breadcrumb and visited tags.
• Active State: active route should be obvious through background, text weight, and an icon or indicator, not a thick decorative stripe.
• Collapsed State: icon-only navigation must preserve tooltips and avoid layout width animations.

Signature Component: Formal Documents

Formal document styling is allowed for sales orders, purchase orders, warehouse operations, quality inspection, and archived PDFs. It should look like a real operational document: grid lines, document number, signatures, archive status, and readable paper tone. Do not apply this paper treatment to ordinary dashboards or master-data maintenance.

6. Do's and Don'ts

Do:

• Do keep routine ERP screens light, restrained, and table-first.
• Do use blue for primary actions, selected route/page state, focus, and traceability.
• Do standardize table, drawer, form, status badge, pagination, and action button behavior before styling individual pages.
• Do preserve dense information where users compare orders, batches, quantities, costs, and statuses.
• Do provide loading, empty, error, no-permission, disabled, saving, and archive-failed states for critical flows.
• Do keep formal paper styling scoped to business documents and PDF archive flows.

Don't:

• Don't make screens look obviously AI-generated through generic card grids, decorative gradients, glass effects, or ornamental animation.
• Don't use border-left or border-right greater than 1px as colored accents on cards or callouts.
• Don't combine a 1px border with a large soft shadow on every card or button.
• Don't use 24px+ card radii on routine product UI.
• Don't let old dark industrial styling bleed into everyday ERP work screens.
• Don't show raw English enum codes in business UI.
• Don't hide long table values with ellipsis unless the complete value remains accessible.