From 4ccf316184babcaf0301d4c6fa6ae24dbec3e710 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Wed, 25 Feb 2026 13:35:29 +0100
Subject: [PATCH] refactor: use shadcn Card component in pastel app

---
 app/(app)/pastel/batch/page.tsx      |  81 +++++----
 app/(app)/pastel/colorblind/page.tsx | 131 ++++++++-------
 app/(app)/pastel/contrast/page.tsx   |  97 ++++++-----
 app/(app)/pastel/distinct/page.tsx   | 145 ++++++++--------
 app/(app)/pastel/gradient/page.tsx   | 119 +++++++------
 app/(app)/pastel/harmony/page.tsx    |  59 ++++---
 app/(app)/pastel/names/page.tsx      |  75 +++++----
 app/(app)/pastel/page.tsx            | 152 +++++++++--------
 app/(app)/pastel/textcolor/page.tsx  | 243 ++++++++++++++-------------
 9 files changed, 608 insertions(+), 494 deletions(-)

diff --git a/app/(app)/pastel/batch/page.tsx b/app/(app)/pastel/batch/page.tsx
index 6e55142..3aab25b 100644
--- a/app/(app)/pastel/batch/page.tsx
+++ b/app/(app)/pastel/batch/page.tsx
@@ -10,6 +10,7 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { Input } from '@/components/ui/input';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { PaletteGrid } from '@/components/pastel/PaletteGrid';
 import { ExportMenu } from '@/components/pastel/ExportMenu';
 import { useLighten, useDarken, useSaturate, useDesaturate, useRotate } from '@/lib/pastel/api/queries';
@@ -102,27 +103,33 @@ export default function BatchPage() {
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
           {/* Input */}
           <div className="space-y-6">
-            <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-sm font-medium mb-4">Input Colors</h2>
-              <p className="text-sm text-muted-foreground mb-4">
-                Enter colors (one per line or comma-separated). Supports hex format
-              </p>
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-sm font-medium">Input Colors</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-muted-foreground mb-4">
+                  Enter colors (one per line or comma-separated). Supports hex format
+                </p>
 
-              <textarea
-                value={inputColors}
-                onChange={(e) => setInputColors(e.target.value)}
-                placeholder="#ff0099, #00ff99, #9900ff&#10;#ff5533&#10;#3355ff"
-                className="w-full h-48 p-3 border border-border rounded-xl bg-input font-mono text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:border-primary/50 transition-all duration-200"
-              />
+                <textarea
+                  value={inputColors}
+                  onChange={(e) => setInputColors(e.target.value)}
+                  placeholder="#ff0099, #00ff99, #9900ff&#10;#ff5533&#10;#3355ff"
+                  className="w-full h-48 p-3 border border-border rounded-xl bg-input font-mono text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:border-primary/50 transition-all duration-200"
+                />
 
-              <p className="text-xs text-muted-foreground mt-2">
-                {parseColors(inputColors).length} valid colors found
-              </p>
-            </div>
+                <p className="text-xs text-muted-foreground mt-2">
+                  {parseColors(inputColors).length} valid colors found
+                </p>
+              </CardContent>
+            </Card>
 
-            <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-sm font-medium mb-4">Operation</h2>
-              <div className="space-y-4">
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-sm font-medium">Operation</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
                 <Select
                   value={operation}
                   onValueChange={(value) => setOperation(value as Operation)}
@@ -170,30 +177,38 @@ export default function BatchPage() {
                     </>
                   )}
                 </Button>
-              </div>
-            </div>
+              </CardContent>
+            </Card>
           </div>
 
           {/* Output */}
           <div className="space-y-6">
             {outputColors.length > 0 ? (
               <>
-                <div className="p-6 border rounded-lg bg-card">
-                  <h2 className="text-sm font-medium mb-4">
-                    Output Colors ({outputColors.length})
-                  </h2>
-                  <PaletteGrid colors={outputColors} />
-                </div>
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="text-sm font-medium">
+                      Output Colors ({outputColors.length})
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <PaletteGrid colors={outputColors} />
+                  </CardContent>
+                </Card>
 
-                <div className="p-6 border rounded-lg bg-card">
-                  <ExportMenu colors={outputColors} />
-                </div>
+                <Card>
+                  <CardContent className="pt-6">
+                    <ExportMenu colors={outputColors} />
+                  </CardContent>
+                </Card>
               </>
             ) : (
-              <div className="p-12 border rounded-lg bg-card text-center text-muted-foreground">
-                <Download className="h-12 w-12 mx-auto mb-4 opacity-50" />
-                <p>Enter colors and click Process to see results</p>
-              </div>
+              <Card>
+                <CardContent className="p-12 text-center text-muted-foreground">
+                  <Download className="h-12 w-12 mx-auto mb-4 opacity-50" />
+                  <p>Enter colors and click Process to see results</p>
+                </CardContent>
+              </Card>
             )}
           </div>
         </div>
diff --git a/app/(app)/pastel/colorblind/page.tsx b/app/(app)/pastel/colorblind/page.tsx
index 926da38..58715ca 100644
--- a/app/(app)/pastel/colorblind/page.tsx
+++ b/app/(app)/pastel/colorblind/page.tsx
@@ -11,6 +11,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { useSimulateColorBlindness } from '@/lib/pastel/api/queries';
 import { Loader2, Eye, Plus, X } from 'lucide-react';
 import { toast } from 'sonner';
