theory
PentestTools is a Romanian cybersecurity company. When I joined, the website and the product had been growing independently for long enough that they'd stopped feeling like the same thing. Same company, same users, different visual reality. That was the problem worth solving.
A rebranding was not in the books but a refresh of the identity was very much welcome. So while keeping the overall characteristics, the symbol has been cleaned up and given a bit more dynamism.
The chromatic system needed to evolve—refreshing the brand while staying recognizably close to the original palette.
Solution
We retained the core blue tones, introduced complementary reds to add vibrancy, and refined the balance around a coral accent in the shield. A harmonizing mustard yellow emerged as the primary brand accent, unifying the system.
The typographic scale was indexed against Tailwind's - the system the engineering team was already working in. This meant that a style named in Figma had a direct correspondent in code, and handoffs stopped requiring anyone to translate between design units and development units. Small decision, significant friction removed.
For a long time, the design system existed in Figma but didn't fully exist anywhere else. The website and the product ran on different codebases, neither was component-driven, and every decision made in one environment had to be manually reconciled with the other. Figma's native styles weren't enough to manage this properly.
We needed a more structured tokenization layer and didn't have one - until we did.
Rather than building two separate component libraries, we built one and made it context-aware. A Primary Button is a single component. Its padding and sizing are governed by a scale table segmented into Large, Medium and Small. Drop it into a website template and it defaults to Large. Drop it into a product template and it defaults to Medium. One source, no duplication, consistent updates.
Color followed the same logic. The website is dark, the product is light — both inherited decisions rather than chosen ones. Rather than treating them as separate scales, we indexed them as modes of the same scale. Light and dark mode isn't a user-facing feature yet. The infrastructure has been there from the beginning.
PentestTools has around 25 tools — reconnaissance, vulnerability scanning, exploitation. They were central to the business and completely invisible as a system. No icons, no color association, nothing that made one distinguishable from another except its name. Giving them a visual identity was one of the most important things built during this process, and it was the first project handed entirely to a junior team member: interview each tool owner, define an icon and a color family, deliver the complete set. It took a month.
Today nobody they're just part of what the product is - which is usually the sign that a foundational decision was the right one.
Once the tools had a visual identity, the next question was how far that language could stretch. The answer came through Spline - a 3D design tool that sits at a useful intersection of quality and speed. The style is isometric, clean, almost tactile.
What made it worth committing to wasn't the aesthetic alone but the underlying logic: a library of reusable elements that can be recombined into new compositions without starting from scratch each time. A new asset doesn't require a new production process. It requires pulling the right pieces and assembling them. That kind of scalability is what separates a visual system from a collection of one-offs.
