Intent Design System

Intent Design System

Design interfaces
with intent

A narrative-first design system where meaning comes before style.
Visuals are consequences. Intent is the source of truth.

Concepts

A design system that starts with meaning

Intent Design System is not a color library. It’s a semantic contract: the UI declares what it means then visuals follow as consequences.

🎯 Intent

Intent comes first

Components don’t choose colors. They choose a message posture: calm, rewarding, cautionary, critical, themed, tinted, or atmospheric.
Rule: meaning precedes style.
🧭 Variants

Structure, not meaning

Variants describe how the intent occupies space: flat (silent), outlined (precise), elevated (layered), ghost (ephemeral).
Rule: variant never changes intent.
🎨 Tone

Tone is a consequence

Tone expresses a color family (emerald, amber, rose…), but it does not define meaning. Tone can be explicit (toned) or implicit (semantic intents).
Rule: tone follows intent, not the opposite.
✨ Glow

Glow is presence, not decoration

Glow is an emphasis system. It’s used sparingly to say this matters (either as an implicit glow on intents, or as an aesthetic aura in glowed mode).
Rule: glow must earn its existence.

Design note

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

Manifesto

A narrative contract between the interface and the player

Every interface speaks. Not every interface knows what it wants to say.

Most design systems begin with tokens and palettes. This one begins with . Before color appears, before glow emerges, before a button asks to be pressed: there is meaning.intent.

Prime directive

Visuals are not decisions.
They are consequences.

The system favors restraint: silence is a design tool, contrast only works if it is rare, and glow must never become background noise.

Open the playgroundRead on GitHub

Preview

A few semantic states

This is not the package. Just a quick visual teaser to communicate the vocabulary. The actual components and resolver live in the playground.

Informed
The world speaks, without pressure.
Empowered
You succeeded. Confidence increases.
Warned
Attention required, no panic.
Threatened
Critical state. Consequences exist.
Themed
Bound to your app identity.
Glowed
Presence. Atmosphere. Emphasis.
Try the real components