In 2018, I embarked on a journey to create a tool that would empower designers and developers to generate and manage colour palettes with ease and efficiency.

My Role

  • I initiated the project as an experiment for a design system tool using reactive components.
  • I was responsible for the design, development, and planning of the product. I worked on it in my spare time, and it evolved into a side project.

    • Results

  • To date, it has attracted over 32,000 users
  • It has received various mentions on blogs and from designer influencers, particularly praised for its accessibility functionalities.
  • It has received over 400 donations
  • It is used to define colour foundations in hundreds of design systems worldwide.

    • The result? Geenes.app, a web application that has become a valuable asset for hundreds of users worldwide, even though I'm currently focusing on maintaining it rather than adding new features.

    Developing Geenes wasn't just about coding; Rather a Full-Spectrum Experience.

    From initial research and design to prototyping, customer interaction, and project management, I gained invaluable exposure to the entire product development pipeline. It was an incredible opportunity to hone my skills in every aspect of bringing a product to life.

    Geenes was praised as an intuitive and a user-friendly experience. The design process prioritized efficiency and depending on the situation and objective involved meticulous UX documentation, leading to a quick and intuitive prototype that was meticulously refined before launch. My goal was to deliver fully baked, powerful features coming from intuition and user’s requests.

  • Visual Palette Creation: Generate a full colour scale from a single starting colour in real-time using curves and gradients. This visual approach allows users to see exactly how their palette will unfold.
  • Live Mock-up Preview: See your colour palette come to life on various mock-ups that update instantly with any changes. This streamlines the design process by allowing for quick colour testing and generation of numerous variations.
  • Accessibility Focus: An accessibility matrix provides insights into colour contrast ratios, ensuring your designs meet WCAG 2.1 AA and AAA standards.
  • Colour Blindness Simulation: Preview how your design appears to users with various forms of colour blindness.
  • Seamless Export: Export your colour palettes to popular design tools like Figma and Sketch, as well as various coding languages (JavaScript, CSS, Sass, Swift) and XML.

    • Geenes is built on Vue.js, a framework that enables a reactive user experience. Integration with existing APIs and other I tackled myself on the Back end to further enhances its functionality. Additionally, I created its Figma plugin, ensuring a seamless workflow between the web app and Figma.

    The continued success of Geenes is a testament to its user-friendliness and powerful features. It's a project I'm incredibly proud of, and it serves as a valuable showcase of my full-stack development capabilities.