Product design + development / 2026
Niram Kalavai.
Colour, made usable.
I designed and built a browser-based studio that turns colour and typography experiments into usable interface foundations.
From product thinking and UI to the generators, exports, and live release.
Try the live productRead the film overview
- The film introduces Niram Kalavai as a studio for colour and typography exploration.
- Gradient Maker brings together multi-stop gradients, grain patterns, presets, and mockup previews.
- Palette Studio and Typography Lab turn visual choices into organised colour scales and type styles.
- The final sequence shows Export & Tokens, connecting the studio to code and design variables.
- My role
- Product Designer &
Frontend Developer - Ownership
- Concept → design → build → ship
- Built with
- Next.js · React · TypeScript
Tailwind CSS · Chroma.js - Delivery
- Live web application
Deployed on Vercel
01 / The project
A design tool I took all the way to a working product.
Niram Kalavai brings Gradient Maker, Palette Studio, and Typography Lab into one web application. The name means colour mixing in Tamil—a simple idea behind a tool for exploring visual foundations and carrying them into real interfaces.
I owned the product from concept to deployment: defining the workflows, designing the interface, developing the frontend and generation logic, and shipping the live application. Building it meant working through the details that a static design cannot resolve: editable values, derived previews, saved configurations, and usable exports.
Define the workflow
Connect exploration, adjustment, preview, and export around the everyday needs of designers and frontend developers.
Make control approachable
Keep the canvas visible, group related settings, and give each studio a familiar way to move from an idea to a usable result.
Build the real behaviour
Implement colour and type calculations, live previews, local presets, browser downloads, and deployment.
02 / The problem
Choosing a colour is only the beginning.
A gradient can look beautiful in isolation and feel wrong on a card. A brand colour still needs lighter shades, darker shades, and status colours. A heading needs a relationship to the rest of the type scale. The problem I set out to address was the gap between visual experimentation and something ready to use in a product.
Too many disconnected steps
Creating gradients, building palettes, and choosing type often happen in separate tools, each with a different workflow.
Swatches do not tell the full story
Colour choices need to be seen on buttons, text, surfaces, and layouts before their practical strengths and weaknesses become clear.
The last step is still manual
Copying individual values into styles or tokens adds repetitive work and creates opportunities for design and code to drift apart.
03 / Product approach
Three focused studios. One familiar loop.
I separated the tools by the task a person wants to complete, while keeping the interaction pattern consistent. The preview takes the largest area; settings sit alongside it; exports stay within reach. Presets provide a starting point, and precise controls let people take ownership of the result.
- 01Choose a starting point
- 02Adjust the values
- 03Preview in context
- 04Export into your workflow
This keeps the product open to both exploratory use and deliberate system-building. Someone can find a gradient quickly, or spend more time shaping a palette and typography system.
04 / Studio 01 / Gradient Maker
Explore freely. Keep precise control.
Gradient Maker pairs a large live canvas with controls for every colour stop. Linear, radial, and conic modes share the same editing model, so changing the gradient type does not mean learning a new tool.
- Direct editing: adjust a stop’s colour, position, and opacity, with type-specific controls such as the radial centre and shape.
- Useful starting points: select a named preset, randomize a combination, or extract colours from an image.
- Immediate output: inspect the generated CSS, copy CSS or SVG, or download a PNG.
Texture is part of the tool, too.
Noisy Gradient adds a second way to explore colour. Chaos, grain, blur, and noise-pattern controls change the character of the surface, while aspect-ratio presets make it easier to compose for different formats.
05 / Studio 02 / Palette Studio
Turn a base colour into an interface palette.
Palette Studio expands colour choices into 11-step scales, from 50 to 950. Primary and secondary colours sit alongside neutrals, success, info, warning, and error scales. Those semantic roles make the palette relevant to an interface, rather than a loose collection of attractive colours.
Keep the base recognisable
For custom colours, Chroma.js interpolates lighter and darker shades in LCH around the chosen base. Reference palettes use predefined shade values.
Give colour a job
Named semantic scales separate brand expression from feedback and status. Each role can be configured independently.
Help people evaluate
Shade values, contrast calculations, an accessibility guide, and component previews support more informed colour decisions.
06 / Studio 03 / Typography Lab
Build a hierarchy, not a list of font sizes.
Typography Lab starts with a font family, base size, and scale ratio. These generate related styles for headings, body text, labels, captions, and buttons. The preview uses editable text so the hierarchy can be judged against actual words.
- A systematic starting point: modular ratios generate a coherent set of sizes from one base value.
- Room for judgement: individual style overrides allow adjustments to size, weight, line height, and letter spacing.
- A usable naming system: style names and naming conventions carry through to exported variables and tokens.
07 / Designing for real use
Judge the system where it will be used.
I added mockup previews to connect abstract settings with familiar interfaces. In Palette Studio, people can inspect button states and switch to website, dashboard, mobile, or gradient-card previews. Gradient Maker and Typography Lab have their own contextual previews.
This creates a short feedback loop: change a value, see its effect on a real component, and adjust again. The preview is a decision-making aid; the final interface still needs to be checked in its own context.
08 / Building the product
I built the logic behind the interface.
I developed the application with Next.js, React, TypeScript, and Tailwind CSS, and deployed it on Vercel. The build separates studio controls and previews from utilities that calculate gradients, colour scales, and typography styles. That separation helps the visual interface and exported values stay connected.
Derive the result from the settings
Gradient configuration feeds generated CSS and SVG output. Palette settings feed shade generation. Type styles are calculated from the base size, ratio, and per-style overrides.
Make colour generation explicit
Chroma.js handles custom LCH shade interpolation and contrast calculations. Predefined reference scales remain available alongside generated palettes.
Keep experiments available
Saved gradients, palettes, and type configurations use browser local storage. It gives people a way to return to their work on the same browser without an account flow.
Make exports part of the product
The app serialises the current configuration into usable code or tokens. Copy actions and downloadable files support the next step in a designer’s or developer’s workflow.
The trade-offs were part of the design work. Local storage keeps saving straightforward, but does not provide cross-device sync. Generated scales offer a useful starting point, while manual adjustments and contextual checks remain important. Export formats also need to reflect the conventions of the destination tool.
09 / What shipped
A live product, from exploration to export.
The outcome is a working application that brings three visual-foundation workflows into one place. People can explore a gradient, build semantic colour scales, shape a type hierarchy, preview the result, and carry values into their design or development workflow.
3 working studios
Gradient Maker, Palette Studio, and Typography Lab, each with editable settings and live previews.
Reusable foundations
Named colour scales, semantic roles, type styles, and saved configurations that make experiments easier to revisit.
Outputs beyond a screenshot
Gradient CSS, SVG, and PNG; palette configurations and tokens; and typography exports for design and development.
10 / Reflection & next steps
Building changed how I approached the design.
Working on both sides of the product made the relationship between a control and its output much more concrete. A colour picker was not finished when it looked right; it needed to update the preview, preserve its state, and produce something useful outside the app. The same thinking applied to every scale, preset, and export.
The interface is only one part of the experience. The values it produces are part of the design, too.
The next step is to validate the whole workflow with designers and frontend developers: watch them build a small visual system, import the exports into real projects, and identify where they still have to do manual work. I would use that evidence to prioritise export compatibility, accessibility checks, and the experience on smaller screens.