Tokens Studio

Adding a new Brand

Within MDX, integrating your brand styles to tailor existing components to your design system is straightforward. Each brand's system tokens structure is designed to accommodate the incorporation of your fonts, colours, spacing, and more. Consequently, the components will seamlessly align with your brand's style and requirements.

Although much of the groundwork has been laid, rely on system design tokens for all other design decisions, such as background colours, to ensure consistency throughout the design system.

If your brand aligns with Migros, follow these steps:

1. Create a new feature branch in Tokens Studio, e.g. feature/yourBrand.
2. Modify the system design tokens of the Migros Brand to suit your brand identity. You have the option to extend existing tokens, overwrite them as required, or duplicate the Migros brand and make adjustments within the duplicate.
3. Utilise the Theme Selector to designate your brand, select between dark or light mode, and specify the preferred screen size for optimal presentation
4. Review existing components to ensure they align with your brand. Make any necessary adjustments.

If your brand doesn't align with Migros, follow these steps:

1. Create a new feature branch in Tokens Studio, e.g. feature/yourBrand.
2. Copy the MDX components from from Figma into your own Brand Figma design system.
3. Detach the components from their original instances.
4. Create your own Figma components based on the MDX components.
5. Apply your design tokens, such as colours, typography, spacing, etc., to customise the components according to your brand's visual identity.

 

---

 

Adding a new Component [in progress]

Customising an existing MDX Component [in progress]