@turtleclub/ui 0.0.1

package/src/components/ui/separator.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

package/src/components/ui/sonner.tsx

@@ -0,0 +1,23 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/src/components/ui/switch.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/src/components/ui/toggle-group.tsx

@@ -0,0 +1,71 @@
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      className={cn(
+        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }

package/src/components/ui/toggle.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/src/index.ts

@@ -0,0 +1,9 @@
+// Re-export components
+export * from "./components/ui";
+export * from "./components/molecules";
+
+// Re-export utilities
+export * from "./lib/utils";
+
+// Re-export design tokens
+export * from "./tokens";

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/styles/globals.css

@@ -0,0 +1,75 @@
+/**
+ * Turtle Design System - Global Styles
+ * 
+ * This is the main entry point for the Turtle Design System.
+ * It imports our complete token-based theming architecture and
+ * provides base styles for all components.
+ */
+
+/* Import Tailwind CSS and animations */
+@import "tailwindcss";
+@import "tw-animate-css";
+
+/* Import our complete design system */
+@import "./themes/index.css";
+
+/* Custom Tailwind variants */
+@custom-variant dark (&:is(.dark *));
+
+/* ===== TAILWIND THEME INTEGRATION ===== */
+/* 
+ * This section maps our semantic variables to Tailwind's color system
+ * so we can use classes like bg-background, text-foreground, etc.
+ */
+@theme inline {
+  /* Border radius mapping */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  
+  /* Color mapping for Tailwind classes */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --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);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+}
+
+/* ===== BASE STYLES ===== */
+@layer base {
+  /* Universal border and outline styles */
+  * {
+    @apply border-border outline-ring/50;
+  }
+  
+  /* HTML and body setup */
+  html,
+  body {
+    @apply size-full font-sans antialiased;
+  }
+  
+  /* Body styling with semantic variables */
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/src/styles/themes/index.css

@@ -0,0 +1,9 @@
+/**
+ * Turtle Design System - Themes
+ * 
+ * This file exports all available themes for the design system.
+ * Import this file to get the complete theming solution.
+ */
+
+/* Import semantic theme (includes core tokens) */
+@import "./semantic.css";

package/src/styles/themes/semantic.css

@@ -0,0 +1,107 @@
+/**
+ * Turtle Design System - Semantic Theme Variables
+ * 
+ * This file maps our core design tokens to the semantic variables
+ * expected by shadcn/ui components. This is the bridge between our
+ * brand identity and the component API.
+ * 
+ * All shadcn/ui components use these semantic variables, making them
+ * fully themeable while maintaining our brand consistency.
+ */
+
+/* Import core design tokens first */
+@import "../tokens/index.css";
+
+:root {
+  /* ===== SEMANTIC COLOR MAPPING ===== */
+  /* Default theme: DARK (Turtle's primary brand experience) */
+
+  /* Background colors */
+  --background: var(--color-brand-black); /* #141514 - Dark background (default) */
+  --foreground: var(--color-brand-white); /* #F9F9F9 - Light text (default) */
+
+  /* Card colors */
+  --card: var(--color-brand-black); /* #141514 - Dark card background */
+  --card-foreground: var(--color-brand-white); /* #F9F9F9 - Light card text */
+
+  /* Popover colors */
+  --popover: var(--color-brand-black); /* #141514 - Dark popover */
+  --popover-foreground: var(--color-brand-white); /* #F9F9F9 - Light popover text */
+
+  /* Primary colors */
+  --primary: var(--color-brand-green); /* #73F36C - Primary brand color */
+  --primary-foreground: var(--color-brand-black); /* #141514 - Black text on green */
+
+  /* Secondary colors */
+  --secondary: var(--color-neutral-alpha-10); /* #F9F9F91A - Light overlay on dark */
+  --secondary-foreground: var(--color-brand-white); /* #F9F9F9 - Light text */
+
+  /* Muted colors */
+  --muted: var(--color-neutral-alpha-2); /* #F9F9F905 - Subtle overlay */
+  --muted-foreground: var(--color-neutral-alpha-50); /* #FFFFFF80 - Muted text */
+
+  /* Accent colors */
+  --accent: var(--color-brand-green); /* #73F36C - Accent color */
+  --accent-foreground: var(--color-brand-black); /* #141514 - Black text on green */
+
+  /* Destructive colors */
+  --destructive: var(--color-error); /* #EF4444 - Error/destructive */
+  --destructive-foreground: var(--color-brand-white); /* #F9F9F9 - Light text on red */
+
+  /* Border and input colors */
+  --border: var(--color-neutral-alpha-10); /* #F9F9F91A - Light borders on dark */
+  --input: var(--color-neutral-alpha-2); /* #F9F9F905 - Subtle input background */
+  --ring: var(--color-brand-green); /* #73F36C - Focus ring */
+
+  /* ===== SEMANTIC SPACING MAPPING ===== */
+  --radius: var(--radius-default); /* 10px - Default border radius */
+
+  /* ===== CHART COLORS (FOR DATA VISUALIZATION) ===== */
+  --chart-1: var(--color-brand-green); /* Primary chart color */
+  --chart-2: var(--color-info); /* Secondary chart color */
+  --chart-3: var(--color-warning); /* Tertiary chart color */
+  --chart-4: var(--color-error); /* Quaternary chart color */
+  --chart-5: var(--color-success); /* Quinary chart color */
+}
+
+/* ===== LIGHT THEME ===== */
+.light {
+  /* Light theme - for when users prefer light mode */
+
+  /* Background colors */
+  --background: var(--color-brand-white); /* #F9F9F9 - Light background */
+  --foreground: var(--color-brand-black); /* #141514 - Dark text */
+
+  /* Card colors */
+  --card: var(--color-brand-white); /* #F9F9F9 - Light card background */
+  --card-foreground: var(--color-brand-black); /* #141514 - Dark card text */
+
+  /* Popover colors */
+  --popover: var(--color-brand-white); /* #F9F9F9 - Light popover */
+  --popover-foreground: var(--color-brand-black); /* #141514 - Dark popover text */
+
+  /* Primary colors */
+  --primary: var(--color-brand-green); /* #73F36C - Same green (brand consistency) */
+  --primary-foreground: var(--color-brand-black); /* #141514 - Black text on green */
+
+  /* Secondary colors */
+  --secondary: var(--color-neutral-alpha-10); /* #F9F9F91A - Light overlay */
+  --secondary-foreground: var(--color-brand-black); /* #141514 - Dark text */
+
+  /* Muted colors */
+  --muted: var(--color-neutral-alpha-2); /* #F9F9F905 - Subtle overlay */
+  --muted-foreground: var(--color-neutral-alpha-50); /* #FFFFFF80 - Muted text */
+
+  /* Accent colors */
+  --accent: var(--color-brand-green); /* #73F36C - Same accent */
+  --accent-foreground: var(--color-brand-black); /* #141514 - Black text on green */
+
+  /* Destructive colors */
+  --destructive: var(--color-error); /* #EF4444 - Same error color */
+  --destructive-foreground: var(--color-brand-white); /* #F9F9F9 - Light text on red */
+
+  /* Border and input colors */
+  --border: var(--color-neutral-alpha-dark-10); /* #1415141A - Dark borders on light */
+  --input: var(--color-neutral-alpha-2); /* #F9F9F905 - Subtle input background */
+  --ring: var(--color-brand-green); /* #73F36C - Same focus ring */
+}

package/src/styles/tokens/colors.css

@@ -0,0 +1,77 @@
+/**
+ * Turtle Design System - Core Color Tokens
+ * 
+ * These are the foundational color values that define our brand identity.
+ * They should not be changed frequently and represent our core brand colors.
+ * 
+ * Naming Convention:
+ * --color-[category]-[name]: [value]
+ * 
+ * Categories:
+ * - brand: Primary brand colors (Neon Green, Ninja Black, Wise White)
+ * - neutral: Functional grays and transparent variants
+ * - semantic: Special purpose colors (success, error, warning)
+ */
+
+:root {
+  /* ===== PRIMARY BRAND COLORS ===== */
+  /* These are the core Turtle Club brand colors */
+  --color-brand-green: #73F36C;      /* Neon Green - Primary brand color */
+  --color-brand-black: #141514;      /* Ninja Black - Dark backgrounds, text */
+  --color-brand-white: #F9F9F9;      /* Wise White - Light backgrounds, text */
+  
+  /* ===== NEUTRAL COLORS ===== */
+  /* Functional colors for UI elements */
+  --color-neutral-50: #F9F9F9;       /* Lightest - same as brand white */
+  --color-neutral-100: #F1F1F1;      /* Very light gray */
+  --color-neutral-200: #E5E5E5;      /* Light gray for borders */
+  --color-neutral-300: #D1D1D1;      /* Medium light gray */
+  --color-neutral-400: #A3A3A3;      /* Medium gray */
+  --color-neutral-500: #737373;      /* True neutral */
+  --color-neutral-600: #525252;      /* Medium dark gray */
+  --color-neutral-700: #404040;      /* Dark gray */
+  --color-neutral-800: #262626;      /* Very dark gray */
+  --color-neutral-900: #141514;      /* Darkest - same as brand black */
+  
+  /* ===== TRANSPARENT VARIANTS ===== */
+  /* Alpha variants for overlays and subtle backgrounds */
+  --color-neutral-alpha-2: #F9F9F905;    /* 2% opacity white */
+  --color-neutral-alpha-5: #F9F9F90D;    /* 5% opacity white */
+  --color-neutral-alpha-10: #F9F9F91A;   /* 10% opacity white */
+  --color-neutral-alpha-20: #F9F9F933;   /* 20% opacity white */
+  --color-neutral-alpha-30: #F9F9F94D;   /* 30% opacity white */
+  --color-neutral-alpha-50: #FFFFFF80;   /* 50% opacity white */
+  
+  /* Green alpha variants for design system */
+  --color-brand-green-alpha-10: #47A73B1A;  /* 10% opacity green */
+  --color-brand-green-alpha-20: #73F36C33;  /* 20% opacity green (Dark Green) */
+  
+  /* Special colors from design system */
+  --color-brand-aqua: #AAF1D5;              /* Aqua - Secondary brand color */
+  
+  /* Black alpha variants */
+  --color-neutral-alpha-dark-2: #14151405;    /* 2% opacity black */
+  --color-neutral-alpha-dark-5: #1415140D;    /* 5% opacity black */
+  --color-neutral-alpha-dark-10: #1415141A;   /* 10% opacity black */
+  --color-neutral-alpha-dark-20: #14151433;   /* 20% opacity black */
+  --color-neutral-alpha-dark-30: #1415144D;   /* 30% opacity black */
+  --color-neutral-alpha-dark-50: #14151480;   /* 50% opacity black */
+  
+  /* ===== SEMANTIC COLORS ===== */
+  /* Colors for specific UI states and feedback */
+  --color-success: #22C55E;          /* Green for success states */
+  --color-success-light: #DCFCE7;    /* Light green background */
+  --color-success-dark: #166534;     /* Dark green for text */
+  
+  --color-error: #EF4444;            /* Red for error states */
+  --color-error-light: #FEE2E2;      /* Light red background */
+  --color-error-dark: #991B1B;       /* Dark red for text */
+  
+  --color-warning: #F59E0B;          /* Amber for warning states */
+  --color-warning-light: #FEF3C7;    /* Light amber background */
+  --color-warning-dark: #92400E;     /* Dark amber for text */
+  
+  --color-info: #3B82F6;             /* Blue for info states */
+  --color-info-light: #DBEAFE;       /* Light blue background */
+  --color-info-dark: #1E40AF;        /* Dark blue for text */
+}

package/src/styles/tokens/index.css

@@ -0,0 +1,15 @@
+/**
+ * Turtle Design System - Core Design Tokens
+ * 
+ * This file imports all core design tokens that define the foundation
+ * of our design system. These tokens should be imported before any
+ * semantic theme files.
+ * 
+ * Import order is important for CSS cascade.
+ */
+
+/* Core design tokens - order matters */
+@import "./colors.css";
+@import "./spacing.css";
+@import "./radius.css";
+@import "./typography.css";

package/src/styles/tokens/radius.css

@@ -0,0 +1,46 @@
+/**
+ * Turtle Design System - Core Radius Tokens
+ * 
+ * These define the border radius scale for consistent rounded corners
+ * across all components. Based on a mathematical progression.
+ * 
+ * Naming Convention:
+ * --radius-[size]: [value]
+ * 
+ * Scale: none, sm, md, lg, xl, 2xl, 3xl, full
+ */
+
+:root {
+  /* ===== BASE RADIUS SCALE ===== */
+  /* Mathematical progression for visual harmony */
+  --radius-none: 0px;                /* 0px - No rounding */
+  --radius-xs: 0.125rem;             /* 2px - Extra small rounding */
+  --radius-sm: 0.25rem;              /* 4px - Small rounding */
+  --radius-md: 0.375rem;             /* 6px - Medium rounding */
+  --radius-lg: 0.5rem;               /* 8px - Large rounding */
+  --radius-xl: 0.75rem;              /* 12px - Extra large rounding */
+  --radius-2xl: 1rem;                /* 16px - 2X large rounding */
+  --radius-3xl: 1.5rem;              /* 24px - 3X large rounding */
+  --radius-full: 9999px;             /* Full rounding (pill shape) */
+  
+  /* ===== TURTLE DESIGN SYSTEM DEFAULTS ===== */
+  /* Our preferred radius values based on the design system */
+  --radius-default: 0.625rem;        /* 10px - Turtle default radius */
+  --radius-button: var(--radius-full); /* Full rounding for buttons */
+  --radius-card: var(--radius-xl);   /* 12px - Card rounding */
+  --radius-input: var(--radius-md);  /* 6px - Input field rounding */
+  --radius-modal: var(--radius-xl);  /* 12px - Modal rounding */
+  --radius-tooltip: var(--radius-md); /* 6px - Tooltip rounding */
+  
+  /* ===== COMPONENT-SPECIFIC RADIUS ===== */
+  /* Specific radius values for different component types */
+  --radius-avatar: var(--radius-full);     /* Avatar - fully rounded */
+  --radius-badge: var(--radius-full);      /* Badge - pill shape */
+  --radius-chip: var(--radius-full);       /* Chip - pill shape */
+  --radius-progress: var(--radius-full);   /* Progress bar - rounded ends */
+  --radius-slider-thumb: var(--radius-full); /* Slider thumb - circle */
+  --radius-switch: var(--radius-full);     /* Switch - pill shape */
+  --radius-tab: var(--radius-lg);          /* Tab - medium rounding */
+  --radius-dropdown: var(--radius-lg);     /* Dropdown - medium rounding */
+  --radius-popover: var(--radius-lg);      /* Popover - medium rounding */
+}

package/src/styles/tokens/spacing.css

@@ -0,0 +1,52 @@
+/**
+ * Turtle Design System - Core Spacing Tokens
+ * 
+ * These define the spatial rhythm and consistency across all components.
+ * Based on a 4px base unit for mathematical harmony.
+ * 
+ * Naming Convention:
+ * --spacing-[size]: [value]
+ * 
+ * Scale: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96
+ */
+
+:root {
+  /* ===== BASE SPACING SCALE ===== */
+  /* Based on 4px increments for consistent rhythm */
+  --spacing-0: 0px;                  /* 0px - No spacing */
+  --spacing-1: 0.25rem;              /* 4px - Tiny spacing */
+  --spacing-2: 0.5rem;               /* 8px - Extra small */
+  --spacing-3: 0.75rem;              /* 12px - Small */
+  --spacing-4: 1rem;                 /* 16px - Default/medium */
+  --spacing-5: 1.25rem;              /* 20px - Medium-large */
+  --spacing-6: 1.5rem;               /* 24px - Large */
+  --spacing-8: 2rem;                 /* 32px - Extra large */
+  --spacing-10: 2.5rem;              /* 40px - 2X large */
+  --spacing-12: 3rem;                /* 48px - 3X large */
+  --spacing-16: 4rem;                /* 64px - 4X large */
+  --spacing-20: 5rem;                /* 80px - 5X large */
+  --spacing-24: 6rem;                /* 96px - 6X large */
+  --spacing-32: 8rem;                /* 128px - Huge */
+  --spacing-40: 10rem;               /* 160px - Extra huge */
+  --spacing-48: 12rem;               /* 192px - Maximum */
+  
+  /* ===== SEMANTIC SPACING ===== */
+  /* Common spacing patterns with semantic names */
+  --spacing-xs: var(--spacing-1);    /* 4px - Extra small */
+  --spacing-sm: var(--spacing-2);    /* 8px - Small */
+  --spacing-md: var(--spacing-4);    /* 16px - Medium/default */
+  --spacing-lg: var(--spacing-6);    /* 24px - Large */
+  --spacing-xl: var(--spacing-8);    /* 32px - Extra large */
+  --spacing-2xl: var(--spacing-12);  /* 48px - 2X large */
+  --spacing-3xl: var(--spacing-16);  /* 64px - 3X large */
+  
+  /* ===== COMPONENT-SPECIFIC SPACING ===== */
+  /* Common spacing patterns for specific use cases */
+  --spacing-button-padding-x: var(--spacing-4);      /* 16px - Button horizontal padding */
+  --spacing-button-padding-y: var(--spacing-2);      /* 8px - Button vertical padding */
+  --spacing-card-padding: var(--spacing-6);          /* 24px - Card inner padding */
+  --spacing-container-padding: var(--spacing-4);     /* 16px - Container padding */
+  --spacing-section-gap: var(--spacing-8);           /* 32px - Gap between sections */
+  --spacing-component-gap: var(--spacing-4);         /* 16px - Gap between components */
+  --spacing-element-gap: var(--spacing-2);           /* 8px - Gap between small elements */
+}