first commit

source-code/ERP(B-ba)-廠商管理/src/guidelines/Guidelines.md

@@ -0,0 +1,61 @@
+# Design Guidelines
+
+## Buttons
+- Primary actions must use the **filled button** style.
+- Secondary and minor actions must use the **outlined button** style.
+- Destructive actions must use the **error-colored filled button**.
+- Button text must always be short, action-oriented, and use **sentence case**.
+- Maintain sufficient contrast between background and text for accessibility.
+
+## Text Inputs / Form Fields
+- Textfields use **outlined** style by default.
+- Input labels must be descriptive and placed above the field.
+- Placeholder text should not replace labels; use only for contextual hints.
+- Error states must include both **red border** and **error message text** below the field.
+- Form spacing follows a **vertical 16px** rhythm between fields.
+
+## Typography
+- Use consistent text hierarchy: `H1 > H2 > H3 > Body > Caption`.
+- Headlines use **bold**, body text uses **regular**.
+- Avoid using more than **two font sizes** in the same section unless necessary.
+- Never use random font weights; stick to the defined scale.
+
+## Layout & Spacing
+- Use a **4px grid system** for spacing and alignment.
+- Maintain consistent padding within containers: **16px or 24px** depending on context.
+- Align elements using a consistent grid; avoid arbitrary pixel adjustments.
+- Keep section spacing consistent: **24px–40px** between major blocks.
+
+## Components
+- Reuse existing components before creating new ones.
+- Components must keep layout and logic minimal and consistent across pages.
+- Interactive states (hover, active, disabled) must be defined and included.
+- Keep components responsive; avoid fixed widths unless necessary.
+
+## Colors
+- Always use predefined color tokens.
+- Primary color is used only for major actions and branding elements.
+- Neutral colors are used for backgrounds and general UI components.
+- Avoid introducing new hues unless part of the approved token list.
+- Maintain at least **WCAG AA** contrast level for text.
+
+## Icons
+- Icons must follow a consistent stroke or fill style across the project.
+- Use icons only to support text, not replace it (unless universally recognized).
+- Spacing between icon and label: **8px**.
+
+## Navigation
+- Keep navigation consistent across all pages.
+- Highlight the current active state clearly.
+- Avoid deep nesting; keep navigation simple and discoverable.
+
+## Responsiveness
+- Components must be responsive and adapt to smaller screens.
+- Avoid horizontal scrolling; stack components vertically when necessary.
+- Maintain tap-friendly area of **至少 44px** for mobile touch targets.
+
+## Accessibility
+- All interactive elements must有明顯的 hover、active、focus 狀態。
+- Provide alt text for images and icons when needed.
+- Do not rely on color alone to convey information.
+