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 four themes—Light, Dark, GxLight and GxDark. Here's how to apply them:

                                                        
                                                        
                                                            import { OptimusProvider, ThemeVariant } from '@optimus-web/theme';
                                                        
                                                        <OptimusProvider 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 backgroundInteractivePrimaryDefault token to a red color, you would do so like this:

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

Additionally, you can tweak component sizes and density in one place by sending componentsProps to the OptimusProvider:

                                                        
                                                        
                                                            <OptimusProvider componentsProps={{ Button: { size: 'extraLarge' } }}>
                                                            // 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 with the getToken or getSpacingToken helpers, which are already typed with the needed TokenName in each case

                                                        
                                                        
                                                            import styled from 'styled-components';
                                                        import { getToken } from '@optimus-web/common';
                                                        
                                                        const StyledComponent = styled.div`
                                                          background: ${getToken('backgroundStaticFlat')};
                                                          padding: ${getSpacingToken('200')}px;
                                                        `;
                                                        
                                                            

Useful Links

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

• Mews Design System storybook: A key resource for development and component testing.
• Design tokens repository: GitHub repository for design tokens.

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