How We Use Colour in Tarinoi

Tarinoi's deep blue and warm orange palette was born almost as soon as the company was named. The moment we knew we'd found the right name to describe the sharing of stories, it brought to mind a near-dark sky and the glow of a campfire, or the light from a cabin window. For me those shades evoked the comfort of winter evenings; for Petteri, it was late summer, the last warm August nights.

Choosing a theme ​

Accessibility, design principles and colour theory all play a major role in how modern applications look and feel. But following every guideline, and chasing design trends - especially those focused on e-commerce and sales - can lead to a homogenous digital landscape where everything is technically correct but visually indistinguishable.

That's not our style. Our first palettes didn't come from industry templates or generators, but were derived from travel photos, and our associations with those places. Helsinki features pale ice blues, accented with the peach-pink sunset reflecting across the sea. Rovaniemi is for those who want stronger contrast, with electric green and vivid magenta tones from the northern lights.

Fine-tuning ​

Each palette was then refined using easily available accessibility and colour analysis tools - I'm fond of Coolors, for colour-blindness distinction, the shade ladders, and its suggestions for complementary colours. Micro Digital tools make it easy to lighten and darken by a percentage, keeping a set of colours consistent. Atmos offers up an easy to use colour wheel and pairings, perfect for finding accent shades. They evolved again as we began to consider their roles in the user journeys and task workflows we were building - both the ones we knew well, refined by years of designing these features alongside different studio teams, and by the new ideas we have wanted to explore and are now designing for the first time.

The result is an interface and a user experience with a distinct personality, supported by colours that aren't just branding, but are a vital part in how we communicate with our users. It's how we guide you through familiar and new workflows, how we provide feedback and reassurance, and how we encourage exploration and experimentation.

We avoid using colour just to be decorative. And of course, we never rely on colour alone to communicate meaning - important states are reinforced through labels, symbols, helper text and visual hierarchy. We build upon standard patterns and, by being deliberate about where colour appears, we create interfaces that are easy to scan and understand, even when they're unfamiliar or have to present large amounts of information.

Why this matters in tools ​

These decisions are carefully planned. Once the engineering flow is in place, we take the time to think about how to communicate that workflow in an interactive, visual way - not from a technical angle, but by asking: 'What is the story we're trying to tell? Where are the natural steps and stages? How do the users feel, and where might they need reassurance?'

This is particularly important in development tools. Unlike consumer applications, where users hope to complete a short task in minutes - purchase, checkout, sign-up - our users will spend hours of their day creating, organising and revising their work. The priorities are not sales conversion and preventing customer drop-off, but efficiency, reliability and usability. A well-designed interface doesn't just make tasks faster. It can improve accuracy, build trust that encourages deeper iteration, and lead to a better final product.

Colour as Communication ​

Colour helps establish the primary path through the workflow, with accents to highlight the alternative routes we want users to know are supported. We highlight actions that deserve immediate attention, such as anything that could break a flow or block the build in-engine, and provide feedback on decisions we know our more experienced users might choose, like committing work with a broken reference, or a missing function.

And we love to let the app communicate with you - a well-described progress bar, or the distinct stages of a complex, data-driven process being ticked off one by one, leaves users fully informed that Tarinoi has it under control. Don't worry. We've got this.

Thinking about our interfaces in this way helps us design tools that aren't just about powerful functionality, but about guiding people through with confidence. That they look sleek and professional is really just a bonus.

Make it yours ​

We also want to give you, our users, the tools to tell your stories with colour. Tarinoi will let you customise your own themes, to match your UI to your scene, your mood or your playlist. As you build your game - data objects, collections, custom cards, the graph layout - we understand the importance of being able to customise, colour-code and highlight the areas that matter.