Frontend Design

Frontend Design

Create distinctive, production-grade interfaces avoiding generic "AI slop" aesthetics.

When to Use

• Building UI with React frameworks (Next.js, Vite, Remix)
• Creating visually distinctive, memorable interfaces
• Implementing accessible components with shadcn/​ui
• Styling with Tailwind CSS v4
• Adding animations and micro-interactions
• Creating visual designs, posters, brand materials

Reference Documentation

Tailwind CSS v4.1

• ./​references/​tailwind/​v4-config.md - Installation, @theme, CSS-first config
• ./​references/​tailwind/​v4-features.md - Container queries, gradients, masks, text shadows
• ./​references/​tailwind/​utilities-layout.md - Display, flex, grid, position
• ./​references/​tailwind/​utilities-styling.md - Spacing, typography, colors, borders
• ./​references/​tailwind/​responsive.md - Breakpoints, mobile-first, container queries

Search: @theme, @container, OKLCH, mask-, text-shadow

shadcn/​ui (CLI v3.6)

• ./​references/​shadcn/​setup.md - Installation, visual styles, component list
• ./​references/​shadcn/​core-components.md - Button, Card, Dialog, Select, Tabs, Toast
• ./​references/​shadcn/​form-components.md - Form, Field, Input Group, 2026 components
• ./​references/​shadcn/​theming.md - CSS variables, OKLCH, dark mode
• ./​references/​shadcn/​accessibility.md - ARIA, keyboard, screen reader

Search: Field, InputGroup, Spinner, ButtonGroup, next-themes

Animation (Motion + Tailwind)

• ./​references/​animation/​motion-core.md - Core API, variants, gestures, layout animations
• ./​references/​animation/​motion-advanced.md - AnimatePresence, scroll, orchestration, TypeScript

Stack:

Visual Design

• ./​references/​canvas/​philosophy.md - Design movements, core principles
• ./​references/​canvas/​execution.md - Multi-page systems, quality standards

For sophisticated compositions: posters, brand materials, design systems.

Design Thinking

Before coding, commit to BOLD aesthetic direction:

• Purpose: What problem? Who uses it?
• Tone: Pick extreme - brutally minimal, maximalist chaos, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, soft/​pastel, industrial
• Differentiation: What makes this UNFORGETTABLE?

Bold maximalism and refined minimalism both work. Key is intentionality.

Anti-Patterns (NEVER)

• Overused fonts: Inter, Roboto, Arial, system fonts, Space Grotesk
• Cliched colors: purple gradients on white
• Predictable layouts and component patterns
• Cookie-cutter design lacking character
• Generic AI-generated aesthetics

Best Practices

1. Accessibility First: Radix primitives, focus states, semantic HTML
2. Mobile-First: Start mobile, layer responsive variants
3. Design Tokens: Use @theme for spacing, colors, typography
4. Dark Mode: Apply dark variants to all themed elements
5. Performance: Automatic CSS purging, avoid dynamic class names
6. TypeScript: Full type safety
7. Expert Craftsmanship: Every detail matters

Core Stack Summary

Tailwind v4.1: CSS-first config via @theme. Single @import "tailwindcss". OKLCH colors. Container queries built-in.

shadcn/​ui v3.6: Copy-paste Radix components. Visual styles: Vega/​Nova/​Maia/​Lyra/​Mira. New: Field, InputGroup, Spinner, ButtonGroup.

Motion: import { motion, AnimatePresence } from 'motion/​react'. Declarative React animations. Use tailwindcss-animate for shadcn states.

Color

Use OKLCH for vivid colors. Dominant colors with sharp accents:

@theme {
  --color-primary-500: oklch(0.55 0.22 264);
  --color-accent: oklch(0.75 0.18 45);
}

Motion

Primary: Motion for React animations. Fallback: CSS @starting-style for simple enter/​exit.

import { motion, AnimatePresence } from 'motion/​react';

// Basic animation
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />

// Exit animations
<AnimatePresence>
  {show && <motion.div exit={{ opacity: 0 }} />}
</​AnimatePresence>

// Layout animations
<motion.div layout />

// Gestures
<motion.button whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} />

CSS fallback (no JS):

dialog[open] {
  opacity: 1;
  @starting-style {
    opacity: 0;
    transform: scale(0.95);
  }
}

Spatial Composition

Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.

Backgrounds

Create atmosphere: gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, grain overlays.