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
Aura — Describe a feeling. Get a design system.
Type a vibe. Drift through light. Drop an image. Aura turns any of them into a shippable colour system — WCAG, CSS, Tailwind, all included.
🔗 Live: https://auradesign.figma.site/
🔗 Figma Community: https://www.figma.com/community/file/1649056818126712796
Social Submission: https://x.com/Neelamcreation8/status/2067225658665967742
Completely made using Figma Make — from idea to execution.
NOTE: MY final submission. This follow social video and contra video guidelines. Also, I made it open for Figma Community now. Go and Enjoy. Huge efforts right from idea to execution to video shooting to video editing to final submission. Over 7 days of exhaustive efforts but I know it will pay off.
The Problem
Designers spend hours hunting for the right colour palette. Most tools give you random swatches. None give you a complete design system. Aura changes that.
What is Aura?
Aura is a generative design system tool that turns a feeling into a complete, shippable colour system — entirely in the browser, with no account, no API key, and nothing that can break in a demo.
Most colour tools ask you to pick. Aura asks you to feel.
Four Ways to Create
◎ Drift (default) Move your cursor through a living physics canvas — a real-time mesh gradient with blob dynamics and cursor-reactive depth. Aura samples the colour beneath your cursor every 0.65 seconds. Five ripple bursts fire as each colour is captured. On the fifth, the palette crystallises 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 beneath the vibe name — "ancient light · deep wonder". Every load is a new world.
◈ Image Drop any photo onto the canvas. An in-browser k-means algorithm samples pixels across the image, clusters them into five dominant colours, and morphs the entire gradient to match. No server. No upload. Before you blink.
· Type Describe a feeling in words — "ocean dusk", "cyber neon", "forest calm". An 80+ word mood seed system maps any phrase to a harmonised colour system using colour theory. Unknown words generate deterministically — it never fails.
Every Palette Ships With
5 named colour tokens — deep, primary, accent, pop, tint — with clear roles
WCAG 2.2 contrast scores on every swatch, live, with AA / AAA / low grading
Colour locking — pin any 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, shareable card
Palette card — a 1200×640 PNG with gradient background, labelled swatches, and vibe name, ready to post
History — last 8 palettes saved as gradient thumbnails, one click to restore
UIPreview — full-screen design system mock showing your palette applied to navigation, typography, and components
The Canvas
The living gradient is a custom physics engine built entirely with the HTML Canvas API:
5 colour blobs with independent velocity, wall-bounce physics, and cursor-reactive parallax depth
46 ambient light motes drifting upward with opacity oscillation
Smooth colour tweening as palettes morph between vibes
Smoke particle system in drift mode — luminous wisps trailing behind the cursor, rising and dissolving into the gradient
Ghost smoke entrance on every load — a glowing orb drifts across the canvas before any UI is shown
Design Decisions
Panel hidden by default — first impression is always pure canvas, no UI competing for attention
Drift as the default mode — the novel interaction is the first thing every user encounters
Vibe story — a poetic 2–3 word interpretation appears beneath every vibe name: "calm depth · fading light". Turns a tool output into a felt moment
Ghost on every load — a permanent welcome animation, not a one-time tutorial
Mobile first — full responsive layout with touch drift support
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 colour tool is a form: input → output. Aura has four interactions where the interaction is the output.
Drift mode doesn't generate a palette from a description. It lets you physically collect colour from light. The smoke trail, the ripple ceremony, the crystallise 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
sweet work
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
Related posts
Meet Dear.
We've made saying "I love you" disposable. A text, an emoji, a $4 card that looks like everyone else's. Dear makes one small act of love feel worth keeping.
You answer five small questions about someone you love: a color that feels like them, a place you think of, a small thing they do, one line you'd want them to know. Dear then composes a one-of-one keepsake: a short letter written from those exact details, over a soft painting generated from the details of your answers. Because it's built from the little things only you know, no two are ever alike.
Built with Figma's suite: the art direction was made in Figma Weave, the whole experience was built in Figma Make (prompt to code), then exported into Claude Code to bring it to life. Live letter-writing and a painting generated for each person.
🔗 Try it: https://dear-app-six.vercel.app
🎨 Figma file: https://www.figma.com/community/file/1649121818473481909
#ConfigMakeathon
you could add ambient music in background, that would make this perfect
I designed EyeText 👁️, an eye-controlled communication experience for people who have difficulty speaking or using their hands.
Using eye tracking and intentional blinks, users can navigate a keyboard, create messages, and convert them into speech. The experience also includes personalized calibration and quick communication cards for everyday needs.
What excites me most about this project is how quickly an idea became reality. Using Figma Make, I was able to transform a concept into a working interactive experience with a single prompt.
Design, accessibility, and technology coming together to help people express themselves.
🔗 Live Demo:https://serif-modify-89640782.figma.site
🔗X / Twitter Post: https://x.com/Naghdaliyevaart/status/2067282836021776819?s=20
This hero section background lowered my cortisol, great work Nigar!
Little Voices is a keepsake of your kid's voice. It's for the silly, fleeting, unrepeatable bits, before they grow out of them. https://littlevoices.figma.site
I have thousands of photos and videos of my daughter, but barely any recordings of her voice. Voice memos get buried in a list, and I hardly go back to them. As she grows up , she’s changing faster than I can hold on to her.
So I built Little Voices for the Config Makeathon, but maybe more so for myself, and other parents who might feel the same way.
I've been using it with my daughter, and she loves hearing her own voice. She keeps becoming someone new, and now I get to hear every version of her, whenever I want.
What it does:
🎤 Catch a moment in seconds
📚 Each memory becomes a storybook card, marked by the age your kid was when you caught it
🗂️ Sift through the pile, browse by age like a time capsule, or search by keywords
💭 Prompts to help when you draw a blank
📈 See how often you record, gently — no streaks, no guilt
🧒 A separate collection for each kid
How I built it:
🎨 Figma Weave for the card art. I built a repeatable workflow that generated dozens of cards in a consistent style, instead of prompting one at a time.
✨ Figma Agents for design exploration and a simple design system. Figma-native agents felt like a true design collaborator that understood my context — directly fine-tuning iterated designs was what was missing in my Claude Code / Figma MCP workflows.
🧱 Figma Make to put it all together. The trick: ask it for a plan before executing anything. Reviewing the plan first meant the component came out right the first time, instead of three rebuilds later.
If you have your own version of this in your life, tell me about it in the comments. 🙌
Huge thanks to the Figma support team; I hit a publishing wall on both Sites and Community, and they personally unstuck both for me so I could ship this. This entry couldn't exist without them!
🎨 Figma Community file: https://www.figma.com/community/file/1648859345546148095
This is a great example of creative problem-solving. The final experience feels very polished.
Trending
Claude
Claude has entered the design space. How are you using Claude Design?
Contra University
Learn from expert creatives how to earn more using next-gen AI tools.
MagicPath
The canvas is infinite, and exploration is becoming the workflow. How are you using MagicPath?
creativeaiflow
Creative AI workflows are evolving. What tools do you use, and what are their strengths and weaknesses?
freelancerlife
Freelancer life is wins, pivots, and everything in between. What’s yours right now?