@@ -77,9 +78,9 @@ export default function ColorBlindPage() {
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
           {/* Controls */}
           <div className="space-y-6">
-            <div className="p-6 border rounded-lg bg-card">
-              <div className="flex items-center justify-between mb-4">
-                <h2 className="text-sm font-medium">Colors to Test</h2>
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0">
+                <CardTitle className="text-sm font-medium">Colors to Test</CardTitle>
                 <Button
                   onClick={addColor}
                   variant="outline"
@@ -89,9 +90,9 @@ export default function ColorBlindPage() {
                   <Plus className="h-4 w-4 mr-2" />
                   Add Color
                 </Button>
-              </div>
+              </CardHeader>
 
-              <div className="space-y-4">
+              <CardContent className="space-y-4">
                 {colors.map((color, index) => (
                   <div key={index} className="flex items-start gap-3">
                     <div className="flex-1">
@@ -112,12 +113,14 @@ export default function ColorBlindPage() {
                     )}
                   </div>
                 ))}
-              </div>
-            </div>
+              </CardContent>
+            </Card>
 
-            <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-sm font-medium mb-4">Blindness Type</h2>
-              <div className="space-y-4">
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-sm font-medium">Blindness Type</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
                 <Select
                   value={blindnessType}
                   onValueChange={(value) => setBlindnessType(value as ColorBlindnessType)}
@@ -153,68 +156,76 @@ export default function ColorBlindPage() {
                     </>
                   )}
                 </Button>
