Magenta Design System

This package contains a number of CSS and image assets to use in your project for a Magenta ApS branded look and feel.

Installation

``
npm install --save magenta-design-system
`

Usage

$3


Include magenta-design-system CSS in your bundle at build time.
In many cases that would be by adding an import statement in your main script file like so:

`
import 'magenta-design-system'
`

Just make sure your setup accepts CSS and knows how to bundle it properly.

$3

Link to mds.css CSS and various application icons in your HTML's .
Assuming all your static files are served on a path named /assets, it could look like this:
(example/index.html is available for reference.)

`



























`

Typography

Magenta Design System assumes you have the "Lato" font available. If that is not the case you can include the font from Google Fonts or self host the font files.

Font files are included in assets/fonts along with font.css file to give you an example on how to use @font-face to include font files in CSS.

Brand logos

The assets` directory contains a lot of image files for various branding needs, such as favicons and logo images for light and dark themes.

The Magenta Design Manual contains a reference for use

Acknowlegdements

Magenta Design System is based on a customized version of Pico.css

Pico.css documentation here -> https://picocss.com/docs/