# Vidmob Design System > When I joined Vidmob the company had 38 employees. By the time this project started, it had grown to over 300. - Year: 2021 - Disciplines: Design System - Role: Lead Product Designer - Team: Lucy Bradshaw, Rafael Cespedes, Marina Porta, Vidmob Product - Designer: Rafael Cespedes (https://rafaelcespedes.com) When I joined Vidmob the company had 38 employees. By the time this project started, it had grown to over 300. The product had gone through multiple evolutions in that time, most significantly a shift toward complex data tooling. The existing design system wasn't built for it. Components were inconsistent across the product, design-to-dev handoff was slow, and there was no shared documentation. Design debt had accumulated to the point where it was actively slowing the team down. In partnership with designer Lucy Bradshaw and the Vidmob Product team, we built a new system from scratch to tackle these issues and more. ## Methodology The system was built on atomic design principles, a methodology that treats interfaces the way chemistry treats matter, breaking them into their smallest parts and building back up. **Design Tokens:** the core variables that underpin the system. Color, typography, spacing. Change a token and the change propagates everywhere. **Atoms:** the smallest functional units. Buttons, inputs, icons. The consistency here is what holds everything else together. **Molecules:** atoms combined into functional groups. Like an input paired with a label and a button. **Organisms:** complex, reusable sections built from molecules and atoms. Data tables, navigation bars, filter panels. **Templates:** layout and structure without real content. The skeleton before the skin. ## Key Considerations Design systems need to cater to the product they serve. Going into this we knew there were general problems to solve for, but also challenges specific to where Vidmob was headed as a platform. **Data Density:** Vidmob was becoming more of a data platform by the day. Components needed to hold up at high information density without compromising clarity or usability. **Data Visualization:** The system needed more than primitive and semantic colors. Charts, graphs, and tables are abundant across the platform, each requiring their own defined color logic. **Interactivity Patterns:** A lot of components in the platform carry hidden context. Hover states, tooltips, and drill-downs were doing a significant amount of the work. Getting them right required dedicated time and attention. **Accessibility:** Contrast matters even more when data density is in play. Vidmob's user base is wide ranging, from analysts to executives, making accessibility a baseline requirement. Each component kicked off with a brief covering its definition, stakeholders, and what was being redesigned. From there it moved through three phases: research, execution, and documentation. Research meant auditing other design systems, interviewing designers and engineers, and mapping existing usage across the product. Execution covered wireframing, UI exploration, and Sketch symbol creation. Documentation closed the loop with written specs and Zeplin links for engineering. Not every component needed every step. Complexity determined the process. [Design System Website](https://design.vidmob.com/475003233/p/4303cb-vidmob-design-system) ## Color The color system is organized into four categories: primary, secondary, status, and neutrals, with an extended palette for data visualization and illustrations. All colors are tokenized in two layers: option tokens define the ramps, decision tokens map them to UI contexts. The separation keeps the foundation stable as the product evolves. The system supports light and dark mode. Dark mode uses layered greys to express elevation, with color used sparingly as an accent. WCAG AA compliance is required across both. ## Typography The type scale was built on a modified Major Second scale with thirteen sizes, adjusted to align with a base-4 unit system. All sizes are implemented as rems in code to ensure consistent scaling across environments. Three typefaces make up the system: TT Commons, Maison Neue, and Maison Mono. TT Commons, while not optimized for product, was retained to maintain continuity with Vidmob's marketing brand. Hierarchy is determined by size first, color second. Every style is tokenized, from headlines down to supporting text and inline code, making updates a single-source change rather than a manual sweep across the product. ## Spacing & Shadows Spacing runs on a base-4 scale with ten defined steps, 4px to 80px, implemented as rems. Proximity drives grouping. No one-off values. Shadows are a three-step scale managing elevation across light and dark mode. Light mode uses higher opacity for visible depth. Dark mode relies on grey layering, with shadows playing a supporting role. ## Components In addition to the foundational elements, the system included a full component library covering avatars, buttons, cards, checkboxes, date pickers, dropdowns, form items, menus, radio buttons, search fields, and more. Each component was built to handle the density and complexity demands of the platform. ## Product Illustrations Illustrations serve a functional purpose first. Adding context, directing action, and filling moments where the UI would otherwise feel empty. Simple shapes form the foundation, with the contrast between round and sharp details reflecting the duality of creative and data throughout the product. Color is restrained: three shades from a single ramp per illustration, with white used selectively for negative space. Product illustrations are used mainly for empty states, onboarding, and announcements. A design system is never finished. Work on the Vidmob system has continued since I left in 2022, growing alongside the product. For anything not covered here, feel free to reach out. ## Images and video - https://rafaelcespedes.com/projects/vidmob-design-system/carousel/01_Vidmob_DS_Intro_00.webp - https://rafaelcespedes.com/projects/vidmob-design-system/carousel/02_Vidmob_DS_Grid_04.webp - https://rafaelcespedes.com/projects/vidmob-design-system/carousel/03_Vidmob_DS_Icon_Cover_02.webp - https://rafaelcespedes.com/projects/vidmob-design-system/carousel/04_Vidmob_DS_Typography_01.webp - https://rafaelcespedes.com/projects/vidmob-design-system/case-study/01_Vidmob_DS_Intro_00.webp - https://rafaelcespedes.com/projects/vidmob-design-system/case-study/02_Vidmob_DS_Process_05.webp - https://rafaelcespedes.com/projects/vidmob-design-system/case-study/03_Vidmob_DS_Color_00.webp - https://rafaelcespedes.com/projects/vidmob-design-system/case-study/04_Vidmob_DS_Typography_01.webp - https://rafaelcespedes.com/projects/vidmob-design-system/case-study/05_Vidmob_DS_Styling_00.webp - https://rafaelcespedes.com/projects/vidmob-design-system/case-study/06_Vidmob_DS_Grid_05.webp - https://rafaelcespedes.com/projects/vidmob-design-system/case-study/07_Vidmob_DS_Icon_Cover_00.webp - https://rafaelcespedes.com/projects/vidmob-design-system/case-study/08_Vidmob_DS_Components_01.webp - https://rafaelcespedes.com/projects/vidmob-design-system/case-study/09_Vidmob_DS_Illustrations_07.webp --- From the portfolio of Rafael Cespedes. Everything about him in one file: https://rafaelcespedes.com/llms-full.txt ยท Updated 2026-11-08