-              </div>
-            </div>
+              </CardContent>
+            </Card>
           </div>
 
           {/* Results */}
           <div className="space-y-6">
             {simulations.length > 0 ? (
               <>
-                <div className="p-6 border rounded-lg bg-card">
-                  <h2 className="text-sm font-medium mb-4">Simulation Results</h2>
-                  <p className="text-sm text-muted-foreground mb-6">
-                    Compare original colors (left) with how they appear to people with{' '}
-                    {blindnessType} (right)
-                  </p>
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="text-sm font-medium">Simulation Results</CardTitle>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <p className="text-sm text-muted-foreground mb-2">
+                      Compare original colors (left) with how they appear to people with{' '}
+                      {blindnessType} (right)
+                    </p>
 
-                  <div className="space-y-4">
-                    {simulations.map((sim, index) => (
-                      <div
-                        key={index}
-                        className="grid grid-cols-2 gap-4 p-4 bg-muted/50 rounded-lg"
-                      >
-                        <div className="space-y-2">
-                          <p className="text-xs font-medium text-muted-foreground">
-                            Original
-                          </p>
-                          <div className="flex items-center gap-3">
-                            <ColorDisplay color={sim.input} size="md" />
-                            <code className="text-sm font-mono">{sim.input}</code>
+                    <div className="space-y-4">
+                      {simulations.map((sim, index) => (
+                        <div
+                          key={index}
+                          className="grid grid-cols-2 gap-4 p-4 bg-muted/50 rounded-lg"
+                        >
+                          <div className="space-y-2">
+                            <p className="text-xs font-medium text-muted-foreground">
+                              Original
+                            </p>
+                            <div className="flex items-center gap-3">
+                              <ColorDisplay color={sim.input} size="md" />
+                              <code className="text-sm font-mono">{sim.input}</code>
+                            </div>
+                          </div>
+
+                          <div className="space-y-2">
+                            <p className="text-xs font-medium text-muted-foreground">
+                              As Seen ({sim.difference_percentage.toFixed(1)}% difference)
+                            </p>
+                            <div className="flex items-center gap-3">
+                              <ColorDisplay color={sim.output} size="md" />
+                              <code className="text-sm font-mono">{sim.output}</code>
+                            </div>
                           </div>
                         </div>
+                      ))}
+                    </div>
+                  </CardContent>
+                </Card>
 
-                        <div className="space-y-2">
-                          <p className="text-xs font-medium text-muted-foreground">
-                            As Seen ({sim.difference_percentage.toFixed(1)}% difference)
-                          </p>
-                          <div className="flex items-center gap-3">
-                            <ColorDisplay color={sim.output} size="md" />
-                            <code className="text-sm font-mono">{sim.output}</code>
-                          </div>
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-
-                <div className="p-6 border rounded-lg bg-card bg-blue-50 dark:bg-blue-950/20">
-                  <h3 className="font-semibold mb-2 flex items-center gap-2">
-                    <Eye className="h-5 w-5" />
-                    Accessibility Tip
-                  </h3>
-                  <p className="text-sm text-muted-foreground">
-                    Ensure important information isn&apos;t conveyed by color alone. Use text
-                    labels, patterns, or icons to make your design accessible to everyone
-                  </p>
-                </div>
+                <Card className="bg-blue-50 dark:bg-blue-950/20 border-blue-100 dark:border-blue-900/30 shadow-none">
+                  <CardContent className="pt-6">
+                    <h3 className="font-semibold mb-2 flex items-center gap-2">
+                      <Eye className="h-5 w-5" />
+                      Accessibility Tip
+                    </h3>
+                    <p className="text-sm text-muted-foreground">
+                      Ensure important information isn&apos;t conveyed by color alone. Use text
+                      labels, patterns, or icons to make your design accessible to everyone
+                    </p>
+                  </CardContent>
+                </Card>
               </>
             ) : (
-              <div className="p-12 border rounded-lg bg-card text-center text-muted-foreground">
-                <Eye className="h-12 w-12 mx-auto mb-4 opacity-50" />
-                <p>Add colors and click Simulate to see how they appear</p>
-                <p className="text-sm mt-2">with different types of color blindness</p>
-              </div>
+              <Card>
+                <CardContent className="p-12 text-center text-muted-foreground">
+                  <Eye className="h-12 w-12 mx-auto mb-4 opacity-50" />
+                  <p>Add colors and click Simulate to see how they appear</p>
+                  <p className="text-sm mt-2">with different types of color blindness</p>
+                </CardContent>
+              </Card>
             )}
           </div>
         </div>
diff --git a/app/(app)/pastel/contrast/page.tsx b/app/(app)/pastel/contrast/page.tsx
index 40f3e3c..e9c19c6 100644
--- a/app/(app)/pastel/contrast/page.tsx
+++ b/app/(app)/pastel/contrast/page.tsx
@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import { ColorPicker } from '@/components/pastel/ColorPicker';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { getContrastRatio, hexToRgb, checkWCAGCompliance } from '@/lib/pastel/utils/color';
 import { ArrowLeftRight, Check, X } from 'lucide-react';
 
@@ -68,12 +69,14 @@ export default function ContrastPage() {
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
           {/* Color Pickers */}
           <div className="space-y-6">
-            <div className="p-6 border rounded-lg bg-card">
-              <div className="flex items-center justify-between mb-4">
-                <h2 className="text-sm font-medium">Foreground Color</h2>
-              </div>
-              <ColorPicker color={foreground} onChange={setForeground} />
-            </div>
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-sm font-medium">Foreground Color</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ColorPicker color={foreground} onChange={setForeground} />
+              </CardContent>
+            </Card>
 
             <div className="flex justify-center">
               <Button
@@ -86,50 +89,64 @@ export default function ContrastPage() {
               </Button>
             </div>
 
-            <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-sm font-medium mb-4">Background Color</h2>
-              <ColorPicker color={background} onChange={setBackground} />
-            </div>
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-sm font-medium">Background Color</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ColorPicker color={background} onChange={setBackground} />
+              </CardContent>
+            </Card>
           </div>
 
           {/* Results */}
           <div className="space-y-6">
             {/* Preview */}
-            <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-sm font-medium mb-4">Preview</h2>
-              <div
-                className="rounded-lg p-8 text-center"
-                style={{ backgroundColor: background, color: foreground }}
-              >
-                <p className="text-xl font-bold mb-2">Normal Text (16px)</p>
-                <p className="text-3xl font-bold">Large Text (24px)</p>
-              </div>
-            </div>
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-sm font-medium">Preview</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div
+                  className="rounded-lg p-8 text-center"
+                  style={{ backgroundColor: background, color: foreground }}
+                >
+                  <p className="text-xl font-bold mb-2">Normal Text (16px)</p>
+                  <p className="text-3xl font-bold">Large Text (24px)</p>
+                </div>
+              </CardContent>
+            </Card>
 
             {/* Contrast Ratio */}
             {ratio !== null && (
-              <div className="p-6 border rounded-lg bg-card">
-                <h2 className="text-sm font-medium mb-4">Contrast Ratio</h2>
-                <div className="text-center mb-6">
-                  <div className="text-5xl font-bold">{ratio.toFixed(2)}:1</div>
-                  <p className="text-sm text-muted-foreground mt-2">
-                    {ratio >= 7
-                      ? 'Excellent contrast'
-                      : ratio >= 4.5
-                        ? 'Good contrast'
-                        : ratio >= 3
-                          ? 'Minimum contrast'
-                          : 'Poor contrast'}
-                  </p>
-                </div>
-              </div>
+              <Card>
+                <CardHeader>
+                  <CardTitle className="text-sm font-medium">Contrast Ratio</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <div className="text-center mb-6">
+                    <div className="text-5xl font-bold">{ratio.toFixed(2)}:1</div>
+                    <p className="text-sm text-muted-foreground mt-2">
+                      {ratio >= 7
+                        ? 'Excellent contrast'
+                        : ratio >= 4.5
+                          ? 'Good contrast'
+                          : ratio >= 3
+                            ? 'Minimum contrast'
+                            : 'Poor contrast'}
+                    </p>
+                  </div>
+                </CardContent>
+              </Card>
             )}
 
             {/* WCAG Compliance */}
             {compliance && (
-              <div className="p-6 border rounded-lg bg-card">
-                <h2 className="text-sm font-medium mb-4">WCAG 2.1 Compliance</h2>
-                <div className="space-y-4">
+              <Card>
+                <CardHeader>
+                  <CardTitle className="text-sm font-medium">WCAG 2.1 Compliance</CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
                   <div>
                     <h3 className="text-sm font-semibold mb-2">Level AA</h3>
                     <div className="space-y-2">
@@ -161,8 +178,8 @@ export default function ContrastPage() {
                       />
                     </div>
                   </div>
-                </div>
-              </div>
+                </CardContent>
+              </Card>
             )}
           </div>
         </div>
diff --git a/app/(app)/pastel/distinct/page.tsx b/app/(app)/pastel/distinct/page.tsx
index ac10c35..5196cfa 100644
--- a/app/(app)/pastel/distinct/page.tsx
+++ b/app/(app)/pastel/distinct/page.tsx
@@ -12,6 +12,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { useGenerateDistinct } from '@/lib/pastel/api/queries';
 import { Loader2 } from 'lucide-react';
 import { toast } from 'sonner';
@@ -49,82 +50,90 @@ export default function DistinctPage() {
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
           {/* Controls */}
           <div className="lg:col-span-1">
-            <div className="p-6 border rounded-lg bg-card space-y-6">
-              <div>
-                <h2 className="text-sm font-medium mb-4">Settings</h2>
-              </div>
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-sm font-medium">Settings</CardTitle>
+              </CardHeader>
 
-              <div>
-                <label htmlFor="count" className="text-sm font-medium mb-2 block">
-                  Number of Colors
-                </label>
-                <Input
-                  id="count"
-                  type="number"
-                  min={2}
-                  max={100}
-                  value={count}
-                  onChange={(e) => setCount(parseInt(e.target.value))}
-                />
-                <p className="text-xs text-muted-foreground mt-1">
-                  Higher counts take longer to generate
-                </p>
-              </div>
-
-              <div className="space-y-2">
-                <label className="text-sm font-medium block">
-                  Distance Metric
-                </label>
-                <Select
-                  value={metric}
-                  onValueChange={(value) => setMetric(value as 'cie76' | 'ciede2000')}
-                >
-                  <SelectTrigger className="w-full">
-                    <SelectValue placeholder="Select metric" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="cie76">CIE76 (Faster)</SelectItem>
-                    <SelectItem value="ciede2000">CIEDE2000 (More Accurate)</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-
-              <Button
-                onClick={handleGenerate}
-                disabled={generateMutation.isPending}
-                className="w-full"
-              >
-                {generateMutation.isPending ? (
-                  <>
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    Generating..
-                  </>
-                ) : (
-                  'Generate Colors'
-                )}
-              </Button>
-
-              {generateMutation.isPending && (
-                <div className="text-sm text-muted-foreground text-center">
-                  This may take a few moments..
+              <CardContent className="space-y-6">
+                <div>
+                  <label htmlFor="count" className="text-sm font-medium mb-2 block">
+                    Number of Colors
+                  </label>
+                  <Input
+                    id="count"
+                    type="number"
+                    min={2}
+                    max={100}
+                    value={count}
+                    onChange={(e) => setCount(parseInt(e.target.value))}
+                  />
+                  <p className="text-xs text-muted-foreground mt-1">
+                    Higher counts take longer to generate
+                  </p>
                 </div>
-              )}
-            </div>
+
+                <div className="space-y-2">
+                  <label className="text-sm font-medium block">
+                    Distance Metric
+                  </label>
+                  <Select
+                    value={metric}
+                    onValueChange={(value) => setMetric(value as 'cie76' | 'ciede2000')}
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="Select metric" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="cie76">CIE76 (Faster)</SelectItem>
+                      <SelectItem value="ciede2000">CIEDE2000 (More Accurate)</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <Button
+                  onClick={handleGenerate}
+                  disabled={generateMutation.isPending}
+                  className="w-full"
+                >
+                  {generateMutation.isPending ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Generating..
+                    </>
+                  ) : (
+                    'Generate Colors'
+                  )}
+                </Button>
+
+                {generateMutation.isPending && (
+                  <div className="text-sm text-muted-foreground text-center">
+                    This may take a few moments..
+                  </div>
+                )}
+              </CardContent>
+            </Card>
           </div>
 
           {/* Results */}
           <div className="lg:col-span-2 space-y-6">
-            <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-sm font-medium mb-4">
-                Generated Colors {colors.length > 0 && `(${colors.length})`}
-              </h2>
-              <PaletteGrid colors={colors} />
-            </div>
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-sm font-medium">
+                  Generated Colors {colors.length > 0 && `(${colors.length})`}
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <PaletteGrid colors={colors} />
+              </CardContent>
+            </Card>
 
             {colors.length > 0 && (
-              <div className="p-6 border rounded-lg bg-card">
-                <ExportMenu colors={colors} />
-              </div>
+              <Card>
+                <CardContent className="pt-6">
+                  <ExportMenu colors={colors} />
+                </CardContent>
+              </Card>
             )}
           </div>
         </div>
diff --git a/app/(app)/pastel/gradient/page.tsx b/app/(app)/pastel/gradient/page.tsx
index a23b29a..1f9377c 100644
--- a/app/(app)/pastel/gradient/page.tsx
+++ b/app/(app)/pastel/gradient/page.tsx
@@ -6,6 +6,7 @@ import { PaletteGrid } from '@/components/pastel/PaletteGrid';
 import { ExportMenu } from '@/components/pastel/ExportMenu';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { useGenerateGradient } from '@/lib/pastel/api/queries';
 import { Loader2, Plus, X } from 'lucide-react';
 import { toast } from 'sonner';
@@ -59,39 +60,45 @@ export default function GradientPage() {
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
           {/* Controls */}
           <div className="space-y-6">
-            <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-sm font-medium mb-4">Color Stops</h2>
-              <div className="space-y-4">
-                {stops.map((stop, index) => (
-                  <div key={index} className="flex items-start gap-3">
-                    <div className="flex-1">
-                      <ColorPicker
-                        color={stop}
-                        onChange={(color) => updateStop(index, color)}
-                      />
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-sm font-medium">Color Stops</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-4">
+                  {stops.map((stop, index) => (
+                    <div key={index} className="flex items-start gap-3">
+                      <div className="flex-1">
+                        <ColorPicker
+                          color={stop}
+                          onChange={(color) => updateStop(index, color)}
+                        />
+                      </div>
+                      {stops.length > 2 && (
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          onClick={() => removeStop(index)}
+                          className="mt-8"
+                        >
+                          <X className="h-4 w-4" />
+                        </Button>
+                      )}
                     </div>
-                    {stops.length > 2 && (
-                      <Button
-                        variant="ghost"
-                        size="icon"
-                        onClick={() => removeStop(index)}
-                        className="mt-8"
-                      >
-                        <X className="h-4 w-4" />
-                      </Button>
-                    )}
-                  </div>
-                ))}
-                <Button onClick={addStop} variant="outline" className="w-full">
-                  <Plus className="h-4 w-4 mr-2" />
-                  Add Stop
-                </Button>
-              </div>
-            </div>
+                  ))}
+                  <Button onClick={addStop} variant="outline" className="w-full">
+                    <Plus className="h-4 w-4 mr-2" />
+                    Add Stop
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
 
-            <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-sm font-medium mb-4">Settings</h2>
-              <div className="space-y-4">
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-sm font-medium">Settings</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
                 <div>
                   <label htmlFor="count" className="text-sm font-medium mb-2 block">
                     Number of Colors
@@ -120,34 +127,44 @@ export default function GradientPage() {
                     'Generate Gradient'
                   )}
                 </Button>
-              </div>
-            </div>
+              </CardContent>
+            </Card>
           </div>
 
           {/* Preview */}
           <div className="space-y-6">
             {gradient && gradient.length > 0 && (
               <>
-                <div className="p-6 border rounded-lg bg-card">
-                  <h2 className="text-sm font-medium mb-4">Gradient Preview</h2>
-                  <div
-                    className="h-32 rounded-lg"
-                    style={{
-                      background: `linear-gradient(to right, ${gradient.join(', ')})`,
-                    }}
-                  />
-                </div>
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="text-sm font-medium">Gradient Preview</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div
+                      className="h-32 rounded-lg"
+                      style={{
+                        background: `linear-gradient(to right, ${gradient.join(', ')})`,
+                      }}
+                    />
+                  </CardContent>
+                </Card>
 
-                <div className="p-6 border rounded-lg bg-card">
-                  <h2 className="text-sm font-medium mb-4">
-                    Colors ({gradient.length})
-                  </h2>
-                  <PaletteGrid colors={gradient} />
-                </div>
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="text-sm font-medium">
+                      Colors ({gradient.length})
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <PaletteGrid colors={gradient} />
+                  </CardContent>
+                </Card>
 
-                <div className="p-6 border rounded-lg bg-card">
-                  <ExportMenu colors={gradient} />
-                </div>
+                <Card>
+                  <CardContent className="pt-6">
+                    <ExportMenu colors={gradient} />
+                  </CardContent>
+                </Card>
               </>
             )}
           </div>
diff --git a/app/(app)/pastel/harmony/page.tsx b/app/(app)/pastel/harmony/page.tsx
index 6a3ccb3..10a0e2f 100644
--- a/app/(app)/pastel/harmony/page.tsx
+++ b/app/(app)/pastel/harmony/page.tsx
@@ -12,6 +12,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { useGeneratePalette } from '@/lib/pastel/api/queries';
 import { Loader2, Palette } from 'lucide-react';
 import { toast } from 'sonner';
@@ -70,14 +71,20 @@ export default function HarmonyPage() {
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
           {/* Controls */}
           <div className="space-y-6">
-            <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-sm font-medium mb-4">Base Color</h2>
-              <ColorPicker color={baseColor} onChange={setBaseColor} />
-            </div>
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-sm font-medium">Base Color</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ColorPicker color={baseColor} onChange={setBaseColor} />
+              </CardContent>
+            </Card>
 
-            <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-sm font-medium mb-4">Harmony Type</h2>
-              <div className="space-y-4">
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-sm font-medium">Harmony Type</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
                 <Select
                   value={harmonyType}
                   onValueChange={(value) => setHarmonyType(value as HarmonyType)}
@@ -116,32 +123,40 @@ export default function HarmonyPage() {
                     </>
                   )}
                 </Button>
-              </div>
-            </div>
+              </CardContent>
+            </Card>
           </div>
 
           {/* Results */}
           <div className="space-y-6">
             {palette.length > 0 && (
               <>
-                <div className="p-6 border rounded-lg bg-card">
-                  <h2 className="text-sm font-medium mb-4">
-                    Generated Palette ({palette.length} colors)
-                  </h2>
-                  <PaletteGrid colors={palette} />
-                </div>
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="text-sm font-medium">
+                      Generated Palette ({palette.length} colors)
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <PaletteGrid colors={palette} />
+                  </CardContent>
+                </Card>
 
-                <div className="p-6 border rounded-lg bg-card">
-                  <ExportMenu colors={palette} />
-                </div>
+                <Card>
+                  <CardContent className="pt-6">
+                    <ExportMenu colors={palette} />
+                  </CardContent>
+                </Card>
               </>
             )}
 
             {palette.length === 0 && (
-              <div className="p-12 border rounded-lg bg-card text-center text-muted-foreground">
-                <Palette className="h-12 w-12 mx-auto mb-4 opacity-50" />
-                <p>Select a harmony type and click Generate to create your palette</p>
-              </div>
+              <Card>
+                <CardContent className="p-12 text-center text-muted-foreground">
+                  <Palette className="h-12 w-12 mx-auto mb-4 opacity-50" />
+                  <p>Select a harmony type and click Generate to create your palette</p>
+                </CardContent>
+              </Card>
             )}
           </div>
         </div>
diff --git a/app/(app)/pastel/names/page.tsx b/app/(app)/pastel/names/page.tsx
index d62064e..1e44305 100644
--- a/app/(app)/pastel/names/page.tsx
+++ b/app/(app)/pastel/names/page.tsx
@@ -10,6 +10,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
+import { Card, CardContent } from '@/components/ui/card';
 import { useNamedColors } from '@/lib/pastel/api/queries';
 import { Loader2 } from 'lucide-react';
 import { parse_color } from '@valknarthing/pastel-wasm';
@@ -76,46 +77,48 @@ export default function NamedColorsPage() {
         </div>
 
         {/* Colors Grid */}
-        <div className="p-6 border rounded-lg bg-card">
-          {isLoading && (
-            <div className="flex items-center justify-center py-12">
-              <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-            </div>
-          )}
-
-          {isError && (
-            <div className="text-center py-12 text-destructive">
-              Failed to load named colors
-            </div>
-          )}
-
-          {filteredColors.length > 0 && (
-            <>
-              <div className="mb-4 text-sm text-muted-foreground">
-                Showing {filteredColors.length} colors
+        <Card>
+          <CardContent className="pt-6">
+            {isLoading && (
+              <div className="flex items-center justify-center py-12">
+                <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
               </div>
-              <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
-                {filteredColors.map((color) => (
-                  <div key={color.name} className="flex flex-col items-center gap-2">
-                    <ColorSwatch color={color.hex} showLabel={false} />
-                    <div className="text-center">
-                      <div className="text-sm font-medium">{color.name}</div>
-                      <div className="text-xs font-mono text-muted-foreground">
-                        {color.hex}
+            )}
+
+            {isError && (
+              <div className="text-center py-12 text-destructive">
+                Failed to load named colors
+              </div>
+            )}
+
+            {filteredColors.length > 0 && (
+              <>
+                <div className="mb-4 text-sm text-muted-foreground">
+                  Showing {filteredColors.length} colors
+                </div>
+                <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
+                  {filteredColors.map((color) => (
+                    <div key={color.name} className="flex flex-col items-center gap-2">
+                      <ColorSwatch color={color.hex} showLabel={false} />
+                      <div className="text-center">
+                        <div className="text-sm font-medium">{color.name}</div>
+                        <div className="text-xs font-mono text-muted-foreground">
+                          {color.hex}
+                        </div>
                       </div>
                     </div>
-                  </div>
-                ))}
-              </div>
-            </>
-          )}
+                  ))}
+                </div>
+              </>
+            )}
 
-          {filteredColors.length === 0 && !isLoading && !isError && (
-            <div className="text-center py-12 text-muted-foreground">
-              No colors match your search
-            </div>
-          )}
-        </div>
+            {filteredColors.length === 0 && !isLoading && !isError && (
+              <div className="text-center py-12 text-muted-foreground">
+                No colors match your search
+              </div>
+            )}
+          </CardContent>
+        </Card>
       </div>
     </div>
   );
diff --git a/app/(app)/pastel/page.tsx b/app/(app)/pastel/page.tsx
index b4b941f..216d76e 100644
--- a/app/(app)/pastel/page.tsx
+++ b/app/(app)/pastel/page.tsx
@@ -6,6 +6,7 @@ import { ColorPicker } from '@/components/pastel/ColorPicker';
 import { ColorDisplay } from '@/components/pastel/ColorDisplay';
 import { ColorInfo } from '@/components/pastel/ColorInfo';
 import { ManipulationPanel } from '@/components/pastel/ManipulationPanel';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { useColorInfo } from '@/lib/pastel/api/queries';
 import { useColorHistory } from '@/lib/pastel/stores/historyStore';
 import { Loader2, Share2, History, X } from 'lucide-react';
@@ -84,30 +85,36 @@ function PlaygroundContent() {
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
           {/* Left Column: Color Picker and Display */}
           <div className="space-y-6">
-            <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-sm font-medium mb-4">Color Picker</h2>
-              <ColorPicker color={color} onChange={setColor} />
-            </div>
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-sm font-medium">Color Picker</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ColorPicker color={color} onChange={setColor} />
+              </CardContent>
+            </Card>
 
-            <div className="p-6 border rounded-lg bg-card">
-              <div className="flex items-center justify-between mb-4">
-                <h2 className="text-sm font-medium">Preview</h2>
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0">
+                <CardTitle className="text-sm font-medium">Preview</CardTitle>
                 <Button onClick={handleShare} variant="outline" size="sm">
                   <Share2 className="h-4 w-4 mr-2" />
                   Share
                 </Button>
-              </div>
-              <div className="flex justify-center">
-                <ColorDisplay color={color} size="xl" />
-              </div>
-            </div>
+              </CardHeader>
+              <CardContent>
+                <div className="flex justify-center">
+                  <ColorDisplay color={color} size="xl" />
+                </div>
+              </CardContent>
+            </Card>
 
             {recentColors.length > 0 && (
-              <div className="p-6 border rounded-lg bg-card">
-                <div className="flex items-center justify-between mb-4">
+              <Card>
+                <CardHeader className="flex flex-row items-center justify-between space-y-0">
                   <div className="flex items-center gap-2">
                     <History className="h-5 w-5" />
-                    <h2 className="text-sm font-medium">Recent Colors</h2>
+                    <CardTitle className="text-sm font-medium">Recent Colors</CardTitle>
                   </div>
                   <Button
                     onClick={clearHistory}
@@ -117,68 +124,77 @@ function PlaygroundContent() {
                   >
                     Clear
                   </Button>
-                </div>
-                <div className="grid grid-cols-5 gap-2">
-                  {recentColors.map((entry) => (
-                    <div
-                      key={entry.timestamp}
-                      className="group relative aspect-square rounded-lg border-2 border-border hover:border-primary transition-all hover:scale-110 cursor-pointer"
-                      style={{ backgroundColor: entry.color }}
-                      onClick={() => setColor(entry.color)}
-                      title={entry.color}
-                      role="button"
-                      tabIndex={0}
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter' || e.key === ' ') {
-                          setColor(entry.color);
-                        }
-                      }}
-                    >
-                      <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/30 rounded-lg">
-                        <button
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            removeColor(entry.color);
-                            toast.success('Color removed from history');
-                          }}
-                          className="p-1 bg-destructive rounded-full hover:bg-destructive/80"
-                          aria-label="Remove color"
-                        >
-                          <X className="h-3 w-3 text-destructive-foreground" />
-                        </button>
+                </CardHeader>
+                <CardContent>
+                  <div className="grid grid-cols-5 gap-2">
+                    {recentColors.map((entry) => (
+                      <div
+                        key={entry.timestamp}
+                        className="group relative aspect-square rounded-lg border-2 border-border hover:border-primary transition-all hover:scale-110 cursor-pointer"
+                        style={{ backgroundColor: entry.color }}
+                        onClick={() => setColor(entry.color)}
+                        title={entry.color}
+                        role="button"
+                        tabIndex={0}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter' || e.key === ' ') {
+                            setColor(entry.color);
+                          }
+                        }}
+                      >
+                        <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/30 rounded-lg">
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              removeColor(entry.color);
+                              toast.success('Color removed from history');
+                            }}
+                            className="p-1 bg-destructive rounded-full hover:bg-destructive/80"
+                            aria-label="Remove color"
+                          >
+                            <X className="h-3 w-3 text-destructive-foreground" />
+                          </button>
+                        </div>
                       </div>
-                    </div>
-                  ))}
-                </div>
-              </div>
+                    ))}
+                  </div>
+                </CardContent>
+              </Card>
             )}
           </div>
 
           {/* Right Column: Color Information */}
           <div className="space-y-6">
