Design Skill
Overview
Visual design system including colors, typography, spacing, animations, and Tailwind CSS configuration.
When to Use
- •Styling components with consistent design tokens
- •Creating responsive layouts
- •Adding animations and transitions
- •Maintaining visual consistency across pages
- •Using the design system colors and typography
Key Files
- •Guide:
DESIGN.md(in this directory) - •Config:
tailwind.config.ts - •Global Styles:
app/globals.css - •Components:
components/(examples of styled components)
Design Tokens
Colors
- •Primary: Blue (#2563eb)
- •Secondary: Purple (#9333ea)
- •Accent: Orange (#f59e0b)
- •Neutral: Gray scale (50-950)
- •Success/Warning/Error: Semantic colors
- •Dark Mode: Support via Tailwind dark: prefix
Typography
- •Font Family: Inter (sans-serif)
- •Sizes: 12px (xs) to 48px (4xl)
- •Line Heights: Proper spacing for readability
- •Font Weights: Regular (400), Medium (500), Bold (700)
Spacing
- •8px Grid System: 4, 8, 12, 16, 24, 32, 40, 48px
- •Padding/Margin: Use Tailwind classes (p-4, m-8, etc.)
Animations
- •Transitions: Smooth easing for interactions
- •Durations: 200ms (quick), 300ms (standard), 500ms (slow)
Output
When generating styled code:
- •Use Tailwind utility classes only
- •Reference design system colors (primary, secondary, accent)
- •Follow 8px grid system for spacing
- •Use semantic color variables
- •Add responsive design with sm:, md:, lg: breakpoints
- •Include smooth transitions for interactions
- •Maintain consistent visual hierarchy