Skip to content

Brand book

1. General Information

This brand book is a comprehensive guide outlining the key elements and instructions to maintain a consistent and impactful brand identity. In this document, you will find information about the UI design prototype for Skill Collector - a comprehensive platform for collecting and analysing skill survey based on SFIA ( Skills Framework for the Information Age ).

The objective of this brand book is to offer a comprehensive understanding of UI design principles and guidelines, facilitating the establishment and communication of the brand's visual identity to designers, developers, and other relevant parties participating in the project's development process.

2. Colors

2.1 Color Palette

2.1.1 Light Mode Palette

The Light Mode color palette, featuring #111E6C, #405DF8, #47B2FF, #73C2FB, and #89CFF0, is carefully curated to evoke a sense of tranquility and elegance. Deep indigo adds mystery, while vibrant blues signify optimism. Gentle sky blue promotes calmness, and pale blue brings serenity. The light, frosty hue embodies purity. Together, these colors create a harmonious impact that fosters a calming and sophisticated user experience in UI design.

Light mode palette

2.1.2 Dark Mode Palette

The color palette of #333333, #626262, #111E6C, #47B2FF, and #FFFFFF combines sophistication and tranquility. Deep black adds mystery, while dreamy blues evoke boundless possibilities. With a touch of elegance from indigo and clarity from white, this palette crafts a captivating and user-centric dark mode experience.

Dark mode palette

2.2 Color Codes

2.2.1 Body

  1. Light Mode Background
  • HEX #FFFFFF
  • RGB(255, 255, 255, 100%)
  • HSL(0, 0, 100, 100%)
  1. Light Mode Paragraphs
  • HEX #111E6C
  • RGB(17, 30, 108, 100%)
  • HSL(231, 73, 25, 100%)
  1. Dark Mode Background
  • HEX #111E6C
  • RGB(17, 30, 108, 100%)
  • HSL(231, 73, 25, 100%)
  1. Dark Mode Paragraphs
  • HEX #FFFFFF
  • RGB(255, 255, 255, 100%)
  • HSL(0, 0, 100, 100%)

2.2.2 Header

  1. Light Mode Background
  • HEX #111E6C
  • RGB(17, 30, 108, 100%)
  • HSL(231, 73, 25, 100%)
  1. Light Mode Items
  • HEX #FFFFFF
  • RGB(255, 255, 255, 100%)
  • HSL(0, 0, 100, 100%)
  1. Dark Mode Background
  • HEX #FFFFFF
  • RGB(255, 255, 255, 100%)
  • HSL(0, 0, 100, 100%)
  1. Light Mode Items
  • HEX #111E6C
  • RGB(17, 30, 108, 100%)
  • HSL(231, 73, 25, 100%)
  1. Light Mode
  • HEX #111E6C
  • RGB(17, 30, 108, 100%)
  • HSL(231, 73, 25, 100%)
  1. Dark Mode
  • HEX #FFFFFF
  • RGB(255, 255, 255, 100%)
  • HSL(0, 0, 100, 100%)

2.2.4 Buttons

  1. Light Mode
  • HEX #FFFFFF
  • RGB(255, 255, 255, 100%)
  • HSL(0, 0, 100, 100%)
  1. Dark Mode
  • HEX #111E6C
  • RGB(17, 30, 108, 100%)
  • HSL(231, 73, 25, 100%)
  1. Submit
  • HEX #0080000
  • RGB(0, 128, 0, 100%)
  • HSL(120, 100, 25, 100%)

2.2.5 Tooltip

  1. Light Mode
  • HEX #111E6C
  • RGB(17, 30, 108, 100%)
  • HSL(231, 73, 25, 100%)
  1. Dark Mode
  • HEX #FFFFFF
  • RGB(255, 255, 255, 100%)
  • HSL(0, 0, 100, 100%)

2.2.6 Icons

  1. Warning Icon
  • HEX #FFE500
  • RGB(255, 229, 0, 100%)
  • HSL(54, 100, 50, 100%)
  1. Tooltip and Description Icon

Depending on background color, if the background color is #FFFFFF then the icon color will be #111E6C and otherwise the background color is #111E6C then the icon color will be #FFFFFF

2.2.7 Progress Bar

  1. Default color
  • HEX #C7D3EB
  • RGB(199, 211, 235, 100%)
  • HSL(220, 47, 85, 100%)
  1. Color when clicking on selection
  • HEX #47B2FF
  • RGB(71, 178, 255, 100%)
  • HSL(205, 100, 64, 100%)

3. Visual Assets

This visual content category contains most of the element that contribute to the visual appeal and user experience of user interface design. This category includes logos, images and icons, which play a vital role in conveying information and enhancing brand identity.

3.1 Logos

3.1.1 Header

