[ BRAND IDENTITY SYSTEM ]
The brand that learned to ship itself
Dyte had a powerful product and a 2-page website. I gave it a visual language so clear that engineers could build 30+ on-brand pages without ever pinging design.
[ Role ]
Lead Brand & Visual Designer
[ Scope ]
Brand Identity · Visual System · Design Tokens · UI Kit
[ Live Website ]
[ RESULT ]
2 pages → 30+ pages
[ 01 — THE STARTING POINT ]
Good tech, quiet brand
When I arrived, Dyte was already doing something remarkable: powering live video for developers across the world. But the brand hadn't caught up to the product. Two web pages. No shared palette. No system holding things together. Every new marketing asset felt like it was starting from scratch.
The ask wasn't cosmetic. It was structural. Build a visual identity that stretches across marketing, product pages, and developer documentation, then make it intuitive enough that the engineering team can ship pages on their own. The product was growing fast. The brand needed to keep pace.
[ Side-by-side: Old social media approach vs. new brand direction ]
[ THE SITUATION ]
Good tech that
& Quiet Brand
A product this good deserved a brand that could keep up. So I built one that didn't need me to.
[ 02 — DEFINING THE VISUAL LANGUAGE ]
Finding a visual voice for developer tools
Color System
The identity found its center in a gradient: electric blue melting into vibrant orange. It became unmistakably Dyte. I mapped out exactly where it shows up (borders, accents, hover states) and where it steps back so the content has room to land.
[ Screenshot: color palette + gradient system from Figma ]
Typography & Design Tokens
Before drawing a single screen, I standardized every design token: color values, type scales, spacing units. Everything built from this system would be consistent by default, not by effort. The typography favors scannability. Developers read differently. Bold headlines do the orienting. Body copy fills in the rest.
[ Screenshot: typography scale + token structure from Figma ]
Custom Icon System & Spot Illustrations
I drew a custom icon and illustration system. Clean, geometric, with those gradient accents echoing the brand palette. The real test: could the marketing and engineering teams create new icons using the same visual logic, without needing someone who can draw? They could.
[ Icon samples ]
[ Spot illustrations ]
[ 03 — THE MODULAR SYSTEM ]
A kit that works when I'm not in the room
Beauty wasn't the hard part. Usability was. As Dyte grew from 2 to 30+ pages, engineers needed to ship landing pages for each new SDK and feature. So I built a modular page kit in Figma: production-ready sections they could assemble like building blocks, without guessing.
[ Screenshot: Full Figma UI kit overview — show the modular sections ]
Sections that snap together
Hero blocks, feature grids, CTAs, testimonial layouts. Each one with spacing, hierarchy, and color already considered. A new page could go from blank to polished in minutes.
Documentation written for humans
No component was labeled "Card Variant 3B." Every piece had a real description: what it does, when to reach for it, and why it looks the way it does.
AI in the workflow
I wove AI tools into the asset pipeline for generation, templating, and iteration. The team moved faster on campaigns without the system losing its coherence.
[ 04 — PAGES IN THE WILD ]
What it looks like in the wild
[ dyte.io homepage ]
[ SDK feature page ]
[ Use case page ]
[ Pricing or docs page ]
[ 05 — LOOKING BACK ]
What I carry forward
If I started this over, I'd document the "why" earlier. Not just the usage rules, but the thinking that shaped each decision. The system shipped fast and held up well. But when new people joined, the reasoning sometimes traveled slower than the components. Next time, I'd make the institutional memory as durable as the design tokens.