ThreatConnect Design System
Overview
The ThreatConnect design system provided behavioral and visual guidelines for building a consistent experience and style within the threat intelligence platform (TIP). Front-end developers referenced the design system's extensive instructions to create the web app's reusable component library in Angular, increasing the speed of the product's evolution to a more modern technology and aesthetic.
Created while working at ThreatConnect
Details
Colors
Ensuring ease of maintenance and scalability, the design system's colors were carefully chosen so that variables correlated precisely between the dark and light themes, with no special overrides necessary to balance contrast and visual hierarchy. This foundation of the first two themes allowed more color palettes to be quickly researched and developed when company leadership requested greater variety.
Guidelines & Facets of Design System
The design system included visual and behavioral guidelines for:
- Typographical hierarchy
- Iconography
- Spacing standards
- Accessibility standards
- Error & alert usage details
- Reusable interface elements with applicable states
(e.g., neutral, hover, active, selected, focus, disabled, error, etc.) - Data table design and interaction specifications