Copy for LLM

# App context — Hex UI

Generated by `emit_app_context`. Paste this into your LLM chat as project context.

## Theme

**Default** (`default`) — A refined, neutral theme with subtle depth. Professional and versatile with clean lines and balanced contrast.

| Token | Value |
|---|---|
| `--background` | `0 0% 100%` |
| `--foreground` | `240 10% 3.9%` |
| `--primary` | `240 5.9% 10%` |
| `--primary-foreground` | `0 0% 98%` |
| `--destructive` | `0 72% 45%` |
| `--radius` | `0.625rem` |

_Values are raw — wrap in `hsl(...)` when consuming via Tailwind v4 `@theme`._

## globals.css

Replace your `app/globals.css` (or paste this into it) so every component reads the tokens above.

```css
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 4% 38%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 72% 45%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 5.9% 10%;
    --radius: 0.625rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --gap-xs: 0.25rem;
    --gap-sm: 0.5rem;
    --gap-md: 1rem;
    --gap-lg: 1.5rem;
    --gap-xl: 2rem;
    --container-sm: 33rem;
    --container-md: 40rem;
    --container-lg: 50rem;
    --container-xl: 66rem;
    --control-height-sm: 2.25rem;
    --control-height-md: 2.5rem;
    --control-height-lg: 2.75rem;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 70%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 75% 65%;
    --destructive-foreground: 0 75% 15%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    --radius: 0.625rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --gap-xs: 0.25rem;
    --gap-sm: 0.5rem;
    --gap-md: 1rem;
    --gap-lg: 1.5rem;
    --gap-xl: 2rem;
    --container-sm: 33rem;
    --container-md: 40rem;
    --container-lg: 50rem;
    --container-xl: 66rem;
    --control-height-sm: 2.25rem;
    --control-height-md: 2.5rem;
    --control-height-lg: 2.75rem;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --duration-fast: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
  }
}
```

## tailwind.config.ts

Add to your `theme.extend` so utility classes like `p-4` resolve to your tokens:

```ts
export default {
  theme: {
    extend: {
      colors: {
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        card: "hsl(var(--card))",
        "card-foreground": "hsl(var(--card-foreground))",
        popover: "hsl(var(--popover))",
        "popover-foreground": "hsl(var(--popover-foreground))",
        primary: "hsl(var(--primary))",
        "primary-foreground": "hsl(var(--primary-foreground))",
        secondary: "hsl(var(--secondary))",
        "secondary-foreground": "hsl(var(--secondary-foreground))",
        muted: "hsl(var(--muted))",
        "muted-foreground": "hsl(var(--muted-foreground))",
        accent: "hsl(var(--accent))",
        "accent-foreground": "hsl(var(--accent-foreground))",
        destructive: "hsl(var(--destructive))",
        "destructive-foreground": "hsl(var(--destructive-foreground))",
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
      },
      borderRadius: {
        radius: "var(--radius)",
      },
      spacing: {
        "1": "var(--space-1)",
        "2": "var(--space-2)",
        "3": "var(--space-3)",
        "4": "var(--space-4)",
        "6": "var(--space-6)",
        "8": "var(--space-8)",
        "12": "var(--space-12)",
        "16": "var(--space-16)",
        xs: "var(--gap-xs)",
        sm: "var(--gap-sm)",
        md: "var(--gap-md)",
        lg: "var(--gap-lg)",
        xl: "var(--gap-xl)",
      },
      fontSize: {
        xs: "var(--text-xs)",
        sm: "var(--text-sm)",
        base: "var(--text-base)",
        lg: "var(--text-lg)",
        xl: "var(--text-xl)",
        "2xl": "var(--text-2xl)",
        "3xl": "var(--text-3xl)",
      },
      transitionDuration: {
        fast: "var(--duration-fast)",
        normal: "var(--duration-normal)",
        slow: "var(--duration-slow)",
      },
      height: {
        "container-sm": "var(--container-sm)",
        "container-md": "var(--container-md)",
        "container-lg": "var(--container-lg)",
        "container-xl": "var(--container-xl)",
        "height-sm": "var(--control-height-sm)",
        "height-md": "var(--control-height-md)",
        "height-lg": "var(--control-height-lg)",
      },
    },
  },
};
```

## Components (0)

## Install

```bash
npx @hex-core/cli@latest init
```

## Context prompt

You are building a Next.js 16 (App Router, Turbopack) app using @hex-core components.

Rules you must follow:

1. Use the exact tokens defined in `globals.css` above. Do not introduce new colors or spacing values that aren't in the token set.
2. Use `@hex-core/components` imports for all UI primitives — never re-implement Button / Card / Dialog / etc. in plain HTML.
3. For layout, prefer the layout primitives (`Stack`, `Cluster`, `Container`, `Grid`); fall back to Tailwind utilities mapped to spacing tokens (`p-4`, `gap-2`, etc.) when a primitive isn't a fit.
4. Honor the AI guidance in each component's `.schema.ts` — `whenToUse`, `whenNotToUse`, `commonMistakes`, `accessibilityNotes`.
5. Default to React Server Components; only add `"use client"` when needed (event handlers, hooks, browser APIs).
6. All interactive elements get `transition-all duration-normal ease-out` and `focus-visible:ring-2`.

Components in scope for this app: (none selected — pull components on demand via `npx @hex-core/cli@latest add <slug>`).

Now: <your ask here, e.g. "build me a pricing page with three tiers">.

## Packages

- `@hex-core/components` — `pnpm add @hex-core/components` — 59 Radix + CVA components incl. layout primitives + ColorPicker, Tailwind v4 entry.
- `@hex-core/tokens` — `pnpm add @hex-core/tokens` — HSL design tokens, theme presets, and CSS/Tailwind transformers.
- `@hex-core/themes` — `pnpm add @hex-core/themes` — Premium theme catalog — midnight, ember, and future presets.
- `@hex-core/registry` — `pnpm add @hex-core/registry` — Zod schemas + TypeScript types for components, themes, and recipes.
- `@hex-core/payload` — `pnpm add @hex-core/payload` — Pure-function builders for the canonical LLM context markdown.
- `@hex-core/cli` — `pnpm dlx @hex-core/cli init` — The hex binary — init, add, list, theme set, recipe add.
- `@hex-core/mcp` — `pnpm dlx @hex-core/mcp` — Stdio MCP server: emit_app_context, emit_figma_tokens, resolve_spec, and more.
- `@hex-core/preview` — `pnpm add @hex-core/preview` — DemoSurface wrapper for showcasing components on flat-white pages.