Mayhem Design System
A complete design system built from zero for an ML-driven cybersecurity platform — principles, color architecture, iconography, component guidelines, and usage rules for 25 engineers and hundreds of enterprise customers including the Department of Defense.
When I joined ForAllSecure, Mayhem's visual language hadn't been updated in three years. There were no documented principles, no color usage guidelines, no icon system, and no component standards. Engineers made UI decisions by copying whatever was already on screen. I replaced all of it.
Design Principles
I structured the system around three principle layers, each governing a different level of design decision. UX principles define how the product behaves. Aesthetic principles define how it looks. Illustration principles define how it communicates visually. Every principle is actionable — not aspirational.
UX Principles: glanceable, universal, balanced, efficient. A fuzz testing product that also happens to be visually appealing.
Aesthetic Principles: simple, clear, consistent, modern. The product went from dated to current without losing technical credibility.
Illustration Principles: rhythmic, delightful, considerate, relevant. Guidelines for every visual element engineers might need to create or modify.
Color Architecture
The color system separates base colors (structural — navigation, backgrounds, status indicators) from decorative colors (contextual — icons, onboarding, data visualization). Every color has a documented hex value, a named usage, and a clear rule for when to use it and when not to.
Complete color system: 11 base colors with structural roles, 9 decorative colors with contextual uses. Every hex value documented.
Usage guidelines: contrast rules, hover state patterns, button hierarchy, hyperlink treatment, and palette restrictions. Do/don't format eliminates ambiguity.
Iconography
Mayhem detects specific categories of software defects, each mapped to CWE (Common Weakness Enumeration) standards. I designed 13 custom defect icons — each one visually distinct at small sizes, semantically tied to its defect category, and mapped to specific CWE numbers for engineering reference.
13 custom defect icons: Out of Bounds Read/Write/Access, Null Pointer Dereference, Input Validation, Size Calculation, Undefined Behavior, Memory Management, Lifetime, Logic — each with CWE mappings.
Impact
The design system shipped to 25 engineers building features across the platform. It was adopted by both commercial and federal (DoD) product teams. Engineers stopped guessing. The product started looking like one product instead of twelve features built by twelve different people.