62 lines
2.7 KiB
Markdown
62 lines
2.7 KiB
Markdown
# 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.
|
||
|