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 specifications and usage guidelines to create the web app's reusable component library in Storybook in Angular, increasing the speed of the product's evolution to a more modern technology and aesthetic. The images in the gallery below are just a small sample of the entire design system.
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
A design system is so much more than just a component library / UI kit. It is a living document that grows and changes with time. The design system included visual & behavioral guidelines such as:
- Typographical hierarchy
- Iconography
- Spacing standards
- WCAG accessibility standards
- Usage documentation
- Interaction & microinteraction specifications
- Permissions handling
- Error & alert usage details
- Writing guidelines
- Reusable interface elements with applicable states
(e.g., neutral, hover, active, selected, focus, disabled, error, etc.) - Data table designs and interaction specifications
- Example page layouts and headers