leading onyx,

our

design system

Problem
Observation
Our product suite had evolved independently, resulting in fragmented UI patterns, inconsistent spacing and typography, and duplicated component logic. Teams were solving similar problems in isolation, slowing development and creating a disjointed user experience. Additionally, the absence of a robust dark mode and responsive framework made the system feel outdated and inaccessible across modern use cases.
Goal
1. Typography
  • Define a semantic type scale (e.g., display, heading, body, caption) mapped to design tokens.
  • Establish a modular type ramp with consistent ratios for scalability across breakpoints.
  • Enforce accessibility standards (WCAG contrast, minimum font sizes, line height ratios).
  • Standardize font families, weights, and styles to reduce variance in implementation.
  • Optimize for readability across densities, including data-heavy and compact UI contexts.
      Goal
      2. Spatial System
      • Implement a tokenized spacing scale (e.g., 4pt/8pt system) to enforce consistency
      • Eliminate arbitrary values by constraining layout decisions to predefined tokens.
      • Define spacing rules for padding, margin, and component composition.
      • Ensure consistent vertical rhythm and visual hierarchy across views.
      • Enable composability through predictable spacing primitives.
          Goal
          3. Grid System
          • Establish a responsive grid framework (columns, gutters, margins) defined via tokens.
          • Support multiple layout configurations for varying content densities and use cases.
          • Ensure alignment consistency through column-based and baseline grid adherence.
          • Enable fluid and fixed layouts through breakpoint-aware grid behavior.
          • Align design specifications with engineering implementation (e.g., CSS grid/flexbox).
              Goal
              4. Dark Mode
              • Develop a fully tokenized color system with semantic roles (background, surface, text, border).
              • Ensure parity between light and dark themes through shared token structure.
              • Meet accessibility standards for contrast ratios across all UI states.
              • Support dynamic theming via theme switching and system preferences.
              • Maintain brand fidelity while adapting color values for different luminance contexts.
                  Goal
                  5. Responsive Design
                  • Define breakpoint tokens and responsive rules for layout adaptation.
                  • Implement fluid and adaptive scaling for typography, spacing, and components.
                  • Support multiple density modes (e.g., compact vs. comfortable) across devices.
                  • Ensure usability and accessibility across viewport sizes and input types.
                  • Future-proof layouts through flexible, constraint-based design patterns.
                      Goal
                      5. Branding
                      • Establish a clear, scalable visual language optimized for a public-facing documentation site
                      • Standardize visual presentation across all system touchpoints for a polished, unified experience
                      • Define a cohesive visual identity (color, typography, iconography) that elevates the design system into a productized brand
                      • Align brand expression to design tokens to ensure consistency across UI and documentation
                      • Create a flexible brand foundation that supports future growth while maintaining consistency
                          Process
                          1. Audit & Feature Gap Analysis
                          I began by auditing all eight products to identify inconsistencies and common patterns. From there, I defined a set of foundational principles that would guide the system.
                          1a. Dark Mode
                          Designed a fully tokenized color system supporting both light and dark themes, ensuring accessibility and visual parity across modes.
                          Go to Figma →
                          1b. Spatial System
                          Established a consistent spacing scale and grid framework to standardize layout behavior and improve alignment across products.
                          Go to Figma →
                          1c. Grid System
                          Established a consistent spacing scale and grid framework to standardize layout behavior and improve alignment across products.
                          Go to Figma →
                          1d. Illsutrations and Animations
                          Used for in product features like Walk-me tutorials, empty states and infromational content.
                          Go to Figma →
                          1e. Typography Ramp
                          Built a clear, scalable type system with defined hierarchy, improving readability and consistency across interfaces.
                          Go to Figma →
                          1f. Onyx Branding
                          Built a clear, scalable type system with defined hierarchy, improving readability and consistency across interfaces.
                          Go to Figma →
                          Outcomes
                          Success Metrics
                          • ~15% reduction in Figma detached instances
                          • 65–70%+ of cloud and platform UI built using system components
                          • ~90%+ of color, spacing, and typography styles mapped to Figma variables
                          • ~95%+ of components and core screens built with auto layout, enabling responsive behavior and reducing manual resizing
                          • Majority of layouts follow defined resizing rules, improving cross-breakpoint consistency
                          • Phased out deprecated components (with high migration rates to new system primitives)
                          ←
                          →
                          Takeways
                          1. Setting us up for a design refactor
                          Establishing a token-driven foundation across typography, spacing, grid, and theming directly enabled a parallel refactor on the engineering side, allowing teams to rebuild the front-end against a shared system of design tokens, standardized primitives, and responsive rules. By aligning Figma variables with code-based tokens (e.g., via JSON pipelines and version-controlled in GitHub), we created a single source of truth that reduced drift between design and implementation and set the groundwork for a more scalable, maintainable, and “world-class” design system.
                          Takeways
                          2. Laying the groundwork for a live design system site
                          In parallel, this foundation made it possible to launch a centralized, live documentation site—integrated with the codebase (e.g., Storybook or similar)—where components, guidelines, and usage patterns are easily accessible, inspectable, and continuously updated, driving stronger adoption and more seamless collaboration across teams.