Cooketh Flow
CookethFlow is an open-source visual thinking tool, made for FOSS Hacks 2025. Built as an alternative to tools like Excalidraw, FigJam and draw.io, it helps in mapping your ideas and visualise them.
CookethFlow started as a weekend idea for FOSS Hacks 2025. We wanted to build a collaborative whiteboard tool that had everything visual thinking needs.
Even though we didn’t win, we genuinely loved the idea. It scratched an itch we felt every day while working together: the need for a fast, clean, and open source tool.
So we kept going.
Now, CookethFlow is more than just a hackathon project. It’s our take on what creative collaboration should feel like: open, visual, and delightfully minimal.
We're building it in public and have come a long way.
Creative teams need an entire thinking environment.
But right now, that environment is fragmented.
Designers use FigJam for collaboration and sktches, Excalidraw for flowcharts, draw.io for flowcharts and sketching, Miro for brainstorming, and Notion for writing it all down.
That’s five tabs open before any real work begins.
This constant context-switching breaks focus, kills momentum, and makes creative thinking feel like a chore.
There’s no single space where people can ideate, plan, diagram, and document, without jumping between apps or sacrificing speed.
The name Cooketh came from a running joke between friends.
Whenever we found ourselves in a chaotic, slightly unhinged situation, we’d just sigh and say, "We are cooketh". It was our way of laughing through the mess.
So when it came time to chose a name for our project, there was no debate.
The branding didn’t stop at the name. We wanted something that captured the emotion of creating things in public, the pressure, the absurdity, the joy.
So we chose a tensed potato as our mascot.
Why? Because potatoes are my favorite vegetable. And also because sometimes, under pressure, we all feel like potatoes.
We named her Patootie.Her colors? #E97637 and #EB9943, wrapped in a bold black outline, flowing with the neu brutalism.
First Iteration (Alpha Version)
First Iteration (Alpha Version)
The plan for our second design iteration was simple:
Fix the UI and make dark mode work.
That’s exactly what we set out to do.
We started by building a more thoughtful color palette. Instead of picking node colors on the fly, we sat down and tested what actually looked good across both light and dark backgrounds. We kept the vibrant orange (#ED6325) as our anchor, and built supporting colors that fit both the palettes: soft colours to feel friendly and bold colours for visual weight.
This time, we wanted everything to feel consistent. So we created clear rules for contrast, spacing, and background harmony. Implemented all the rules of scalable design, used a grid system for more consistency. Dropped the chunky black outlines.
Some things didn’t need to change:
We kept Frederik as our primary font, its expressive and slightly playful. And the Phosphor icon set stayed too, since its style matched the new direction and gave us the versatility we needed across components.
The new colours looked clean enough for the dark mode too.
The first version of Cooketh Flow was built in true hackathon spirit, fast and messy.
We didn’t have a roadmap and didn't follow a proper design system.
Despite the rush, we wanted a bold and vibrant design, so we went with the neo-brutalist aesthetic. Harsh grids, raw typography, high-contrast colors, we wanted the UI to feel unapologetical and bright. But it wasn’t executed that well. The visuals were clunky, spacing was inconsistent, and accessibility wasn’t even on the radar.
At first the pages were simple:
A few onboarding screens
A simple dashboard
And the first version of the workspace canvas
We selected Frederik as our primary typeface for its distinctive character and readability, which brings both personality and clarity to the interface. For icons, we chose the Phosphor icon set due to its versatility, clean structure, and visual consistency across different components of the application.
To strike a balance between boldness and approachability, we applied a palette of soft pastel colors to the nodes, giving them a visually inviting feel while maintaining clarity and focus within the canvas.
While the design looked pretty solid in light mode, things started to fall apart when we tried building a dark version. The pastel colors clashed hard, and the thick black outlines just didn’t work in darker backgrounds. We tried a bunch of tweaks, but it never quite felt right.
Eventually, we decided to scrap it and go back to the drawing board. We knew we needed a more flexible color system that could hold up across themes, and a UI language that felt more balanced and accessible—without losing the playful vibe we started with.
The new system is still very us, just more refined and way easier to work with—whether you’re team light mode or team dark.
While the design looked pretty solid in light mode, things started to fall apart when we tried building a dark version. The pastel colors clashed hard, and the thick black outlines just didn’t work in darker backgrounds. We tried a bunch of tweaks, but it never quite felt right.
Eventually, we decided to scrap it and go back to the drawing board. We knew we needed a more flexible color system that could hold up across themes, and a UI language that felt more balanced and accessible, without losing the playful vibe we started with.
The new system is still very us, just more refined and way easier to work with—whether you’re team light mode or team dark.
One of the biggest issues we faced early on was with our primary color, that muted orange (#E97637). While it had personality, it often felt dull against brighter backgrounds, and it didn’t pair well with dark mode either. The black outlines across the UI made things even harsher, and over time, the whole system started to feel boxed in and heavy. Another big issue was even though the orange was the primary colour, it was never used across the website. It was only used for the mascot.
The logo, too, became a pain point. We had gone all in with details, but quickly realized it broke one of the golden rules of identity design: it wasn’t scalable. It looked great large, but completely fell apart at smaller sizes, especially when used as an app icon or favicon.
So we decided to clean things up.
We kept the spirit of the orange (because we still loved it), but switched to a more vibrant and energetic shade, #ED6325 and built a new color palette around it. The harsh black outlines were dropped across the UI in favor of a softer, more flexible visual style that plays well in both light and dark modes.
Even Patootie, our anxious little potato mascot, got a makeover to match the updated palette.
One of the biggest issues we faced early on was with our primary color, that muted orange (#E97637). While it had personality, it often felt dull against brighter backgrounds, and it didn’t pair well with dark mode either. The black outlines across the UI made things even harsher, and over time, the whole system started to feel boxed in and heavy. Another big issue was even though the orange was the primary colour, it was never used across the website. It was only used for the mascot.
The logo, too, became a pain point. We had gone all in with details, but quickly realized it broke one of the golden rules of identity design: it wasn’t scalable. It looked great large, but completely fell apart at smaller sizes, especially when used as an app icon or favicon.
So we decided to clean things up.
We kept the spirit of the orange (because we still loved it), but switched to a more vibrant and energetic shade, #ED6325 and built a new color palette around it. The harsh black outlines were dropped across the UI in favor of a softer, more flexible visual style that plays well in both light and dark modes.
Even Patootie, our anxious little potato mascot, got a makeover to match the updated palette.
The plan for our second design iteration was simple:
Fix the UI and make dark mode work.
That’s exactly what we set out to do.
We started by building a more thoughtful color palette. Instead of picking node colors on the fly, we sat down and tested what actually looked good across both light and dark backgrounds. We kept the vibrant orange (#ED6325) as our anchor, and built supporting colors that fit both the palettes: soft colours to feel friendly and bold colours for visual weight.
This time, we wanted everything to feel consistent. So we created clear rules for contrast, spacing, and background harmony. Implemented all the rules of scalable design, used a grid system for more consistency. Dropped the chunky black outlines.
Some things didn’t need to change:
We kept Frederik as our primary font, its expressive and slightly playful. And the Phosphor icon set stayed too, since its style matched the new direction and gave us the versatility we needed across components.
The new colours looked clean enough for the dark mode too.
Once everything looked good, I redesigned the dashboard UI, both in light and in dark mode.
CookethFlow is an open-source visual thinking tool, made for FOSS Hacks 2025. Built as an alternative to tools like Excalidraw, FigJam and draw.io, it helps in mapping your ideas and visualise them.
One of the biggest issues we faced early on was with our primary color, that muted orange (#E97637). While it had personality, it often felt dull against brighter backgrounds, and it didn’t pair well with dark mode either. The black outlines across the UI made things even harsher, and over time, the whole system started to feel boxed in and heavy. Another big issue was even though the orange was the primary colour, it was never used across the website. It was only used for the mascot.
The logo, too, became a pain point. We had gone all in with details, but quickly realized it broke one of the golden rules of identity design: it wasn’t scalable. It looked great large, but completely fell apart at smaller sizes, especially when used as an app icon or favicon.
So we decided to clean things up.
We kept the spirit of the orange (because we still loved it), but switched to a more vibrant and energetic shade, #ED6325 and built a new color palette around it. The harsh black outlines were dropped across the UI in favor of a softer, more flexible visual style that plays well in both light and dark modes.
Even Patootie, our anxious little potato mascot, got a makeover to match the updated palette.
While the design looked pretty solid in light mode, things started to fall apart when we tried building a dark version. The pastel colors clashed hard, and the thick black outlines just didn’t work in darker backgrounds. We tried a bunch of tweaks, but it never quite felt right.
Eventually, we decided to scrap it and go back to the drawing board. We knew we needed a more flexible color system that could hold up across themes, and a UI language that felt more balanced and accessible, without losing the playful vibe we started with.
The new system is still very us, just more refined and way easier to work with—whether you’re team light mode or team dark.
The plan for our second design iteration was simple:
Fix the UI and make dark mode work.
That’s exactly what we set out to do.
We started by building a more thoughtful color palette. Instead of picking node colors on the fly, we sat down and tested what actually looked good across both light and dark backgrounds. We kept the vibrant orange (#ED6325) as our anchor, and built supporting colors that fit both the palettes: soft colours to feel friendly and bold colours for visual weight.
This time, we wanted everything to feel consistent. So we created clear rules for contrast, spacing, and background harmony. Implemented all the rules of scalable design, used a grid system for more consistency. Dropped the chunky black outlines.
Some things didn’t need to change:
We kept Frederik as our primary font, its expressive and slightly playful. And the Phosphor icon set stayed too, since its style matched the new direction and gave us the versatility we needed across components.
The new colours looked clean enough for the dark mode too.
Once everything looked good, I redesigned the dashboard UI, both in light mode and dark mode.
Once everything looked good, I redesigned the dashboard UI, both in light mode and dark mode.
