About the design system
This is a design system for Reactive Graph websites and applications. It establishes a common design language, provides reusable coded components, and outlines high level guidelines for content and accessibility.
Reactive Graph - Design System
Atomic Design
Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.
All components defined are categorized following the atomic design principles by Brad Frost.
Web Components
Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.
Interoperability: The design system is reusable and work across different JavaScript frameworks or vanilla JavaScript projects.
Different Tech Stacks: The design system need to be shared across projects with diverse tech stacks.
Micro Frontends: The design system serves as a neutral interface between different parts of a micro frontend architecture.
Design System Fundamentals
The fundamentals define the color palette, the fonts, the logo, the icon sets, the sets of patterns and gradients.
Graph Representation
The section about the graph representation defines how the type system of the graph can be visualized. This means how look components, entity types and relation types. Furthermore, it also defines the appearance of instances (entity instances and relation instances).
Flow Node Representation
The section about the flow node representation defines how the control flows can be visualized. This includes the visualization of flow nodes and their property sockets and the connectors which enables the data flow.