Introduction

Get Started as a Front-End Engineer

Get Set Up

The Mews Design System workspaces are part of the mews-js monorepo. These workspaces have names starting with @optimus-web/. If you're wondering about the "Optimus," it's simply the legacy name of our design system.

In order to set everything up, you'll need to use a React provider OptimusProvider. This provider should wrap your entire app. Here's a quick example on how you would import and use it in your project:


                                                        
                                                        
                                                            import { OptimusProvider } from '@optimus-web/theme';
                                                        
                                                        <OptimusProvider>
                                                          // the rest of your application
                                                        </OptimusProvider>
                                                        
                                                            

Theming

The Mews Design System offers two themes—Light and Dark. Here's how to apply them:


                                                        
                                                        
                                                            import { OptimusProvider, ThemeVariant } from '@optimus-web/theme';
                                                        
                                                        <OptimusProvider themeVariant={ThemeVariant.Dark}>
                                                          // the rest of your application
                                                        </OptimusProvider>
                                                        
                                                            

OptimusProvider also accepts a tokenOverrides prop, which can be used to override default theme tokens. For instance, if you wanted to change the BACKGROUND_INTERACTIVE_PRIMARY_DEFAULT token to a red color, you would do so like this:


                                                        
                                                        
                                                            <OptimusProvider tokenOverrides={{
                                                            BACKGROUND_INTERACTIVE_PRIMARY_DEFAULT: '#ffff00',
                                                        }}>
                                                            // the rest of your application
                                                        </OptimusProvider>
                                                        
                                                            

Design Tokens

Design tokens are the visual atoms of the design system such as colors, spacing, or typography. They help us keep our design attributes consistent across all our platforms - Figma, React and Flutter.

To enable this, we maintain a dedicated repository: Mews Design Tokens.

Design tokens are primarily used within design system workspaces. However, on rare instances, they also can be used on the product side. We refer to these instances as "Snowflakes" - unique one purpose components that should not be part of the design system, but they should still utilize the same design atoms.

Design tokens are part of the theme provided by OptimusProvider and the easiest way to use them is to import TokenName enum and getToken helper:


                                                        
                                                        
                                                            import styled from 'styled-components';
                                                        import { TokenName } from '@mewssystems/design-tokens';
                                                        import { getToken } from '@optimus-web/common';
                                                        
                                                        const StyledComponent = styled.div`
                                                          background: ${getToken(TokenName.BACKGROUND_INTERACTIVE_PRIMARY_DEFAULT)};
                                                        `;
                                                        
                                                            

As you dive deeper into the system, you might find these resources useful:

 

Need assistance? Contact us in our #rnd-designsystem slack channel.