frontend-design-system

name	frontend-design-system
description	Generate production-grade UI components with visual style systems, color palettes, typography, and responsive layouts. Use when the user asks to build UI, create a landing page, design a component, generate a hero section, or wants frontend design help with styling and layout.
version	1.0.0
tools	["Read","Write","Bash"]

Frontend Design System

Generate cohesive, production-grade frontend code with matched design tokens, accessible components, and responsive layouts.

Workflow

1. Understand the request Read the user's UI description. Identify:

   • Page type: landing page, dashboard, form, card grid, documentation, blog, SaaS app
   • Visual mood: professional, playful, bold, calm, luxury, technical
   • Framework: React (default), Vue, Svelte, or vanilla HTML/CSS
   • CSS approach: Tailwind (default), CSS Modules, or plain CSS

2. Select a visual style mode Based on the mood, pick one:

   Mode	Character
   Minimalist	White space, thin lines, muted palette
   Brutalist	Raw, bold borders, monospace, high contrast
   Glassmorphism	Blur backgrounds, transparency, gradients
   Neumorphic	Soft shadows, light/dark depth, rounded
   Dark Corporate	Deep navy/charcoal, accent highlights
   Soft Gradient	Pastel gradients, rounded corners, airy
   Neobrutalist	Thick borders, offset shadows, bright colors
   Clean SaaS	Light bg, blue/indigo accents, tight spacing
   Editorial	Serif headings, generous whitespace, type-driven
   Cyberpunk	Neon accents, dark bg, glitch effects
   Nature/Organic	Earth tones, soft edges, natural textures
   Playful	Bright colors, bouncy shapes, fun typography

3. Generate the color palette Create a semantic palette with 6-8 tokens:

   :root {
     --color-primary: /* main brand color */;
     --color-primary-hover: /* darker variant */;
     --color-secondary: /* complementary accent */;
     --color-background: /* page background */;
     --color-surface: /* card/panel background */;
     --color-text: /* primary text */;
     --color-text-muted: /* secondary text */;
     --color-border: /* dividers, outlines */;
     --color-success: /* #22c55e or variant */;
     --color-warning: /* #f59e0b or variant */;
     --color-error: /* #ef4444 or variant */;
   }
   

4. Select typography pairing Pick from these proven pairings:

   • Inter + JetBrains Mono — Modern SaaS, clean and readable
   • Outfit + Space Mono — Tech-forward, slightly geometric
   • DM Sans + DM Serif Display — Editorial, warm contrast
   • Plus Jakarta Sans + Instrument Serif — Luxury editorial
   • Space Grotesk + IBM Plex Mono — Brutalist, monospace accent
   • Nunito + Fira Code — Friendly, rounded, developer-oriented

5. Generate the component(s) Build complete, responsive components:

   • Use semantic HTML (section, nav, article, aside, header, footer)
   • Include ARIA labels and roles for accessibility
   • Support dark mode via prefers-color-scheme or class toggle
   • Use CSS Grid/Flexbox for layout (never floats)
   • Mobile-first responsive breakpoints: 640px, 768px, 1024px, 1280px
   • Include hover, focus, and active states for all interactive elements

6. Add design tokens as CSS variables Output all tokens at the top of the CSS so they can be easily customized:

   :root {
     --radius-sm: 0.375rem;
     --radius-md: 0.5rem;
     --radius-lg: 0.75rem;
     --radius-full: 9999px;
     --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05);
     --shadow-md: 0 4px 6px rgb(0 0 0 / 0.07);
     --shadow-lg: 0 10px 15px rgb(0 0 0 / 0.1);
     --spacing-xs: 0.25rem;
     --spacing-sm: 0.5rem;
     --spacing-md: 1rem;
     --spacing-lg: 1.5rem;
     --spacing-xl: 2rem;
     --spacing-2xl: 3rem;
     --transition-fast: 150ms ease;
     --transition-normal: 250ms ease;
   }
   

Rules

• Never use inline styles — always use CSS classes or styled components
• Every color must be a CSS variable so themes can be swapped
• Always include dark mode support
• All interactive elements must have visible focus indicators
• Font sizes must use rem units, not px
• Spacing must use the spacing scale, not arbitrary pixel values
• Generate complete, runnable code — no placeholders like "add your styles here"
• Include a brief design rationale comment at the top explaining the chosen style
• If the user's framework is unspecified, default to React + Tailwind CSS

Example Output Structure

/* Design System: Clean SaaS style
   Palette: Indigo primary, slate neutrals
   Typography: Inter + JetBrains Mono */

:root {
  --color-primary: #4f46e5;
  /* ... full token set ... */
}

/* Component styles follow... */