2.7 KiB
2.7 KiB
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.