Antigravity Design Aesthetics

# Antigravity Design Aesthetics

Master visual design principles with Google Antigravity IDE. This comprehensive guide covers UI patterns, color systems, and animation principles for beautiful, accessible interfaces.

## Why Design Aesthetics Matter?

Great design improves usability and user satisfaction. Google Antigravity IDE's Gemini 3 engine suggests design improvements and accessibility enhancements.

## Color System Design

```typescript
// design/colors.ts
export const colors = {
  // Primary palette
  primary: {
    50: "#eff6ff",
    100: "#dbeafe",
    200: "#bfdbfe",
    300: "#93c5fd",
    400: "#60a5fa",
    500: "#3b82f6",
    600: "#2563eb",
    700: "#1d4ed8",
    800: "#1e40af",
    900: "#1e3a8a",
  },
  
  // Semantic colors
  success: {
    light: "#dcfce7",
    DEFAULT: "#22c55e",
    dark: "#15803d",
  },
  warning: {
    light: "#fef3c7",
    DEFAULT: "#f59e0b",
    dark: "#b45309",
  },
  error: {
    light: "#fee2e2",
    DEFAULT: "#ef4444",
    dark: "#b91c1c",
  },
  
  // Neutral palette
  neutral: {
    0: "#ffffff",
    50: "#fafafa",
    100: "#f5f5f5",
    200: "#e5e5e5",
    300: "#d4d4d4",
    400: "#a3a3a3",
    500: "#737373",
    600: "#525252",
    700: "#404040",
    800: "#262626",
    900: "#171717",
    950: "#0a0a0a",
  },
} as const;

// Generate CSS variables
export function generateCSSVariables(): string {
  const lines: string[] = [":root {"];
  
  for (const [category, shades] of Object.entries(colors)) {
    if (typeof shades === "object") {
      for (const [shade, value] of Object.entries(shades)) {
        lines.push(`  --color-${category}-${shade}: ${value};`);
      }
    }
  }
  
  lines.push("}");
  return lines.join("\n");
}
```

## Typography Scale

```typescript
// design/typography.ts
export const typography = {
  fontFamily: {
    sans: ["Inter", "system-ui", "sans-serif"],
    mono: ["JetBrains Mono", "Menlo", "monospace"],
  },
  
  fontSize: {
    xs: ["0.75rem", { lineHeight: "1rem" }],
    sm: ["0.875rem", { lineHeight: "1.25rem" }],
    base: ["1rem", { lineHeight: "1.5rem" }],
    lg: ["1.125rem", { lineHeight: "1.75rem" }],
    xl: ["1.25rem", { lineHeight: "1.75rem" }],
    "2xl": ["1.5rem", { lineHeight: "2rem" }],
    "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
    "4xl": ["2.25rem", { lineHeight: "2.5rem" }],
    "5xl": ["3rem", { lineHeight: "1.2" }],
  },
  
  fontWeight: {
    normal: "400",
    medium: "500",
    semibold: "600",
    bold: "700",
  },
  
  letterSpacing: {
    tighter: "-0.05em",
    tight: "-0.025em",
    normal: "0",
    wide: "0.025em",
  },
} as const;

// Typography component
interface TextProps {
  variant: keyof typeof typography.fontSize;
  weight?: keyof typeof typography.fontWeight;
  children: React.ReactNode;
}

export function Text({ variant, weight = "normal", children }: TextProps) {
  const [size, { lineHeight }] = typography.fontSize[variant];
  
  return (
    <span
      style={{
        fontSize: size,
        lineHeight,
        fontWeight: typography.fontWeight[weight],
      }}
    >
      {children}
    </span>
  );
}
```

## Spacing System

```typescript
// design/spacing.ts
export const spacing = {
  0: "0",
  px: "1px",
  0.5: "0.125rem",
  1: "0.25rem",
  1.5: "0.375rem",
  2: "0.5rem",
  2.5: "0.625rem",
  3: "0.75rem",
  3.5: "0.875rem",
  4: "1rem",
  5: "1.25rem",
  6: "1.5rem",
  7: "1.75rem",
  8: "2rem",
  9: "2.25rem",
  10: "2.5rem",
  12: "3rem",
  14: "3.5rem",
  16: "4rem",
  20: "5rem",
  24: "6rem",
  32: "8rem",
} as const;

// Layout primitives
export const layout = {
  containerMaxWidth: "1280px",
  contentMaxWidth: "768px",
  sidebarWidth: "280px",
  headerHeight: "64px",
  
  breakpoints: {
    sm: "640px",
    md: "768px",
    lg: "1024px",
    xl: "1280px",
    "2xl": "1536px",
  },
};
```

## Animation Principles

```typescript
// design/animations.ts
export const animations = {
  duration: {
    instant: "0ms",
    fast: "100ms",
    normal: "200ms",
    slow: "300ms",
    slower: "500ms",
  },
  
  easing: {
    linear: "linear",
    easeIn: "cubic-bezier(0.4, 0, 1, 1)",
    easeOut: "cubic-bezier(0, 0, 0.2, 1)",
    easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
    spring: "cubic-bezier(0.175, 0.885, 0.32, 1.275)",
  },
  
  keyframes: {
    fadeIn: {
      from: { opacity: 0 },
      to: { opacity: 1 },
    },
    slideUp: {
      from: { transform: "translateY(10px)", opacity: 0 },
      to: { transform: "translateY(0)", opacity: 1 },
    },
    scaleIn: {
      from: { transform: "scale(0.95)", opacity: 0 },
      to: { transform: "scale(1)", opacity: 1 },
    },
  },
};

// CSS-in-JS animation utility
export function createTransition(
  properties: string[],
  duration: keyof typeof animations.duration = "normal",
  easing: keyof typeof animations.easing = "easeOut"
): string {
  const durationValue = animations.duration[duration];
  const easingValue = animations.easing[easing];
  
  return properties
    .map((prop) => `${prop} ${durationValue} ${easingValue}`)
    .join(", ");
}
```

## Component Patterns

```typescript
// components/ui/Card.tsx
import { HTMLAttributes, forwardRef } from "react";
import { cn } from "@/lib/utils";

interface CardProps extends HTMLAttributes<HTMLDivElement> {
  variant?: "elevated" | "outlined" | "filled";
  interactive?: boolean;
}

export const Card = forwardRef<HTMLDivElement, CardProps>(
  ({ className, variant = "elevated", interactive, ...props }, ref) => {
    const variants = {
      elevated: "bg-white shadow-lg shadow-neutral-900/5",
      outlined: "bg-white border border-neutral-200",
      filled: "bg-neutral-50",
    };
    
    return (
      <div
        ref={ref}
        className={cn(
          "rounded-xl p-6",
          variants[variant],
          interactive && "cursor-pointer transition-transform hover:scale-[1.02]",
          className
        )}
        {...props}
      />
    );
  }
);
```

## Best Practices

- Use consistent spacing multiples
- Apply semantic color naming
- Implement accessible contrast ratios
- Use subtle animations for feedback
- Follow responsive design patterns
- Test across different screen sizes

Google Antigravity IDE provides design system templates and automatically suggests improvements for visual consistency and accessibility.