Logo is an essential visual representation of the brand identity. It takes its main inspiration from the name of the product representing the company Liikkuva Aikuinen. The brand logo is designed with black and white as the dominant colors, which, when combined with the main color palette of the user interface, creates a harmonious and visually appealing effect for users.

Logo version 2

The combination of the company logo and partner logos in the footer section adds visual interest, establishes brand presence, and provides valuable information to users. It ensures a cohesive visual identity, communicates the company's values and associations, and enhances the overall user experience.

Logo version 1

3.2 Images and Icons

The images and icons used in the user interface provide users with clarity, friendliness, and enhance the user experience.

Overflow team Iotitude team Mysticons team Pengwin Media team Background Light Backrgound Dark Footer Light Footer Dark

4. Typography

font-family: 'Montserrat', sans-serif;

The Montserrat font family has been selected as the primary typeface for this UI design. With its versatile and modern aesthetic, Montserrat enhances the visual appeal and legibility of the interface. Its clean lines and ample character spacing contribute to a cohesive and readable typographic experience.

4.1 Header

Montserrat SemiBold 600

To embed a font, copy the code into the <head> of your html

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

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

4.2 Title and Subtitle

  1. Title

Montserrat Bold 700

To embed a font, copy the code into the <head> of your html

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

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

  1. Subtitle

Montserrat Medium 500

To embed a font, copy the code into the <head> of your html

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

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

4.3 Paragraphs

  1. Title

Montserrat Bold 700

To embed a font, copy the code into the <head> of your html

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

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

  1. Content

Montserrat SemiBold 600

To embed a font, copy the code into the <head> of your html

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

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

  1. Content

Montserrat Regular 400

To embed a font, copy the code into the <head> of your html

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">

4.4 Progress Bar

  1. Category

Montserrat SemiBold 600

To embed a font, copy the code into the <head> of your html

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

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

  1. Content

Montserrat Regular 400

To embed a font, copy the code into the <head> of your html

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">

5. Voice and messaging

  1. Tone and Style:

  • Warm and approachable: At Skill Collector, we believe in building meaningful connections with our users. Our message is conveyed with warmth and approachability, creating a friendly atmosphere for all users who interact with us. From the first encounter to ongoing communication, our friendly tone aims to establish a personal connection that fosters trust and comfort.

  • Professional and knowledgeable: With our team of dedicated members' relentless efforts, we take great pride in delivering the highest level of professionalism in all our communication endeavors. We strive to convey expert knowledge, reliability, and a commitment to providing the best services to our users. Rest assured, our knowledgeable tone reflects the depth of our understanding and dedication to excellence.

  • Optimistic and uplifting: Positivity is the heartbeat of Skill Collector. We convey our message with optimism and enthusiasm to inspire our users. Embracing the ever-evolving world of information technology, we encourage users to share their thoughts through Skill Collector. Together, we will upgrade existing skills and develop those that will be essential for the future.

  • Conversational and engaging: Here at Skill Collector, we believe in meaningful conversations. Our messages are designed to resemble friendly dialogues, enabling us to genuinely connect with our users. While maintaining a professional demeanor, we use clear and engaging language to keep our users interested and involved in every interaction.

  1. Language and Vocabulary:

In both light and dark modes, our language and vocabulary are crafted to achieve a perfect balance. We avoid using jargon or technical terms that may alienate the audience. If necessary, we provide instructions to make it easy and comfortable for users to understand. Our communication is clear, concise, and engaging, fostering familiarity and ease for all users.

  1. Key Messages:

At Skill Collector, our key messages are consistently reiterated across both light and dark modes. We emphasize our core benefits and unique selling points on all platforms, ensuring our audience understands what sets us apart. Our key messages encapsulate our brand values, vision, and mission, resonating with users and effectively addressing their needs.

  1. Brand Storytelling:

In both light and dark modes, our brand storytelling is compelling and evocative. We weave narratives that forge emotional connections with our users, showcasing the real-life impact of our products and services. Through authentic storytelling, we aim to leave a lasting impression that lingers in the hearts and minds of our users, deepening their connection with our brand.

  1. Social Media and Online Presence:

Our social media and online presence remain vibrant and engaging across light and dark modes. We leverage the tone and style of each mode to create captivating content that resonates with our followers. From inspirational posts to informative updates, our presence on social media is consistent, tailored to user preferences, and ensures a positive and memorable online experience.

By aligning our voice and messaging in both light and dark modes, we create a cohesive and immersive brand experience that leaves a lasting impact on our users. Skill Collector strives to be a brand that users remember, engage with, and trust wholeheartedly. Join us on this journey of endless possibilities, where our messaging and presence stand out in every light.

6. Resources

This mock-up serves as a visual representation of the design concepts, showcasing the intended layout, interactive elements, and overall user experience. It provides valuable insights and guidance for designers, developers, and other stakeholders involved in implementing the UI design. Access the mock-up at Skill Collector Mock-up to explore and gain a deeper understanding of the UI design.