-            <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-sm font-medium mb-4">Color Information</h2>
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-sm font-medium">Color Information</CardTitle>
+              </CardHeader>
+              <CardContent>
+                {isLoading && (
+                  <div className="flex items-center justify-center py-12">
+                    <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+                  </div>
+                )}
 
-              {isLoading && (
-                <div className="flex items-center justify-center py-12">
-                  <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-                </div>
-              )}
+                {isError && (
+                  <div className="p-4 bg-destructive/10 text-destructive rounded-lg">
+                    <p className="font-medium">Error loading color information</p>
+                    <p className="text-sm mt-1">{error?.message || 'Unknown error'}</p>
+                  </div>
+                )}
 
-              {isError && (
-                <div className="p-4 bg-destructive/10 text-destructive rounded-lg">
-                  <p className="font-medium">Error loading color information</p>
-                  <p className="text-sm mt-1">{error?.message || 'Unknown error'}</p>
-                </div>
-              )}
+                {colorInfo && <ColorInfo info={colorInfo} />}
+              </CardContent>
+            </Card>
 
-              {colorInfo && <ColorInfo info={colorInfo} />}
-            </div>
-
-            <div className="p-6 border rounded-lg bg-card">
-              <h2 className="text-sm font-medium mb-4">Color Manipulation</h2>
-              <ManipulationPanel color={color} onColorChange={setColor} />
-            </div>
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-sm font-medium">Color Manipulation</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <ManipulationPanel color={color} onColorChange={setColor} />
+              </CardContent>
+            </Card>
           </div>
         </div>
       </div>
