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
• Design Approach
• Ethos
• Brand essence
• Brand Values
• Brand soulmates
• Design Patterns
• Behavior Patterns
• Main application patterns
• Information Articles
• Information Articles Collection and Filter
• Information Articles Search
• Information Article Saving to Favorites
• Legal Support Services
• Emotional Support Services
• UI Patterns
• Typography
• Fonts
• Images Guide
• Main Hero Image
• Use of emojis in UI
• Info Articles Images and Social Media
• Own image bank
• Logos Guide
• Icons Guide
• Colors
• Feature Names
• Feature: Articles
• Feature: Filtered Article Collection
• Feature: Search
• Feature: Emotional Support Recommendations / Suggestions
• Feature: Favorites
• Feature: Legal Request
• Design Principles
• Tone of Voice of Content and Microcopy
• Tone of Voice Guidelines for Articles
• FinUA UI microcopy
• Design Process
• De facto process: when we need a new feature - webinars
• Where You Are on the 12 Archetypes Wheel

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.

Brand soulmates

• InfoFinland Your guide for living in Finland
• Aino Aid Welcome to AinoAid™
• Zeikki
• mymind
• https://www.ufuplatform.com
• https://www.ufu.global/

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.

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

Each article can have max 3 tags.

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

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.

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.

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

Emotional Support Services

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

We have it on separate page.

We suggest it in legal support.

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

Text Font: Work Typefamily, Work Grotesk

Usage: body text, subtitles

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

Example:

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

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/

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 Guide

Icons Guide

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

Lucide Lucide Icons

Colors

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

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.

FinUA 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.

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! 🚀 ​

The sage - Athena - the wise

Feeling

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