Background (app):     #0a0a0a    Near-black—the night watch
Background (surface): #141414    Dark gray
Background (raised):  #1e1e1e    Elevated surfaces

Text (primary):       #f5f5f5
Text (secondary):     #a3a3a3
Text (muted):         #636363

Accent (primary):     #3b82f6    Blue—action, selection, focus
Accent (AI):          #a855f7    Purple—AI-generated content (suspect until verified)
Signal (success):     #22c55e    Green—valid, verified, safe
Signal (warning):     #f59e0b    Amber—drift detected, needs investigation
Signal (error):       #ef4444    Red—breaking change, critical threat

// BAD - using color for decoration
<div className="bg-blue-500 text-white"> {/* Color without purpose */}
<button className="bg-purple-600">Secondary action</button> {/* Color for non-critical element */}

// BAD - hardcoded colors break dark mode
<div className="bg-white text-black">

// GOOD - grayscale foundation
<div className="bg-background text-foreground"> {/* Monochrome */}
<div className="bg-card border border-border"> {/* Semantic grays */}
<button className="bg-muted hover:bg-muted/80"> {/* Grayscale interaction */}

// GOOD - strategic color for meaning (using design system tokens)
<span className="text-accent-blue bg-accent-blue/10 px-1.5 py-0.5 rounded">GET</span> {/* HTTP method */}
<span className="text-signal-error">500</span> {/* Status code */}
<div className="bg-signal-error/10 border-signal-error/20 text-signal-error">Error</div> {/* Critical feedback */}

/* Code and data (monospaced) */
font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

/* UI text (system fonts) */
font-family:
  Inter,
  -apple-system,
  BlinkMacSystemFont,
  sans-serif;

{
  /* UI Text */
}
<div className="text-sm text-foreground">UI Text</div>;

{
  /* Code/Data (always monospaced) */
}
<pre className="font-mono text-sm text-foreground bg-muted/30">Code</pre>;

{
  /* Secondary Text */
}
<span className="text-xs text-muted-foreground">Secondary info</span>;

{
  /* Headings */
}
<h3 className="text-lg font-medium text-foreground">Section Title</h3>;

import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { cn } from '@/lib/utils';

// Use these variants
variant: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
size: 'default' | 'sm' | 'lg' | 'icon';

{
  /* Subtle background change */
}
<div className="hover:bg-muted/50 transition-colors duration-200">Content</div>;

{
  /* Only use cursor-pointer on actual links/buttons */
}
<button className="cursor-pointer">Button</button>;

import { motion } from 'motion/react';
import { cn } from '@/lib/utils';

interface CardProps {
  title: string;
  description?: string;
  className?: string;
  onAction?: () => void;
}

export const Card = ({ title, description, className, onAction }: CardProps): JSX.Element => {
  return (
    <motion.div
      className={cn('p-6 bg-card border border-border rounded-xl', className)}
      whileHover={{ scale: 1.01 }}
      transition={{ duration: 0.2 }}
    >
      <h3 className="text-lg font-medium text-card-foreground mb-2">{title}</h3>
      {description && <p className="text-sm text-muted-foreground mb-4">{description}</p>}
      {onAction && (
        <Button variant="default" onClick={onAction}>
          Action
        </Button>
      )}
    </motion.div>
  );
};

import { create } from 'zustand';

interface RequestState {
  url: string;
  method: string;
  loading: boolean;
  setUrl: (url: string) => void;
  setMethod: (method: string) => void;
  setLoading: (loading: boolean) => void;
}

export const useRequestStore = create<RequestState>((set) => ({
  url: '',
  method: 'GET',
  loading: false,
  setUrl: (url) => set({ url }),
  setMethod: (method) => set({ method }),
  setLoading: (loading) => set({ loading }),
}));

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

// Animated element
<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  exit={{ opacity: 0, y: -20 }}
  transition={{ duration: 0.2 }}
>
  Content
</motion.div>

// AnimatePresence for enter/exit
<AnimatePresence mode="wait">
  {isVisible && (
    <motion.div key="modal" /* ... */>
      Modal content
    </motion.div>
  )}
</AnimatePresence>

import { motion } from 'motion/react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

interface RequestCardProps {
  title: string;
  method: string;
  url: string;
  className?: string;
  onSend?: () => void;
}

