Overview:

The FD Design System is a comprehensive design system for components used by FD.nl. It offers a component library, design documentation, and a CSS + HTML code generator. The system can be installed as a dependency for your project and has TypeScript support.

Features:

• Component Library: The Design System provides a library of components that can be used in a React project. Each component is documented with examples of how to use it.
• Design Documentation: The system includes a website that allows you to preview the components and provides documentation on the design tokens and the reasoning behind the designs.
• CSS + HTML Code Generator: Each component in the Design System outputs generated CSS and HTML code. This code can be copied and used standalone in your own website if you don’t want to use the Component Library.

Installation:

To install the Design System as a dependency for your project, you can use either of the following methods:

• NPMJS: Run npm i @fdmg/design-system in your terminal.
• GitHub Packages: Visit the GitHub Packages page for the Design System and follow the installation instructions.

TypeScript support is available and included in the Design System.

Summary:

The FD Design System is a powerful tool for developers looking to build websites with the same components used by FD.nl. It offers a component library, design documentation, and a code generator for easy implementation. With TypeScript support and easy installation, it provides a seamless experience for developers.