Connect is a design system used to build accessible, cohesive, and high-quality customer experiences at SOROS. Connect supports Product Designers and Engineers with tooling and assets that help them build customer UIs in Figma and React.

What is a design system?

Design systems are much more than just component libraries. Connect combines SOROS' design language, via our foundations on typography, color, layout, and spacing, with content design guidelines, accessible functional primitives, themes, and interactive UI components—everything you need to create high quality, accessible software applications. It ensures each product resonates with our customers, and presents SOROS in a consistent and cohesive way.

Connect is...

• Accessible by default. As a principle, we do not ship a component, primitive, or composition if it does not meet or surpass our target of WCAG 2.1 AA Compliance. This means that as a consuming team, you can expect a lot of the heavy lifting required to build accessible products to be done by Connect. However, you must still think about, and regularly audit your product for accessibility. Our designers can support you on this work.
• Composable by design. Connect tokens, primitives, components, and compositions themselves are inherently composable. This means, in the simplest of terms, that you can use small or large pieces interchangeably to solve your product / UI problems.

Connect is not...

• Concerned with application logic. All Connect components are presentational, and have no opinions on the way data is passed to them.
• Stateful. While components have encapsulated internal state when necessary (e.g., UI behavior or keyboard interaction), the components themselves are not concerned with application state.

Connect UX Principles

These principles are statements of how I work, how you work, how we work as a UX organization. We hold ourselves accountable to the behaviors and practices for which they advocate. We challenge our work to meet the standards they call for.

How we work

Think big and take small steps

Work methodically towards a compelling vision. Be willing to iterate your work as you build an understanding of customer needs, capturing the vision as you adjust and progress.

Start with the customer

Understand the customer, their problem, and the context first. Begin by conducting or seeking out the customer research that will enable you to create a compelling solution.

Seek feedback early and often

Share work while it’s still scrappy to shape its direction. Collaborate with other disciplines to expose different ideas that challenge your thinking and strengthen your work as it evolves.

Validate work with customer testing

Invite real customers to test and challenge solutions. Gather robust feedback and iterate your work until it both solves the customer problem and improves the overall product experience.

Shepherd work all the way to the customer

Take responsibility for every detail that’s delivered to the customer. Share the work’s intent with your team and ensure that its implementation is true to the vision.

How we build

Develop a seamless experience

Create customer experiences that are unified in look and feel. Make the transitions between business units unnoticeable with consistent use of styles, patterns, and interactions.

Refine to the essentials

Choose every element with a clear purpose that’s attached to a customer need. Refine the experience until every component is essential in solving the customer problem.

Set the bar higher

Meet the high standard that’s expected, then push past it. Elevate function, form, language, and design to ensure that the quality of the experience raises the bar for future work.

Recognize the diversity of every user

Understand that our users are not all like us. Work with empathy and consideration, offering guidance and encouragement to create an inclusive experience.

Our principles

Tone of voice

Our voice embodies our values and mission.

Our brand principles extend to our voice and communications as well. Consider how each characteristic works together to create a holistic narrative. For instance, our inclusive approach balances our ambitious edge; our clear messaging reinforces our trustworthiness; and so on. All facets are needed to fully represent who we are. Depending on the audience, it may make sense to lean into one area more than another.