FinUA Design System
FinUA Design System

FinUA Design System

This is an overall design guide for FinUA: for website, app, social media, print, etc. Please, follow this guideline when creating any visual assets for the organisation.

Page Content

Purpose of the Service

We want to provide a single-door information platform for all Ukrainians in Finland. As a lot of information relevant to Ukrainians is scattered around different websites in Finland, we want information to be easily accessible, understood and digested.

In addition, we want to provide legal support, emotional support to ensure people get the help they need. We want to match people with the right kind of support. We understand the value of time, how fragile your position as a expatriate in Finland.

Design Approach

Ethos

We understand how hard it can be to be an expat in Finland. We aim towards simple, friendly information delivery. We want to be empathetic. People should feel like FinUA is a place where they come to get their problems solved.

What emotion do we give? Clarity.

We want to emphasize our Ukrainian position. This touches everything we do: fonts, colors, tone of voice messaging. We want to convey the project ethos through design elements across web and other platforms.

Brand essence

ER for social issues / legal issues / mental health / wellbeing.

We are like Mike Ross from Suits - young, innovative, compassionate and smart.

FinUA is a brand that embodies intelligence, authenticity, empathy, and clarity. With its roots in sharp problem-solving and genuine connections, the brand reflects the qualities of a prodigy who thrives under pressure, breaking traditional molds and delivering innovative results.

Brand Archetype

The Caring Genius: with a sharp mind, prides itself on leveraging talent, quick thinking, and ingenuity to overcome obstacles.

Brand Values

  1. Intelligence – Thinking ahead, solving complex challenges, and delivering exceptional results.
  2. Empathy – Building genuine relationships and understanding the needs of others.
  3. Adaptability – Thriving in high-pressure situations and embracing change.
  4. Integrity – Operating with honesty and a commitment to doing what’s right.
  5. Innovation – Challenging norms and creating groundbreaking solutions.

FinUA Brand Archetype Guide

Primary Archetype: The Sage

"Clarity is power."

FinUA exists to bring clarity, structure, and practical answers to Ukrainians navigating life in Finland. In a world of confusing bureaucracy, foreign languages, and legal fog, FinUA steps in as the trusted, calm, and competent guide. We believe that knowledge empowers people to protect themselves, their families, and their futures.

Key Traits:

  • Wise, structured, informed
  • Calm, confident, and precise
  • Driven by truth, insight, and usefulness

Tone of Voice:

  • Clear and factual — but never cold
  • Empathetic and empowering
  • Helps users feel smart, not small

Brand Role:

  • Translator of legal, bureaucratic, and social complexity
  • Digital mentor for everyday survival in Finland
  • Quiet backbone during moments of crisis

Examples:

  • Articles that explain Finnish and Ukrainian laws in human language
  • Legal volunteers turning 10-page government forms into one useful paragraph
  • Proactive advice that prevents problems, not just solves them

Supporting Archetype: The Jester

"Legal support doesn’t have to feel like a root canal."

While FinUA helps with serious, often life-altering situations, we never forget that small sparks of humor and relatability can make hard things feel bearable. Our Jester shows up in the tone of our microcopy, TikToks, and campaign language — not to distract, but to uplift.

Key Traits:

  • Light-hearted, witty, approachable
  • Emotionally honest, never mocking

Tone of Voice:

  • Friendly, slightly ironic, down-to-earth
  • Uses humor to reduce fear and shame

Brand Role:

  • Makes legal aid feel less intimidating
  • Builds connection through shared experience

Examples:

  • Punchlines like: "And no, questions like 'where do I take all these papers now?' don’t scare us."
  • TikTok scripts that show “bureaucracy panic” with humor and clarity
  • Button labels like: "Click. Breathe. We’ve got this."

Tertiary Archetype: The Caregiver

"You're not alone."

Behind every article and answer is a real human — many of whom have walked this journey themselves. FinUA offers more than legal help: we offer safety, understanding, and space to breathe. Whether someone is facing divorce, displacement, or despair, we meet them with respect and warmth.

Key Traits:

  • Compassionate, protective, loyal
  • Driven by service and solidarity

Tone of Voice:

  • Warm but not overly sentimental
  • Supportive, encouraging, never patronizing

