Analytical Graphics Inc.
AGI Design System / Style Guide
Role
Co-lead Designer on Project
Cross-Functional Partners
Co-lead Designer, Frontend Engineers, & Multi-Department Stakeholders
Core Focus
Live Component Libraries, Frontend Development (HTML/CSS), & System Management
Overview & Challenge
Project Summary
The AGI Design System / Style Guide was architected to serve as a comprehensive, company-wide source of truth for user experience across all legacy and emerging product lines. Prior to its centralization, product teams frequently designed features in silos, causing visual drift, fragmented interaction patterns, and an over-reliance on a limited central design team. Serving as co-lead designer, I helped lead the evolution and maintenance of the design system. Beyond standard static vector UI library kits, I drove the technical implementation by custom-building the live, interactive frontend code (HTML/CSS) for the system documentation site.
The Challenge
Scaling a single design language across deeply analytical, data-heavy software portfolios requires more than basic style sheets or color palettes. The system had to accommodate immense functional complexity, such as multi-theme variations (Dark and Light modes), strict internationalized text parameters, and complex multi-state form validation states. Product teams lacked a centralized blueprint, forcing developers to routinely guess at interactive behaviors, edge-case error layouts, or typography treatments.
To resolve this, our strategy pivoted to structural standardizations. We designed component guidelines spanning form elements, custom data-visualization iconography, internationalization, and error-handling specifics to guarantee a uniform look and feel.
Process & Execution
Living Design SYstem
Leveraging my background in HTML/CSS, I went beyond static visual layouts and coded the live, production-ready HTML & CSS style rules for the centralized design system documentation environment. This custom-built interface dynamically utilized our tokenized styles to actively demonstrate the interactive layout rules, text wrapping behaviors, and spacing rules.
UX Quality Control
To ensure absolute quality control and block code regression, we implemented a formal quality assurance loop. We performed meticulous UX reviews on all newly requested or updated components before they were formally committed to the system library for production use. This mechanism preserved visual alignment and software logic across our shared workspaces.
Support For the Unsupported
The rollout of the centralized resource successfully resolved an immense structural constraint: supporting our non-supported product teams. By establishing a library packed with interface principles and functional review checklists, product divisions operating without dedicated design support were empowered to independently ship compliant, accessible user interfaces.
Back to Work List