Kayhan Atamyildiz Kayhan Atamyildiz An atomic, token-driven design system that unifies three network brands across mobile, web, and connected TV — built as a living product, not a style library.
One scalable system that captures the spirit of each brand while sharing a single core — efficiency for designers, consistency for stakeholders
Each network had its own style library, so the same button, icon, or color existed three times and drifted three ways. The goal wasn’t a shared paint job — it was one core that captures each brand’s spirit, so a fix in one place lands everywhere.
I embraced Atomic Design Principles to construct a system that is both sustainable and highly scalable. By breaking interfaces down into fundamental “atoms” and assembling them into complex components, I streamlined the development process, fostering a level of adaptability that allows the system to evolve alongside the brands.
Tradeoff → Atomic thinking is slower to start — you build the kit before the screen. It pays back every time a new surface reuses the same atoms.
To reduce maintenance and design debt, I redesigned the button component from the ground up, structuring it around a singular 'base' component. By utilizing conditional statements and nested properties, I aligned my design methodology with engineering logic, ensuring that a single change at the root propagates seamlessly throughout the entire ecosystem.
Tradeoff → A single configurable component is more complex internally than many simple ones. I accepted that complexity in one place to remove it from a hundred others.
Icons are the visual anchors of the user journey. I standardized a meticulously crafted library that transcends language barriers to communicate information intuitively. This system ensures brand recognition remains consistent, promoting usability and aesthetic harmony across every interface.
The color palette is designed for versatility, featuring a robust neutral scale complemented by unique primary, secondary, and gradient palettes for each brand. Typography is standardized on Open Sans, using a percentage-based scale for line heights and four distinct font weights. This minimalist scale ensures a legible, premium experience optimized specifically for streaming media on all viewports.
Leveraging Figma's variable tokens, I reduced the maintenance cost of the design system. By tokenizing colors, spacing, and grids, I facilitated a viewport-centric approach that allows design solutions to adapt automatically to diverse screen sizes and resolutions, accelerating the prototyping and scaling process.
Design is only as good as its implementation. I developed a detailed specification framework that highlights layout, anatomy, spacing, and instance properties. This documentation serves as a vital bridge during developer handoffs, fostering clear communication and collaborative critiques within cross-functional teams.
The clearest proof is structural: one base button component now drives every variant across three brands, instead of three separate style libraries drifting apart. New screens get built faster because designers are assembling from a shared kit instead of starting from scratch, and a fix made once — a color, a spacing token — now reaches mobile, web, and TV at the same time.
I knew going in that a fragmented system across three brands wasn't sustainable — taking the initiative to simplify it, rather than waiting to be asked, was the right call. If time had allowed, I'd have brought in Token Studio to export the entire token set to JSON, tightening the designer-to-developer handoff even further