Brand Role:

  • Creates a sense of emotional safety
  • Listens before it speaks
  • Builds trust through kindness and presence

Examples:

  • Emotional support offered through my.finua.org
  • Volunteers who’ve also been through the temporary protection system
  • Gentle messaging in form instructions: "Don’t panic — we’re here."

Brand soulmates

Design Patterns

Behavior Patterns

We want to enforce the following patterns for our users:

  • We have most users using app from mobile. For that reason, we design mobile first.
  • We want our users to find information easy and fast. For that reason, we want titles to be clear, concise, text to be friendly written. Calls to action must be easily distinguishable.
  • We want our users to find information easy and fast. We want to encourage people to save information that is relevant to them for future easy access.
  • We want our users to find information easy and fast. We want to encourage people to use search functionality where possible.
  • We want to streamline volunteer help and save their time. We want to encourage people to read materials before they ask for volunteer support.
  • We want to streamline volunteer help and save their time. We want people to be as descriptive as possible when they communicate issues to our volunteers.
  • We want to streamline volunteer help and save their time. We want to make sure people ask for help and information before it is too late. We see legal support as a normal part of integration, not something you get to when thing get seriously bad.
  • We want to streamline volunteer help and save their time. We want to encourage people get emotional support.

Main application patterns

Information Articles

Behavior pattern: We want our users to find information easy and fast.

We use info database to store main information. We call each item an article.

image

Each article belongs to a category. These categories are called tags.

Each article can have max 3 tags.

image

Information Articles Collection and Filter

Behavior pattern: We want our users to find information easy and fast.

We want people to see all the content, that is why we show all articles in one collection.

We want to encourage people to filter by tag.

For that we have filter function based on ShadCN UI - https://ui.shadcn.com/docs/components/sheet

image

Information Articles Search

Behavior pattern: We want our users to find information easy and fast. We want to encourage people to use search functionality where possible. That is why we have a search functionality on top of /info page, homepage, the not-found page.

image
image
image

Information Article Saving to Favorites

Behavior pattern: We want our users to find information easy and fast. We want to encourage people to save information that is relevant to them for future easy access. We use the same list component in the bookmarked pages.

image

Legal Support Services

Behavior pattern: We want to streamline volunteer help and save their time. We want people to be as descriptive as possible when they communicate issues to our volunteers.

Multi-step process UI component

image

Emotional Support Services

Behavior pattern: We want to encourage people get emotional support.

We have it on separate page.

image

We suggest it in legal support.

image
image

UI Patterns

Typography

Typography:

  • Clean sans-serif fonts for clarity and modernity (e.g., Montserrat, Open Sans).
  • Bold headlines to emphasize confidence.

Fonts

FinUA uses Ukrainian fonts as a part of its identity. Our logo uses font called Misto, inspired by city Slavutych.

Display font: Misto

Usage: Titles, logos, graphic design

Font files: https://drive.google.com/drive/folders/1rGy_6hN1pSNXDhk0QjNCaeNG9JNDA-15

Example of use: logo, titles

image

Text Font: Work Typefamily, Work Grotesk

Usage: body text, subtitles

Font files: https://drive.google.com/drive/folders/1kdk1L_nAieOSbHCW9SSsLLcH9EdUzhOE

Example:

image

Fallback text font: Inter

https://fonts.google.com/specimen/Inter

Images Guide

Main Hero Image

has been picked for the main page, from Unsplash

https://unsplash.com/photos/walking-person-holding-blue-and-brown-striped-banner-H887Atn5WPU

Good image example: https://unsplash.com/photos/a-large-building-with-a-flag-on-top-of-it-8NDSHb1dYrM

Use of emojis in UI

We use emojis in UI is encouraged. This should emphacise our friendliness and approachability.

Info Articles Images and Social Media

👉🏻

We do not use AI generated images.

If possible, applicable, use images from dupe photos, they are very realistic and look very much like our vibe. Especially for Social Media

https://dupephotos.com/

image

Examples of good photos:

  • they follow our brand guidelines, jester vibe. For example, if we are talking about beauty routines, we use a fun image like
image

We use free stock images. Currently, we are adding them through Unsplash plugin to our info pages. Images have to be realistic, like somebody snapped them on their phone. No images that look very much like stock images.