export const RequestCard = ({
  title,
  method,
  url,
  className,
  onSend,
}: RequestCardProps): JSX.Element => {
  // Strategic color: HTTP method gets color (functional/semantic)
  // Using design system tokens for consistency
  const methodTextColors: Record<string, string> = {
    GET: 'text-accent-blue',
    POST: 'text-signal-success',
    PUT: 'text-signal-warning',
    PATCH: 'text-signal-warning',
    DELETE: 'text-signal-error',
  };
  const methodBgColors: Record<string, string> = {
    GET: 'bg-accent-blue/10',
    POST: 'bg-signal-success/10',
    PUT: 'bg-signal-warning/10',
    PATCH: 'bg-signal-warning/10',
    DELETE: 'bg-signal-error/10',
  };
  const textColor = methodTextColors[method] || 'text-text-muted';
  const bgColor = methodBgColors[method] || 'bg-text-muted/10';

  return (
    <motion.div
      className={cn('p-4 bg-card border-border rounded-xl', className)}
      whileHover={{ scale: 1.005 }}
    >
      <h3 className="text-base font-medium text-card-foreground">{title}</h3>
      <div className="flex items-center gap-2 mt-2">
        {/* Strategic splash: method color (zen aesthetic - text color with subtle bg) */}
        <span
          className={cn(
            'px-1.5 py-0.5 rounded text-xs font-semibold font-mono',
            textColor,
            bgColor
          )}
        >
          {method}
        </span>
        {/* Grayscale: URL (monochrome) */}
        <code className="flex-1 text-sm font-mono text-foreground bg-muted/30 px-2 py-1 rounded">
          {url}
        </code>
        {/* Grayscale: Button (semantic, not colored) */}
        {onSend && (
          <Button variant="outline" size="sm" onClick={onSend}>
            Send
          </Button>
        )}
      </div>
    </motion.div>
  );
};

'outline-none focus-visible:ring-2 focus-visible:ring-accent-blue focus-visible:ring-offset-2 focus-visible:ring-offset-bg-app';

{
  error && (
    <div className="p-4 bg-destructive/10 border border-destructive/20 rounded-lg text-destructive">
      {error}
    </div>
  );
}

import { cn } from '@/lib/utils';

interface MethodBadgeProps {
  method: string;
  className?: string;
}

// Design system colors - text with subtle background (zen aesthetic)
const methodTextColors: Record<string, string> = {
  GET: 'text-accent-blue',
  POST: 'text-signal-success',
  PUT: 'text-signal-warning',
  PATCH: 'text-signal-warning',
  DELETE: 'text-signal-error',
  HEAD: 'text-text-muted',
  OPTIONS: 'text-text-muted',
};

const methodBgColors: Record<string, string> = {
  GET: 'bg-accent-blue/10',
  POST: 'bg-signal-success/10',
  PUT: 'bg-signal-warning/10',
  PATCH: 'bg-signal-warning/10',
  DELETE: 'bg-signal-error/10',
  HEAD: 'bg-text-muted/10',
  OPTIONS: 'bg-text-muted/10',
};

export const MethodBadge = ({ method, className }: MethodBadgeProps): JSX.Element => {
  const textColor = methodTextColors[method] ?? 'text-text-muted';
  const bgColor = methodBgColors[method] ?? 'bg-text-muted/10';

  return (
    <span
      className={cn(
        'px-1.5 py-0.5 rounded text-xs font-semibold font-mono',
        textColor,
        bgColor,
        className
      )}
    >
      {method}
    </span>
  );
};

import { cn } from '@/lib/utils';

interface StatusBadgeProps {
  status: number;
  className?: string;
}

// Design system colors - text only for zen aesthetic
const getStatusColor = (status: number): string => {
  if (status >= 200 && status < 300) return 'text-signal-success';
  if (status >= 300 && status < 400) return 'text-accent-blue';
  if (status >= 400 && status < 500) return 'text-signal-warning';
  if (status >= 500) return 'text-signal-error';
  return 'text-text-muted';
};

export const StatusBadge = ({ status, className }: StatusBadgeProps): JSX.Element => {
  const colorClass = getStatusColor(status);

  return (
    <span className={cn('text-sm font-mono font-semibold', colorClass, className)}>{status}</span>
  );
};

import { Button } from '@/components/ui/button';
import { motion } from 'motion/react';

interface AISuggestionProps {
  suggestion: string;
  onAccept?: () => void;
}

export const AISuggestion = ({ suggestion, onAccept }: AISuggestionProps): JSX.Element => {
  return (
    <motion.div
      className="bg-primary/5 border-primary/20 border rounded-lg p-3"
      initial={{ opacity: 0, y: 10 }}
      animate={{ opacity: 1, y: 0 }}
    >
      <p className="text-sm text-foreground mb-2">{suggestion}</p>
      {/* Primary action: strategic color */}
      <Button variant="default" size="sm" onClick={onAccept}>
        Use suggestion
      </Button>
    </motion.div>
  );
};