Playground

Try the real resolver and components

This page is the only place where the landing imports the package. Tweak intent, variant, tone and glow to see the system react.

PLAYGROUND
Explore intents, variants, tones, glow, intensity and see the resolver output.
Presets
CONTROLS
Optional
Optional
Optional
Optional
DARK
mode="dark"
IntentSurface preview
Stable hooks + CSS variables. No dynamic Tailwind classes.
intent=informed · variant=elevated · intensity=medium
RESOLVED (DEBUG)
{
  "mode": "dark",
  "intent": "informed",
  "variant": "elevated",
  "intensity": "medium",
  "toneEffective": "informed",
  "glowKey": null,
  "glowBackground": null,
  "style": {
    "--intent-bg": "rgb(var(--ids-informed))",
    "--intent-ring": "rgb(var(--ids-informed))",
    "--intent-text": "var(--ids-color-blue-200)",
    "--intent-bg-opacity": "0.16",
    "--intent-ring-opacity": "0.3045",
    "--intent-border": "rgb(var(--ids-informed))",
    "--intent-glow-bg": "",
    "--intent-glow-fill-opacity": "0",
    "--intent-glow-border-opacity": "0",
    "--intent-glow-filter": "none"
  },
  "classes": {
    "base": "intent-surface inline-flex items-center gap-2",
    "surface": "intent-bg",
    "border": "intent-ring",
    "text": "intent-text",
    "ring": "",
    "shadow": "intent-shadow-soft",
    "glow": "",
    "disabled": ""
  },
  "warnings": []
}
COMPONENTS
Browse components and jump to dedicated playground pages.
18/18 shown
🕹️
CONTROL
(9)