The mantra
Every screen should feel joyful, spatial, visual, gradual reveal and fresh.
The five words behind every token, component and prototype here. When a choice is unclear, pick the option that serves them.
- joyfulDelight lives on the canvas — hand-drawn ideas, a swash, a bloom. Never in the way of the work.
- spatialIdeas have places. You step inside one and back out; rings say there is more inside.
- visualVisuals are the stage, text the stagehand. If an idea needs more than three lines, it needs a layer.
- gradual revealThe overview first; detail blooms in when asked — peek, term, Go deeper, step inside.
- freshWhole spectrum colors on warm paper. No gradients, no glassy cards, no sparkle standing in for “AI”.
Where Visualli shows up
One map, every surface
Each surface is a working prototype — open one and use it. Counts come from the Feature matrix.
The language
Precise words, playful visuals
Copy says exactly what happened; the canvas carries the delight. Brand book
Spectrum
The logo’s letters, each color whole. Brand moments only.
Topics
Pastels that separate siblings on the canvas — never meaning.
Four voices
Gradual reveal
Ideas bloom out one by one (420ms, 70ms apart, a small overshoot), then connectors draw in. Every animation honors Reduce motion.
Comfort, built in
8 themes — light, dark, Focus (ADHD), Color-safe and High contrast — plus readable type, larger text and reduced motion. Try them with the Theme menu above. Comfort modes
Building blocks
The components that make it Visualli
43 catalog entries, each with guidelines and a live preview; the core ones have playgrounds in the Gallery.
Use it
Three lines to start
import '@visualli/design-system/tokens.css';
import '@visualli/design-system/bundle.css';
import { VisualMap, Composer } from '@visualli/design-system/components';- Tailwind —
presets: [require('@visualli/design-system/tailwind-preset')]; scales replace the defaults. - Coding agents — point them at
AGENTS.md; llms.txt lists every page as Markdown. - Per surface — install, load order and constraints are under Build it on each surface: web, mobile, MCP widget, Chrome extension.
Version 0.1.0. Rebuilt from design-system/ on every merge — always the current system.