Backstage Style Web Generator

Overview

Create professional, enterprise-grade web applications using the Backstage Design System. This skill generates modern React applications with TypeScript, featuring comprehensive UI components, dark/light theme support, responsive design, and accessibility-first patterns. Perfect for building admin dashboards, developer tools, internal applications, and data management interfaces.

Backstage Design System Implementation Guide

Core Architecture Overview

The Backstage Design System is built on modern React patterns and industry-standard libraries:

Technology Stack

• React 18+ with TypeScript
• Radix UI Primitives for accessible, headless components
• Tailwind CSS for utility-first styling
• Class Variance Authority (CVA) for type-safe component variants
• React Hook Form with Zod validation
• Lucide React for consistent iconography

Key Design Principles

1. Accessibility First: Built on Radix UI primitives with ARIA support
2. Type Safety: Full TypeScript coverage with strict typing
3. Composability: Components designed for flexible composition
4. Consistency: Unified design tokens and patterns
5. Performance: Optimized for bundle size and runtime performance

Component Architecture Patterns

1. Compound Components

Components are designed with multiple sub-components for maximum flexibility:

// Card component structure
<Card>
  <CardHeader>
    <CardTitle>Title</CardTitle>
    <CardDescription>Description</CardDescription>
    <CardAction>Action buttons</CardAction>
  </CardHeader>
  <CardContent>
    Main content
  </CardContent>
  <CardFooter>
    Footer content
  </CardFooter>
</Card>

2. Variant-Based Styling

Using CVA for type-safe, predictable component variants:

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input bg-background hover:bg-accent",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
);

3. Data Attributes for Styling

Consistent use of data attributes for component identification and styling:

<div
  data-slot="card"
  className="bg-card text-card-foreground rounded-lg border"
>
  <div data-slot="card-header">
    {/* Header content */}
  </div>
</div>

Theme System Implementation

1. Color Architecture

Brand Colors (11-step scale)

:root {
  --brand-050: #F5F1F0;  /* 最浅背景色 */
  --brand-100: #E9DDDB;  /* Hover background / light tint */
  --brand-200: #D6BEBB;  /* Soft background */
  --brand-300: #B78F8A;  /* Subtle brand tint */
  --brand-400: #94635E;  /* Hover / outline */
  --brand-500: #6A4040;  /* Primary brand color */
  --brand-600: #5B3535;  /* Active / pressed */
  --brand-700: #4C2D2D;  /* Stronger contrast */
  --brand-800: #3E2525;  /* Deep background */
  --brand-900: #2E1C1C;  /* Text on light */
  --brand-950: #1C1010;  /* Text on dark / darkest tone */
}

Semantic Color Tokens

:root {
  /* === Light Mode === */
  --background: hsl(48, 33%, 98%);
  --foreground: hsl(0, 25%, 33%);
  --card: hsl(48, 33%, 98%);
  --card-foreground: hsl(0, 25%, 33%);
  --popover: hsl(48, 33%, 98%);
  --popover-foreground: hsl(0, 25%, 33%);
  --primary: hsl(222, 28%, 14%);
  --primary-foreground: hsl(48, 33%, 98%);
  --secondary: hsl(210, 25%, 96%);
  --secondary-foreground: hsl(0, 25%, 33%);
  --muted: hsl(210, 25%, 96%);
  --muted-foreground: hsl(215, 9%, 46%);
  --accent: hsl(210, 25%, 96%);
  --accent-foreground: hsl(0, 25%, 33%);
  --destructive: hsl(0, 82%, 67%);
  --destructive-foreground: hsl(48, 33%, 98%);
  --border: hsl(0, 14%, 94%);
  --input: hsl(214, 27%, 91%);
  --ring: hsl(0, 25%, 33%);
}

[data-theme='dark'] {
  /* === Dark Mode === */
  --background: hsl(0, 25%, 6%);
  --foreground: hsl(48, 33%, 98%);
  --card: hsl(0, 25%, 6%);
  --card-foreground: hsl(48, 33%, 98%);
  --popover: hsl(0, 25%, 6%);
  --popover-foreground: hsl(48, 33%, 98%);
  --primary: hsl(48, 33%, 98%);
  --primary-foreground: hsl(0, 25%, 33%);
  --secondary: hsl(0, 22%, 14%);
  --secondary-foreground: hsl(48, 33%, 98%);
  --muted: hsl(0, 22%, 14%);
  --muted-foreground: hsl(0, 20%, 75%);
  --accent: hsl(0, 22%, 14%);
  --accent-foreground: hsl(48, 33%, 98%);
  --destructive: hsl(0, 82%, 67%);
  --destructive

...