https://unsplash.com/

Also good images can be found in Pexels https://www.pexels.com

A good example of an image, that could be in theory used as an image for maternity questions: https://dupephotos.com/?content=5adb08f6-ed37-4142-803a-c554745934e7

Own image bank

For social media, we are working on our own image and video bank.

Logos Guide

We have logos guide FinUA Design GuideFinUA Design Guide

Icons Guide

Icons can be emojis. We can use just icons as well. So far we used:

Lucide Lucide IconsLucide Lucide Icons

Colors

image

Feature Names

Feature: Articles

Status: not logged in / logged in

Feature: Filtered Article Collection

Status: not logged in / logged in

Feature: Search

Status: not logged in / logged in

Feature: Emotional Support Recommendations / Suggestions

Status: not logged in / logged in

Feature: Favorites

Status: logged in

Feature: Legal Request

Status: logged in

Design Principles

  1. High contrast elements. This should ensure reading a11y.
  2. Readable fonts. Practical as opposed to pretty.
  3. Using Tailwind and ShadCN UI for quick iterations - because they have generic patterns and we like generic.
  4. No needless parts
    1. EX. we only have images in articles - because it only makes sense there.
    2. Test over icon - emoji over illustration.
    3. No UI elements that do not have useful information or function.
  5. Only 1 priority CTA at a time: a user needs to understand what to do next.

Tone of Voice of Content and Microcopy

FinUA platform has three types of copy text:

  • FinUA articles written by content team
  • FinUA articles written by partners
  • FinUA UI microcopy, copy text aimed to navigate web app and functionality

Tone of Voice Guidelines for Articles

For FinUA articles written by content team: articles have to be written using very simple language, like you are talking to a 12 year old kid. People should feel like FinUA is a place where they come to get their problems solved, and the feeling they should feel at the end is clarity: like they understand what and how to do things now.

FinUA UI microcopy

The tone of voice is applicable to our own written materials, social media, posts, website microcopy, such as guides.

Design Process

The design process has to be based on identifying the feature, creating the most minimal version.

Figma Process

  1. Production UI

    2. for screenshots of frames that need to be redesigned or ideas

  2. In Progress
    1. the UI that is currently in progress + Iterations
    2. create a section, if it is work in progress, mark it as [WIP] Name of frames
    3. if you need to store iteration, mark [Iteration] Name
  3. Ready - ready to be implemented by devs

De facto process: when we need a new feature - webinars

  1. Identify behavior pattern we want to enforce
    • We want our users to find information easy and fast.
  2. Design system exist to help find the solution fast.

    3. FinUA Design System - Information ArticlesFinUA Design System - Information Articles

  3. Reuse or → add if none
  4. We look at our brand soulmates / cosmos / other apps - done
  5. “Think with our hands”
  6. Find similar element from Shad CN
  7. Create Frankenstein.
  8. Implement with code.
  9. Adjust colors etc
  10. Ask Storybook.
Design Systems Breakfast

Where You Are on the 12 Archetypes Wheel

📍 Your placement: Between The Sage, The Caregiver, and The Creator

🔹 Main Drive: Intelligence & Problem-Solving

🔹 Emotional Appeal: Trust, Warmth, and Support

🔹 Personality: Smart + Compassionate + Innovative

I’ll now generate a visualized Brand Archetype Wheel showing where FinUA sits among the 12 archetypes. Stay tuned! 🎯

Here’s FinUA’s position on the 12 Brand Archetypes Wheel:

📍 Main Archetypes:

  • Sage (Knowledge, Clarity, Expertise) - yarn for paradise
  • Caregiver (Support, Protection, Empathy) - provide structure
  • Creator (Innovation, Problem-Solving) - provide structure

FinUA sits at the intersection of wisdom, care, and creativity, making it a Caring Genius—a brand that provides expert solutions while maintaining warmth and adaptability.

Let me know if you’d like to refine this further or integrate it into a brand strategy deck! 🚀 ​

image
Manifesto

The sage - Athena - the wise

Feeling

  • empowered
  • smart
  • intelligent
  • assured
  • clear
  • prepared
  • logical
  • rational
  • profecient
  • in command