diff --git a/app/(app)/pastel/textcolor/page.tsx b/app/(app)/pastel/textcolor/page.tsx
index b4d139e..8b07423 100644
--- a/app/(app)/pastel/textcolor/page.tsx
+++ b/app/(app)/pastel/textcolor/page.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react';
 import { ColorPicker } from '@/components/pastel/ColorPicker';
 import { ColorDisplay } from '@/components/pastel/ColorDisplay';
 import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { useTextColor } from '@/lib/pastel/api/queries';
 import { Loader2, Palette, Plus, X, CheckCircle2, XCircle } from 'lucide-react';
 import { toast } from 'sonner';
@@ -66,9 +67,9 @@ export default function TextColorPage() {
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
           {/* Input */}
           <div className="space-y-6">
-            <div className="p-6 border rounded-lg bg-card">
-              <div className="flex items-center justify-between mb-4">
-                <h2 className="text-sm font-medium">Background Colors</h2>
+            <Card>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0">
+                <CardTitle className="text-sm font-medium">Background Colors</CardTitle>
                 <Button
                   onClick={addBackground}
                   disabled={backgrounds.length >= 10}
@@ -78,140 +79,150 @@ export default function TextColorPage() {
                   <Plus className="h-4 w-4 mr-2" />
                   Add
                 </Button>
-              </div>
+              </CardHeader>
 
-              <div className="space-y-4">
-                {backgrounds.map((color, index) => (
-                  <div key={index} className="flex items-center gap-3">
-                    <div className="flex-1">
-                      <ColorPicker
-                        color={color}
-                        onChange={(newColor) => updateBackground(index, newColor)}
-                      />
+              <CardContent className="space-y-4">
+                <div className="space-y-4">
+                  {backgrounds.map((color, index) => (
+                    <div key={index} className="flex items-center gap-3">
+                      <div className="flex-1">
+                        <ColorPicker
+                          color={color}
+                          onChange={(newColor) => updateBackground(index, newColor)}
+                        />
+                      </div>
+                      {backgrounds.length > 1 && (
+                        <Button
+                          onClick={() => removeBackground(index)}
+                          variant="ghost"
+                          size="icon"
+                        >
+                          <X className="h-4 w-4" />
+                        </Button>
+                      )}
                     </div>
-                    {backgrounds.length > 1 && (
-                      <Button
-                        onClick={() => removeBackground(index)}
-                        variant="ghost"
-                        size="icon"
-                      >
-                        <X className="h-4 w-4" />
-                      </Button>
-                    )}
-                  </div>
-                ))}
-              </div>
+                  ))}
+                </div>
 
-              <Button
-                onClick={handleOptimize}
-                disabled={textColorMutation.isPending || backgrounds.length === 0}
-                className="w-full mt-4"
-              >
-                {textColorMutation.isPending ? (
-                  <>
-                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                    Optimizing..
-                  </>
-                ) : (
-                  <>
-                    <Palette className="mr-2 h-4 w-4" />
-                    Optimize Text Colors
-                  </>
-                )}
-              </Button>
-            </div>
+                <Button
+                  onClick={handleOptimize}
+                  disabled={textColorMutation.isPending || backgrounds.length === 0}
+                  className="w-full mt-4"
+                >
+                  {textColorMutation.isPending ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Optimizing..
+                    </>
+                  ) : (
+                    <>
+                      <Palette className="mr-2 h-4 w-4" />
+                      Optimize Text Colors
+                    </>
+                  )}
+                </Button>
+              </CardContent>
+            </Card>
 
-            <div className="p-6 border rounded-lg bg-card bg-blue-50 dark:bg-blue-950/20">
-              <h3 className="font-semibold mb-2">How it works</h3>
-              <p className="text-sm text-muted-foreground">
-                This tool analyzes each background color and automatically selects either black
-                or white text to ensure maximum readability. The algorithm guarantees WCAG AA
-                compliance (4.5:1 contrast ratio) for normal text
-              </p>
-            </div>
+            <Card className="bg-blue-50 dark:bg-blue-950/20 border-blue-100 dark:border-blue-900/30 shadow-none">
+              <CardContent className="pt-6">
+                <h3 className="font-semibold mb-2">How it works</h3>
+                <p className="text-sm text-muted-foreground">
+                  This tool analyzes each background color and automatically selects either black
+                  or white text to ensure maximum readability. The algorithm guarantees WCAG AA
+                  compliance (4.5:1 contrast ratio) for normal text
+                </p>
+              </CardContent>
+            </Card>
           </div>
 
           {/* Results */}
           <div className="space-y-6">
             {results.length > 0 ? (
               <>
-                <div className="p-6 border rounded-lg bg-card">
-                  <h2 className="text-sm font-medium mb-4">Optimized Results</h2>
-                  <div className="space-y-4">
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="text-sm font-medium">Optimized Results</CardTitle>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
                     {results.map((result, index) => (
-                      <div
+                      <Card
                         key={index}
-                        className="p-4 border rounded-lg"
+                        className="overflow-hidden shadow-none"
                         style={{ backgroundColor: result.background }}
                       >
-                        <div className="flex items-center justify-between mb-3">
-                          <div className="flex items-center gap-3">
-                            <ColorDisplay color={result.background} size="sm" />
-                            <code className="text-sm font-mono text-inherit">
-                              {result.background}
-                            </code>
+                        <CardContent className="p-4">
+                          <div className="flex items-center justify-between mb-3">
+                            <div className="flex items-center gap-3">
+                              <ColorDisplay color={result.background} size="sm" />
+                              <code className="text-sm font-mono text-inherit">
+                                {result.background}
+                              </code>
+                            </div>
                           </div>
-                        </div>
 
-                        <div
-                          className="p-4 rounded border-2"
-                          style={{
-                            backgroundColor: result.background,
-                            color: result.textcolor,
-                            borderColor: result.textcolor,
-                          }}
-                        >
-                          <p className="font-semibold mb-2" style={{ color: result.textcolor }}>
-                            Sample Text Preview
-                          </p>
-                          <p className="text-sm" style={{ color: result.textcolor }}>
-                            The quick brown fox jumps over the lazy dog. This is how your text
-                            will look on this background color
-                          </p>
-                        </div>
+                          <div
+                            className="p-4 rounded border-2"
+                            style={{
+                              backgroundColor: result.background,
+                              color: result.textcolor,
+                              borderColor: result.textcolor,
+                            }}
+                          >
+                            <p className="font-semibold mb-2" style={{ color: result.textcolor }}>
+                              Sample Text Preview
+                            </p>
+                            <p className="text-sm" style={{ color: result.textcolor }}>
+                              The quick brown fox jumps over the lazy dog. This is how your text
+                              will look on this background color
+                            </p>
+                          </div>
 
-                        <div className="mt-3 grid grid-cols-2 gap-3 text-sm">
-                          <div>
-                            <span className="text-muted-foreground">Text Color: </span>
-                            <code className="font-mono">{result.textcolor}</code>
+                          <div className="mt-3 grid grid-cols-2 gap-3 text-sm">
+                            <div>
+                              <span className="text-muted-foreground">Text Color: </span>
+                              <code className="font-mono">{result.textcolor}</code>
+                            </div>
+                            <div>
+                              <span className="text-muted-foreground">Contrast: </span>
+                              <span className="font-medium">
+                                {result.contrast_ratio.toFixed(2)}:1
+                              </span>
+                            </div>
+                            <div className="flex items-center gap-2">
+                              {result.wcag_aa ? (
+                                <CheckCircle2 className="h-4 w-4 text-green-500" />
+                              ) : (
+                                <XCircle className="h-4 w-4 text-red-500" />
+                              )}
+                              <span className={result.wcag_aa ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}>
+                                WCAG AA
+                              </span>
+                            </div>
+                            <div className="flex items-center gap-2">
+                              {result.wcag_aaa ? (
+                                <CheckCircle2 className="h-4 w-4 text-green-500" />
+                              ) : (
+                                <XCircle className="h-4 w-4 text-yellow-500" />
+                              )}
+                              <span className={result.wcag_aaa ? 'text-green-600 dark:text-green-400' : 'text-yellow-600 dark:text-yellow-400'}>
+                                WCAG AAA
+                              </span>
+                            </div>
                           </div>
-                          <div>
-                            <span className="text-muted-foreground">Contrast: </span>
-                            <span className="font-medium">
-                              {result.contrast_ratio.toFixed(2)}:1
-                            </span>
-                          </div>
-                          <div className="flex items-center gap-2">
-                            {result.wcag_aa ? (
-                              <CheckCircle2 className="h-4 w-4 text-green-500" />
-                            ) : (
-                              <XCircle className="h-4 w-4 text-red-500" />
-                            )}
-                            <span className={result.wcag_aa ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}>
-                              WCAG AA
-                            </span>
-                          </div>
-                          <div className="flex items-center gap-2">
-                            {result.wcag_aaa ? (
-                              <CheckCircle2 className="h-4 w-4 text-green-500" />
-                            ) : (
-                              <XCircle className="h-4 w-4 text-yellow-500" />
-                            )}
-                            <span className={result.wcag_aaa ? 'text-green-600 dark:text-green-400' : 'text-yellow-600 dark:text-yellow-400'}>
-                              WCAG AAA
-                            </span>
-                          </div>
-                        </div>
-                      </div>
+                        </CardContent>
+                      </Card>
                     ))}
-                  </div>
-                </div>
+                  </CardContent>
+                </Card>
               </>
             ) : (
-              <div className="p-12 border rounded-lg bg-card text-center text-muted-foreground">
-                <Palette className="h-12 w-12 mx-auto mb-4 opacity-50" />
-                <p>Add background colors and click Optimize to see results</p>
-              </div>
+              <Card>
+                <CardContent className="p-12 text-center text-muted-foreground">
+                  <Palette className="h-12 w-12 mx-auto mb-4 opacity-50" />
+                  <p>Add background colors and click Optimize to see results</p>
+                </CardContent>
+              </Card>
             )}
           </div>
         </div>