# 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.