ag-ui-protocol · ranst91 · Aug 11, 2025 · Aug 8, 2025 · Aug 8, 2025 · Aug 8, 2025
@@ -38,6 +38,7 @@
     "@mdx-js/react": "^3.1.0",
     "@monaco-editor/react": "^4.7.0",
     "@next/mdx": "^15.2.3",
+    "@phosphor-icons/react": "^2.1.10",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.3",

@@ -55,5 +55,5 @@ export default function FeatureLayout({ children, params }: Props) {
     }
   }, [children, codeFiles, readme, view])
 
-  return <div className="bg-(--copilot-kit-background-color) w-full h-full">{content}</div>;
+  return <div className="bg-white rounded-lg overflow-hidden w-full h-full">{content}</div>;
 }
@@ -1,48 +1,151 @@
 @import "tailwindcss";
+@import "../styles/typography.css";
 
 @plugin "tailwindcss-animate";
 
 @custom-variant dark (&:is(.dark *));
 
-@theme inline {
+@theme {
+  /* Base Shadcn Colors */
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-  --color-sidebar-ring: var(--sidebar-ring);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
-  --color-ring: var(--ring);
-  --color-input: var(--input);
-  --color-border: var(--border);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-destructive: var(--destructive);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-accent: var(--accent);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-muted: var(--muted);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-secondary: var(--secondary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-primary: var(--primary);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-popover: var(--popover);
-  --color-card-foreground: var(--card-foreground);
   --color-card: var(--card);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* Provider Colors */
+  --color-provider-openai: var(--openai);
+  --color-provider-anthropic: var(--anthropic);
+  --color-provider-cohere: var(--cohere);
+
+  /* CopilotCloud Palette Colors */
+  --color-palette-grey-0: #FFFFFF;
+  --color-palette-grey-25: #FAFCFA;
+  --color-palette-grey-100: #F7F7F9;
+  --color-palette-grey-200: #F0F0F4;
+  --color-palette-grey-300: #E9E9EF;
+  --color-palette-grey-400: #E2E2EA;
+  --color-palette-grey-500: #DBDBE5;
+  --color-palette-grey-600: #AFAFB7;
+  --color-palette-grey-700: #838389;
+  --color-palette-grey-800: #575758;
+  --color-palette-grey-900: #2B2B2B;
+  --color-palette-grey-1000: #010507;
+
+  --color-palette-mint-40030: rgba(133,224,206,0.3);
+  --color-palette-mint-400: #85E0CE;
+  --color-palette-mint-800: #1B936F;
+
+  --color-palette-lilac-40010: rgba(190,194,255,0.1);
+  --color-palette-lilac-40020: rgba(190,194,255,0.2);
+  --color-palette-lilac-40030: rgba(190,194,255,0.3);
+  --color-palette-lilac-400: #BEC2FF;
+
+  --color-palette-yellow-40030: rgba(255,243,136,0.3);
+  --color-palette-yellow-400: #FFF388;
+
+  --color-palette-orange-40020: rgba(255,172,77,0.2);
+  --color-palette-orange-400: #FFAC4D;
+
+  --color-palette-surface-main: #DEDEE9;
+  --color-palette-surface-solidEquivalentDefault70: #F8F8FB;
+  --color-palette-surface-default70: rgba(255,255,255,0.7);
+  --color-palette-surface-default50: rgba(255,255,255,0.5);
+  --color-palette-surface-default30: rgba(255,255,255,0.3);
+  --color-palette-surface-container: #FFFFFF;
+  --color-palette-surface-containerHovered: #FAFCFA;
+  --color-palette-surface-containerFocusedPressed: rgba(190,194,255,0.1);
+  --color-palette-surface-containerActive: #BEC2FF1A;
+  --color-palette-surface-containerActiveHovered: rgba(190,194,255,0.2);
+  --color-palette-surface-containerActiveFocused: rgba(190,194,255,0.3);
+  --color-palette-surface-containerMint: #B5E0CE;
+  --color-palette-surface-containerMint30: rgba(181,224,206,0.3);
+  --color-palette-surface-containerLilac: #BEC2FF;
+  --color-palette-surface-containerInvert: #010507;
+  --color-palette-surface-background: #DBDBE5;
+  --color-palette-surface-progressBarEmpty: #0105071A;
+  --color-palette-surface-progressBarFull: #189370;
+  --color-palette-surface-surfaceActionFilledHoveredAndFocused: #2B2B2B;
+  --color-palette-surface-surfaceActionFilledPressed: #57575B;
+  --color-palette-surface-containerPressed: #BEC2FF4D;
+  --color-palette-surface-containerEnabledSolidEquivalent: #F8F9FF;
+  --color-palette-surface-containerPressedHoverSolidEquivalent: #F1F2FF;
+  --color-palette-surface-containerActivePressedSolidEquivalent: #E5E7FD;
+  --color-palette-surface-containerHoveredAndFocused: #F0F0F4;
+  --color-palette-surface-actionGhostHoveredAndFocused: #0105070D;
+
+  --color-palette-text-primary: #010507;
+  --color-palette-text-secondary: #57575B;
+  --color-palette-text-disabled: #838389;
+  --color-palette-text-invert: #FFFFFF;
+  --color-palette-text-details: #189370;
+  --color-palette-text-title: #3C464A;
+  --color-palette-text-progressBar: #525252;
+  --color-palette-text-link: #0D2E41;
+
+  --color-palette-icon-default: #010507;
+  --color-palette-icon-disabled: #838389;
+  --color-palette-icon-invert: #FFFFFF;
+
+  --color-palette-border-default: #FFFFFF;
+  --color-palette-border-container: #DBDBE5;
+  --color-palette-border-actionEnabled: #BEC2FF;
+  --color-palette-border-divider: #DBDBE5;
+
+  --color-palette-gradient-primary: linear-gradient(90deg, #85E0CE 0%, #FFF388 100%);
+
+  /* CopilotCloud Spacing */
+  --spacing-spacing-1: 4px;
+  --spacing-spacing-2: 8px;
+  --spacing-spacing-3: 12px;
+  --spacing-spacing-4: 16px;
+  --spacing-spacing-5: 20px;
+  --spacing-spacing-6: 24px;
+  --spacing-spacing-7: 28px;
+  --spacing-spacing-8: 32px;
+  --spacing-spacing-9: 36px;
+  --spacing-spacing-10: 40px;
+  --spacing-spacing-11: 44px;
+  --spacing-spacing-12: 48px;
+  --spacing-spacing-13: 52px;
+  --spacing-spacing-14: 56px;
+  --spacing-spacing-15: 60px;
+  --spacing-spacing-16: 64px;
+  --spacing-spacing-17: 68px;
+  --spacing-spacing-18: 72px;
+
+  /* CopilotCloud Border Radius */
+  --radius-xs: 4px;
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 24px;
+  --radius-2xl: 48px;
+  --radius-3xl: 200px;
+
+  /* Font Families */
+  --font-family-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
+  --font-family-mono: 'Spline Sans Mono', ui-monospace, SFMono-Regular, monospace;
+
+  /* Elevation/Shadows */
+  --shadow-sm: 0px 1px 3px 0px rgba(1, 5, 7, 0.08);
+  --shadow-md: 0px 6px 6px -2px rgba(1, 5, 7, 0.08);
+  --shadow-lg: 0px 16px 24px -8px rgba(1, 5, 7, 0.12);
+  --shadow-xl: 0px 24px 32px -12px rgba(1, 5, 7, 0.16);
 }
 
 :root {
@@ -84,6 +187,7 @@
   --openai: hsl(160 70% 50%); /* Bright green */
   --anthropic: hsl(240 80% 60%); /* Bright blue */
   --cohere: hsl(0 80% 60%); /* Bright red */
+
 }
 
 .dark {
@@ -136,6 +240,6 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-background text-foreground font-sans;
   }
 }
@@ -14,19 +14,23 @@ export function DemoList({ demos, selectedDemo, onSelect, llmSelector }: DemoLis
   return (
     <div className="h-full">
       <div className="px-4 pt-3 pb-2">
-        <h2 className="text-xs uppercase tracking-wider font-semibold text-muted-foreground mb-1">
+        <h2
+          className={cn(
+            "transition-all duration-300 ease-in-out inline-block whitespace-nowrap paragraphs-Small-Regular-Uppercase text-[10px] text-palette-text-secondary opacity-100 scale-100 w-fit",
+          )}
+        >
           Demos
         </h2>
         {llmSelector && <div className="mt-2">{llmSelector}</div>}
       </div>
-      <ul className="px-2 space-y-0.5">
+      <ul className="px-2 space-y-1">
         {demos.map((demo) => (
           <li key={demo.id}>
             <button
               className={cn(
-                "w-full text-left py-2 px-3 rounded-md hover:bg-accent/50 transition-colors",
+                "w-full text-left py-2 px-3 rounded-sm hover:bg-white/50 transition-colors",
                 "flex flex-col gap-0.5",
-                selectedDemo === demo.id && "bg-accent",
+                selectedDemo === demo.id && "bg-white/70",
               )}
               onClick={() => onSelect(demo.id)}
             >
@@ -39,11 +43,10 @@ export function DemoList({ demos, selectedDemo, onSelect, llmSelector }: DemoLis
                   {demo.tags.map((tag) => (
                     <Badge
                       key={tag}
-                      variant={selectedDemo === demo.id ? "default" : "secondary"}
                       className={cn(
-                        "text-xs px-1.5 py-0.5 rounded-full",
+                        "text-xs px-1.5 py-0.5 rounded-full bg-white/65 text-primary",
                         selectedDemo === demo.id &&
-                          "bg-primary text-primary-foreground border-transparent",
+                        "bg-primary text-primary-foreground border-transparent",
                       )}
                     >
                       {tag}

@@ -40,7 +40,7 @@ export function MainLayout({ children }: { children: React.ReactNode }) {
 
   return (
     <ViewerLayout>
-      <div className="flex h-full w-full overflow-hidden relative">
+      <div className="flex h-full w-full overflow-hidden relative gap-2">
         {/* Mobile Header with Hamburger Menu */}
         {isMobile && (
           <div className="absolute top-0 left-0 right-0 z-50 bg-background border-b p-2 md:hidden">

@@ -1,6 +1,7 @@
 import React from "react";
 import { ViewerConfig } from "@/types/feature";
 import { cn } from "@/lib/utils";
+import { useMobileView } from "@/utils/use-mobile-view";
 
 interface ViewerLayoutProps extends ViewerConfig {
   className?: string;
@@ -14,13 +15,41 @@ export function ViewerLayout({
   className,
   children,
 }: ViewerLayoutProps) {
+  const { isMobile } = useMobileView();
+
   return (
-    <div className={cn("flex h-screen", className)}>
-      <div className="flex flex-1 overflow-hidden">
+    <div className={cn("relative flex h-screen overflow-hidden bg-palette-surface-main", className, {
+      "p-spacing-2": !isMobile,
+    })}>
+      <div className="flex flex-1 overflow-hidden z-1">
         <main className="flex-1 overflow-auto">
           <div className="h-full">{children}</div>
         </main>
       </div>
+      {/* Background blur circles - Figma exact specs */}
+      {/* Ellipse 1351 */}
+      <div className="absolute w-[445.84px] h-[445.84px] left-[1040px] top-[11px] rounded-full z-0" 
+           style={{ background: 'rgba(255, 172, 77, 0.2)', filter: 'blur(103.196px)' }} />
+
+      {/* Ellipse 1347 */}
+      <div className="absolute w-[609.35px] h-[609.35px] left-[1338.97px] top-[624.5px] rounded-full z-0"
+           style={{ background: '#C9C9DA', filter: 'blur(103.196px)' }} />
+
+      {/* Ellipse 1350 */}
+      <div className="absolute w-[609.35px] h-[609.35px] left-[670px] top-[-365px] rounded-full z-0"
+           style={{ background: '#C9C9DA', filter: 'blur(103.196px)' }} />
+
+      {/* Ellipse 1348 */}
+      <div className="absolute w-[609.35px] h-[609.35px] left-[507.87px] top-[702.14px] rounded-full z-0"
+           style={{ background: '#F3F3FC', filter: 'blur(103.196px)' }} />
+
+      {/* Ellipse 1346 */}
+      <div className="absolute w-[445.84px] h-[445.84px] left-[127.91px] top-[331px] rounded-full z-0"
+           style={{ background: 'rgba(255, 243, 136, 0.3)', filter: 'blur(103.196px)' }} />
+
+      {/* Ellipse 1268 */}
+      <div className="absolute w-[445.84px] h-[445.84px] left-[-205px] top-[802.72px] rounded-full z-0"
+           style={{ background: 'rgba(255, 172, 77, 0.2)', filter: 'blur(103.196px)' }} />
     </div>
   );
 }