Shape system

Why shapes?
How do they fit our personality?
How to use them
Icons
Don’ts

Why shapes?

There are endless combinations of shapes available, and each new combination tells a different story. the way we combine them creates our own visual language and style.

As with the colors, the shapes also form a broad spectrum that guarantees the scalability of the visual identity. This flexibility allows us to create a vast icon library without ever straying from the core of Foleon's identity.

How do they fit our personality?

Our shapes are easy to adapt and combine, and they evolve in a smart, colorful way.

This structure allows us to create smart, surprising designs that keep our audience engaged. Dynamic experiences of our brand/product.

Primary shapes (pure geometric)

Secondary shapes (combination)

Tertiary shapes (adding meaning and colours for icons only)

How to use them:

  • They should be abstracts
  • The shapes are solid and need to be respected and applied as geometrically as possible.
  • The visual impact of shapes can be powerful, so it's best to use them in moderation. They can lose their strength if used too frequently.
  • Shapes are ideal for general covers and icons.
  • The copy needs to be legible so don't place the copy over them.
  • Combining multiple colors on shapes can be visually overwhelming. Instead, use one color or combine a secondary color with white (on a dark background) and blue (on an off-white background).

Icons

  1. Enhancing communication: Icons convey information quickly and visually, reducing the need for lengthy text explanations.
  2. Improving user experience: Icons are useful in aiding navigation and making interfaces more intuitive, which ultimately improves the overall user experience.
  3. Increasing scannability: Icons break up content, making it easier to scan, and improve accessibility by providing visual cues.

Dont's

❌ Don’t mix the shapes with photography.

❌ Never use the shapes just as a decorative element or an ornamental wallpaper.

❌ Don't use illustrative icons as background.

✅ We only use abstract shapes.

✅ Illustrative shapes are only for the icons.

❌ Please don't combine secondary colors with each other.

✅ Use one color or combine a secondary color with white (on a dark background) and blue (on an off-white background).

❌ The shapes have no line/stroke and always have a fill color.

❌ They aren't bouncy or blobby.

❌ Don't use them in such a way that the separate shapes become unrecognizable.

❌ Avoid making the shapes look like cartoon characters.

❌ Please refrain from using our shapes to create any kind of illustrations.

Previous page
Next page