Documentation

A small guide to Intent Design System

Intent is the source of truth. This page explains the vocabulary, the rules, and how to start using the system without noise.

Open the playgroundRead on GitHub
⌘K / Ctrl+KStable hooksIntent-first

Quickstart

Install, import, and render your first intent

IDS ships runtime CSS (tokens + intent styles) and a small React API. Import the CSS once, then use components in your UI.

INSTALL
⌘C
npm i intent-design-system
USAGE
⌘C
import "intent-design-system/styles/tokens.css";
import "intent-design-system/styles/intent.css";

import { IntentSurface, IntentControlButton } from "intent-design-system";

export function Example() {
    return (
        <IntentSurface intent="informed" variant="elevated" className="p-6 rounded-2xl">
            <div className="text-sm font-semibold">Meaning first</div>
            <div className="text-xs opacity-70">Visuals are consequences.</div>

            <div className="mt-4">
                <IntentControlButton intent="empowered" variant="elevated">
                    Continue
                </IntentControlButton>
            </div>
        </IntentSurface>
    );
}
Tip: tone only applies when intent="toned". Aesthetic glows only apply when intent="glowed".

Concepts

Vocabulary (and rules) you can rely on

🎯 Intent

Meaning comes first

Choose a semantic posture: informed, empowered, warned, threatened, themed, toned, or glowed. Components don’t pick colors by themselves.

Rule: meaning precedes style.

🧭 Variants

Structure, not meaning

Variants describe how the component occupies space: flat, outlined, elevated, ghost.

Rule: variant never changes intent.

🎨 Tone

Tone is a consequence

Tone selects a color family. It’s explicit only with intent="toned" and implicit for semantic intents.

Rule: tone follows intent.

✨ Glow

Glow is presence

Glow is emphasis. Use it sparingly so it keeps meaning. In glowed mode, you choose an aesthetic aura.

Rule: glow must earn its existence.

Links

Where to go next

PlaygroundGitHubNPM

Design note

The goal isn’t “pretty UI”. It’s a UI that always knows what it’s trying to say, and says it with restraint.