/style

Apply styling to a component using the project's design system and styling approach.

Steps

1. Identify the project's styling approach: 2. Review the component's visual requirements: 3. Apply base styles: 4. Add interactive states: 5. Add responsive behavior: 6. Add dark mode support if the project uses themes. 7. Verify visual consistency with existing components.

Format

Component: <name>
Styling: <approach used>
Tokens Used: <colors, spacing, typography>
Breakpoints: <responsive behavior>

Rules

• Use design tokens instead of hardcoded values.
• Follow the project's naming conventions for CSS classes.
• Ensure sufficient color contrast (WCAG AA: 4.5:1 ratio).