Logo:

triply_logo_5_variaties.svg

• Primary Logo: A combination of a bicycle and infinity symbol, reflecting movement, sustainability, and seamless experiences. It can be used with or without the text "Triply."
• Logo Usage:
  • The logo should primarily be used on a teal (#099A95) background for consistency.
  • The white version of the logo can be used on dark backgrounds for better visibility.

Typography:

• Font Style:
  • Based on the visuals, the font style appears modern and rounded, giving a friendly and approachable feeling.
  • A sans-serif font works well to convey simplicity and accessibility, aligning with your clean and modern design.
  • Texts are clear and legible, favoring readability over stylistic complexity.

Color Palette:

The app’s interface uses a consistent set of colors that reflect both professionalism and energy. Here’s how each color should be used:

• Primary Colors:
  • White: White is important as an important color for creating space and anti-clutter.
  • Teal (#099A95): This is your signature brand color, used prominently across the app and website to create a recognizable and consistent identity.
  • Orange (#FE790D): Used for accents, buttons, and interactive elements. This color signals action and engagement.
  • Light Orange (#FDAD0F): Works well in combination with the primary orange as an alternative highlight or accent, adding variation without distraction.
• Secondary Colors:
  • Dark Green (#032B29): Utilized for text and other details that need contrast and clarity against lighter backgrounds.
  • Red (#FB0E14): Reserved for error messages, warnings, or critical notifications.

UI/UX Style:

App example:

• General Aesthetic:
  • The design is minimalistic, with ample white space, clean lines, and intuitive layout, promoting ease of use and reducing cognitive load.
  • The use of teal and white backgrounds reinforces simplicity, while pops of orange and red guide users’ attention to actionable elements.
  • The countdown timer and booking system focus on clarity, using round shapes and gentle colors to ease decision-making.
• Buttons and Actions:
  • Buttons like “Boka” (Book) or “Börja cykla” (Start cycling) are bold and central, typically using orange for emphasis.
  • Icons are simple, functional, and maintain consistency with the clean visual aesthetic. They complement the text but do not overshadow the experience.
  • Interactive Feedback: Consider slight tonal shifts or overlays for interactive states (hover, active, disabled) to make interactions more intuitive.

Imagery & Icons:

• Flat Design: Simple, flat illustrations and icons (such as the bicycle icon) are used to keep visuals straightforward and aligned with the minimalist interface.
• Functional Imagery: Icons focus on purpose over decoration, with a straightforward communication style that matches the overall brand ethos of usability and practicality.