/design-systems

name: design-systems
description: Bold aesthetic direction guidance for web design. Use when making creative decisions about typography, color, motion, spatial composition, and overall visual style. Helps avoid generic "AI slop" aesthetics.

Design Systems Skill

Frameworks for creating distinctive, memorable web designs that avoid generic "AI slop" aesthetics.

Absolute Rules

• **NO EMOJIS**: Never use emojis anywhere in generated content - not in headings, paragraphs, button text, or any other text.

Design Thinking Framework

Before designing, understand the context and commit to a BOLD aesthetic direction:

1. Purpose

• What problem does this design solve?
• Who uses it?
• What action should users take?

2. Tone

Do NOT pick from a fixed list of generic styles. Instead, derive every direction from the site's topic, industry, culture, and audience:

• **Think like a specialist designer** who has been hired for exactly this brief. What visual references would you research? What mood boards would you create? What real-world spaces, objects, materials, or cultural artefacts inform the aesthetic?
• **Ground each direction in the topic**. For a traditional restaurant, directions might explore rustic warmth, refined elegance, or cultural heritage — never brutalist concrete. For a tech startup, directions might explore clean precision, bold disruption, or data-driven minimalism — never cozy farmhouse.
• **Ensure authentic diversity**. The 4 directions should vary meaningfully in color palette, typography, layout approach, and mood — but every one must feel like a plausible, thoughtful design for *this specific type of site*. Diversity comes from exploring different facets of the topic, not from importing unrelated aesthetics.
• **Name each direction specifically**. Titles should reflect the topic-grounded concept (e.g., "Warm Heritage" or "Alpine Elegance" for a Swiss chalet site), not generic labels like "Minimalist" or "Bold".

3. Constraints

• Technical requirements (framework, performance, accessibility)
• Brand guidelines (if any)
• Content requirements

4. Differentiation

What makes this UNFORGETTABLE? What's the one thing someone will remember?

Frontend Aesthetics Guidelines

You tend to converge toward generic, "on distribution" outputs. In frontend design, this creates what users call the "AI slop" aesthetic. Avoid this: make creative, distinctive frontends that surprise and delight.

Typography

Choose fonts that are beautiful, unique, and interesting.

**AVOID (overused/generic):**

• Inter
• Roboto
• Arial
• System fonts
• Space Grotesk (overused by AI)

**PREFER (distinctive choices):**

• Pair a distinctive display font with a refined body font
• Consider: Fraunces, Clash Display, Cabinet Grotesk, Satoshi, Outfit, Syne, DM Serif Display, Playfair Display, Cormorant Garamond, Archivo
• Match font personality to brand (tech: geometric sans; luxury: refined serif; creative: display fonts)
• Unexpected, characterful font choices that elevate the frontend's aesthetics

**Typography scale:**

• Use a consistent scale (1.25 or 1.333 ratio)
• Headings should command attention
• Body text should be comfortable to read (16-18px minimum)

Color & Theme

Commit to a cohesive aesthetic. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.

**Strategies:**

• **Monochromatic with accent**: Single color family + one pop color
• **Complementary contrast**: Two opposing colors (careful with saturation)
• **Analogous harmony**: Adjacent colors on the wheel
• **Dark mode**: Not just inverted - design specifically for dark

**AVOID:**

• Purple gradients on white backgrounds (cliched AI aesthetic)
• Evenly distributed rainbow palettes
• Low-contrast, washed-out schemes
• Generic blue (#007bff) as primary
• Timid, evenly-distributed palettes

**Color proportions:**

• 60% dominant (backgrounds, large areas)
• 30% secondary (containers, sections)
• 10% accent (CTAs, highlights)

Motion & Animation

Motion is a design system element like color and typography — it should be intentional, cohesive, and matched to the site's personality. Prioritize CSS-only solutions.

**Technique palette** — choose from these categories to create a rich, dynamic experience:

| Category | Techniques | |----------|-----------| | Entrance animations | Fade-up, slide-in, scale-up, clip-path reveals — with staggered delays for groups | | Hover/focus transitions | Card lifts, button transforms, underline grows, color shifts, shadow deepens | | Continuous subtle motion | Floating elements, pulsing accents, slow-rotating decorative shapes, gradient shifts | | Scroll-triggered reveals | Sections/elements animate as they enter the viewport | | Background animation | Gradient color cycling, pattern movement, ambient drift | | Text effects | Letter-spacing transitions, weight shifts, color wipes on headings |

**CSS animation patterns:**

/* Staggered fade-up entrance */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.6s ease forwards;
}
.fade-up:nth-child(1) { animation-delay: 0.1s; }
.fade-up:nth-child(2) { animation-delay: 0.2s; }
.fade-up:nth-child(3) { animation-delay: 0.3s; }
.fade-up:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Slide-in from side */
.slide-in-left {
  opacity: 0;
  transform: translateX(-40px);
  animation: slideInLeft 0.7s ease forwards;
}
@keyframes slideInLeft {
  to { opacity: 1; transform: translateX(0); }
}

/* Scale reveal */
.scale-up {
  opacity: 0;
  transform: scale(0.9);
  animation: scaleUp 0.5s ease forwards;
}
@keyframes scaleUp {
  to { opacity: 1; transform: scale(1); }
}

/* Continuous float — decorative elements */
.float {
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Gradient background animation */
.gradient-