frontend-design-layout

name	Frontend Design & Layout
description	Comprehensive guidelines for creating premium, responsive, and aesthetically pleasing web interfaces.

Frontend Design & Layout Skill

This skill provides a set of standards and best practices for building high-quality web interfaces. Follow these guidelines to ensure consistency, usability, and a premium look and feel.

1. Design Philosophy

• Premium Aesthetics: Aim for a polished, professional look. Avoid generic defaults. Use whitespace effectively to create breathing room.
• "Wow" Factor: The initial impression matters. Use vibrant but harmonious colors, high-quality assets, and smooth animations.
• Dynamic Interface: The UI should feel alive. Use hover states, focus states, and transitions to provide feedback for every interaction.
• Simplicity: deeply complex functionality should be presented simply. Hide complexity behind intuitive interfaces.

2. Technical Stack & Standards

• HTML5: Use semantic elements (<header>, <nav>, <main>, <article>, <footer>, <aside>) to improve accessibility and SEO.
• CSS:
  • Frameworks Allowed: You are free to use modern CSS frameworks like Tailwind CSS, UnoCSS, or others if they improve development speed and consistency.
  • Vanilla CSS: Still acceptable for small components or when lightweight implementation is preferred.
  • Ensure any library usage is properly configured and documented.
• JavaScript/Frameworks:
  • Keep logic separate from presentation where possible.
  • Ensure interactive elements are keyboard accessible.

3. Layout & Responsiveness

• Mobile-First Approach: Design for smaller screens first, then use media queries (min-width) to enhance the layout for larger screens.
• Container System: Use a consistent container max-width for main content to prevent lines from becoming too long on wide screens (e.g., max-width: 1200px; margin: 0 auto;).
• Grid System: Establish a 8pt or 4pt grid system for spacing. Use variables like --space-xs (4px), --space-sm (8px), --space-md (16px), etc.

4. Typography

• Font Selection: Use modern, sans-serif fonts for UI (e.g., Inter, Roboto, Outfit, system-ui) unless a specific brand font is required.
• Hierarchy: distinct typographic hierarchy.
  • H1: Page titles (one per page).
  • H2/H3: Section headings.
  • Body: Readable line-height (1.5 to 1.6).
• Scale: Use a modular scale for font sizes.

5. Colors & Theming

• Palette: Define a semantic color palette.
  • --primary: Main brand color.
  • --secondary: Accents.
  • --surface: Card backgrounds.
  • --background: Page background.
  • --text-main, --text-muted: Content colors.
• Contrast: Ensure sufficient contrast between text and background for accessibility (WCAG AA standard).
• Dark Mode: Implement dark mode using CSS variables.

  :root {
    --bg-color: #ffffff;
    --text-color: #1a1a1a;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg-color: #1a1a1a;
      --text-color: #ffffff;
    }
  }
  

6. Components & Interactivity

• Buttons: Should look clickable. Use shadow or subtle gradients. Add :hover and :active states (e.g., transform: translateY(-1px) on hover).
• Cards: Use subtle shadows (box-shadow) and rounded corners (border-radius) to group related content.
• Transitions: Animate state changes. transition: all 0.2s ease-in-out; is a good default.
• Feedback: Show loading states, success messages, and error alerts clearly.

7. SEO & Accessibility

• Meta Tags: Ensure every page has a unique <title> and <meta name="description">.
• Alt Text: All images must have descriptive alt attributes.
• ARIA: Use ARIA attributes only when semantic HTML isn't enough.
• Forms: Label every input field.

Example: Modern Card Component (CSS)

.card {
  background: var(--surface);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.1); /* For dark mode depth */
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}