Visual Identity Guidelines

These guidelines ensure consistent visual representation across all Finntegrate materials. Following these standards helps establish a cohesive brand identity that reflects our mission of providing clear, accessible support to immigrants navigating Finnish bureaucracy.

Brand Colors

Our color palette is inspired by Finland’s natural landscape and cultural heritage, combining traditional Finnish colors with an accessible, modern approach.

Primary Colors

Nordic Blue ▼

HEX: #0053A5

RGB: 0, 83, 165

CMYK: 100%, 50%, 0%, 35%

Main brand color, used for primary elements, headers, and key messaging

White Snow ▼

HEX: #FFFFFF

RGB: 255, 255, 255

CMYK: 0%, 0%, 0%, 0%

Background color for most applications, representing clarity and simplicity

Midnight Forest ▼

HEX: #263238

RGB: 38, 50, 56

CMYK: 32%, 11%, 0%, 78%

Used for text and key UI elements requiring emphasis

Secondary Colors

Lake Blue ▼

HEX: #76B7ED

RGB: 118, 183, 237

CMYK: 50%, 23%, 0%, 7%

Used for supporting elements, backgrounds, and highlights

Birch Bark ▼

HEX: #F5F5F5

RGB: 245, 245, 245

CMYK: 0%, 0%, 0%, 4%

Secondary background color, used for content separation

Forest Green ▼

HEX: #155724

RGB: 21, 87, 36

CMYK: 76%, 0%, 59%, 66%

Used for success messages and environmental themes

Accent Colors

Aurora Red ▼

HEX: #E57373

RGB: 229, 115, 115

CMYK: 0%, 50%, 50%, 10%

Used sparingly for alerts, errors, and important notifications

Amber Gold ▼

HEX: #FFD54F

RGB: 255, 213, 79

CMYK: 0%, 16%, 69%, 0%

Used for highlights, warnings, and special elements

Berry Purple ▼

HEX: #7B1FA2

RGB: 123, 31, 162

CMYK: 24%, 81%, 0%, 36%

Used for special features and selected states

Color Usage

Digital Applications

• Use Nordic Blue for main navigation, buttons, and key UI elements
• Text should be Midnight Forest on light backgrounds, White Snow on dark backgrounds
• Links should be Lake Blue, changing to Nordic Blue on hover
• Reserve accent colors for notifications and interactive elements

Print Materials

• Nordic Blue serves as the primary identifier
• Large areas can use Birch Bark or White Snow as backgrounds
• Lake Blue works well for supporting graphic elements
• Use color sparingly and purposefully

Accessibility

• Maintain WCAG 2.1 AA contrast standards (minimum 4.5:1 for normal text, 3:1 for large text).

