Kubeshop
Behind the scenes: How we deliver scalable design solutions
Kubeshop is an open-source accelerator that builds and supports tools for developers and testers in the Kubernetes and cloud-native space.
- Timeline:Since 2021
- Services:Branding
Web design
UX/UI design
Web development
Illustrations - Website:kubeshop.io
First touch
The initial request to our team was to create a complete corporate identity for the umbrella brand and all sub-brands.
There were 7 brands
All seven visual identities have been systematized into brand guidelines and design systems.
As the projects expanded across multiple carriers and touchpoints, Kubeshop turned to us for visual content management and creation.
Graphic design
We have developed a workflow for each new project:
So,
we have:
- 7 logotypes
- 6 characters
- 7 world illustrations
Illustration contrasting the open-source version with the paid version
Illustration contrasting the open-source version with the paid version
%201.webp)
Illustration contrasting the open-source version with the paid version
Illustration contrasting the open-source version with the paid version
Illustration contrasting the open-source version with the paid version
Illustration contrasting the open-source version with the paid version
AND?
WHAT NOW?
First of all, let us show:
Each illustration can be divided into sections that work perfectly as article thumbnails or YouTube video covers.
See how it looks in Testkube blog.
Blog covers:
Youtube covers:
How else we can use the illustrations
Then:
Illustration contrasting the open-source version with the paid version
Illustration contrasting the open-source version with the paid version
Illustration contrasting the open-source version with the paid version
Illustration contrasting the open-source version with the paid version
Illustration contrasting the open-source version with the paid version
This approach allows us to create scenes that highlight different aspects of each specific project.
Each scene we create gives us the chance to create PNGs for later use.
Further needs:
for example, printed media:
.avif)
But what if we need schematic diagrams?
We added several elegant elements that support the overall brand visual style. These include branded blocks, connecting lines, and a set of custom icons.
But what if we need animated content?
We created animations for social media content, process walkthroughs, and animated the brand character.
We follow the same approach for every project:
How do we keep it up?
We created brand guidelines and followed them, but we also ensured that the team did too:
.avif)
1
So,
we have developed a thumbnail creator in Figma for all social media platforms: YouTube, blog posts, podcasts, social sharing, etc.
The client's team simply needs to choose a pre-made background and change the title of the post.
.avif)
2
And
we have developed a design system in Figma with reusable components and automatic layouts covering all use cases. This allows us to design web pages three times faster.
Thanks to the design system, the branding always stays intact. It covers everything: primary and secondary colors and shades, fonts for any text element, even the number of pixels taken up by the shadow when a user hovers over a blog post card. And all other small important details that make up branding.
.avif)
.avif)
The design system includes:
- Buttons,
- Spacing,
- Icons,
- Typography for desktops, tablets, and, mobile devices,
- Color palette,
- Shadows,
- Images ratio,
- Badges,
- Lists,
- Input elements,
- Containers,
- Cards,
- Navigational menu,
- Avatars,
- Footer.
web design
Okay, we have a design system and we have guidelines. How are we working on web design?
100+ pages
We have about 100 pages for all the projects created for Kubeshop's sub-brands. We always know which version of a page is on the website and can access all previous versions.
Usually, we just get text content, but sometimes we also work with rough sketches or prototypes made by AI bots using Miro, or even on paper.
Each page goes through quality control and cross-browser checking. Adaptive work is done automatically, but it can be manually adjusted if necessary.
tech part
how does it alllllll work?
.avif)
When we hit the limit of what the platform can do, we use external libraries with features that are needed for the project. This page sorts all the terms alphabetically, makes the first letter capitalized, and groups all terms based on their starting letters.
Denis also has a best friend, Webflow support. They're in touch as if they'd known each other since childhood.
.avif)
For Kubeshop, we've created a design system using Webflow. That makes it way faster and easier to make new sections and pages. Those variables and components make sure that all the brand elements, like blog cards and author avatars, look the same across the whole website.
need all that support?
Drop us a line or fill out a form
This Monocle mascot is just jumping for joy! That means it's not just talking to the audience, it's also showing the right feelings and users can catch those feelings faster than if it was just text.
some faq
We can start immediately after our initial consultation. The onboarding process is simple: we schedule a discovery call to understand your needs, you fill out a brief, and we're ready to begin. Most clients are up and running within 3-5 business days from first contact. For urgent projects, we can fast-track the process and start even sooner.
Full design support means we cover all your design needs under one roof. Our service includes branding, web design, UX/UI design, marketing materials, social media content, presentations, packaging design, illustrations, and more. We have different design specialists on our team and form a dedicated team based on your specific requirements. Whether you need a brand refresh, ongoing design operations, or multi-platform campaigns, we've got you covered.
We're flexible with pricing to match your business model. You can choose:
- Monthly retainer with a fixed number of hours for predictable budgeting
- Hourly-based support for variable workloads and project-based needs
- Custom packages for specific services like branding or website development
We'll discuss your budget and project scope during our initial call to find the best pricing structure for you.
Your projects will be managed by a dedicated design team assigned specifically to your account. This approach guarantees consistency, faster turnaround times, and deep understanding of your brand. Unlike agencies that shuffle designers between clients, your team stays focused on your needs, allowing us to handle multiple projects simultaneously without compromising quality or speed.
For branding projects, we include 2 rounds of revisions to ensure we nail the concept and refinement stages. For ongoing design support with hourly-rate billing, we don't restrict the number of revisions—you pay only for the time spent, giving you complete flexibility to iterate until you're satisfied. Our goal is delivering designs you love, not counting revision rounds.
We use industry-standard collaboration tools for seamless communication:
- Slack for daily communication and quick updates
- Zoom for video calls and presentations
- Figma for design review with commenting capabilities—you'll have full access to leave feedback directly on designs
No special software required on your end. Everything is cloud-based and accessible from any device.
We have team members across 6 time zones, enabling us to provide round-the-clock support and handle urgent requests efficiently. Whether it's an emergency design request or a tight deadline, our distributed team structure means someone is always available to jump on your project. We've delivered same-day turnarounds for critical materials when needed.
That's totally fine—client satisfaction is our priority. If you're not happy with the design direction, we'll pause and rework the concept from scratch. We start by understanding what's not working, then explore alternative design approaches until we find the right fit. Our collaborative process includes regular check-ins to catch any misalignment early before investing too much time.
After completing your branding development, we create a comprehensive design system in Figma and Webflow that documents your colors, typography, layouts, components, and brand guidelines. This becomes your brand's single source of truth. As your brand evolves, we update the design system accordingly—it's a living guide, not a restriction. This ensures perfect brand consistency across all touchpoints and team members.
We don't lock you into long-term contracts. Our philosophy is earning your business every month through great work, not contractual obligations. We only ask for one month's notice if you want to pause or end the service. This gives us time to wrap up ongoing projects properly and ensures a smooth transition.
Absolutely. Scalability is built into our service model. You can:
- Increase or decrease your monthly retainer hours
- Switch between retainer and hourly-rate support
- Add or reduce team members based on project volume
- Take breaks between busy periods
Your needs change, and we adapt accordingly. Many clients scale up during product launches and scale down during quieter periods.
We maintain a network of trusted contractors and specialist designers for niche skills like motion graphics, 3D design, animation, video production, and more. If your project requires expertise outside our core team, we'll bring in the right specialist while maintaining project management and quality control. You get access to a broader talent pool without managing multiple vendors.
We'll respect and follow your existing brand guidelines completely. During onboarding, we review your current brand documentation, style guides, and design assets to ensure alignment. If your guidelines need updating or expanding as your brand grows, we can enhance them. Our job is to be brand stewards, maintaining what makes your brand unique while helping it evolve.
You have full intellectual property rights to all design files and assets according to our contract. We provide complete file ownership and source files (Figma, AI, PSD, etc.) so you're never locked in. Our design studio retains only the right to showcase work in our portfolio, case studies, and social media for promotional purposes. If confidentiality is required, we're happy to sign NDAs.
Yes, absolutely. We create ready-to-use design systems in Figma or Canva (depending on your team's needs) with complete documentation on how to use every component. The design system includes all UI components, style guides, brand assets, and usage instructions so your internal team or future designers can maintain consistency. We also offer training sessions to onboard your team on the system.