Scaffold

Design tokens

Copy-paste CSS variables (and optional .glass utility) so components you copy from this site look consistent in your app. No dependency on this platform—you own the code.

Usage

  1. Copy the snippet below into your global CSS (e.g. globals.css or app.css).
  2. Ensure your Tailwind config maps theme colors to these variables (e.g. background: "hsl(var(--background))") if you use Tailwind.
  3. For dark mode, add the .dark class on a parent (e.g. html or body) when dark mode is active.

Chat theming (plug-and-play)

Chat templates (e.g. chat-layout, chat-message-row) use CSS variables so you can theme bubbles and spacing without changing component code. Override these in your global CSS or on a wrapper (e.g. [data-chat-theme="custom"]) for scoped themes.

  • --chat-user-bg, --chat-user-text — user bubble
  • --chat-assistant-bg, --chat-assistant-text — assistant bubble
  • --chat-bubble-radius, --chat-message-gap, --chat-bubble-max-width — layout

Snippet

You can also fetch this programmatically: GET /api/tokens returns { css, description }.

globals.css
/* Design system tokens – paste into your globals.css or a root stylesheet */

:root {
  --background: hsl(230 25% 98%);
  --foreground: hsl(230 50% 10%);
  --card: hsl(230 25% 100% / 0.8);
  --card-foreground: hsl(230 50% 10%);
  --popover: hsl(230 25% 100% / 0.9);
  --popover-foreground: hsl(230 50% 10%);
  --primary: hsl(175 70% 42%);
  --primary-foreground: hsl(0 0% 100%);
  --secondary: hsl(230 25% 90%);
  --secondary-foreground: hsl(230 50% 10%);
  --muted: hsl(230 25% 95%);
  --muted-foreground: hsl(230 20% 40%);
  --accent: hsl(175 70% 95%);
  --accent-foreground: hsl(175 70% 35%);
  --destructive: hsl(0 84% 60%);
  --destructive-foreground: hsl(0 0% 100%);
  --border: hsl(230 25% 90%);
  --input: hsl(230 25% 90%);
  --ring: hsl(175 70% 42%);
  --radius: 0.75rem;
  --glow-primary: hsla(175, 70%, 42%, 0.22);
  --glass-bg: hsl(230 25% 100% / 0.65);
  --glass-border: rgba(255, 255, 255, 0.35);
  --glass-blur: 12px;

  /* Chat theming – plug-and-play */
  --chat-user-bg: hsl(175 70% 42% / 0.15);
  --chat-user-text: var(--foreground);
  --chat-assistant-bg: var(--glass-bg);
  --chat-assistant-text: var(--foreground);
  --chat-bubble-radius: var(--radius);
  --chat-message-gap: 0.75rem;
  --chat-bubble-max-width: 85%;
}

.dark {
  --background: hsl(230 40% 4%);
  --foreground: hsl(210 20% 98%);
  --card: hsl(230 40% 6% / 0.7);
  --card-foreground: hsl(210 20% 98%);
  --popover: hsl(230 40% 6% / 0.9);
  --popover-foreground: hsl(210 20% 98%);
  --primary: hsl(175 65% 48%);
  --primary-foreground: hsl(230 40% 4%);
  --secondary: hsl(230 30% 12%);
  --secondary-foreground: hsl(210 20% 98%);
  --muted: hsl(230 30% 12%);
  --muted-foreground: hsl(230 15% 70%);
  --accent: hsl(175 65% 15% / 0.3);
  --accent-foreground: hsl(175 65% 70%);
  --destructive: hsl(0 84% 60%);
  --destructive-foreground: hsl(210 20% 98%);
  --border: hsl(230 30% 20%);
  --input: hsl(230 30% 20%);
  --ring: hsl(175 65% 48%);
  --glow-primary: hsla(175, 65%, 48%, 0.2);
  --glass-bg: hsl(230 40% 6% / 0.65);
  --glass-border: rgba(255, 255, 255, 0.1);

  /* Chat theming */
  --chat-user-bg: hsl(175 65% 48% / 0.2);
  --chat-assistant-bg: var(--glass-bg);
}

/* Optional: glass utility used by many templates */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
}

For AI developers — manifest API, Cursor/Copilot, and context.