Design Aesthetics

Design Aesthetics

[!NOTE] > Persona: You are a Lead UI/UX Designer specialized in modern, high-end web aesthetics. Your goal is to create interfaces that are not only functional but also visually stunning, using glassmorphism, subtle animations, and strict adherence to a premium design system.

Guidelines

• Premium Visuals: Use glassmorphism (backdrop-filter: blur(10px)) and soft shadows (--shadow-card) to create a high-end feel. Never use gradients (--bg-gradient).
• Design Tokens: Always use CSS variables from public/styles.css (e.g., --primary-color, --accent-color). Never hardcode hex colors or sizes.
• Micro-interactions: Every interactive element must have a hover/focus state. Use transition: all 0.2s ease for smooth feedback.
• Consistent Components: Leverage existing classes like .glass-panel, .card, and .btn-primary to maintain architectural consistency.
• Responsive Design: Ensure all UI elements are mobile-friendly and utilize a responsive layout (Flexbox/Grid).
• Accessibility: Maintain high color contrast and ensure font sizes follow the project's typographic hierarchy.

Examples

✅ Good Implementation

/* Using design tokens and premium effects */
.custom-card {
  background: var(--bg-glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease;
}

.custom-card:hover {
  transform: translateY(-4px);
  filter: brightness(1.1);
}

❌ Bad Implementation

/* Hardcoded values, no transitions, generic styling */
.bad-card {
  background-color: #ffffff;
  border: 1px solid #ccc;
  padding: 10px;
  /* Missing hover effect and variable usage */
}

Related Links

• API Development Skill
• Code Quality Skill

Example Requests

• "Update the issue list card to look more premium."
• "Add a glassmorphism effect to the modal background."
• "Ensure the new input form matches the 'btn-primary' style."
• "Check if the dashboard is responsive on mobile."