Valnet Design System Overhaul

One centralized Figma library and a unified component language for 20+ global media brands, from ScreenRant to GiveMeSport. It cut design-to-dev handoff by 37% and brought every brand to WCAG 2.1 AA.

Context

Valnet Inc. is home to more than twenty high-traffic content brands (ScreenRant, GameRant, SimpleFlying, GiveMeSport, and others), each with its own team, its own component library, and its own interpretation of the brand. The inconsistency slowed production, stretched design-to-dev handoffs, and diluted quality across the portfolio. My role was to lead the creation of a single, centralized design system to serve them all.

Challenge

• Multiple teams working from different component libraries, with inconsistent styles across 20+ properties.
• Long design-to-dev handoff times caused by the lack of standardized specs.
• Accessibility applied unevenly, with no shared standard to hold every site to.

Approach

1. Audit – Reviewed design files and front-end code from every brand to map overlaps, gaps, and the components worth systematizing.
2. Core library – Built a master Figma library covering typography, color, grids, and UI components.
3. Standardization – Turned recurring patterns into reusable, responsive modules: navigation bars, article cards, CTAs.
4. Documentation – Wrote usage guidelines with accessibility best practices baked into every component.
5. Implementation – Partnered with dev teams to bring the components into the shared codebase.

Beyond the system

The library became the foundation for new high-traffic products I designed and shipped on top of it: TV schedule pages for ScreenRant, and game stats, live scores, and team pages for GiveMeSport.

Outcome

• A single source of truth for every designer and developer in the portfolio.
• Faster iteration on new features and brand refreshes, with quality that no longer depends on which team ships it.