A breath of fresh air for the Refine brand.

Context

Refine started as an open source React meta-framework — a boilerplate for CRUD-heavy interfaces like internal tools and admin panels. When I joined the team in February 2023, it was just beginning to find its audience. It had around 7K GitHub stars and the Discord server was steadily getting busier.

The existing website was dated and disconnected from its audience. The brand identity was muddled and out of step with the company's positioning. I was in charge of fixing these problems.

Website Iteration #1

I audited the existing website and listed down these problems:

• The positioning was a use-case pitch, not a category claim. "Build your CRUD applications without constraints" told visitors what they could make with it, but never said what the thing actually was or who it was for.

• The imagery sold outcomes instead of architecture. Tilted paper labels listed admin panels, dashboards, storefronts, internal tools — the language of a marketing buyer browsing for a boilerplate, not an engineer evaluating a platform.

• The navigation was flat and undifferentiated. Nine roughly equal items — Docs, Tutorials, Examples, Integrations, Blog, About, Shop, GitHub — with no hierarchy and a gift emoji doing unclear work.

• Marketing residue was crowding the frame. Product Hunt badge, GitHub star count, scroll-down mouse hint — every available reassurance signal kept in place, all competing for attention.

• The surface was loud. A single saturated blue running edge to edge, heavy sans-serif type, mixed casing, and an all-caps "WITHOUT CONSTRAINTS" shouting from the headline.

I started working on a website design addressing these issues.

• The headline names a category and an audience. "Open-source enterprise application platform for serious web developers" — same product, but now stated as what it is and who it's for, in one line.

• The hero contains an animation, describing the workflow of the platform. A node diagram with a central core wired to "UI framework", "React Platform", "Backend", and "Auth Provider". It speaks to developers who want to see the structure before they read the pitch.

• The navigation menu collapses into four semantic categories. Open-source, Community, Company, Blog. Fewer items, more meaning per item, with "Open-source" leading the bar as a statement of identity rather than a feature.

• The reassurance signals which were competing for attention are moved to more convenient positions. GitHub star count is displayed on the header, within the link to the GitHub page. The Product Hunt badge is displayed down on the footer.

• The surface quietens down. A dark base with restrained, high-impact accents — the rainbow glow on the primary CTA, the cyan and red and orange of the node holograms. Type drops to a lighter, consistent treatment that just states what the thing is.

After completing the website, I started working on the brand identity.

Auditing the landscape

I started by mapping the dominant logos in the React ecosystem — the libraries and frameworks Refine sits alongside in a developer's mental model. The pattern was consistent: clean wordmarks, restrained palettes, and logomarks built on geometric or letterform constructions.

The logomark

The brief called for a mark that would be instantly recognizable to React developers without feeling like another piece of generic dev-tool iconography. I started with variations on the letter R — the obvious move, and worth exhausting before moving past it.

Leadership rejected the direction, and rightly: too many established tools in the space already use an R logomark. Recognizability was working against us.

Refine's previous mark included a toggle-switch motif — a small piece of brand equity worth preserving. I combined it with the React logomark itself, which gave us two things at once: an immediate signal of what ecosystem Refine belongs to, and a unique element. This direction was approved.

The Deliverables

For an early-stage startup moving as fast as Refine, the brand couldn't be a fixed artifact, it had to be a system that could absorb new contexts as quickly as the product was finding them. I wanted an identity dynamic and eager enough to keep pace with the company, but disciplined enough that it wouldn't drift into incoherence as it stretched.

So, I prepared a brand style guide document that invites variation rather than just forcing a solid foundation.

Website Iteration #2

With the new identity in place, I redesigned the website with a more minimalistic approach. The earlier version had already moved away from the blue-and-shouting site, but it was still gesturing at what the product was. The new version stops gesturing.

The headline names a comparison instead: "Open-source Retool for Enterprise." It's a single line that does what a paragraph used to do — anchors the product against something the audience already understands, then narrows the scope with one word. The supporting line spells out the use cases without the abstraction.

Website Iteration #3

This design held up until Refine's strategy shifted in 2025: the AI product moved to the center of the company, and the open-source framework — once the whole offering — became one piece of a broader portfolio. The website needed to follow. We rebuilt it around Refine AI and moved the open-source project under a new sub-brand, Refine Core.

Conclusion

The work delivered a coherent brand identity and a website that said clearly what the product was. Engagement and traffic lifted measurably, GitHub stars grew from 7K to 34.7K, and the brand became something people recognized. The company was accepted into Y Combinator Summer 2023 batch.