AIOX STARTERTOKEN EXPORTV1.0 // VARIANT READY

Token Export

Copy starter theme tokens for Tailwind + shadcn/ui projects

Starter System2 Themes2026
01InstructionsCopy · Paste · Ship
  1. Pick a theme below and review the palette preview before copying the CSS block.
  2. Click Copy CSS to copy the full variable block.
  3. Paste into your project's index.css or globals.css.
  4. All shadcn/ui components will automatically adopt the starter visual system.

Compatible with Tailwind CSS v3 + v4, shadcn/ui, and Lovable. Values are plain hex/rgba - no oklch dependency.

02Gold ThemeStarter Gold Edition
Accent
#DDD1BB
Surface
#151517
Text
#F4F4F4
Border
#FFFFFF17
Gold — CSS Variables
/* AIOX Design Starter — Gold */
/* Paste into index.css of your Tailwind + shadcn/ui project */

@layer base {
  :root {
    /* Palette */
    --background: #09090A;
    --foreground: #F4F4F4;
    --primary: #DDD1BB;
    --primary-foreground: #121213;
    --card: #151517;
    --card-foreground: #F4F4F4;
    --popover: #151517;
    --popover-foreground: #F4F4F4;
    --secondary: #1D1D20;
    --secondary-foreground: #F4F4F4;
    --muted: #18181B;
    --muted-foreground: rgba(244, 244, 244, 0.52);
    --accent: rgba(221, 209, 187, 0.1);
    --accent-foreground: #DDD1BB;
    --destructive: #EF4444;
    --destructive-foreground: #FFFFFF;
    --border: rgba(255, 255, 255, 0.09);
    --input: rgba(255, 255, 255, 0.12);
    --ring: rgba(221, 209, 187, 0.4);
    --radius: 0.5rem;

    /* Extended Palette */
    --surface: #151517;
    --surface-alt: #1D1D20;
    --dim: rgba(244, 244, 244, 0.52);
    --blue: #0099FF;
    --flare: #C4B7A2;
    --error: #EF4444;
    --warning: #F59E0B;

    /* Font Stack */
    --font-sans: "Manrope", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;

    /* Motion */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-decel: cubic-bezier(0, 0, 0.2, 1);
  }
}
03Bronze ThemeStarter Bronze Edition
Accent
#BFA37A
Surface
#151517
Text
#F4F4F4
Border
#FFFFFF17
Bronze — CSS Variables
/* AIOX Design Starter — Bronze */
/* Paste into index.css of your Tailwind + shadcn/ui project */

@layer base {
  :root {
    /* Palette */
    --background: #09090A;
    --foreground: #F4F4F4;
    --primary: #BFA37A;
    --primary-foreground: #121213;
    --card: #151517;
    --card-foreground: #F4F4F4;
    --popover: #151517;
    --popover-foreground: #F4F4F4;
    --secondary: #1D1D20;
    --secondary-foreground: #F4F4F4;
    --muted: #18181B;
    --muted-foreground: rgba(244, 244, 244, 0.52);
    --accent: rgba(191, 163, 122, 0.1);
    --accent-foreground: #BFA37A;
    --destructive: #EF4444;
    --destructive-foreground: #FFFFFF;
    --border: rgba(255, 255, 255, 0.09);
    --input: rgba(255, 255, 255, 0.12);
    --ring: rgba(191, 163, 122, 0.4);
    --radius: 0.5rem;

    /* Extended Palette */
    --surface: #151517;
    --surface-alt: #1D1D20;
    --dim: rgba(244, 244, 244, 0.52);
    --blue: #0099FF;
    --flare: #A78B60;
    --error: #EF4444;
    --warning: #F59E0B;

    /* Font Stack */
    --font-sans: "Manrope", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", "SFMono-Regular", ui-monospace, monospace;

    /* Motion */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-decel: cubic-bezier(0, 0, 0.2, 1);
  }
}