Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback

Design

Guideline

How to use legion in design project

banner-Guideline

Foundation Setup

Legion design Libraries are separated into multiple projects. The first step, make sure you were invited to project file from the Request Form, then check the available library for use in the table of list library or the project you assigned, and select the design library before you start designing.

Define colors from brand

This section will guide you to begin by creating your brand or product logo as the first step in establishing your identity, followed by defining primary, secondary, tertiary, and accent colors. This ensures a cohesive visual identity across all brand touchpoint.

Start by crafting a logo for your brand or product that effectively captures your identity. Ensure it resonates with your vision and values. Follow the provided guidelines to select the appropriate size, type, and color variants that harmonize with your brand’s identity.

2. Define primary and secondary colors

Understand the difference between primary and secondary colors within your color palette. Primary colors serve as the fundamental building blocks, while secondary colors add depth and dimension to your palette.

3. Define tertiary and accent colors

Dive into tertiary and accent colors to enrich your palette. Tertiary colors introduce subtle variations, enhancing the depth and complexity of your design. Accent colors, on the other hand, highlight key elements, drawing attention to essential aspects of your product design.

4. Generate and define color shade

Explore the creation and definition of color shades to expand your palette. Generating various shades and providing clear definitions is essential for developing a dynamic and versatile color palette. Follow the outlined techniques to effectively generate and define color shades for your designs.

5. Update your color system

Explore the creation and definition of color shades to expand your palette. Generating various shades and providing clear definitions is essential for developing a dynamic and versatile color palette. Follow the outlined techniques to effectively generate and define color shades for your designs.

Define right typography

This section meticulously defines the appropriate font families and types to ensure a cohesive visual identity across all brand touchpoint. By selecting the right typography, including font families and types, we empower your brand to communicate effectively and leave a lasting impression on your audience.

1. Select Font Family

Begin by exploring various font families that align with your brand’s personality and message, considering factors such as readability, style, and consistency across different platforms. Narrow down your choices to a few font families that best represent your brand identity, and evaluate how each one complements your logo and overall visual aesthetics.

2. Combine and test typography

Combine different fonts from your selected font families to create typography pairings, experimenting with various combinations of headline, sub headline, and body text fonts. Test these combinations across different mediums, such as websites, print materials, and mobile devices, and assess how well each combination conveys your brand.

3. Generate and update typography

Create style guidelines for each font, specifying font sizes, line spacing, and text formatting like bold and italic. Ensure consistent typography across all brand touchpoints for a cohesive visual identity, and regularly refine and update typography styles.

Define Icon System and Illustration

In this section we establish a unified icon system and illustration style that seamlessly aligns with your brand identity. By defining icons and illustrations that reflect your brand’s personality and values, we ensure consistency and impactful visual communication across all channels.

1. Match your users and concept

Identify the characteristics, preferences, and needs of your target users, aligning them with the values and personality of your brand. Ensure that your brand resonates with your audience, fostering a strong connection and understanding.

2. Find your icon system

Explore different icon styles and designs that suit your brand identity and effectively convey your message. Consider factors such as simplicity, clarity, and relevance to your product or service. Choose an icon system that aligns with your brand’s aesthetics and enhances user experience.

3. Setup match icon system

Once you’ve chosen your icon system, set clear guidelines for using it consistently across all brand touchpoint. Specify details like icon size, color, and alignment to keep visuals cohesive. Use the icon system across both digital and print materials for a unified brand experience.

4. Setup match illustration

Develop a consistent illustration style that matches your brand’s look and reinforces its message. Choose colors, tone, and detail that fit your brand’s personality. Make straightforward guidelines for creating and using illustrations to maintain consistency and impact in your communication.

Finish setup foundation

This section finalizes the establishment of foundational elements, by ensuring all components are meticulously configured, your brand’s design system achieves cohesion and consistency across all aspects.

Create your own thumbnail

Design a customized thumbnail that effectively represents your content and captures viewers’ attention. Consider using compelling imagery, clear text, and vibrant colors to make your thumbnail stand out and entice clicks.

Checking and publish

Check your content for accuracy, clarity, and consistency. Look for spelling and grammar mistakes, make sure all links work, and confirm that the thumbnail matches your content. When everything’s good to go, publish your content across platforms for your audience.

Some recommended plugins to simplify your workflow, task, accessibility checking, and design quality:

  • Supa Palette: Palette editor/generator for quickly beautiful, harmonious, and accessible palettes in a short time.
  • Batch Styler: Change values of multiple (text and color) styles at once but don’t want to go through the process of changing each text style.
  • Adee Comprehensive Accessibility Tool: Test color contrast, simulate 8 color blind simulations, and test touch target sizes to ensure they meet the various device standards.
  • Stark - Contrast & Accessibility Tools: Contrast Checker, Focus Order, Alt-Text Annotations, Vision Simulator, and more, all in one place.
  • Ditto: Single source of truth for everyone touching copy, from writers to designers to engineers.