DesignGuidelines

Design Guidelines

⚠️ Important note If the proposed design requires lots of configuration on an existing generic or form component, or if the proposed design does not match the existing design system, something might be wrong. Check with the designers before going further :)

UI-KIT

Design system documentation

There is a library of implemented components that should always be used for development according to the design. Most of them are based on the Material UI library.

You will find them in the src/components/designSystem folder for the generic UI component and in the /src/components/form folder for all the form related components.

Margin

Margin should always be positioned on the right side or bottom side of an element. Only certain exceptions are allowed (ie: flex list) If you can't make it this way, don't hesitate to warn the designers before going further :)

Spacing

Spacing system

You should use the existing spacing system which is related to the theme. Use it as follow :

import styled from "styled-components";
import { theme } from "~/styles/muiTheme";

const StyledComponent = styled.div`
  margin: ${theme.spacing[index]};
`;
// index is for the spacing array, it can ONLY be 1, 2, 3, 4, 5, 6, 8, 10 or 12.

Note: Spacing is an array of 4 based int - so 16px will be theme.spacing[4]

The index matches the number in the Figma

Sizes

Any size in the app should be defined in px.

Texts

Typography

For any kind of text, you should always use the Typography component.

The variant that needs to be used is the same as in the Figma:

Colors

Color

All the available colors in the app are referenced in the color palette. You can use them through the theme as follow :

import styled from "styled-components";
import { theme } from "~/styles/muiTheme";

const StyledComponent = styled.div`
  background-color: ${theme.palette.success[400]};
`;

Shadows

Shadow

The shadows are defined in the theme file. The only available ones are the following :

import styled from "styled-components";
import { theme } from "~/styles/muiTheme";

const StyledComponent = styled.div`
  box-shadow: ${theme.shadows[index]};
`;
// The only available indexes are 1, 2, 3 and 4
// Index 5 is for top divider
// Index 6 is for right divider
// Index 7 is for bottom divider
// Index 8 is for left divider

Note: We had to defined an array of 25 shadows to match material specification. But again, only the one from index 1 to 4 are ok to use

Breakpoints

There is only one used breakpoint for now which is at 776px (defined in the theme file).

You can use the responsive with the 2 following rules only :

import styled from "styled-components";
import { theme } from "~/styles/muiTheme";

const StyledComponent = styled.div`
  ${theme.breakpoints.up("md")} {
    // All the rules for screen with a width from 777px and more
  }

  ${theme.breakpoints.down("sm")} {
    // All the rules for screen with a width from 0px to 776px
  }
`;

ZIndex

ZIndexes are defined in ~/styles/muiTheme as follow :

zIndex: {
    tooltip: 2400, // ONLY for drawers
    toast: 2200, // ONLY for toasts
    dialog: 2000, // For any kind of popper (menu, combobox, select...)
    popper: 1800,
    drawer: 1600,
    navBar: 1200, // For all navigation (horizontal or vertical) bars
    sectionHead: 1000, // For header as in tables or lists
  }

Be really careful when using zindex and respect the this hierarchy 👆.

You shouldn't have to use another value for another group of component. If so, discuss it with the team, it might be worth adding another zindex variable.

You can use them as follow :

import { theme } from "~/styles/muiTheme";

const Header = styled.div`
  z-index: ${theme.zIndex.navBar};
`;