Home

What is the SURF Design System?

The SURF Design System (S.D.S.) consists of a component library, the related documentation and implementations of these components over various platforms.

The S.D.S. is a comprehensive set of guidelines, components, and assets that maintain visual and functional consistency throughout a project or organization. It serves as a centralized resource for designers, developers, and other team members to create cohesive and efficient user experiences.

A design system is a strategic framework that enhances efficiency and collaboration in the design and development of digital products. It encompasses foundation elements to establish a visual identity, components to create reusable UI elements, and organisms to assemble those elements into coherent sections of an interface. By adhering to these principles, design systems empower teams to deliver high-quality user experiences and maintain a cohesive brand presence.

• The S.D.S. is created to save SURF teams time and money by codifying design decisions that can be replicated at scale. It also improves the customer experience by ensuring consistency, familiarity, and accessibility.
• The SURF Design System components are interactive building blocks for creating a user interface and include a build-in state system. The most common states that are available are; default, hover, focus, disabled, selected, active and invalid.
• The intended users of the S.D.S. may be designers, P.O.s, product teams and engineers.