Structure

The Sovryn design system was constructed with our design principles in mind.

We use consistent typography, spacing, and colors, as outlined in our Brand Guidelines, to ensure a cohesive look and feel across all of our designs.

Usage of the Atomic Design System breaks design elements down into reusable components for scalability. This approach allows us to avoid repeating functionality and instead reuse components for efficient design.

We prioritize accessibility, particularly for mobile devices, with guidelines for spacing and sizing that reinforce hierarchy across pages and entire sites. We also use custom components in worst-case scenarios, such as tables, to ensure optimal user experience.

The design system focuses on flexibility, allowing room for content to grow when combining components in different ways, as well as providing guidelines for when to use components in other circumstances.

Clear and concise communication is emphasized by using our brand guidelines to inform the structure and layout of our components. This is primarily enforced at point of usage, and we recommend all consumers of the design system and UI library to follow these guidelines to fit the tone and clarity of other Sovryn ecosystem projects.

Finally, modularity is reinforced by using the Atomic Design System to create small usable components that can be composed to allow different combinations of functionality.