• For example, “Nordic Blue” (#0053A5) on “White Snow” (#FFFFFF) has a contrast ratio of 7.55:1, which is excellent and meets AA and AAA guidelines.

• Conversely, “Lake Blue” (#76B7ED) on “White Snow” (#FFFFFF) has a contrast ratio of 2.15:1. This combination is not acceptable for text at any size as it fails both the AA standard for normal-sized body text (4.5:1) and large text (3:1).

• Never use color as the only indicator of meaning.
• Provide sufficient contrast between text and backgrounds.
• Test color combinations with accessibility tools to ensure compliance.

Accessibility Compliance

Always verify your color combinations meet accessibility standards. Tools like the WebAIM Contrast Checker can help ensure compliance.

Remember that:

• Text must have a contrast ratio of at least 4.5:1 (AA) or 7:1 (AAA)
• Large text (18pt+) must have a contrast ratio of at least 3:1 (AA) or 4.5:1 (AAA)
• Interactive elements must have a contrast ratio of at least 3:1 against adjacent colors

Persona Colors

Our multi-agent system features personas inspired by Finnish mythology. Each has a distinct color identity while remaining harmonious with our brand palette.

Tapio: The Orchestrator

Forest Guardian ▼

HEX: #2E7D32

RGB: 46, 125, 50

CMYK: 63%, 0%, 60%, 51%

Primary color representing Tapio's forest domain and wisdom

Pine Needle ▼

HEX: #81C784

RGB: 129, 199, 132

CMYK: 35%, 0%, 34%, 22%

Secondary color for Tapio interface elements

Moss Accent ▼

HEX: #388E3C

RGB: 56, 142, 60

CMYK: 61%, 0%, 58%, 44%

Accent color for Tapio interactive elements

Immigration & Legal Processes

Ilmarinen: The Craftsman of Documentation

Smith's Iron ▼

HEX: #455A64

RGB: 69, 90, 100

CMYK: 31%, 10%, 0%, 61%

Primary color representing Ilmarinen's precision and craftsmanship

Forge Silver ▼

HEX: #B0BEC5

RGB: 176, 190, 197

CMYK: 11%, 4%, 0%, 23%

Secondary color for Ilmarinen interface elements

Ember Glow ▼

HEX: #FF8A65

RGB: 255, 138, 101

CMYK: 0%, 46%, 60%, 0%

Accent color representing the forge fire and determination

Economic Integration

Sampo: The Prosperity Guide

Gold Prosperity ▼

HEX: #FFC107

RGB: 255, 193, 7

CMYK: 0%, 24%, 97%, 0%

Primary color representing abundance and opportunity

Wheat Field ▼

HEX: #FFE082

RGB: 255, 224, 130

CMYK: 0%, 12%, 49%, 0%

Secondary color for Sampo interface elements

Amber Wealth ▼

HEX: #FFB300

RGB: 255, 179, 0

CMYK: 0%, 30%, 100%, 0%

Accent color for interactive elements and highlights

Pellervo: The Harvest Guide

Fertile Earth ▼

HEX: #795548

RGB: 121, 85, 72

CMYK: 0%, 30%, 40%, 53%

Primary color representing cultivation and growth

Autumn Grain ▼

HEX: #D7CCC8

RGB: 215, 204, 200

CMYK: 0%, 5%, 7%, 16%

Secondary color for Pellervo interface elements

Seed Sprout ▼

HEX: #8D6E63

RGB: 141, 110, 99

CMYK: 0%, 22%, 30%, 45%

Accent color for interactive elements

Social Services & Benefits

Rauni: The Prosperity Guardian

Rowan Berry ▼

HEX: #E57373

RGB: 229, 115, 115

CMYK: 0%, 50%, 50%, 10%

Primary color representing protection and nurturing

Dawn Light ▼

HEX: #FFCDD2

RGB: 255, 205, 210

CMYK: 0%, 20%, 18%, 0%

Secondary color for Rauni interface elements

Protective Shield ▼

HEX: #EF5350

RGB: 239, 83, 80

CMYK: 0%, 65%, 67%, 6%

Accent color for interactive elements

Otso: The Housing Guardian

Bear Brown ▼

HEX: #795548

RGB: 121, 85, 72

CMYK: 0%, 30%, 40%, 53%

Primary color representing shelter and protection

Warm Hearth ▼

HEX: #BCAAA4

RGB: 188, 170, 164

CMYK: 0%, 10%, 13%, 26%

Secondary color for Otso interface elements

Forest Honey ▼

HEX: #A1887F

RGB: 161, 136, 127

CMYK: 0%, 16%, 21%, 37%

Accent color for interactive elements

Education & Language

Agricola: The Language Mentor

Manuscript Blue ▼

HEX: #1976D2

RGB: 25, 118, 210

CMYK: 88%, 44%, 0%, 18%

Primary color representing knowledge and education

Parchment ▼

HEX: #BBDEFB

RGB: 187, 222, 251

CMYK: 25%, 12%, 0%, 2%

Secondary color for Agricola interface elements

Ink Well ▼

HEX: #1565C0

RGB: 21, 101, 192

CMYK: 89%, 47%, 0%, 25%

Accent color for interactive elements

Louhi: The Cultural Guide

Northern Wisdom ▼

HEX: #7B1FA2

RGB: 123, 31, 162

CMYK: 24%, 81%, 0%, 36%

Primary color representing cultural knowledge and authority

Midwinter Sky ▼

HEX: #E1BEE7

RGB: 225, 190, 231

CMYK: 3%, 18%, 0%, 9%

Secondary color for Louhi interface elements

Aurora Glow ▼

HEX: #9C27B0

RGB: 156, 39, 176

CMYK: 11%, 78%, 0%, 31%

Accent color for interactive elements

Health & Wellbeing

Mielikki: The Healer

Healing Herb ▼

HEX: #43A047

RGB: 67, 160, 71

CMYK: 58%, 0%, 56%, 37%

Primary color representing health and recovery

Forest Medicine ▼

HEX: #C8E6C9

RGB: 200, 230, 201

CMYK: 13%, 0%, 13%, 10%

Secondary color for Mielikki interface elements

Vital Energy ▼

HEX: #2E7D32

RGB: 46, 125, 50

CMYK: 63%, 0%, 60%, 51%

Accent color for interactive elements

Lempi: The Wellbeing Supporter

Heart Rose ▼

HEX: #EC407A

RGB: 236, 64, 122

CMYK: 0%, 73%, 48%, 7%

Primary color representing love and emotional support

Comfort Pink ▼

HEX: #F8BBD0

RGB: 248, 187, 208

CMYK: 0%, 25%, 16%, 3%

Secondary color for Lempi interface elements

Warm Embrace ▼

HEX: #D81B60

RGB: 216, 27, 96

CMYK: 0%, 88%, 56%, 15%

Accent color for interactive elements

Practical Living

Ahti: The Navigator

Ocean Blue ▼

HEX: #0288D1

RGB: 2, 136, 209

CMYK: 99%, 35%, 0%, 18%

Primary color representing waters and practical guidance

Sea Foam ▼

HEX: #B3E5FC

RGB: 179, 229, 252

CMYK: 29%, 9%, 0%, 1%

Secondary color for Ahti interface elements

Deep Current ▼

HEX: #0277BD

RGB: 2, 119, 189

CMYK: 99%, 37%, 0%, 26%

Accent color for interactive elements

Kokko: The Regional Expert

Eagle Sight ▼

HEX: #FB8C00

RGB: 251, 140, 0

CMYK: 0%, 44%, 100%, 2%

Primary color representing broad perspective and local knowledge

Sky View ▼

HEX: #FFE0B2

RGB: 255, 224, 178

CMYK: 0%, 12%, 30%, 0%

Secondary color for Kokko interface elements

Soaring Wing ▼

HEX: #F57C00

RGB: 245, 124, 0

CMYK: 0%, 49%, 100%, 4%

Accent color for interactive elements

Typography

Our typography choices prioritize clarity and accessibility, supporting our mission of making information easily understandable.

Typography Principle

Typography selections in the Finntegrate project prioritize legibility across devices, language support, and accessibility to create a more inclusive user experience.

Primary Font: Inter

Inter is our primary typeface for all digital and print applications. Its clean, modern design ensures readability across multiple languages and devices.

/* Example usage */
font-family: 'Inter', sans-serif;

Implementation

Add Inter to your project by including the font in your CSS or using Google Fonts:

<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
  rel="stylesheet"
/>

Font Weights

• Regular (400): Primary body text
• Medium (500): Subheadings and emphasis
• SemiBold (600): Section headings and UI elements
• Bold (700): Main headings and key information

Weight Usage

Limit font weight variations within a single interface to maintain visual harmony. Using too many weights can create visual noise and reduce readability.

Typography Hierarchy

• H1: 32px/2rem, Inter Bold, used for page titles
• H2: 24px/1.5rem, Inter SemiBold, used for major sections
• H3: 20px/1.25rem, Inter SemiBold, used for subsections
• Body: 16px/1rem, Inter Regular, used for main content
• Small/Caption: 14px/0.875rem, Inter Regular, used for supplementary information

Responsive Typography

Use relative units (rem/em) rather than fixed pixels to ensure typography scales appropriately across different screen sizes and respects user font size preferences.

h1 {
  font-size: 2rem; /* Instead of 32px */
  line-height: 1.2;
}

Persona Typography Treatments

While maintaining our primary font family (Inter), each persona may have slight variations in weight or style:

• Main Orchestrator (Tapio): Inter SemiBold for headings
• Immigration & Legal (Ilmarinen): Inter Medium, slightly condensed
• Economic (Sampo & Pellervo): Inter Regular with generous spacing
• Social Services (Rauni & Otso): Inter Medium with rounded feel
• Education (Agricola & Louhi): Inter Regular with increased line height
• Health (Mielikki & Lempi): Inter Light with gentle curves
• Practical (Ahti & Kokko): Inter Regular with navigation-inspired spacing

Persona Consistency

While each persona has subtle typographic variations, maintain the core Inter font family across all personas to ensure brand cohesion. The variations should be subtle enough that users perceive a difference in “personality” without noticing explicit font changes.

Logo Guidelines

Logo Status

The Finntegrate project does not currently have an official logo. Logo design will be part of a future brand development phase.

Temporary Visual Identity

Until an official logo is created, use the project name “Finntegrate” set in Inter Bold with the Nordic Blue (#0053A5) color for any needed visual identification. Maintain consistent typography and color usage across materials.

Visual Elements

Iconography

• Use simple, clear line icons with consistent stroke width
• Keep icons accessible by maintaining a minimum size of 24x24 pixels
• Use Nordic Blue as the primary icon color, with accent colors used sparingly
• For persona-specific icons, use the persona’s primary color

Icon Resources

Finntegrate uses Iconify for our icon system, specifically:

• Material Design Icons
• Material Symbols

These libraries provide thousands of freely licensed icons that maintain a consistent design language across the project. When implementing:

// Example with a component-based approach
import { Icon } from '@iconify/react';

// Material Design Icons
<Icon icon="mdi:account" />

// Material Symbols
<Icon icon="material-symbols:settings" />

Iconify provides optimal SVG delivery and excellent browser support.

Illustration Style

• Illustrations should be simple, clear, and supportive of the content
• Use a consistent style inspired by Finnish design tradition
• Maintain a balanced color palette drawing from our brand colors
• Incorporate subtle mythological elements when appropriate

Implementation Guidelines

Interface Elements

When implementing persona-specific UI elements:

1. Use the primary color for main persona identification
2. Apply secondary colors for backgrounds and supporting elements
3. Reserve accent colors for interactive elements and highlights
4. Include appropriate iconography related to the persona’s domain

Transitions

When transitioning between personas in the interface:

1. Maintain smooth color transitions to avoid jarring changes
2. Signal persona changes with subtle animation or icon shifts
3. Ensure all text remains readable during and after transitions
4. Keep consistent layout structure across persona changes

Accessibility Considerations

All persona color schemes must:

1. Maintain WCAG 2.1 AA contrast standards for text legibility
2. Offer sufficient distinction between interactive and non-interactive elements
3. Function properly in high-contrast mode
4. Include alternative text descriptions for all persona-related visual elements

Finntegrate Accessibility First

Since Finntegrate aims to support immigrants navigating complex systems, accessibility is not just a technical requirement but a core project value. When making design decisions, always prioritize inclusivity and ease of use for people with diverse needs and abilities.

Consider testing with:

• Screen readers (VoiceOver, NVDA, JAWS)
• Keyboard-only navigation
• Color blindness simulators
• Text-only browsers

Working with Multiple Personas

When multiple personas appear together:

1. Maintain Tapio’s colors as the primary orchestrating presence
2. Use persona colors sparingly to avoid visual overload
3. Consider using neutral backgrounds when multiple personas are active
4. Ensure clear visual hierarchy with the most relevant persona emphasized