phia-design-system - PhiaUI visual design system guidelines
Defines the mandatory PhiaUI visual standards for typography, colors, spacing, layout, icons, motion, accessibility, and responsive components.
Tags
Updated: 2026-10-04Capabilities
Typical Inputs
Typical Outputs
What this skill does
- Define semantic color usage
- Apply typography scales
- Specify component spacing
- Define border radius rules
- Specify elevation levels
- Select Heroicons usage
- Define motion durations
- Apply accessibility patterns
- Specify responsive layouts
Inputs
- Component requirements
- PhiaUI theme files
- Component layout context
- shadcn/ui reference
Outputs
- Visual design specifications
- Component styling guidance
- Accessibility guidance
- Responsive layout guidance
Requirements
- PhiaUI project context
- Tailwind CSS v4
- Semantic theme tokens
- Native PhiaUI icon component