Transform Feelings into Design Systems with Aura's Color ToolTransform Feelings into Design Systems with Aura's Color Tool
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Nilam's avatar
Nilam Devi
• 18h
Aura — Describe a feeling. Get a design system.
https://auradesign.figma.site/
" Completely made using Figma Make. From Idea to Execution".
Social Submission: https://x.com/Neelamcreation8/status/2066860976767684817
What it Aura?
Aura is a generative design system tool that turns a feeling into a complete, shippable color system — entirely in the browser, with no account, no API key, and nothing that can break in a demo.
Most color tools ask you to pick. Aura asks you to feel.
The problem it solves
Every design project starts the same way: staring at a blank canvas trying to find a palette that feels right. Colors gives you random swatches. Figma's color picker gives you infinite choices and no direction.
Aura solves this in three ways nobody has combined before.
How it works — four input modes
◎ Drift (default) Move your cursor slowly through a living physics canvas — a real-time mesh gradient with blob dynamics and cursor-reactive depth. Aura samples the color beneath your cursor every 0.65 seconds. Five ripple bursts fire as each color is captured. On the fifth, the palette crystallizes with spring animations. You never type a word. You drift through light and collect it.
✦ Surprise One click. Aura picks two random mood words from an 80+ seed library, generates a complete palette, morphs the gradient, and writes a poetic interpretation — "ancient light · deep wonder" — beneath the vibe name. Every load is a new world.
◈ Image Drop any photo onto the canvas. An in-browser k-means algorithm samples 500 pixels across the image, clusters them into 5 dominant colors, and morphs the entire gradient to match. No server. No upload. Instant.
· Type Describe a feeling in words — "ocean dusk", "cyber neon", "forest calm". An 80+ word mood seed system maps any phrase to a harmonized HSL palette using color theory. Unknown words generate deterministically — it never fails.
Every palette ships with
5 named color tokens — deep, primary, accent, pop, tint — with clear roles
Color locking — pin one token and regenerate the rest around it
3 gradient styles — mesh, aurora, liquid
5 typographic pairings — Editorial, Grotesque, Laboratory, Classic, Geometric
Export in 5 formats — CSS variables, Tailwind config, JSON tokens, canvas PNG, social card
Palette card — a 1200×640 PNG with gradient background, labelled swatches, and vibe name, ready to post
The canvas
The living gradient is a custom physics engine built with the HTML Canvas API:
5 color blobs with independent velocity, wall-bounce physics, and cursor-reactive parallax depth
46 ambient light motes drifting upward with opacity oscillation
Scan sweep animation on every generation
Three render modes: radial mesh, aurora bands, liquid lighter blend
Smoke particle system in drift mode — radial gradient wisps, 900–1600ms lifetime, upward velocity, quadratic opacity fade — creates a luminous trail behind the cursor
Ghost smoke entrance on every load — a glowing orb drifts across the canvas teaching the interaction before any UI is shown
Design decisions
Panel hidden by default — first impression is always pure canvas, no UI competing for attention. Controls slide in on demand.
Drift as the default mode — the novel interaction is the first thing every judge and user encounters, not the familiar text input
Ghost on every load — not a one-time tutorial but a permanent welcome animation
Vibe story — a poetic 2-3 word interpretation appears beneath every vibe name in italic: "calm depth · fading light". Generated deterministically from mood seeds. Turns a tool output into a felt moment.
History — last 8 palettes stored as gradient thumbnails. Click any to restore.
Mobile — full responsive layout with touch drift support and a separate mobile UI Preview
Tech stack
Built entirely in Figma Make using:
React + TypeScript
HTML Canvas API (custom physics engine, no libraries)
Tailwind CSS
Zero external APIs
Zero network requests after load
Runs fully offline
What makes it different
Every other color tool is a form: input → output. Aura has three interactions where the interaction is the output:
Drift mode doesn't generate a palette from a description. It lets you physically collect color from light. The smoke trail, the ripple ceremony, the crystallize animation — these make the act of palette creation feel like something you did, not something a computer did for you.
That's the idea. Describe a feeling, drift through light, drop an image — and walk away with a design system you can ship.
Built with Figma Make · React · Canvas API · TypeScript No account · No API · No network · Runs entirely in your browser
configmakeathonFigma
Isabel's avatar
Contra logo
Isabel Feuerstein
pro
• 12h
this is such a cool concept!
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started